[置顶] 20151212Bootstrap学习笔记------标题 段落 列表

Bootstrap学习笔记

标题

大标题和副标题效果

<h1>我是大标题<small>我是小标题</small></h1>
<h2>我是大标题<small>我是小标题</small></h2>
<h3>我是大标题<small>我是小标题</small></h3>
<h4>我是大标题<small>我是小标题</small></h4>
<h5>我是大标题<small>我是小标题</small></h5>
<h6>我是大标题<small>我是小标题</small></h6>

排版

段落和强调

<p>我是一个普通的段落，我不需要强调显示</p>
<p class="lead">这部分内容需要特别的强调，我和别人长得不一样</p>

粗体

<p>我是一个段落，这个段落中“<b>强调</b>”一词将会<strong>加粗</strong>显示。</p>

斜体

<p>我正在学习<em>Bootstrap</em>。我发现<i>Bootstrap</i>真的好强大。</p>

强调相关的类

.text-muted：提示，使用浅灰色（#999）

.text-primary：主要，使用蓝色（#428bca）

.text-success：成功，使用浅绿色(#3c763d)

.text-info：通知信息，使用浅蓝色（#31708f）

.text-warning：警告，使用黄色（#8a6d3b）

.text-danger：危险，使用褐色（#a94442）

<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>

文本对齐风格

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐-----目前两端对齐在各浏览器下解析各有不同，特别是应用于中文文本的时候。所以项目中慎用。</p>

列表

Bootstrap根据平时的使用情形提供了六种形式的列表：

无序列表

<ul>标签,与平时用的一样

有序列表

<ol>标签,与平时用的一样

去点列表

<ol或ul class="list-unstyled">这样就能去掉 点或者编号

<ul>
<li>
项目列表
<ul>
<li>带有项目符号</li>
<li>带有项目符号</li>
</ul>
</li>
<li>
项目列表
<ul class="list-unstyled">
<li>不带项目符号</li>
<li>不带项目符号</li>
</ul>
</li>
<li>项目列表</li>
</ul>

<!--下面是代码任务部分-->
<ol>
<li>有序项目列表一</li>
<li>有序项目列表二
<ol class="list-unstyled">
<li>有序二级项目列表一</li>
<li>有序二级项目列表二
<ul>
<li>无序三级项目列表一</li>
<li>无序三级项目列表二
<ul class="list-unstyled">
<li>无序四级项目列表一</li>
<li>无序四级项目列表二</li>
</ul>
</li>
<li>无序三级项目列表三</li>
</ul>
</li>
<li>有序二级项目列表三</li>
</ol>
</li>
<li>有序项目列表三</li>
<ol>

内联列表

用类名”.list-inline”表示,会在同一行显示并且去掉标号.

<ol class="list-nosigned">
<li>城市:</li>
<li>
<ul class="list-inline">
<li>北京</li><li>上海</li><li>南京</li><li>厦门</li>
</ul>
</li>
</ol>

定义列表

<dl>标签用于定义定义列表,其中可以包含子标签<dt>表示关键词(题目),<dd>标签表示对其的定义(解释).

<dl>
<dt>北京</dt>
<dd>北京是中国的首都,是政治文化集中地</dd>

<dt>上海</dt>
<dd>上海号称东方的巴黎</dd>
</dl>

水平定义列表

和内联列表相似,会把同一组的<dt>和<dd>标签的内容放在同一行上(前提是屏幕宽度大于768px,否则还是会在两行上显示).

<dl class='dl-horizontal'>
<dt>标题一:</dt>
<dd>描述内容</dd>

<dt>标题二:</dt>
<dd>描述内容</dd>
</dl>