Bootstrap 学习笔记 之排版 (2 day)

Bootstrap 里面已经预先写好了很多排版样式,需要使用到相关样式的时候,只需要添加相关的类名即可,无需自己重写

这里涉及到一个Normalize.css (规范)的样式表,是github上面的一个开源项目,// 其实就是一个很好用的重置样式表;

Normalize.css是一个很小的 CSS 文件,在 HTML 元素的默认样式中提供了更好的跨浏览器一致性 // 兼容各厂商浏览器;

(拓展思考:可以根据自己的实际项目来删减这个样式表,避免不必要的冗余,等于是一个可定制化基础)

一、标题:

 h1——h5标题的应用

内联子标题

如果需要向任何标题添加一个内联子标题,只需要简单地在元素两旁添加 <small>,或者添加 .small class,这样子您就能得到一个字号更小的颜色更浅的文本

二、引导主体副本

为了给段落添加强调文本,则可以添加 class="lead",这将得到更大更粗、行高更高的文本

三、列表

这里需要注意的是 内联列表和水平的定义列表,本质都没变,只是样式改变了,看代码:

<!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>
View Code
原文地址:https://www.cnblogs.com/zhangxg/p/4539588.html