<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>排版</title>
<link rel="stylesheet" type="text/css" href="bootstrap-v3/css/bootstrap.css">
</head>
<body>
<!-- 标题: h1-h6标签, .h1-.h6六个类名(让非标题元素的样式 与 标题标签相同) -->
<div class="container">
<h1>H1的一级标题 <small>副标题</small> </h1>
<!-- h2 h3 h4 h5 h6 -->
<div class="h1">DIV的一级标题 <span class="small">副标题</span></div>
<!-- 对齐效果 -->
<p class="text-left">通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。</p>
<p class="text-center">通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。</p>
<p class="text-right">通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。</p>
<!-- text-justify 文本对齐,段落中超出屏幕部分的文字自动换行 -->
<p class="text-justify">通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。</p>
<!-- text-nowrap: 文本对齐,段落中超出屏幕部分 不换行 -->
<!-- <p class="text-nowrap">通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。通过文本对齐类，可以简单方便的将文字重新对齐。</p> -->
<!-- 大小写 -->
<!-- 全部小写 -->
<p class="text-lowercase">Hello world</p>
<!-- 全部大写 -->
<p class="text-uppercase">Hello world</p>
<!-- 每个单词的首字母大写 -->
<p class="text-capitalize">Hello world</p>
<hr>
<!-- 强调效果 -->
<!-- 主要的 蓝色 -->
<p class="text-primary">Hello World</p>
<!-- 成功 绿色 -->
<p class="text-success">Hello World</p>
<!-- 警告 黄色 -->
<p class="text-warning">Hello World</p>
<!-- 危险 褐色 -->
<p class="text-danger">Hello World</p>
<!-- 提示 浅灰色 -->
<p class="text-muted">Hello World</p>
<!-- 列表: 无序列表: ul-li 有序 ol-li 定义列表 dl-dt-dd
css: .list-unstyled 去点列表
.list-inline, 内联列表 把垂直列表转换为 水平列表,且去掉了项目的符号/编号;水平显示.(实际上 内联列表就是为了 水平导航而产生的)
.dl-horizontal 制作水平定义列表,当标题的宽度超过160px的时候将会显示为3个省略号...
-->
<ul type="none">
<li>李白</li>
<li>典韦</li>
<li>狄仁杰</li>
</ul>
<ul class="list-unstyled">
<li>李白</li>
<li>典韦</li>
<li>狄仁杰</li>
</ul>
<ul class="list-inline">
<li>李白</li>
<li>典韦</li>
<li>狄仁杰</li>
</ul>
<dl>
<dt>html</dt>
<dd>超文本标记语言</dd>
<dt>css</dt>
<dd>层叠样式表</dd>
</dl>
<dl class="dl-horizontal">
<dt>htmlhtmlhtmlhtmlhtmlhtmlhtmlhtmlhtmlhtmlhtmlhtmlhtmlhtmlhtmlhtmlhtml</dt>
<dd>超文本标记语言</dd>
<dt>css</dt>
<dd>层叠样式表</dd>
</dl>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>上述运行结果：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
