bootstrap栅格系统，代码嵌入，表格
一、栅格系统
栅格系统要注意，bootstrap最多包括12列，超出就会换行。还可以进行嵌套，代码中设置了透明度，是可叠加的，还是很好看的~以后要常用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>栅格系统</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.row {
margin-bottom: 20px;
}
.row .row {
margin-top: 10px;
margin-bottom: 0;
}
[class*="col-"] {
padding-top: 15px;
padding-bottom: 15px;
background-color: #eee;
background-color: rgba(86,61,124,.15);
border: 1px solid #ddd;
border: 1px solid rgba(86,61,124,.2);
}
</style>
</head>
<body>
<div class="container">
<!--12等分-->
<div class="row">
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
<div class="col-md-1">col-md-1</div>
</div>
<!--4等分-->
<div class="row">
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
</div>
<!--内容过多的时候，bootstrap的操作-->
<div class="row">
<div class="col-md-3">col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3col-md-3</div>
<div class="col-md-3">col-md-3</div>
<div class="col-md-3">col-md-3</div>
</div>
<!--偏移-->
<div class="row">
<div class="col-md-4 col-md-offset-1">col-md-4</div>
</div>
<!--嵌套-->
<div class="row">
<div class="col-sm-9">
one
<div class="row">
<div class="col-xs-8">
first
</div>
<div class="col-xs-4">
two
</div>
</div>
</div>
</div>
<!--列的排序（前后顺序可变）-->
<div class="row">
<div class="col-md-9 col-md-push-3">col-md-9</div>
<div class="col-md-3 col-md-pull-9">col-md-3</div>
</div>
</div>
</body>
</html>
二、代码嵌入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>代码</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
<!--code-->
<!--内联代码-->
For Example:<code><section></code>
<!--用户输入单个字符-->
我希望我们未来的<kbd>条件</kbd>越来越好
<!--代码段-->
<pre>
you should try to control your ...
</pre>
</div>
</body>
</html>
三、表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<!--响应式表格-->
<div class="table-responsive">
<!--普通表格-->
<!--<div class="table">-->
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元</td>
<td>表格单元</td>
<td>表格单元</td>
</tr>
<tr>
<td>表格单元</td>
<td>表格单元</td>
<td>表格单元</td>
</tr>
<tr>
<td>表格单元</td>
<td>表格单元</td>
<td>表格单元</td>
</tr>
</tbody>
</table>
<!--紧凑型表格-->
<table class="table table-condensed">
<thead>
<!--鼠标悬停-->
<tr class="active">
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>表格单元</td>
<td>表格单元</td>
<td>表格单元</td>
</tr>
<tr class="info">
<td>表格单元</td>
<td>表格单元</td>
<td>表格单元</td>
</tr>
<tr class="warning">
<td>表格单元</td>
<td>表格单元</td>
<td>表格单元</td>
</tr>
<tr class="danger">
<td>表格单元</td>
<td>表格单元</td>
<td>表格单元</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
今天比较懒，其实也没啥好说的，都是一些基本操作。
希望我的记录能够帮到你~ 喜欢请点赞！
谢谢你看到这里！写作仓促，有疏漏之处还请评论指正，共同探讨进步！