Bootstrap框架学习笔记

1. 简介

  Booststrap是一款优秀的前端框架。使用Bootstrap框架进行前端开发，方便且迅速。适用于对前端技术不熟悉或者是没有多少时间设计用户界面的群体。经过一段时间的使用后，我觉得这个前端框架有以下优点。

1. 简单易用12格栅格系统，可以方便的设置响应式布局。

2. 具有完整的文档，查阅起来较为方便，对于初学者相当友好。

3. 相关组件非常多，在重构页面的时候简单调用即可。

4. 可扩展性较强，可以随意定制特定的框架组建。

5. 统一的前端框架使页面的风格统一，具有设计感。

2. 架构

3. 响应式工具的使用

本次对于Bootstrap框架的使用集中在响应式工具的运用上。
首先介绍响应式工具所要用到的四个前缀：

响应式工具

1. 可用的类：visible、hidden
   代码示例：

    visible-xs  （仅在超小屏幕可见)
    hidden-md   （仅在中屏幕隐藏）

   可以通过标签的排列组合来实现盒子的响应式排列。
   比如带有 class="visible-xs visible-sm"的盒子，只会在小屏幕和超小屏幕显示。

2. 栅格工具
   系统将所有的主要内容写于一个container容器中，容器在不同的像素范围内有着不同的宽度。栅格系统将container容器分为12个大小相等的栅格，每个栅格之间的距离为30px。

   代码示例：

   <div class="container">
       <div class="row">        
           <div class="col-md-6"></div>
           <div class="col-md-6"></div>
       </div>
   </div>

   以上示例代码就建立了2个宽度为6的栅格，栅格的类前缀为.col-md
   当系统的宽度大于992px时，这两个栅格堆叠排布（排在一行）。
   当系统的宽度小于992px时，这两个栅格水平排列（排在一列）。
   当然，类似于visible与hidden，栅格工具也能使用标签组合，来实现不同分辨率下，页面布局的改变（我的厚朴文化demo中下面6张图片，屏幕分辨率大于768px，成两行排列，小于768px，成三行排列，就是这么实现的）。

  当然，虽然该框架能够简化大部分的的工作，但是响应式布局只靠Bootstrap框架是不能实现的。还是需要用到@media 媒体查询命令。

4. 参考资料

  因为框架的文档写得足够详细，而且已经有了丰富的教程，本文仅作为抛砖引玉之用。如果对该框架有兴趣的同学可以参考以下链接：
Bootstrap3官方文档：https://v3.bootcss.com/
Bootstrap中文网：https://v3.bootcss.com/
W3C Bootstrap教程：https://www.w3cschool.cn/bootstrap/html-css-bootstrap-setup.html