一、Bootstrap的的用法
1.下载
2.导入CSS文件
link导入
（1）. 使用本地的文件 本地开发推荐使用这个
rel="stylesheet" 声明文件类型
一定要注意，导入的是 bootstrap-3.3.7-dist/css/bootstrap.min.css
（2）、使用CDN
3. 复制粘贴
(1). 规则
每个规则对应不同的样式
我们要做的：
找到我们需要的规则（HTML等）
复制、粘贴
2.详细介绍各规则
（1）. 栅格系统
1. .container 他是一个容器， 先有它
2. .row 他是一行 它放在.container 里面，可以有多个
3. .column 他是一列 它放在.row里面 它默认分为12列 里面还可以嵌套row 一般紧随.row出现
<head>
<meta charset="UTF-8">
<title>栅格示例</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.c1 {
background-color: red;
height: 30px;
}
</style>
</head>
<body>
<!--放容器-->
<div class="container-fluid">
<!--f行-->
<div class="row">
<!--列-->
<div class="col-md-1 c1"></div>
</div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
</body>
列：
12
col-xx-1 col-xx-2 col-md-6
中间的字母：
lg > md > sm > xs
大屏 > 一般PC > 平板 > 手机
列偏移
col-xx-offset-4 col-md-2
快速浮动
pull-left 往左浮动
pull-right 往右
2. 文本类
1. 标题
<head>
<meta charset="UTF-8">
<title>标题示例</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hr>
<div class="h1">1级标题 36px <small>我是小字儿</small></div>
<div class="h2">2级标题 30px</div>
<div class="h3">3级标题 24px</div>
<div class="h4">4级标题 18px</div>
<div class="h5">5级标题 14px</div>
<div class="h6">6级标题 12px</div>
<p>啊，大海啊，大海啊，大海啊，大海啊，大海啊，大海啊，大海啊，大海</p>
<p class="lead">全是水
<mark>全是水</mark>全是水全是水全是水
<del>全是水全是水全是水全是水</del></p>
</div>
</body>
h标签
2. 文档 P标签
<head>
<meta charset="UTF-8">
<title>文本对齐</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<p class="text-left">左对齐.</p>
<p class="text-center">居中.</p>
<p class="text-right">右对齐.</p>
<p class="text-justify">两端对齐.</p>
<p class="text-justify">a dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia a dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia d a h ai d ou s hi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuidahai doushi shuia dahai doushi shui </p>
<p class="text-nowrap">a dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia a dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuia d a h ai d ou s hi shuia dahai doushi shuia dahai doushi shuia dahai doushi shuidahai doushi shuia dahai doushi shui </p>
<p class="text-nowrap">没有换行.</p>
</div>
</body>
对齐 *****
地址
3. 列表
- 无序列表
- 有序列表
- 横着的列表（内联列表）
<head>
<meta charset="UTF-8">
<title>列表</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="list-unstyled">
<li>GDP</li>
<li>翔哥</li>
<li>强哥</li>
</ul>
<!--内联列表-->
<ul class="list-inline">
<li>Python学院</li>
<li>Linux学院</li>
</ul>
<!--描述-->
<dl>
<dt>Egon</dt>
<dd>被Python耽误的相声演员</dd>
</dl>
<!--代码-->
<!--< >  -->
<code><div></code>
<!--代码片段-->
<pre><p>我是P标签的内容</p></pre>
<pre>print("Hello world")</pre>
<!--程序输出-->
<samp>Hello world</samp>
</div>
</body>
4. 代码等标签
5. 表格
- table
- table-striped（隔行变色）
- table-border (带边框)
- table-hover (鼠标一上去变色)
- table-condensed (紧凑，内边距縮一半)
<head>
<meta charset="UTF-8">
<title>示例1</title>
<!--引用本地的-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="my-style.css">-->
<!--引用CDN-->
<!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
<style>
.c1 {
background-color: red;
}
</style>
</head>
<body>
<div class="container-fluid c1">
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th> 姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>1</td>
<td>Egon</td>
<td>杠娘</td>
</tr>
<tr class="success">
<td>1</td>
<td>Egon</td>
<td>杠娘</td>
</tr>
<tr class="danger">
<td>1</td>
<td>Egon</td>
<td>杠娘</td>
</tr>
<tr class="warning">
<td>1</td>
<td>Egon</td>
<td>杠娘</td>
</tr>
<tr class="info">
<td>1</td>
<td>Egon</td>
<td>杠娘</td>
</tr>
</tbody>
</table>
</div>
</body>
6 状态类
- active
- success 绿色
- danger 红色
- warning 黄色
- info 淡蓝色
7. 表单
帮助信息 aria-describedby
has-success 放到 form-group的标签里面
has-error
input大小
disabled 不可用状态
<head>
<meta charset="UTF-8">
<title>列表</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="list-unstyled">
<li>GDP</li>
<li>翔哥</li>
<li>强哥</li>
</ul>
<!--内联列表-->
<ul class="list-inline">
<li>Python学院</li>
<li>Linux学院</li>
</ul>
<!--描述-->
<dl>
<dt>Egon</dt>
<dd>被Python耽误的相声演员</dd>
</dl>
<!--代码-->
<!--< >  -->
<code><div></code>
<!--代码片段-->
<pre><p>我是P标签的内容</p></pre>
<pre>print("Hello world")</pre>
<!--程序输出-->
<samp>Hello world</samp>
</div>
</body>
8. 大小
- lg
- 正常的
- sm
9. 按钮
- 大小
- lg
- 正常的
- sm
- xs
- 颜色
- disabled 不可用状态
10. 组件
- 图标
- 字体图标的优势
- 缩放不变形
- 随意改颜色
- 字体搭配图标
- 进度条
- 分页
<head>
<meta charset="UTF-8">
<title>下拉框练习</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.c1 {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container c1">
<div class="row">
<div class="col-md-12">
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
<hr>
<div class="dropdown pull-right">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
<li class="text-right"><a href="#">Action</a></li>
<li class="text-right"><a href="#">Another action</a></li>
<li class="text-right"><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="text-right"><a href="#">Separated link</a></li>
</ul>
</div>
<!--按钮式下拉菜单-->
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<!--多个按钮的输入框组-->
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
<button class="btn btn-success">嘻嘻嘻</button>
<button class="btn btn-warning">哈哈哈</button>
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<!--添加下拉菜单的nav-->
<ul class="nav nav-tabs">
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">八级哥</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
<head>
<meta charset="UTF-8">
<title>导航条示例</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<!--不用放到container-->
<!--nav标签-->
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container" style="height: 1000px">
...
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
<head>
<meta charset="UTF-8">
<title>巨幕示例</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</body>
<head>
<meta charset="UTF-8">
<title>缩略图</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="Bootstrap_i1.png" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="Bootstrap_i2.png" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="Bootstrap_i3.png" alt="...">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="Bootstrap_i4.png" alt="...">
</a>
</div>
</div>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
<html>
<head>
<meta charset="UTF-8">
<title>管理后台</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
.c1{
padding: 4px;
}
/*a{*/
/*margin: 0 auto;*/
/*}*/
.c2{
margin-top: 1px;
margin-left: -15px;
}
.c4{
margin-top: 2px;
}
/*.c3{*/
/*}*/
</style>
</head>
<body>
<div class="container c5">
<div class="panel panel-default">
<div class="panel-heading">Panel heading </div>
<div class="panel-body c1">
<form class="navbar-form navbar-left c2">
<div class="form-group">
<input type="text" class="form-control" placeholder="搜索">
</div>
<button type="button" class="btn btn-default btn-primary ">搜索</button>
</form>
<a href="#" class="btn btn-success active pull-right" role="button">添加</a>
<table class="table table-bordered table-hover table-striped table-condensed text-center">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Column heading</th>
<th class="text-center">Column heading</th>
<th class="text-center">Column heading</th>
<th class="text-center">Column heading</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td ><button type="button" class="btn btn-default active btn btn-success glyphicon glyphicon-pencil c3 text-center">编辑</button>
<button type="button" class="btn btn-default active btn btn-danger glyphicon glyphicon-remove c3 text-center">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td ><button type="button" class="btn btn-default active btn btn-success glyphicon glyphicon-pencil">编辑</button>
<button type="button" class="btn btn-default active btn btn-danger glyphicon glyphicon-remove ">删除</button></td>
</tr>
<tr>
<td>3</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td><button type="button" class="btn btn-default active btn btn-success glyphicon glyphicon-pencil">编辑</button>
<button type="button" class="btn btn-default active btn btn-danger glyphicon glyphicon-remove ">删除</button></td>
</tr>
<tr>
<td>4</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td><button type="button" class="btn btn-default active btn btn-success glyphicon glyphicon-pencil">编辑</button>
<button type="button" class="btn btn-default active btn btn-danger glyphicon glyphicon-remove ">删除</button></td>
</tr>
<tr>
<td>5</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td><button type="button" class="btn btn-default active btn btn-success glyphicon glyphicon-pencil">编辑</button>
<button type="button" class="btn btn-default active btn btn-danger glyphicon glyphicon-remove ">删除</button></td>
</tr>
<tr>
<td>6</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td><button type="button" class="btn btn-default active btn btn-success glyphicon glyphicon-pencil">编辑</button>
<button type="button" class="btn btn-default active btn btn-danger glyphicon glyphicon-remove ">删除</button></td>
</tr>
<tr>
<td>7</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td><button type="button" class="btn btn-default active btn btn-success glyphicon glyphicon-pencil">编辑</button>
<button type="button" class="btn btn-default active btn btn-danger glyphicon glyphicon-remove ">删除</button></td>
</tr>
<tr>
<td>8</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td><button type="button" class="btn btn-default active btn btn-success glyphicon glyphicon-pencil">编辑</button>
<button type="button" class="btn btn-default active btn btn-danger glyphicon glyphicon-remove ">删除</button></td>
</tr>
<tr>
<td>9</td>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
<td><button type="button" class="btn btn-default active btn btn-success glyphicon glyphicon-pencil">编辑</button>
<button type="button" class="btn btn-default active btn btn-danger glyphicon glyphicon-remove ">删除</button></td>
</tr>
</table>
<nav aria-label="Page navigation">
<ul class="pagination pull-right c4">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
body{
80%; height: 600px;margin: 0 auto;
}
/*.container{margin-top: 0px;}*/
.progress{margin-bottom: 4px;}
.page-header{margin: 14px 0 20px;margin-bottom: 9px;}
h4{margin-top: 7px; margin-left: 15px}
/*.btn-success{}*/
.c1{
margin-bottom: 11px;
margin-right: 13px;
margin-top: -6px
}
</style>
</head>
<body>
<!--<div class="page-header ">-->
<!--<h4>信息收集卡 <small>共三步</small></h4>-->
<!--</div>-->
<div class="panel panel-success table-bordered table-striped table-hover"><h4>信息收集卡 <small>共三步</small></h4>
<div class="container-fluid">
<div class="progress">
<div class="progress-bar progress-bar-striped active " role="progressbar" aria-valuenow="45" aria-valuemin="0"
aria-valuemax="100" style=" 45%">
45%
<span class="sr-only">45% Complete</span>
</div>
</div>
<div class="row ">
<div class="col-md-12">
<div class="panel panel-primary">
<p class="bg-primary input-lg ">基本信息 <span class="navbar-link navbar-right glyphicon glyphicon-pushpin" aria-hidden="true"></span></p>
<form class="form-horizontal">
<div class="form-group">
<label for="inputusername3" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-2">
<input type="name" class="form-control" id="inputusername3" placeholder="姓名">
</div>
</div>
<div class="form-group">
<label for="inputphone3" class="col-sm-2 control-label">手机</label>
<div class="col-sm-2">
<input type="name" class="form-control" id="inputphone3" placeholder="手机">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-2">
<input type="email" class="form-control" id="inputEmail3" placeholder="邮箱">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-2">
<input type="password" class="form-control" id="inputPassword3" placeholder="密码">
</div>
</div>
<div class="form-group">
<label for="exampleInputFile" class="col-sm-2 control-label">头像</label>
<div class="col-sm-2">
<input type="file" id="exampleInputFile">
<p class="help-block">只支持pag、jpg、gif.</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">属性</label>
<div class="col-sm-3">
<label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked >人生没有彩排，只有现场直播</label>
<label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">将来的你一定会感谢现在的你</label>
<label><input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" >一分耕耘一分收获</label>
</div>
</div>
</form>
</div>
</div>
<div class="btn btn-info btn-lg active pull-right c1" role="button"><a href="#" >下一步</a></div>
</div>
</div>
</body>