Bootstrap 学习笔记 之排版 (2 day)
Bootstrap 里面已经预先写好了很多排版样式,需要使用到相关样式的时候,只需要添加相关的类名即可,无需自己重写
这里涉及到一个Normalize.css (规范)的样式表,是github上面的一个开源项目,// 其实就是一个很好用的重置样式表;
Normalize.css是一个很小的 CSS 文件,在 HTML 元素的默认样式中提供了更好的跨浏览器一致性 // 兼容各厂商浏览器;
(拓展思考:可以根据自己的实际项目来删减这个样式表,避免不必要的冗余,等于是一个可定制化基础)
一、标题:
h1——h5标题的应用
内联子标题
如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加 <small>,或者添加 .small class,这样子您就能得到一个字号更小的颜色更浅的文本
二、引导主体副本
为了给段落添加强调文本,则可以添加 class="lead",这将得到更大更粗、行高更高的文本
三、列表
这里需要注意的是 内联列表和水平的定义列表,本质都没变,只是样式改变了,看代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 列表</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <h4>有序列表</h4> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol> <h4>无序列表</h4> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>未定义样式列表</h4> <ul class="list-unstyled"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>内联列表</h4> <ul class="list-inline"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> <h4>定义列表</h4> <dl> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> <h4>水平的定义列表</h4> <dl class="dl-horizontal"> <dt>Description 1</dt> <dd>Item 1</dd> <dt>Description 2</dt> <dd>Item 2</dd> </dl> </body> </html>