前言

本篇文章开始对Bootstrap的简述及它所包含内容的大致了解。对于Bootstrap概念的理解，对于学习这块知识起着非常重要的作用。

一、Bootstrap概念及优点（使用Bootstrap的原因）

1.概念：

首先，Bootscript是目前比较受欢迎的前端框架。其次，它是基于HTML、CSS、JAVASCRIPT的，它使得Web开发比较的快捷。（主要是栅格系统使得布局更加的方便）。最后，它还是GitHup上发布的开源产品。

2.优点（原因）：
（1）移动设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。什么是移动设备优先？在这里解释一下。移动设备优先是起初的样式是在移动设备上写的，在写到sm尺寸的时候起初的样式就得改变了，于是就加media screen max-width >=768， 再写sm的样式，这样尺寸递进就完成了所有的媒体查询。其中移动设备优先的栅格系统，屏幕和视口会随着屏幕尺寸的增大而改变。
（2）浏览器支持：比如说，现在的主流浏览器谷歌，IE等都支持Bootstrap。
（3）响应式设计：Bootstrap的响应式CSS能够适应台式机，平板电脑和手机。如果是css写的话，其中尺寸的问题就会出现很大的问题。
（4）容易上手：具备HTML和CSS的基础知识，就可以学习。

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、Bootstrap基本结构

1.Bootstrap网格系统

• 概念：Bootstrap包含了一个响应式地，移动设备优先的，不固定的网格系统，可以随着设备或者视口大小的增加而适当的扩展到12列。（Bootstrap代码从小屏幕设备开始，然后扩展到大屏幕设备上的组件和网格）。
• 工作原理：
  
• 基本的网格结构：
  

2.媒体查询

1. 概念：它是“有条件的CSS规则”。只适用于一些基于某些规定条件的CSS。只有满足这些条件，才会显示相应的样式。
2. 内容：

3.网格选项（网格系统如何跨多个设备工作）

注：此图对于网格系统的跨设备工作总结的很详细（参照于Bootstrap菜鸟教程）

总结

在写完网格系统在其它设备的应用之后。后面还有一些内容，比如说响应式的列重置，偏移列，嵌套列和列排序这些内容没有总结在本篇的文章中，大家可以参考Bootstrap来进行学习。若有错误和不足之处，希指正。