boostrap
本质：
媒体查询＋浮动
引入步骤：
<!-- 第一步引入boot的CSS文件 -->
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
<!-- 第二步引入JQS -->
<script src="./lib/bootstrap/js/jquery.js"></script>
<!-- 第三步引入boot的js文件 -->
<script src="./lib/bootstrap/js/bootstrap.js"></script>
栅格系统：
栅格系统是boostrap的核心，也是实现响应式布局的核心
bootstrap将屏幕划分成四种宽度
1.大屏幕 >1200px lg
2.中屏幕 992-1200px md
3.小屏幕 768-992px sm
4.超小屏幕 <768 xs
栅格系统默认将一行 划分成 12份 也就是一行12列 如果需要不同屏幕下一行显示个数不同：
<div class="row">
<div class="col-xs-6 col-sm-3">1</div>
<div class="col-xs-6 col-sm-3">2</div>
<div class="col-xs-6 col-sm-3">3</div>
<div class="col-xs-6 col-sm-3">4</div>
<!-- lg指大屏下样式，所以要想好代码在每一种屏幕下的表现 -->
</div>
注意：
bootstrap 做了一个额外的设置 自动让较大屏幕沿用较小屏幕的设置。
根据需求 如在什么屏幕下 一行有几个元素 通过观察就可以直接写出来
固定写法：
在最外层写一个类 固定的：
container(居中) container-lfuid (全屏)
container 就是版心， 宽度会跟随屏幕宽度变化 而变化
两者的用法 ：
需要版心的时候就用 container
如果要全屏就 container-fluid
如果不加版心就会往外撑开 有负外边距 特点： 会有滚动条
版心里写一个类 固定的：row
如果删除row 表示里面就是正常的栅格 row的外边和里面就互不影响
对于bootstrap组件的使用
进入bootstrap 官网
导航条案例
点击组件，屏幕右侧有
如需要导航条组件 就在到导航条组件中点击Copy
最后复制到html的body当中
bootstrap使用的基本常识
1.在使用bootstrap UI 框架时 不需要和以前一样引入 base来样式的初始化
2.媒体查询+浮动 是bootstrap 是实现栅格系统的本质
思考：响应式布局的网站，能不能使用flex布局
1.在一般情况下，响应式布局网站是不支持使用flex！
理解响应式布局含义：响应式布局包含了pc和移动端，在pc端中可能会存在低版本的浏览器，如ie浏览器，会对css3的支持没有很好的优化
2.特别的情况下，如在工作中明确指出不用理低版本的ie，那么就可以正常所学css3知识：过渡、动画、flex布局
bootstrap案例总结问题
一、对于给元素设置高度有三种方式：
1 在最外层盒子上添加高度
2 用padding内挤
二、在给元素设置会遇到 有优先级 权重问题
解决方式：给元素设置ID名，提高权重
<nav id="nav1" class="navbar navbar-default navbar-fixed-top">
三、版本问题
案例是老版本第三方库，今天所学案例使用新版本。导致了不同视口下内容出现偏差。
学习到了：
1.对于调试错误的范围变得更加广泛了
2.这种调试错误的方法，在工作中绝对会出现。建议旧项目就用旧的版本；新项目用新的版本
四、学习使用bootstrap技巧
问题：初学阶段，在使用组件和修改样式过程会不熟悉，如果随意修改组件代码很容易出错。
解决思路：
1.可以在学习时多尝试，可以加减代码看看效果会尝试什么变化
2.当写完一个模块，简单对一个模块做了什么，如加了什么类名，修改了什么样式进行简单的总结 避免下次出现同样的错误
