Bootstrap的排版、代码、表格的基本内容就都在以上图片，下面请看代码演示以及效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap第二次课</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>
<p>哈哈哈</p>
<p class="lead">哈哈哈</p>
<h3 class="mark">1.2 标题</h3>
<h1>哈哈哈</h1>
<p class="h1">哈哈哈</p>
<h3 class="mark">1.3 内联文本元素</h3>
<del>哈哈哈</del>
<s>哈哈哈</s>
<u>啊哈哈</u>
<ins>哈哈哈</ins>
<strong>哈哈哈</strong>
<em>啊哈哈</em>
<h3 class="mark">1.4 对齐</h3>
<p class="text-left">牛哇</p>
<p class="text-center">sajdksadadja</p>
<p class="text-right">sdasd</p>
<h3 class="mark">1.5 改变大小写</h3>
<p class="text-uppercase">sjdfhjfsjdfh</p>
<p class="text-capitalize">hhhajs</p>
<p class="text-lowercase">HDSAJHDJAS</p>
<h3 class="mark">1.6 略缩语</h3>
<abbr title="谭">张三</abbr>
<abbr title="hahha" class="initialism">哈哈哈</abbr>
<h3 class="mark">1.7 地址</h3>
<address>hahha</address>
<address>adjsakdjkas</address>
<h3 class="mark">1.8 引用</h3>
<blockquote>
合计阿萨黄金时代
<footer>
<cite title="">aaa</cite>
</footer>
</blockquote>
<blockquote class="blockquote-reverse">hadjkhjaa
</blockquote>
<h3 class="mark">1.9 列表</h3>
<ol>
<li>jhdfjfjsd</li>
<li>jsklgjfa</li>
</ol>
<ul>
<li>hfjashjk</li>
<li>dhdfsadjkh</li>
</ul>
<ol class="list-unstyled">
<li>jhdfjfjsd</li>
<li>jsklgjfa</li>
</ol>
<ul class="list-inline">
<li>hfjashjk</li>
<li>dhdfsadjkh</li>
</ul>
<h2>二、代码</h2>
<h3 class="mark">2.1 内联代码</h3>
<code>hdfjksa</code>
<h3 class="mark">2.2 用户输入</h3>
<kbd>的话真的觉得撒谎</kbd>
<h3 class="mark">2.3 基本代码块</h3>
<pre>
sdajka
djsak
jfdsk
</pre>
<h3 class="mark">2.4 程序输出</h3>
<samp>hfjsd</samp>
<h2>三、表格</h2>
<h3 class="mark">3.1 基本表格</h3>
<table class="table">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>17</td>
<td>湘潭</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
<td>18</td>
<td>岳阳</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>女</td>
<td>17</td>
<td>娄底</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>女</td>
<td>18</td>
<td>郴州</td>
</tr>
<tr>
<td>5</td>
<td>单八</td>
<td>男</td>
<td>18</td>
<td>岳阳</td>
</tr>
</table>
<h3 class="mark">3.2 条纹表格</h3>
<table class="table table-striped">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>17</td>
<td>湘潭</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
<td>18</td>
<td>岳阳</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>女</td>
<td>17</td>
<td>娄底</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>女</td>
<td>18</td>
<td>郴州</td>
</tr>
<tr>
<td>5</td>
<td>单八</td>
<td>男</td>
<td>18</td>
<td>岳阳</td>
</tr>
</table>
<h3 class="mark">3.3 边框表格</h3>
<table class="table table-bordered">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>17</td>
<td>湘潭</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
<td>18</td>
<td>岳阳</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>女</td>
<td>17</td>
<td>娄底</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>女</td>
<td>18</td>
<td>郴州</td>
</tr>
<tr>
<td>5</td>
<td>单八</td>
<td>男</td>
<td>18</td>
<td>岳阳</td>
</tr>
</table>
<h3 class="mark">3.4 鼠标悬停表格</h3>
<table class="table table-hover">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>17</td>
<td>湘潭</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
<td>18</td>
<td>岳阳</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>女</td>
<td>17</td>
<td>娄底</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>女</td>
<td>18</td>
<td>郴州</td>
</tr>
<tr>
<td>5</td>
<td>单八</td>
<td>男</td>
<td>18</td>
<td>岳阳</td>
</tr>
</table>
<h3 class="mark">3.5 紧缩表格</h3>
<table class="table table-condensed">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
<td>17</td>
<td>湘潭</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
<td>18</td>
<td>岳阳</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>女</td>
<td>17</td>
<td>娄底</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>女</td>
<td>18</td>
<td>郴州</td>
</tr>
<tr>
<td>5</td>
<td>单八</td>
<td>男</td>
<td>18</td>
<td>岳阳</td>
</tr>
</table>
<h3 class="mark">3.6 状态表格</h3>
<table class="table table-hover">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr class="success">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>17</td>
<td>湘潭</td>
</tr>
<tr class="info">
<td>2</td>
<td>李四</td>
<td>男</td>
<td>18</td>
<td>岳阳</td>
</tr>
<tr class="warning">
<td>3</td>
<td>王五</td>
<td>女</td>
<td>17</td>
<td>娄底</td>
</tr>
<tr class="active">
<td>4</td>
<td>赵六</td>
<td>女</td>
<td>18</td>
<td>郴州</td>
</tr>
<tr class="danger">
<td>5</td>
<td>单八</td>
<td>男</td>
<td>18</td>
<td>岳阳</td>
</tr>
</table>
<h3 class="mark">3.7 响应式表格</h3>
<table class="table table-hover table-responsive">
<tr>
<td>学号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr class="success">
<td>1</td>
<td>张三</td>
<td>男</td>
<td>17</td>
<td>湘潭</td>
</tr>
<tr class="info">
<td>2</td>
<td>李四</td>
<td>男</td>
<td>18</td>
<td>岳阳</td>
</tr>
<tr class="warning">
<td>3</td>
<td>王五</td>
<td>女</td>
<td>17</td>
<td>娄底</td>
</tr>
<tr class="active">
<td>4</td>
<td>赵六</td>
<td>女</td>
<td>18</td>
<td>郴州</td>
</tr>
<tr class="danger">
<td>5</td>
<td>单八</td>
<td>男</td>
<td>18</td>
<td>岳阳</td>
</tr>
</table>
<br />
<br />
<br />
<br />
</body>
</html>
以下是效果演示
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
