学习关于Bootstrap的感悟和体会

前言：

这是这两天他的学习关于Bootstrap的感悟和体会

Bootstrap是一个非常受欢迎的前端开发框架，该框架极大的提高前端团队的开发效率。

Bootstrap对常见的CSS布局组件和JavaScript插件进行了完整的封装，使开发人员可以轻松使用。

使用Bootstrap可以快速制作精美的响应式页面，并且兼容移动端

Boostrap是最近几天学的一个新的开发框架，和之前学过的AUI框架来说有相同点，也有很大的不同点，先说说相同点，你毕竟是用别人的框架，所以你不得不遵守人家已经规定好的原则和规则，这种问题就会在实际的开发中遇到，因为实际开发中不可能跟着框架走，一定是跟中客户走，在这样的话在实际开发中可能得改人家提供的样式，很有可能南辕北辙，还不如不用框架；不同点就是Boostrap更加的强大，不仅仅和AUI一样基于移动端，而是PC，移动同时开发，这就是响应式页面的强大。

什么是响应式页面？

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

这样的话，有了响应式页面就是让设计和开发人员的思路更加广阔，不会再考虑用户手上的电子设备大小了。

Bootstrap中有一个很重要的概念就是媒体查询和12栅格系统。

媒体查询：

<meta name="viewport"
content="width=device-width, initial-scale=1 ,maximun-scale=1,user-scalable=no">

在页面设置该信息后，手机端网页的大小将根据手机屏幕自适应（不再是980px）

@media (max-width: 412px){}  //视口像素小于等于412px时生效
@media (min-width: 412px){}  //视口像素大于等于412px时生效

这里还要提一个概念就是像素和视口

物理像素：是屏幕的实际像素

物理像素 = n * CSS像素

n就叫做设备像素比（DPR）

移动端浏览器默认视口：980px

Window.devicePixelRation//查询设备的像素比
document.documentElement.clientWidth; // 查询当前设备的视口大小

12栅格系统是Boostrap的核心

12栅格系统就是把网页的内容区域按照宽度平分为12份，网页开发人员可以自由按份组合，方便网页的布局，使排版看起来整齐规范。

bootstarp提供了一个名为container的样式容器

.container是一个自动居中，高度自适应的样式。用.container作为网页内容最外层的div样式，可以轻松的实现12栅格的网页布局。 并且，这种12栅格系统是根据屏幕大小自适应的，.container会自动根据屏幕大小调整总宽度和栅格的平均宽度。

col-lg-n 最大列宽95px 在>=1200px像素的情况下将.container12等分 每份宽度95px 其余情况宽度为100%

col-md-n 最大宽度78px; 在>=992px像素的情况下将.container12等分 其余情况100%

col-sm-n 最大列宽60px 在>=768px像素的情况下将.container12等分 其余情况100%

col-xs-n 列宽根据视口大小12等分 在任何尺寸的屏幕下都将.container 12等分



后续。。。