目录
1.环境的搭建
将jquery.js放入bootstrap/js文件夹下，将bootstrap文件夹放入前端项目的根目录。
在标签里引入如下路径，完成环境搭建。
<!--引入外部bootstrap中的css文件-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!--必须在bootstrap.min.js前引入jquery文件-->
<script src="bootstrap/js/jquery.min.js"></script>
<!--引入bootstrap.min.js文件-->
<script src="bootstrap/js/bootstrap.min.js"></script>
如果以移动设备为优先，在<meta>标签下方写入如下代码。
<!-- width=device-width：浏览器窗口的宽度和设备屏幕的宽度保持一致；
initial-scale=1：初始缩放为1:1；
user-scalable=no：禁止用户缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
2.布局容器
因为使用bootstrap一般都会用栅格系统，栅格系统必须放在布局容器中，所以自觉加上布局容器。容器不建议嵌套。
<!-- 固定宽度(1170px) -->
<div class="container">
</div>
或
<!-- 宽度为100% -->
<div class="container-fluid">
</div>
3. 样式(1)
1.标题
<h1>36px</h1> <h2>30px</h2> <h3>24px</h3> <h4>18px</h4> <h5>14px</h5> <h6>12px</h6>
36px
30px
24px
18px
14px
12px
推荐使用以下样式：
| 标签 | 说明 | 效果 |
|---|---|---|
<small>小一号</small> | 小一号 | 小一号 |
<big>大一号</big> | 大一号 | 大一号 |
<strong>强调（加粗）</strong> | 强调（加粗） | 强调（加粗） |
<del>删除线</del> | 删除线 |
2.文本对齐方式
左对齐：class="text-left"
右对齐：class="text-right"
居中对齐：class="text-center"
3.英文大小写
字母大写：class="text-uppercase"
字母小写：class="text-lowercase"
首字母大写：class="text-capitalize"
4.列表
<ul>
<li>孙悟空</li><li>猪八戒</li><li>沙悟净</li>
</ul>
- 孙悟空
- 猪八戒
- 沙悟净
.list-unstyled <ul>去掉前面的符号和原有的样式
.list-inline <ul>横向排列
自定义列表：
<dl>
<dt>标题</dt>
<dd>标题解释</dd>
</dl>
.dl-horizontal <dl>横向排列
5.*表格
.table是表格样式的基类，如果加其他样式，都在此基础上再加。如：class="table table-bordered"
特效类
| 标签 | 说明 |
|---|---|
.table-bordered | <table>给表格加边框 |
.table-hover | <table>鼠标悬停，行变色效果 |
.table-striped | <table>隔行换色效果 |
.table-condensed | <table>行间距变小 |
..table-responsive | #<table>变成响应式表格，用于移动设备。 |
状态颜色类
以下样式为行<tr>或单元格<td>设置
| 标签 | 说明 |
|---|---|
.active | 默认灰 |
.success | 成功绿 |
.info | 提示蓝 |
.warning | 警告橙 |
.danger | 危险红 |
6.图片
| 标签 | 说明 |
|---|---|
.img-responsive | <img>响应式图片（与栅格系统搭配使用） |
.img-circle | <img>图片变圆形 |
.img-rounded | <img>圆角矩形 |
.img-thumbnail | <img>加圆角边框 |
7.标签与徽章
标签
<span class="label label-primary">
DOTA2
</span>
徽章
<span class="badge">DOTA2</span>
4.*栅格系统
1.基本内容
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，内容就可以放入这些创建好的布局中。
栅格系统一定要放到容器<div class="container">或<div class="container-fluid">中。
<head>
<style>
/*div中class包含col-的*/
div[class*="col-"]{border: 1px solid red;}
/*div中class以col-开头的*/
div[class^="col-"]{border: 1px solid red;}
</style>
</head>
<body>
<!--栅格系统必须放在容器中-->
<div class="container">
<!--col必须放在row中-->
<div class="row">
<!--一行最多占12列，超出12列换到下一行显示-->
<div class="col-md-3">3</div>
<div class="col-md-4">4</div>
<div class="col-md-5">5</div>
</div>
</div>
</body>
2.栅格参数
- 栅格偏移(offset)
只能向右偏移。
语法：col-xs/sm/md/lg-offset-数值
<div class="container">
<div class="row">
<div class="col-md-3">3</div>
<!--占4列，向右偏移5列-->
<div class="col-md-4 col-md-offset-5">4</div>
</div>
</div>
- 栅格排列(偏移可以实现，只做了解)
语法：
向左偏移col-xs/sm/md/lg-pull
向右偏移col-xs/sm/md/lg-push
<div class="row">
<!--占3列，向右偏移9列-->
<div class="col-md-3 col-md-push-9">3</div>
<!--占9列，向左偏移3列-->
<div class="col-md-9 col-md-pull-3">9</div>
</div>
5.辅助类
1.情景文本颜色
| - | 说明 |
|---|---|
.text-muted | 柔和 |
.text-primary | 初始蓝 |
.text-success | 成功绿 |
.text-info | 提示棕 |
.text-warning | 警告黄 |
.text-danger | 危险红 |
2.背景文本颜色
| - | 说明 |
|---|---|
.bg-primary | 初始蓝 |
.bg-success | 成功绿 |
.bg-info | 提示棕 |
.bg-warning | 警告黄 |
.bg-danger | 危险红 |
3.下拉三角
// ！！！标签之间没有内容
<span class="caret"></span>
4.快速浮动
<div class="top">
<div class="pull-left">我在左边</div>
<div class="pull-right">我在右边</div>
</div>
清除浮动(给父元素加)..clearfix
5.<div>样式
| - | 说明 |
|---|---|
.thumbnail | <div>加边框 |
.jumbotron | <div>版块样式 |
6. 样式(2)
1.*表单
| - | 说明 |
|---|---|
.form-group | <div>让label与input组队(其实就是让整体下方有一定的间距) |
.disabled | <input><label>禁用 |
.form-inline |
文本框
.form-control<input>一种(多行)文本框/输入框特效(常用)
<div class="form-group">
<label for="user">用户名：</label>
<input type="text" id="user" class="form-control"/>
</div>
<div class="form-group">
<label for="pwd">密码：</label>
<input type="password" id="pwd" class="form-control"/>
</div>
效果图：
单选框
.radio-inline<label>一种单选框特效
<div class="form-group">
<label class="radio-inline"><input type="radio" name="sex"/>男</label>
<label class="radio-inline"><input type="radio" name="sex"/>女</label>
</div>
效果图：
复选框
.checkbox-inline<label>一种复选框特效
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox"/>下棋</label>
<label class="checkbox-inline"><input type="checkbox"/>书法</label>
<label class="checkbox-inline disabled"><input type="checkbox" disabled/>绘画</label>
</div>
效果图：
输入框组
.input-group<div>把文字与输入框组合到一起
.input-group-addon加给文字的标签，加上就行，有改变但是不好说(QAQ)
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">搜索</span>
<input type="search" class="form-control"/>
</div>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-user"></span><!--插入图片-->
</span>
<input type="search" class="form-control" />
</div>
</div>
效果图：
2.*响应式表单
.form-horizontal<form>变成响应式表单，与栅格系统一起使用。
响应式表单加入栅格系统，
1.表单可以不加行(row)，只需加列(col)即可。
2. 可以给<label>加或<input>的容器加，不能直接给<input>本身加。(输入框不能划分栅格系统)
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-2" for="username">用户名：</label>
<div class="col-md-10">
<input type="text" id="username" class="form-control"/>
</div>
</div>
</form>
3.按钮
以下标签都可以加按钮样式
<input type="button" value="按钮"/>
<input type="submit" value="提交"/>
<button>按钮</button>
<a href="#">内容</a>
.btn是按钮样式的基类，如果加其他样式，都在此基础上再加。如：class="btn btn-primary">
.btn-group<div>按钮组(给父元素加)
颜色类
| - | 说明 |
|---|---|
.btn-default | 默认白 |
.btn-primary | 初始蓝 |
.btn-success | 成功绿 |
.btn-warning | 警告橙 |
.btn-danger | 危险红 |
状态类
| - | 说明 |
|---|---|
.active | 激活状态 |
.disabled | 禁用状态 |
大小类
| - | 说明 |
|---|---|
.btn-lg | 特大 |
.默认 | 中等 |
.btn-sm | 小 |
.btn-xs | 超小 |
.btn-block 块级按钮，横跨父元素的全部宽度
4.下拉菜单(列表)
.dropdown 给容器加
data-toggle="dropdown" 触发器，给按钮加(点谁给谁加)
class="dropdown-menu" <ul>
class="divider" <li>列表分隔线，<ul>和</ul>之间没有内容
<div class="dropdown">
<button class="btn btn-primary" data-toggle="dropdown">
英雄<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">灰烬之灵</a></li>
<li><a href="#">大地之灵</a></li>
<li class="divider"></li>
<li><a href="#">风暴之灵</a></li>
<li><a href="#">齐天大圣</a></li>
</ul>
</div>
5.标签页
.nav-stacked <ul>垂直排列
普通型
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">账户</a></li>
</ul>
胶囊型
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">分类</a></li>
<li><a href="#">账户</a></li>
</ul>
6.导航栏
| - | 说明 |
|---|---|
| .navbar | <nav>是导航栏的基类 |
| .navbar-default | <nav>导航栏默认样式 |
| .navbar-fixed-top | <nav>导航栏固定在顶部，自觉给<body>加margin-top样式 |
| .navbar-fixed-bottem | <nav>导航栏固定在底部，自觉给<body>加margin-top样式 |
| .navbar-inverse | <nav>导航栏颜色取反 |
| .container | <nav>#导航栏内容都在其中 |
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<h1><big>人人网</big></h1>
</div>
</nav>
7.分页
.pagination <ul>分页样式，简单粗暴~
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
8.面包屑导航
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">拉拉</a></li>
<li><a href="#">拉什么</a></li>
</ol>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
