排版样式 · 99班随堂笔记和管理

## 排版样式 ### 页面主体 Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即20px)；<p>段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。 > 创建包含段落突出的文本 ~~~html <p>Bootstrap框架</p> <p class="lead">Bootstrap框架</p> ~~~ ### 标题 ~~~html <h1>Bootstrap框架</h1> <h2>Bootstrap框架</h2> <h3>Bootstrap框架</h3> <h4>Bootstrap框架</h4> <h5>Bootstrap框架</h5> <h6>Bootstrap框架</h6> ~~~ 我们从 Firebug 查看元素了解到，Bootstrap 分别对 `h1 ~ h6 `进行了 CSS 样式的重构，并且还支持普通内联元素定义` class=(.h1 ~ h6)`来实现相同的功能。 > 内联元素使用标题字体 ~~~ <span class="h1">Bootstrap框架</span> ~~~ 在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题，//在标题元素内插入 small 元素 ~~~html <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> ~~~ ### 对齐 ~~~html <p class="text-left">Bootstrap框架</p> <p class="text-center">Bootstrap框架</p> <p class="text-right">Bootstrap框架</p> <p class="text-justify">Bootstrap框架</p>//浏览器支持有问题 ~~~ ### 列表排版 ~~~html <ul class="list-unstyled"> <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> </ul> ~~~ ### 代码 ~~~html For example, <code><section></code> should be wrapped as inline. To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> ~~~