<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery-3.2.1.js"> </script>
<script src="js/bootstrap.js"></script>
<style>
.col-md-1{border: 1px solid black};
</style>
</head>
<body>
<div class="container">
<div class="row"> <!--12列 每一列占一个空格-->
<div class="col-md-1">枕上诗书闲处读</div>
<div class="col-md-1">门前风景雨来佳</div>
<div class="col-md-1">桃李春风一壶酒</div>
<div class="col-md-1">江湖夜雨十年灯</div>
<div class="col-md-1">正是江南好风景</div>
<div class="col-md-1">落花时节又逢君</div>
<div class="col-md-1">野桃含笑竹篱短</div>
<div class="col-md-1">溪柳自摇沙水清</div>
<div class="col-md-1">黄梅时节家家雨</div>
<div class="col-md-1">野桃含笑竹篱短</div>
<div class="col-md-1">溪柳自摇沙水清</div>
<div class="col-md-1">黄梅时节家家雨</div>
</div>
<div class="row"><!--2列 第一列占8个空格，第二列占4个空格-->
<div class="col-md-8"style="border: 1px solid black">枕上诗书闲处读</div>
<div class="col-md-4"style="border: 1px solid black">门前风景雨来佳</div>
</div>
<div class="row"><!--3列 每一列占4个空格-->
<div class="col-md-4"style="border: 1px solid black">枕上诗书闲处读</div>
<div class="col-md-4"style="border: 1px solid black">门前风景雨来佳</div>
<div class="col-md-4"style="border: 1px solid black">门前风景雨来佳</div>
</div>
<div class="row"><!--2列 每一列占6个空格-->
<div class="col-md-6"style="border: 1px solid black">枕上诗书闲处读</div>
<div class="col-md-6"style="border: 1px solid black">门前风景雨来佳</div>
</div>
<!--(^o^)/~(^o^)/~(^o^)/~(^o^)/~自定义跨设备布局(^o^)/~(^o^)/~(^o^)/~(^o^)/~(^o^)/~ -->
<div class="row">
<div class="col-xs-12 col-md-8"style="border: 1px solid black">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4"style="border: 1px solid black">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4"style="border: 1px solid black">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4"style="border: 1px solid black">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4"style="border: 1px solid black">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6" style="border: 1px solid black">.col-xs-6</div>
<div class="col-xs-6" style="border: 1px solid black">.col-xs-6</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-3"style="border: 1px solid black">.col-xs-6 .col-sm-3Resize your viewport or check it out on your phone for an example.</div>
<div class="col-xs-6 col-sm-3"style="border: 1px solid black">.col-xs-6 .col-sm-3</div>
<div class="clearfix visible-xs-block"style="border: 1px solid black"></div> <!--清除浮动-->
<div class="col-xs-6 col-sm-3"style="border: 1px solid black">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3"style="border: 1px solid black">.col-xs-6 .col-sm-3</div>
</div>
<div class="row">
<div class="col-sm-5 col-md-6"style="border: 1px solid black">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0"style="border: 1px solid black">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<!--表格-->
<table class="table table table-bordered table table-hover table-condensed">
<tr class="active">
<th>江湖夜雨十年灯</th>
<th>江湖夜雨十年灯</th>
<th>江湖夜雨十年灯</th>
<th>江湖夜雨十年灯</th>
<th>江湖夜雨十年灯</th>
<th>江湖夜雨十年灯</th>
</tr>
<tr class="success">
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
</tr>
<tr class="warning">
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
</tr>
<tr class="danger">
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
</tr>
<tr class="info">
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
<td>江湖夜雨十年灯</td>
</tr>
</table>
<!--按钮 -->
<button class="btn btn-default">默认样式</button>
<button class="btn btn-primary btn-lg">首选项</button>
<button class="btn btn-success btn-sm">成功</button>
<button class="btn btn-info btn-xs">一般信息</button>
<button class="btn btn-danger">警告</button>
<button class="btn btn-warning btn-block">危险</button>
<button class="btn btn-link">链接</button>
<!--列偏移-->
<div class="row"> <!--col-md-4-offset-4，将col-md-4向右偏移4个列的宽度-->
<div class="col-md-4" style="border: 1px solid black">col-md-4</div>
<div class="col-md-4-offset-4" style="border: 1px solid black">col-md-4-offset-4</div>
</div>
<div class="row">
<div class="col-md-3" style="border: 1px solid black">col-md-3</div>
<div class="col-md-3-offset-3" style="border: 1px solid black">col-md-3-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3" style="border: 1px solid black;text-align: center ">c.col-md-6 .col-md-offset-3</div>
</div>
<!--嵌套列-->
<div class="row">
<div class="col-sm-9"style="background-color: lightpink"> <!--在守望先锋里面嵌套 英雄联盟、CSGO全球攻势两个同级的列-->
守望先锋
<div class="row">
<div class="col-xs-8 col-sm-6"style="background-color: lightgreen">
英雄联盟
</div>
<div class="col-xs-4 col-sm-6"style="background-color: lightblue">
CSGO全球攻势
</div>
</div>
</div>
</div>
<!--列排序(push从左空3个列再开始，pull从右空9个列再开始)-->
<div class="row">
<div class="col-md-9 col-md-push-3"style="border: 1px solid black;background-color: lightgreen">col-md-9 col-md-push-3</div>
<div class="col-md-3-pull-9"style="border: 1px solid black;background-color: lightblue">col-md-3-pull-9</div>
</div>
<!--排版（为大标题添加小标题标注）-->
<h1>守望先锋<small>我喜欢的游戏</small></h1>
<h2>英雄联盟<small>我喜欢的游戏</small></h2>
<h3>黑色沙漠<small>我喜欢的游戏</small></h3>
<h4>CSGO全球攻势<small>我喜欢的游戏</small></h4>
<h5>洛奇英雄传<small>我喜欢的游戏</small></h5>
<h6>求生之路<small>我喜欢的游戏</small></h6>
</div>
<!--引用-->
<blockquote>
<p>去年相逢此门中，人与桃花相映红。人面不知何处去，桃花依旧笑春风。</p>
</blockquote>
<blockquote class="blockquote-reverse"><!--右对齐-->
<p>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。</p>
<footer>孟浩然<cite title="Source Title">《春晓》</cite></footer>
</blockquote>
</body>
</html>