bootstrap框架
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
bootstrap中文网
ui框架: 就是可以快速实现页面搭建的一系列组件
组件:
下拉菜单
导航条
焦点图
分页
…
说的简单点 就是别人已经写好的一大堆的这些常用组件 我们直接复制人家的html和css 就可以实现对应的效果
特点：
组件简洁大方、代码规范精简、界面自定义性强。
Bootstrap是基于HTML5和CSS3开发的, js功能效果依赖于 jQuery( 第三方库, 后面讲解 )。
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。
优点：
有自己的生态圈，不断的更新迭代
提供了一套简洁、直观、强悍的组件
标准化的HTML+CSS编码规范
让开发更简单，提高了开发效率。
扩展性强，虽然界面组件样式已经定义好了，我们还可以自定义，修改默认样式。
版本：
2.x.x 停止维护
优点：兼容性好
缺点：代码不够简洁、功能不够完善
3.x.x 目前使用最多
优点：稳定，偏向于开发响应式布局，移动设备优先的WEB项目
缺点：放弃了IE67，对IE8支持但是界面效果不友好
4.x.x 阶段
基本模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>bootstrap基本模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--引入bootstrap的核心样式文件-->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好，世界！</h1>
<!-- 引用JS文件,对于现阶段直接复制即可 -->
<script src="lib/jquery/jquery-1.12.4.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
全局样式
container容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。默认带了15px的padding值。
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
这两种 容器类不能互相嵌套。
栅格系统 (重要)
栅格系统，也叫网格系统
栅格系统： 是BS实现响应式的核心所在 其底层也是媒体查询
栅格系统： 不管在什么大小的容器里面，都将这个容器分为12份，在不同大小屏幕里面，占的份数不同
最终目的: 在任何大小的屏幕上 都有较好的浏览体验
// 假设我现在有12个盒子
如果是大屏幕设备, 每行放 6 个 div, 可以放两排
如果是中屏设备, 每行放 4 个 div, 可以放三排
如果是小屏设备, 每行放 3 个 div, 可以放四排
如果是超小屏设备, 每行放 2 个 div, 可以放六排
大屏 6个div 两 12份 一个div占2份 放6个 大屏上: 16.666% 浮动
中屏 4个div 三 12份 一个div占3份 放4个 中屏上: 25% 浮动
小屏 3个div 四 12份 一个div占4份 放3个 小屏上: 33.33% 浮动
超小屏 2个div 六 12份 一个div占6份 放2个 超小屏: 50% 浮动
不同大小屏幕里面，每一个盒子占多少份 (一行放多少个 然后直接拿12除以一行的个数就行了)
大屏 一个盒子占2份 .col-lg-xx
中屏 一个盒子占3份 .col-md-xx
小屏 一个盒子占4份 .col-sm-xx
超小屏 一个盒子占6份 .col-xs-xx
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
