BootStrap框架---1.页面排版

•前言:

  • Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。


今天我们来看Bootstrap的页面排版!!!!

首先:其默认设置了一些样式

全局font-size为14px,line-height为20px,p段落设置10px,颜色#333;


1.页面主体

.lead

1      //.lead        突出效果
2     <p>Bootstrap框架</p>
3     <p class=\'lead\'>Bootstrap框架</p>
4     <p>Bootstrap框架</p>
5     <p>Bootstrap框架</p>

解答:加了lead这个类名后,内容会突出显示


2.标题

h1-h6(或者.h1-.h6);

.small

//h1-h6都重构了
//并且还支持内联定义class=(.h1-h6);
//.small                变小
    <h1>Bootstrap<small>框架</small></h1>
    <h2>Bootstrap框架</h2>
    <h3>Bootstrap框架</h3>
    <h4>Bootstrap框架</h4>
    <h5>Bootstrap框架</h5>
    <h6>Bootstrap框架</h6>

3.文本操作

.text-left 居左

.text-right

.text-center

.text-justify 两段对齐

.text-nowrap 不换行

.text-lowercase 小写

.text-uppercase 大写

.text-capitalize 首字母大写

.initialism 缩略语

1     <p class=\'text-left\'>Bootstrap框架</p>
2     <p class=\'text-center\'>Bootstrap框架</p>
3     <p class=\'text-right\'>Bootstrap框架</p>
4     <p class=\'text-nowrap\' width:50px;border:1px solid red\'>Bootstrap框架</p>
5     <p class=\'initialism\'>Bootstrap框架</p>

4.列表排版

ul

.list-unstyled 移除默认样式

.list-inline 设置成内联

dl

.dl-horizontal 水平排列描述列表


5.其他标签

<code></code> 代码格式

<kbd></kbd> 用户按键效果

<pre></pre> 代码块

<blockquote></blockquote>   引用; 反向需加类名.blockquote-reverse


总结:上面的例子不全,需要你们自己去实践,这些不需要全部记住,只要知道有这回事,以后想到了可以回来查阅。