1.排版
1.1.页面主体
比普通标签要大些，代码如下：
<h3 class="mark">1.1 段落突出</h3>
<div class="container">
<p>斩尽污秽</p>
<p class="lead">斩尽污秽</p>
</div>标签里加入class样式中的led。
1.2.标题
1.标题大小：<h1-h6>,这就不多说了
2.副标题：<small></small>
1.3.内联文本元素
1.标记:class="mark"：用span标签(上面 代码和图片中有效果)
2.线条
分为删除与下划线
1. 4.强调文本
小字体（标准字体的80%）：<small>
文本加粗：<string>
文本倾斜：<em>
1.5.对齐（span标签无效）
居左：class="text-left"
居中：class="text-center
3.居左：class="text-right""
剩下的就不演示了，直接上代码跟演示图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<body>
<!-- 全局CSS样式 -->
<h2>一、排版</h2>
<h3 class="mark">1.1 段落突出</h3>
<div class="container">
<p>斩尽污秽</p>
<p class="lead">斩尽污秽</p>
</div>
<h3 class="mark">1.2 标题</h3>
<h1>斩尽污秽</h1>
<h1><small>斩尽污秽</small></h1>
<p class="h3">斩尽污秽</p>
<h3 class="mark">1.3 内联文本元素</h3>
<p class="mark h6">斩尽污秽</p>
<p>线条</p><br>
<p>删除</p><br>
<del>斩尽污秽</del>
<s>斩尽污秽</s>
<p>下划线</p><br>
<ins>斩尽污秽</ins>
<u>斩尽污秽</u>
<p>强调文本</p>
<small><p>斩尽污秽</p></small>
<p><strong>斩尽污秽</strong></p>
<p><em>斩尽污秽</em></p>
<h3 class="mark">1.4 对齐</h3>
<p class="text-left">斩尽污秽</p>
<p class="text-center">斩尽污秽</p>
<p class="text-right">斩尽污秽</p>
<h3 class="mark">1.5 改变大小写</h3>
<span class="text-uppercase">zasdkasd</span>
<span class="text-lowercase">assadas</span>
<span class="text-capitalize">asdksadh</span>
<h3 class="mark">1.6 略缩语</h3>
<abbr title="好着呢">asdjas</abbr>ajdasda
<h3 class="mark">1.7 地址</h3>
<address>地址：是个地方</address>
<address>地址：不是个地方</address>
<h3 class="mark">1.8 引用</h3>
<blockquote>斩尽污秽<footer>斩尽污秽</footer></blockquote>
<h3 class="mark">1.9 列表</h3>
<ul class="list-unstyled">
<li>花间一壶酒</li>
<li>独酌无相亲</li>
<li>举杯邀明月，对影成三人</li>
</ul>
<ul class="list-inline">
<li>月既不解饮</li>
<li>影徒随我身</li>
<li>暂伴月将影，行乐须及春</li>
</ul>
<h2>二、代码</h2>
<h3 class="mark">2.1 内联代码</h3>
斩尽污秽<code>斩尽污秽</code>斩尽污秽
<h3 class="mark">2.2 用户输入</h3>
<kbd>斩尽污秽</kbd>
<h3 class="mark">2.3 基本代码块</h3>
<pre>
斩尽污秽
斩尽污秽
斩尽污秽
斩尽污秽
斩尽污秽
</pre>
<h3 class="mark">2.4 程序输出</h3>
<pre class="pre-scrollable">
斩尽污秽
斩尽污秽
斩尽污秽
斩尽污秽
斩尽污秽
</pre>
<h2>三、表格</h2>
<h3 class="mark">3.1 基本表格</h3>
<table>
<thead>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>好家伙</td>
<td>123</td>
</tr>
<tr>
<td>2</td>
<td>不是人</td>
<td>124</td>
</tr>
<tr>
<td>3</td>
<td>不是你</td>
<td>154</td>
</tr>
</tbody>
</table>
<h3 class="mark">3.2 条纹表格</h3>
<table class="table table-striped">
<thead>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>好家伙</td>
<td>123</td>
</tr>
<tr>
<td>2</td>
<td>不是人</td>
<td>124</td>
</tr>
<tr>
<td>3</td>
<td>不是你</td>
<td>154</td>
</tr>
</tbody>
</table>
<h3 class="mark">3.3 边框表格</h3>
<table class="table table-bordered">
<thead>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>好家伙</td>
<td>123</td>
</tr>
<tr>
<td>2</td>
<td>不是人</td>
<td>124</td>
</tr>
<tr>
<td>3</td>
<td>不是你</td>
<td>154</td>
</tr>
</tbody>
<h3 class="mark">3.4 鼠标悬停表格</h3>
<table class="table table-hover">
<thead>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>好家伙</td>
<td>123</td>
</tr>
<tr>
<td>2</td>
<td>不是人</td>
<td>124</td>
</tr>
<tr>
<td>3</td>
<td>不是你</td>
<td>154</td>
</tr>
</tbody>
<h3 class="mark">3.5 紧缩表格</h3>
<table class="table table-condensed">
<thead>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>好家伙</td>
<td>123</td>
</tr>
<tr>
<td>2</td>
<td>不是人</td>
<td>124</td>
</tr>
<tr>
<td>3</td>
<td>不是你</td>
<td>154</td>
</tr>
</tbody>
<h3 class="mark">3.6 状态表格</h3>
<table class="table table-striped">
<thead>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>好家伙</td>
<td>123</td>
</tr>
<tr class="success">
<td>2</td>
<td>不是人</td>
<td>124</td>
</tr>
<tr class="info">
<td>3</td>
<td>不是你</td>
<td>154</td>
</tr>
</tbody>
<h3 class="mark">3.7 响应式表格</h3>
<table class="table table-responsive">
<thead>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>好家伙</td>
<td>123</td>
</tr>
<tr>
<td>2</td>
<td>不是人</td>
<td>124</td>
</tr>
<tr>
<td>3</td>
<td>不是你</td>
<td>154</td>
</tr>
</tbody>
<br />
<br />
<br />
<br />
</body>
</html>
更多推荐
Bootstrap-CSS全样式
发布评论