视频学习地址：https://www.imooc.com/video/14639
目录
一、Bootstrap环境搭建
1、Bootstrap3特性（建议下载3.0版）
- 响应式设计
- 栅格布局
- 完整的类库
- JQuery插件（Bootstrap官方上示例用的是JQuery 1.12.4，必须1.9.1版以上）
- 不同的使用场景
注意：选择高版本版本浏览器，IE9.0以上……
2、Bootstrap开发工具
- 任意前端开发工具均可
- 专门针对Bootstrap的开发工具：Jetstrap(下载地址：jetstrap.com)
3、Bootstrap下载地址
中文网：www.bootcss.com
4、基本示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
二、Bootstrap的全局样式
传统前端开发过程中的问题：重复、复杂、无意义的命名，结构冗余、胡乱嵌套，页面错乱。
Bootstrap优点：代码整洁、风格统一、美观易用。
1、Bootstrap的全局样式
Bootstrap提供大量的全局样式，基本的HTML元素均可以通过class设置样式并得到增强效果。
2、Bootstrap的排版
对默认的排版方式进行了CSS样式定义，使得基本结构套用出来的HTML页面更加美观。
（1）Bootstrap的排版--标题
- 标题：h1~h6 / .h1~.h6
- h1: 36px
- h2: 30px
- h3: 24px
- h4: 18px
- h5: 14px
- h6: 12px
- 副标题：small
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DEMO</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四一</h4>
<h5>标题五</h5>
<h6>标题六</h6>
<!-- Bootstrap实现的另外一种方式 内联命名 class的方式 -->
<span class="h1">标题一</span>
<span class="h2">标题二</span>
<span class="h3">标题三</span>
<span class="h4">标题四</span>
<span class="h5">标题五</span>
<span class="h6">标题六</span>
</body>
</html>实际效果：
- 副标题的使用
<h1>标题一<small>小标题</small></h1>
（2）Bootstrap排版--文本
段落：<p>更改了默认定义：字体大小:14px(其它是16px)，行高：20px ,底部外边距：14px
对齐：.text-left .text-center .text-right
<p class="text-left">中央电视台</p>
<p class="text-center">中央电视台</p>
<p class="right">中央电视台</p>大小写： .text-lowercase .text-uppercase .text-capitalize
其他常用标签：mark del u ins small
<p class="text-lowercase"> heLLo!</p>
<p class="text-uppercase"> heLLo!</p>
<p class="text-capitalize"> heLLo!</p>（3）Bootstrap排版--表格
带边框的表格： .table-bordered
条纹状的表格： .table-striped
悬停变色： .table-hover
紧凑风格： .table-condensed
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<tr>
<th>标题1</th><th>标题2</th><th>标题3</th><th>标题4</th><th>标题5</th>
</tr>
</thead>
<tbody>
<tr class="active"><td>激活</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr class="warning"><td>警告</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr class="danger"><td>危险</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr class="success"><td>成功</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
<tr class="info"><td>信息</td><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
</tbody>
</table>（4）Bootstrap排版--表单
Bootstrap给HTML大部分表单设置了默认样式，我们可以给表单添加相应的类名，以实现表单的水平排列，个性化定制等。
<form action="" class="form-inline">
<div class="form-group has-success">
<label class="control-label" for="">这是一个输入框：</label>
<input type="text" class="form-control" placeholder="这是一个输入框">
</div>
<div class="form-group">
<label for="">这是一个输入框：</label>
<input type="text" class="form-control" placeholder="这是一个输入框">
<select class="form-control input-lg" name="" id="">
<option value="">北京</option>
<option value="">北京</option>
<option value="">北京</option>
<option value="">北京</option>
</select>
</div>
</form>
（5）Bootstrap排版--按钮
<!-- 标准按钮 -->
<button type="button" class="btn btn-default">默认</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接</button>3、Bootstrap中的图片
圆角 .img-rounded
圆形 .img-circle
带有边框的圆角图形 .img-thumbnail
4、Bootstrap中的辅助类
文本颜色
背景颜色
状态设置
三角符号
三、Bootstrap的渐进
- 开发响应式页面：响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。比如放大缩小屏幕后就会出现变化，而响应式布局中会根据屏幕内容的大小和显示内容不同的自动适应。
- 利用栅格系统适配不同的硬件
1、 开发响应式页面
meta标签中viewport。如何确定网页的尺寸，一般以px为单位。
meta标签中viewport
<meta name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=1,mimmum-scale=1,user-scalable=no">
- width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
- height：和 width 相对应，指定高度。
- initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
- maximum-scale：允许用户缩放到的最大比例。
- minimum-scale：允许用户缩放到的最小比例。
- user-scalable：用户是否可以手动缩放。no /yes
2、Bootstrap的栅格
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="port" content="width=device-width,initial-scale=0.5,maximum-scale=1,mimmum-scale=1,user-scalable=no">
<style>
* {
padding:0px;
margin:0px;
}
.test{
width:300px;
height:200px;
background-color: red;
}
/*当屏幕最大宽度是900px 和 最小宽度500px时，改变相关css属性
@media 是CSS3实现的功能
语法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
*/
@media screen and (max-width:900px) and (min-width:500px){
.test {
width:100%;
height:100px;
background-color:blue;
}
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>3、Bootstrap中的网页开发的单位
px：是相对于屏幕分辨率的单位，px的大小无法跟随屏幕放大缩小，但所有浏览器都支px单位。
em：1em =16px（但不完全是），em会继承父元素的字体大小，IE的部分浏览器不支持，在不同浏览器中1em=？px不确定
rem：与em类似，rem会继承根元素的大小，如 html {font-size=62.5%}
4、Bootstrap中的“字体图标”：
指为方便使用将网页中的图标做成字体，以文字的方式使用。
- 对字体图片的要求体积小便于加载，无需重复设计，方便引用。
- Bootstrap提供：Glyphicons字体图标(https://v3.bootcss.com/components/)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
<meta name="port" content="width=device-width,initial-scale=0.5,maximum-scale=1,mimmum-scale=1,user-scalable=no">
<style>
.glyphicon-user {
color: red;
font-size: 100px;
}
</style>
</head>
<body>
<span class="glyphicon glyphicon-user">user</span>
</body>
</html>四、Bootstrap的组件
比较怪异的属性（）：
role：是给一个特殊的浏览器功能使用的，如盲文。
aria-lable：
tabindex:可以设置控制的TAB的移动顺序
//以上是给有障碍人士使用的
data-起始的属性HTML5中的自定义属性
1、下拉菜单
- .dropdown 控制组件为下拉菜单
- .dropdown-menu-right代替.pull-right左对齐
- divider 分割线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
这是一个按钮
<!-- -->
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="http://www.baidu.com">百度</a>
</li>
<li>
<a href="http://www.baidu.com">百度</a>
</li>
<li>
<a href="http://www.baidu.com">百度</a>
</li>
<li>
<a href="http://www.baidu.com">百度</a>
</li>
</ul>
</div>
</body>
</html>2、控制组件
- input-group
- input-group-addon可放置额外内容及图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
</div>
</body>
</html>
文本内左侧前多一个 $ 号
3、导航
以一个带有class .nav的无序列表
.nav-tabs代表可切换的导航
.nav-pills代表胶囊导航
.nav-justified使导航两端对齐
.nav-stacked使导航垂直
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<!--class="nav nav-tabs"导航开始-->
<ul class="nav nav-tabs">
<!-- class="avtive"默认激活 -->
<li><a href="http://www.baidu.com">百度1</a></li>
<li class="active"><a href="http://www.baidu.com">百度2</a></li>
<li><a href="http://www.baidu.com">百度3</a></li>
</ul>
<ul class="nav nav-pills nav-justified">
<li><a href="http://www.baidu.com">百度1</a></li>
<li class="active"><a href="http://www.baidu.com">百度2</a></li>
<li><a href="http://www.baidu.com">百度3</a></li>
</ul>
<ul class="nav nav-pills nav-stacked">
<li><a href="http://www.baidu.com">百度1</a></li>
<li class="active"><a href="http://www.baidu.com">百度2</a></li>
<li><a href="http://www.baidu.com">百度3</a></li>
</ul>
</body>
</html>4、分页
.pagenation 在父元素中添加表示分页
.pager 翻页区域
.previous 把链接向左对齐
.next 把链接向右对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.1.12.4.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<nav>
<ul class="pager">
<li class="previous">
<a href="#">向左</a>
</li>
<li class="next">
<a href="#">向右</a>
</li>
</ul>
<ul class="pagination pagination-lg">
<li>
<a href="http://www.baidu.com">1</a>
</li>
<li class="active">
<a href="http://www.baidu.com">2</a>
</li>
<li>
<a href="http://www.baidu.com">3</a>
</li>
<li>
<a href="http://www.baidu.com">4</a>
</li>
<li>
<a href="http://www.baidu.com">5</a>
</li>
</ul>
</nav>
</body>
</html>未完待续……
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
