排版样式

页面排版

Bootstrap提供了一些常规设计好的页面排版的样式供开发者使用。

1.页面主体

Bootstrap将全局font-size设置为14px，line-height行高设置为1.428(即20px)；<p>段落元素被设置等于1/2行高(即10px)；颜色被设置为#333。

//创建包含段落突出的文本

<p>Bootstrap框架</p>

<p class="lead">Bootstrap框架</p>

<p>Bootstrap框架</p>

<p>Bootstrap框架</p>

<p>Bootstrap框架</p>

2.标题

//从h1到h6

<h1>Bootstrap框架</h1>  //36px

<h2>Bootstrap框架</h2>  //30px

<h3>Bootstrap框架</h3>  //24px

<h4>Bootstrap框架</h4>  //18px

<h5>Bootstrap框架</h5>  //14px

<h6>Bootstrap框架</h6>  //12px

我们从Firebug查看元素了解到，Bootstrap分别对h1~h6进行了CSS样式的重构，并且还支持普通内联元素定义class=(.h1~h6)来实现相同的功能。

//内联元素使用标题字体

<span class="h1">Bootstrap</span>

注：通过Firebug查看元素还看到，字体颜色、字体样式、行高均被固定了，从而保证了统一性，而原生的会根据系统内置的首选字体决定，颜色是最黑色。

在h1~h6元素之间，还可以嵌入一个small元素作为副标题，

//在标题元素内插入small元素

<h1>Bootstrap框架<small>Bootstrap小标题</small></h1>

<h2>Bootstrap框架<small>Bootstrap小标题</small></h2>

<h3>Bootstrap框架<small>Bootstrap小标题</small></h3>

<h4>Bootstrap框架<small>Bootstrap小标题</small></h4>

<h5>Bootstrap框架<small>Bootstrap小标题</small></h5>

<h6>Bootstrap框架<small>Bootstrap小标题</small></h6>

通过Firebug查看，我们发现h1~h3下small元素的大小只占父元素的65%，那么通过计算(查看Firebug计算后的样式)，h1~h3下的small为23.4px、19.5px、15.6px；h4~h6下small元素的大小只占父元素的75%,分别为：13.5px、10.5px、9px。在h1~h6下的small样式也进行了改变，颜色变成淡灰色：#777，行高为1，粗度为400。

3.内联文本元素

//添加标记，<mark>元素或.mark类

<p>Bootstrap<mark>框架</mark></p>

//各种加线条的文本

<del>Bootstrap框架</del>  //删除的文本

<s>Bootstrap框架</s>     //无用的文本

<ins>Bootstrap框架</ins>  //插入的文本

<u>Bootstrap框架</u>    //效果同上，下划线文本

//各种强调的文本

<small>Bootstrap框架</small>   //标准字号的85%

<strong>Bootstrap框架</strong>  //加粗700

<em>Bootstrap框架</em>       //倾斜

4.对齐

//设置文本对齐

<p class="text-left">Bootstrap框架</p>    //居左

<p class="text-center">Bootstrap框架</p>  //居中

<p class="text-right">Bootstrap框架</p>    //居右

<p class="text-justify">Bootstrap框架</p>   //两端对齐，支持度不佳

<p class="text-nowrap" style="border:1px solid red;width:50px;">Bootstrap 框架</p>

5.大小写

//设置英文文本大小写

<pclass="text-lowercase">Bootstrap框架</p>  //小写<pclass="text-uppercase">Bootstrap框架</p>  //大写<pclass="text-capitalize">Bootstrap框架</p>  //首字母大写

6.缩略语

//缩略语

<h1><abbr class="initialism">Bootstrap</abbr> 框架</h1>

.initialism {

    font-size: 90%;

    text-transform: uppercase;

}

7.地址文本

//设置地址，去掉了倾斜，设置了行高，底部20px

<address>

<strong>Twitter,Inc.</strong><br>

795FolsomAve,Suite600<br>

SanFrancisco,CA94107<br>

<abbrtitle="Phone">P:</abbr>(123)456-7890

</address>

8.引用文本

//默认样式引用，增加了做边线，设定了字体大小和内外边距

<blockquote>

Bootstrap框架

</blockquote>

//反向

<blockquote class="blockquote-reverse"> 

// blockquote-reverse继承blockquote，margin的设置是一样的

Bootstrap框架

</blockquote>

blockquote {

    padding: 10px 20px;

    margin: 0 0 20px; 

    font-size: 17.5px;

    border-left: 5px solid #eee;

 

}

blockquote-reverse {

    padding-right: 15px;

    padding-left: 0;

    text-align: right;

    border-right: 5px solid #eee;

    border-left: 0;

}

9.列表排版

//移出默认样式

<ul class="list-unstyled">

<li>Bootstrap框架</li>

<li>Bootstrap框架</li>

<li>Bootstrap框架</li>

<li>Bootstrap框架</li>

<li>Bootstrap框架</li>

</ul>

//设置成内联

<ul class="list-inline">

<li>Bootstrap框架</li>

<li>Bootstrap框架</li>

<li>Bootstrap框架</li>

<li>Bootstrap框架</li>

<li>Bootstrap框架</li>

</ul>

.list-inline > li {

 

    display: inline-block;  //行内

    padding-right: 5px;

    padding-left: 5px;

 

}

//水平排列描述列表

<dl class="dl-horizontal">

<dt>Bootstrap</dt>

<dd>Bootstrap提供了一些常规设计好的页面排版的样式供开发者使用。</dd>

</dl>

.dl-horizontal dt {

    float: left;

    width: 160px;

    overflow: hidden;

    clear: left;

    text-align: right;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.dl-horizontal dd {

    margin-left: 180px;

 

}

10.代码

//内联代码

<code>&lt;section&gt;</code>

code {

 

    padding: 2px 4px;

    font-size: 90%;

    color: #c7254e;

    background-color: #f9f2f4;

    border-radius: 4px;

 

}

//用户输入

press<kbd>ctrl+,</kbd>

kbd {

 

    padding: 2px 4px;

    font-size: 90%;

    color: #fff;

    background-color: #333;

    border-radius: 3px;

    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);

    box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);

 

}

//代码块

<pre>&lt;p&gt;Pleaseinput...&lt;/p&gt;</pre>

pre {

 

    display: block;

    padding: 9.5px;

    margin: 0 0 10px;

    font-size: 13px;

    line-height: 1.42857143;

    color: #333;

    word-break: break-all;

    word-wrap: break-word;

    background-color: #f5f5f5;

    border: 1px solid #ccc;

    border-radius: 4px;

 

}

Bootstrap还列举了<var>表示标记变量，<samp>表示程序输出，只不过没有重新复写CSS