<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>深入理解bootstrap笔记</title>
<style type="text/css">
</style>
</head>
<body>
<!--
1、写在前面
a、Bootstrap的强大之处在于他对常见的css布局小组件和javascript插件的都进行了完整且完善的封装。
b、Bootstrap默认提供了大量的插件和集合，代码非常简洁，并且易于修改，你完全可以再起基础之上修改成任何自己想要的样子
c、所谓的@font-face，其实是通过css里面的@font-face语法，将安全的web字体即时下载到客户端，从进行引用和显示。
通过这种技术我显示图标的好处就是，图标可以任意放缩，改变颜色，你需要做的只是像修改文字样式那样修改图标样式即可
2.<meta name = 'viewport' content = 'width=device-width,initial-scale=1,maxinum-scale=1,user-scalable =no'>
强制让文档的宽度和设备的宽度保持1:1，文档最大的宽度比例是1，且不允许用户单击屏幕放大浏览
3、媒体查询
@media(max-767px){
}
@media(min- 768px) and (max- 991){
}
@media(min- 992px) and (max- 1199px){
}
@media(min- 1200){
}
4、立即调用的函数表达式
(function(){
})()
(function(){
}())
5、响应式设计
页面的设计与开发应当根据用户行为以及设备环境（系统平台，屏幕尺寸，屏幕定向等）进行相应的相应和调整
6、响应式栅格尺寸标准以及实现设置
超小屏幕设备手机
<768
小平设备平板
768<x<992
中等屏幕设备桌面
992<x<1200
大屏幕设备桌面
x>1200
7、禁用响应式
a、删除meta标签的viewport标签
b、.container设定笃定宽度的值
c、导航条组件溢出搜优折叠行为和展开行为
d、替换col-lg-等类
8、图片自适应宽高
.img-responsive{
display:block;
max- 100%;
height: auto;
}
9、居中
.container{
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
10、清楚浮动
不加类名，直接在父元素添加一个伪类
&:after{
dispaly:block;
content: "";
clear: both;
}
添加类名，给富集元素添加一个雷
.clearfix{
dispaly:block;
content: "";
clear: both;
}
在浮动元素后面加一个div
div设置样式 clear: both;
-->
</body>
</html>