简介
什么是Bootstrap？
框架：库 lib library
jQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式
把大家都需要的功能预先写好到一些文件 这就是一个框架
Bootstrap 让我们的 Web 开发更简单，更快捷；
注意是 Bootstrap 不是 BootStrap！这是一个词，不是合成词，其含义为：n. 引导指令,引导程序
Bootstrap 是当下最流行的前端框架（界面工具集）；
特点就是灵活简洁，代码优雅，美观大方；
其目的是为了让 Web 开发更敏捷；
是 Twitter 公司的两名前端工程师 Mark Otto 和 Jacob Thornton 在 2011 - 年发起的，并利用业余时间完成第一个版本的开发；
为什么使用Bootstarp？
- 生态圈火，不断地更新迭代；
- 提供一套美观大方地界面组件；
- 提供一套优雅的 HTML+CSS 编码规范；
- 让我们的 Web 开发更简单，更快捷；
注意：
使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式
准备
下载Bootstrap
- https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
- https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.zip
Compatible
设置IE浏览器的兼容模式版本
<meta http-equiv="X-UA-Compatible" content="IE=7">
element快捷语法：meta:compat
-
<meta http-equiv="X-UA-Compatible" content="IE=7">
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
viewport视口
声明当前网页在移动端浏览器中展示的相关设置
element快捷语法:meta:vp
<meta name="viewport" content="width=device-width, initial-scale=1">
- 视口的作用：在移动浏览器中，当页面宽度超出设备，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示
- 目前大多数手机浏览器的视口（承载页面的容器）宽度都是980；
- 视口的宽度可以通过meta标签设置
- 此属性为移动端页面视口设置，当前值表示在移动端页面的宽度为设备的宽度，并且不缩放（缩放级别为1）
-
width:视口的宽度 -
initial-scale：初始化缩放 -
user-scalable:是否允许用户自行缩放（值：yes/no; 1/0） -
minimum-scale:最小缩放，一般设置了用户不允许缩放，就没必要设置最小和最大缩放 -
maximum-scale:最大缩放
-
条件注释
- 条件注释的作用就是当判断条件满足时，就会执行注释中的HTML代码，不满足时会当做注释忽略掉
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
-
html5shiv.js让浏览器可以识别HTML5的新标签 -
respond.js让低版本浏览器可以使用CSS3的媒体查询 - 通过
file://的形式访问页面，respond.js不生效
基础的Bootstrap模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 默认用IE最新浏览器引擎渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 声明当前网页在移动端浏览器中展示的相关设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Document</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="lib/jquery/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
第三方依赖
jQuery
Bootstrap框架中的所有JS组件都依赖于jQuery实现html5shiv
让低版本浏览器可以识别HTML5的新标签，如header、footer、section等respond
让低版本浏览器可以支持CSS媒体查询功能
注：建议以后在HTML中将脚步的引入放到页面最底下
.container
Bootstrap中响应式容器
会根据屏幕宽度改变宽度，有三个等级：1140px>970px>740px。当屏幕小于740px时，屏幕宽度多大.container盒子宽度就有多大。
mediaquery
@media (判断条件（针对于当前窗口的判断）){
/*这里的代码只有当判断条件满足时才会执行*/
}
@media (min-width: 768px) and (max-width: 992px) {
/*这里的代码只有当(min-width: 1280px)满足时才会执行*/
.container {
width: 750px;
}
}
- 当使用min-width作为判断条件一定要从小到大，其原因是CSS从上往下执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒体查询</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
height: 1000px;
background-color: red;
}
.container{
width: 100%;
margin: 0 auto;
}
/*媒体查询 当使用min-width作为判断条件的时候，一定要从小到大的来写，原因是CSS是从上往下执行*/
@media (min-width: 768px) {
.container{
width: 750px;
}
}
@media (min-width: 992px) {
.container{
width: 970px;
}
}
@media (min-width: 1200px) {
.container{
width: 1170px;
}
}
@media (min-width: 1280px) {
.container{
width: 1280px;
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
栅格系统
- Bootstrap中定义了一套响应式的网格系统，
- 其使用方式就是将一个容器划分成12列，
- 然后通过col-xx-xx的类名控制每一列的占比
.row类
- 因为每一个列默认有一个15px的左右外边距
- row类的一个作用就是通过左右-15px屏蔽掉这个边距
<div class="container">
<div class="row"></div>
</div>
.col-**-*类
- col-xs-[列数]：在超小屏幕下展示几份
- col-sm-[列数]：在小屏幕下展示几份
- col-md-[列数]：在中等屏幕下展示几份
- col-lg-[列数]：在大屏幕下展示几份
- xs : 超小屏幕 手机 (<768px)
- sm : 小屏幕 平板 (≥768px)
- md : 中等屏幕 桌面显示器 (≥992px)
- lg : 大屏幕 大桌面显示器 (≥1200px)
<div class="row">
<div class="col-md-2 text-center"></div>
<div class="col-md-5 text-center"></div>
<div class="col-md-2 text-center"></div>
<div class="col-md-3 text-center"></div>
</div>
此处顶部通栏已经被划分成四列
text-center的作用就是让内部内容居中显示
hover图片展示
.mobile-link:hover > img {
display: block;
}
按钮样式生成
- http://blog.koalite.com/bbg/
- 可以通过界面生成一个新的按钮样式
.btn-itcast {
color: #ffffff;
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast:hover,
.btn-itcast:focus,
.btn-itcast:active,
.btn-itcast.active,
.open .dropdown-toggle.btn-itcast {
color: #ffffff;
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast:active,
.btn-itcast.active,
.open .dropdown-toggle.btn-itcast {
background-image: none;
}
.btn-itcast.disabled,
.btn-itcast[disabled],
fieldset[disabled] .btn-itcast,
.btn-itcast.disabled:hover,
.btn-itcast[disabled]:hover,
fieldset[disabled] .btn-itcast:hover,
.btn-itcast.disabled:focus,
.btn-itcast[disabled]:focus,
fieldset[disabled] .btn-itcast:focus,
.btn-itcast.disabled:active,
.btn-itcast[disabled]:active,
fieldset[disabled] .btn-itcast:active,
.btn-itcast.disabled.active,
.btn-itcast[disabled].active,
fieldset[disabled] .btn-itcast.active {
background-color: #E92322;
border-color: #DB3B43;
}
.btn-itcast .badge {
color: #E92322;
background-color: #ffffff;
}
小屏幕隐藏
<div class="topbar hidden-xs hidden-sm"></div>
或者
<div class="topbar visible-md visible-lg"></div>
- hidden-xx : 在某种屏幕下隐藏
-
visible-xx : 在某种屏幕尺寸下显示
- visible-xx-xx：最后一个xx是决定显示时的display到底是啥
