web前端-bootstrap响应式布局的心路历程（一、简介）

之前在vue实现一些小应用的时候用过bootstrap，其实对于小白来说写css太难，因为这个需要具备很深的功底，那么不仅是css3还有JavaScript。作为小白现在也只会简单的JavaScript基础语法，css2都没用会，更别说3了。所以最快的方法就是使用别人已经写好的框架了。

bootstrap应该说是作为响应式的css框架里最出名的之一里吧。并且汉化很好，适合我们来学习和使用，

其实bootstrap用起来很简单，但是我也是看了很多视频才用的，后来发现直接看文档更快，浪费很多时间。官方：在您开始阅读本教程之前，您必须具备 HTML 、 CSS 和 JavaScript 的基础知识，其实实际用起来发现并不需要JavaScript，是要会一点点HTML和css即可。那么什么是响应式布局呢？

其实就是根据设备的大小，页面自动调整布局的技术。我是这么理解的。

首先我们看一下官方的简介：

Bootstrap 官方文档中有关网格系统的描述：

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

那么bootstrap就是通过这种网格系统来控制布局的：它将每一行划分为12个格子，你通过设置你的元素占几个格子来控制布局，如下图：

又通过md、lg、xs三个参数来设置对应的屏幕大小，比如说一个div在中等屏幕上占4个格子，在小屏幕上占2个格子，可以这样定义class：

<div class="col-md-4 col-xs-2"></div>

是不是很方便，那么bootstrap的响应式布局就介绍到这里。