Bootstrap的基本使用
网盘下载 ，提取码：8k0w
➢ bootstrap.css：Bootstrap核心CSS库（bootstrap.min.css是经过压缩的最小化版本，map文件是CSS源码映射表，可以在某些浏览器的开发工具中使用）。
➢ bootstrap-theme.css：Bootstrap主题相关的CSS库（bootstrap-theme.min.css是经过压缩的最小化版本，map文件是CSS源码映射表，可以在某些浏览器的开发工具中使用）。
如果仅需要使用Bootstrap的CSS样式，则只需要导入Bootstrap的bootstrap.min.css和bootstrap-theme.min.css两个CSS样式单文件即可。
大部分时候项目可能并不会用到 bootstrap-theme.min.css 文件中的CSS样式，因此一般也可不引入该文件。
为了保证HTML页面在移动设备上进行合适的绘制和触屏缩放，需要在＜head…/＞元素中添加 viewport元数据标签:
<meta name="viewport" content="width=device-width,initial-scale=1" />
如果希望禁止用户缩放网页，只能滚动网页，则可以为viewport元数据添加user-scalable=no：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
bootstrap直接将body和<p>（段落）元素全局设置字体为14px
容器(container/container-fluid)
如下代码：
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div style="background:red;color: white;">
tidwpfnc
</div>
<br>
<div class="container" style="background:black;color: white;">
tidwpfnc
</div>
<br>
<div class="container-fluid" style="background:blue;color: white;">
tidwpfnc
</div>
</body>
引入bootstrap的css后写三个平级的div：第一个没有class，第二个是container的class，第三个是container-fluid的class
可以看到container的class是两边自适应网页的宽度自动居中将两边留白，而container-fluid是占用网页的100%宽度，且container和container-fluid里的元素都有一定的padding-left。
这两个容器不能嵌套使用。
标题和small
在没有用bootstrap时标题是这样的：
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
</body>
而引入bootstrap后是这样的：
<!-- 引用css文件用link -->
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css" />
</head>
<body>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
</body>
因为bootstrap里封装了属于自己的一套标题样式。
在标题里可以用<small>标签标记副标题，small内容的大小占容器对应主标题的80%
<!-- 引用css文件用link -->
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css" />
</head>
<body>
<h1>标题1<small>v1.0</small></h1>
<h2>标题2<small>v2.0</small></h2>
<h3>标题3<small>v3.0</small></h3>
</body>
文字突出
想将下面的段落有文字突出展示
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css" />
</head>
<body>
<p>
中田五十二岁时家具公司的经理去世，木工厂随之关闭。
色调沉闷的老式家具不如以前好卖了，工匠们老龄化，年轻人不再对这种传统手工活儿感兴趣。
木工厂以前位于原野的正中央，后来周围成了住宅区，居民们接二连三地投诉作业噪音和烧木屑冒出的烟。
经营者的儿子在市内开了一家会计师事务所，自然无意继承家具公司，父亲一去世马上关闭了木工厂，卖给不动产商。
不动产商拆了工厂平了地皮卖给公寓建筑商，公寓建筑商在那里建了六层高的公寓，公寓开盘当天即全部卖出。
</p>
</body>
可以在想突出展示的文字加上span标签在这个标签上再加上lead的class
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css" />
</head>
<body>
<p>
中田五十二岁时家具公司的经理去世，木工厂随之关闭。
<span class="lead">色调沉闷的老式家具</span>不如以前好卖了，工匠们老龄化，年轻人不再对这种传统手工活儿感兴趣。
木工厂以前位于原野的正中央，后来周围成了住宅区，居民们接二连三地投诉作业噪音和烧木屑冒出的烟。
经营者的儿子在市内开了一家会计师事务所，自然无意继承家具公司，父亲一去世马上关闭了木工厂，卖给不动产商。
<span class="lead">不动产商拆了工厂平了地皮</span>卖给公寓建筑商，公寓建筑商在那里建了六层高的公寓，公寓开盘当天即全部卖出。
</p>
</body>
文本对齐方式
-
左对齐：text-left
-
居中：center
-
右对齐：text-right
-
超出容器自动换行：justify
-
超出容器不换行：nowrap
缩略语
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css" />
</head>
<body>
<p><abbr title='范佳鑫'>姓名</abbr>是一个东西</p>
</body>
栅格系统
栅格系统是bootstrap提供的一套响应式、移动设备优先的流式布局。随屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。
栅格系统中流式布局存在行和列的概念：将页面中拆分成一行一行的，而每行最多只有12列(12等分列)。
栅格系统必须包含在容器布局(container/container-fluid)中。通过行（.row）在水平方向创建一组列。
屏幕宽度变小，每行中的列变为水平排列
使用越小屏幕对应的类前缀越能兼容大屏幕，不过一般都是使用.col-sm-，因为目前很少有超小屏幕的设备了。不过用.col-xs-也行，但是不会变为每行里的列到一定的宽度不会水平排列。
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css" />
<style>
.col-xs-1{border: 1px solid black;background: red;}
.col-xs-2{border: 1px solid darkblue;background: wheat;}
.col-xs-12{border: 1px solid darkblue;background: gainsboro;text-align: center;}
.col-sm-1{border: 1px solid black;background: darkseagreen;}
.col-sm-2{border: 1px solid darkblue;background: aqua;}
.col-sm-12{border: 1px solid darkblue;background: gainsboro;text-align: center;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">xs的列不会随屏幕宽度的缩小而变成行显示</div>
</div>
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-1">2</div>
<div class="col-xs-1">3</div>
<div class="col-xs-1">4</div>
<div class="col-xs-1">5</div>
<div class="col-xs-1">6</div>
<div class="col-xs-1">7</div>
<div class="col-xs-1">8</div>
<div class="col-xs-1">9</div>
<div class="col-xs-1">10</div>
<div class="col-xs-1">11</div>
<div class="col-xs-1">12</div>
</div>
<div class="row">
<div class="col-xs-2">1&2</div>
<div class="col-xs-1">3</div>
<div class="col-xs-1">4</div>
<div class="col-xs-1">5</div>
<div class="col-xs-1">6</div>
<div class="col-xs-1">7</div>
<div class="col-xs-1">8</div>
<div class="col-xs-1">9</div>
<div class="col-xs-1">10</div>
<div class="col-xs-1">11</div>
<div class="col-xs-1">12</div>
</div>
<div class="row">
<div class="col-sm-12">sm的列会随屏幕宽度的缩小而变成行显示</div>
</div>
<div class="row">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>
<div class="col-sm-1">5</div>
<div class="col-sm-1">6</div>
<div class="col-sm-1">7</div>
<div class="col-sm-1">8</div>
<div class="col-sm-1">9</div>
<div class="col-sm-1">10</div>
<div class="col-sm-1">11</div>
<div class="col-sm-1">12</div>
</div>
<div class="row">
<div class="col-sm-2">1&2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>
<div class="col-sm-1">5</div>
<div class="col-sm-1">6</div>
<div class="col-sm-1">7</div>
<div class="col-sm-1">8</div>
<div class="col-sm-1">9</div>
<div class="col-sm-1">10</div>
<div class="col-sm-1">11</div>
<div class="col-sm-1">12</div>
</div>
</div>
</body>
不等份列
不管是.col-xs-还是.col-sm-还是.col-md-还是.col-lg-，它们后面跟的数字就是在这12等分列里占几个列的位置，可以不等分只要加在一起12就可以，超出12等分另起一列。
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css" />
<style>
.col-xs-1{border: 1px solid black;background: red;}
.col-xs-2{border: 1px solid darkblue;background: wheat;}
.col-xs-3{border: 1px solid darkblue;background: gainsboro;text-align: center;}
.col-sm-1{border: 1px solid black;background: darkseagreen;}
.col-sm-2{border: 1px solid darkblue;background: aqua;}
.col-sm-3{border: 1px solid darkblue;background: wheat;}
.col-sm-4{border: 1px solid darkblue;background: gainsboro;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-1">2</div>
<div class="col-xs-1">3</div>
<div class="col-xs-1">4</div>
<div class="col-xs-1">5</div>
<div class="col-xs-1">6</div>
<div class="col-xs-1">7</div>
<div class="col-xs-1">8</div>
<div class="col-xs-1">9</div>
<div class="col-xs-3">10</div>
<div class="col-xs-1">13</div>
</div>
<div class="row">
<div class="col-sm-2">1&2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>
<div class="col-sm-1">5</div>
<div class="col-sm-1">6</div>
<div class="col-sm-1">7</div>
<div class="col-sm-1">8</div>
<div class="col-sm-1">9</div>
<div class="col-sm-1">10</div>
<div class="col-sm-1">11</div>
<div class="col-sm-1">12</div>
<div class="col-xs-1">13</div>
</div>
<div class="row">
<div class="col-sm-2">2份</div>
<div class="col-sm-3">3分</div>
<div class="col-sm-4">4份</div>
<div class="col-sm-3">3份</div>
</div>
</div>
</body>
嵌套
一个列里还能嵌套一个12等份的行
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css" />
<style>
.col-xs-1{border: 1px solid black;background: red;}
.col-xs-2{border: 1px solid darkblue;background: wheat;}
.col-xs-3{border: 1px solid darkblue;background: gainsboro;text-align: center;}
.col-sm-1{border: 1px solid black;background: darkseagreen;padding-left: 0px;}
.col-sm-2{border: 1px solid darkblue;background: aqua;}
.col-sm-3{border: 1px solid darkblue;background: wheat;}
.col-sm-4{border: 1px solid darkblue;background: gainsboro;}
.col-sm-6{border: 1px solid darkblue;background: gainsboro;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-2">
<div class="col-sm-6">XX</div>
<div class="col-sm-6">ZZ</div>
</div>
<div class="col-sm-3">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>
<div class="col-sm-1">5</div>
<div class="col-sm-1">6</div>
<div class="col-sm-1">7</div>
<div class="col-sm-1">8</div>
<div class="col-sm-1">9</div>
<div class="col-sm-1">10</div>
<div class="col-sm-1">11</div>
<div class="col-sm-1">12</div>
</div>
<div class="col-sm-4">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>
<div class="col-sm-1">5</div>
<div class="col-sm-1">6</div>
<div class="col-sm-1">7</div>
<div class="col-sm-1">8</div>
<div class="col-sm-1">9</div>
<div class="col-sm-1">10</div>
<div class="col-sm-1">11</div>
<div class="col-sm-1">12</div>
</div>
<div class="col-sm-3">
<div class="col-sm-1">1</div>
<div class="col-sm-1">2</div>
<div class="col-sm-1">3</div>
<div class="col-sm-1">4</div>
<div class="col-sm-1">5</div>
<div class="col-sm-1">6</div>
<div class="col-sm-1">7</div>
<div class="col-sm-1">8</div>
<div class="col-sm-1">9</div>
<div class="col-sm-1">10</div>
<div class="col-sm-1">11</div>
<div class="col-sm-1">12</div>
</div>
</div>
</div>
</body>
列偏移
.col-sm-3使列向右平移12等分中的3个等分sm类型的兼容度
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css" />
<style>
.col-xs-1{border: 1px solid black;background: red;}
.col-sm-6{border: 1px solid black;background: darkseagreen;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-1">1</div>
<div class="col-xs-1">2</div>
<div class="col-xs-1">3</div>
<div class="col-xs-1">4</div>
<div class="col-xs-1">5</div>
<div class="col-xs-1">6</div>
<div class="col-xs-1">7</div>
<div class="col-xs-1">8</div>
<div class="col-xs-1">9</div>
<div class="col-xs-1">10</div>
<div class="col-xs-1">11</div>
<div class="col-xs-1">12</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">6份</div>
</div>
</div>
</body>
表格
下面是什么都没有样式的表格：
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css" />
</head>
<body>
<table>
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>12</td>
<td>小红</td>
<td>21</td>
<td>女</td>
</tr>
<tr>
<td>54</td>
<td>小刚</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>10</td>
<td>小汉</td>
<td>23</td>
<td>男</td>
</tr>
</table>
</body>
给table加上table的class后：
斑马线表格(table-striped)：
边框(table-bordered)：
鼠标悬停(table-hover)：
紧缩表格(table-condensed)：
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
