1、标题
Html中的所有标题标签,从<h1>到<h6>均可使用。另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式。
<body>
<div class="page-container">
<h1 class="page-header">标题</h1>
<h1>h1,Bootstrap heading</h1>
<h2>h2,Bootstrap heading</h2>
<h3>h3,Bootstrap heading</h3>
<h4>h4,Bootstrap heading</h4>
<h5>h5,Bootstrap heading</h5>
<h6>h6,Bootstrap heading</h6>
</div>
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
在标题内还可以包含<small>
标签或.small
元素,可以用来标记副标题。
2、页面主体
Bootstrap将全局font-size
设置为14px,line-height
为1.428 。这些属性直接赋给<body>
和所有段落元素。另外,<p>
(段落)还被设置了等于1/2行高的底部外边距(margin)(即10px)。
Lead body copy
通过添加.lead
可以让段落突出显示。
3、强调
直接使用HTML中用于标注强调的标签,并给他们赋予少许的样式。
1.小号文本
对于不需要强调的inline或block类型的文本,使用<small>
标签包裹,其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>
元素被设置不同的font-size
。
你还可以为行内元素赋予.small
以代替任何<small>
标签。
第一行是<small>This line of text is meant to be treated as fine print.</small>
第二行是<div>
<p class="small">
哈哈哈哈哈哈哈
</p>
</div>
2.着重
通过增加font-weight强调一段文本。
<strong>rendered as bold text</strong>
3.斜体
用斜体强调一段文本。
<em>rendered as italicized text</em>
4.对齐class
通过文本对齐class,可以简单方便的将文字重新对齐。
<p class="text-left">Left aligned text.</p> <p class="text-center">Center aligned text.</p> <p class="text-right">Right aligned text.</p>
很明显第一行左对齐,第二行居中,第三行右对齐。
5.强调class
这些class通过颜色来表示强调。也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式。
<h1>强调Class</h1> <p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p> <p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p> <p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p> <h1></h1>
4、缩略图
当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap实现了对HTML的<abbr>
元素的增强样式。缩略语元素带有title
属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。
基本缩略语
如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title
属性。
<abbr title="attribute">attr</abbr>
Initialism
为缩略语添加.initialism
可以将其font-size设置的更小些。
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
5、地址
让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>
可以保留需要的样式。
<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>
6、引用
在你的文档中引用其他来源的内容。
默认样式的引用
将任何HTML裹在<blockquote>
之中即可表现为引用。对于直接引用,我们建议用<p>
标签。
<blockquote> <p>生命的意义不仅限于生存,云在青天水在瓶。</p> </blockquote>
引用选项
对于标准样式的<blockquote>
,可以通过几个简单的变体就能改变风格和内容。
命名来源:添加<small>
标签来注明引用来源。来源名称可以放在<cite>
标签里面。
<blockquote> <p>生命的意义不仅限于生存,云在青天水在瓶。</p> <small>本文来自于:<cite title="http:www.hehehe.com">来源链接</cite></small> </blockquote>
会多一个Source Title
另一种展示风格
使用.pull-right
可以让引用展现出向右侧移动、对齐的效果。
<blockquote class="pull-right"> <p>生命的意义不仅限于生存,云在青天水在瓶。</p> </blockquote>
向右对齐移动了额,当然也有相应的pull-left。
7、列表
无序列表
顺序无关紧要的一列元素。
<ul> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul>
这个也很明显和Html的一样。
有序列表
顺序至关重要的一组元素。
<ol> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ol>
同理有序列表。
无样式列表
移除了默认的list-style
样式和左侧外边距的一组元素(只针对直接子元素)。这这是针对直接子元素,也就是说,你需要对所有嵌套的列表都添加此class才能具有同样的样式。
<ul class="list-unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul>
内联列表
通过设置display: inline-block;
并添加少量的内补,将所有元素放置于同一列。
<ul class="list-inline"> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> <li>Lorem ipsum dolor sit amet</li> </ul>
效果当然就是在一行了。
描述
带有描述的短语列表。
<dl> <dt>.Lorem ipsum dolor sit amet</dt> <dd>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet</dd> </dl>
记得这标签在Html当中也是存在的。
水平排列的描述
.dl-horizontal
可以让<dl>
内短语及其描述排在一行。开始是像<dl>
默认样式堆叠在一起,随着导航条逐渐展开而排列在一样。
1
2
3
4
|
<dl
class
=
"dl-horizontal"
>
<dt>hello</dt>
<dd>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet</dd>
</dl>
|
内联代码:在正文中通过<code>
标签包裹内联样式的代码片段。
For example, <code><section></code> should be wrapped as inline.
简单的效果
基本代码快:多行代码可以使用<pre>
标签。为了正确的展示代码,注意将尖括号做转义处理。
<pre><p>Sample text here...</p></pre>
简单效果
还可以使用.pre-scrollable
class,其作用是设置max-height为350px,并在垂直方向展示滚动条。