<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0 user-scalable=no">
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<style>
div{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>
Bootstrap
<em>CSS</em>
<em>Type</em>
</h2>
</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-9">
<input type="text" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-3">
<ul class="list-unstyled">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</div>
<div class="col-md-6">
<h3>三人行,必有我师</h3>
<h5>--孔子</h5>
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>编号</td>
<td>名称</td>
<td>作者</td>
<td>价格</td>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>三国演义</td>
<td>罗贯中</td>
<td>110.00</td>
</tr>
<tr>
<td>002</td>
<td>三国演义</td>
<td>罗贯中</td>
<td>110.00</td>
</tr>
<tr>
<td>003</td>
<td>三国演义</td>
<td>罗贯中</td>
<td>110.00</td>
</tr>
<tr>
<td>004</td>
<td>三国演义</td>
<td>罗贯中</td>
<td>110.00</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-3">
<h3>课程简介</h3>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascade Style Sheet</dd>
<dt>JS</dt>
<dd>JavaScript</dd>
</dl>
<h5>知识改变命运</h5>
<footer>...</footer>
</div>
</div>
<div>
<div class="col-md-12">
<p class="text-center">版权所有 XXX.COM</p>
</div>
</div>
</div>
</body>
</html>
效果图:
注:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
X-UA-Compatible是IE专有的,"IE=edge告诉IE使用最新的引擎渲染网页。