bootstrap框架的下载及应用

响应式开发原理

通过媒体查询判断不同的屏幕的大小，然后设置不同的样式；

响应式布局容器
概念：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
常见屏幕尺寸下布局容器大小设置
超小屏幕（手机、小于768px）：设置宽度为100%；
小屏幕（平板，大于等于768px）：设置宽度为750px；
中等屏幕（桌面显示器，大于等于992px）：设置宽度为970px；
大屏幕（大桌面显示器，大于等于1200px）：设置宽度为1170px；
案例演示：box盒子在不同屏幕下宽度和背景颜色不同；
响应式开发案例演示
一个父级盒子中有12个li，当屏幕的宽度 >=992的时候，一行并排放4个，当屏幕 宽度>=768的时候一行并排放3个，当屏幕宽度 <768的时候一行并排放2个；
注意：父级盒子就是布局容器，要根据不同屏幕大小去设置不同大小；
Bootstrap来自Twitter（推特），基于HTML、css和javascript开发。简洁灵活，使web开发更加快捷；中文网站：http://www.bootcss.com/
进入网址，点击即可下载。将下载的生产环境文件夹直接复制到自己的项目中，并且引入css文件，
布局容器 — container 类
大屏 ( >=1200px) 宽度定为 1170px
中屏 ( >=992px) 宽度定为 970px
小屏 ( >=768px) 宽度定为 750px
超小屏 (100%)
Bootstrap将布局容器分成了12份，然后配合媒体查询对不同大小屏幕下的盒子占有的份数不同进行响应式设置；
栅格系统是分为行和列的

注意：所有的col-类名都是向上兼容；
row类名表示行，默认左右有-15的外边距，布局容器container中嵌套可以消除默认的内边距；
hidden-xs 超小屏幕下隐藏 visible-xs 超小屏幕下可见
hidden-sm 小屏幕下隐藏 visible-sm 小屏幕下可见
hidden-md 中等屏幕下隐藏 visible-md 中等屏幕下可见
hidden-lg 大屏幕下隐藏 visible-lg 大屏幕下可见
实现响应式的显示隐藏，可以让特定的盒子在规定的屏幕下显示隐藏。
我们可以参考bootstrap v3 的中文文档，来让我们的布局方式更加简单和快捷。如创建导航和文本等样式，我们都可以调用bootstrap中的类名来帮助我们快速完成，总之bootstrap是一款轻量级的专门为移动端的响应式布局而开发的框架。
css的内容就介绍到这里，下期我们给大家介绍js的使用。