做一个网站，要先有前端才有后端。对于很多个人开发者来说，前后端都要自己写，就需要有一个高效率的开发框架，说白了就是怎么省事、省力，就怎么办。

想要快速开发出前台的静态页面，bootstrap是很好的选择，它是主流的前端开发框架，能够快速构架前端页面，如果你理解了它的架构，开发一个静态的博客首页，两个小时就能搞定。

好了，进入正题，说说bootstrap。

刚开始接触bootstrap的时候，按照网上的教程，引入bootstrap的css和js文件之后，就不知道该干嘛了，不知道如何开始写标签，文档看了半天，发现这不就是一个内置了很多css类的集合吗。

没错，bootstrap的核心就是一个内置了很多css类的一个包，它内置的类都是在前端开发中经常用到的类，比如说它里面对按钮设置了很多个类名，每一个类名就是不同的样式。.btn-success就是绿色一点的按钮，.btn-info是另外一种颜色的按钮。用的时候直接在标签中加上这个类名即可，就像这样：

<a class='btn btn-success'></a>

其中btn类是把a标签变成按钮的样子，btn-success是按钮的一种风格。

bootstrap的本质就是内置了很多常用css类的一个css文件。那我们需要一下子记住所有的类名吗？不需要，刚开始的时候你也记不住，常用的记一下即可，文档要多看，当你用它做第四套网站的时候，相信你已经记得差不多了，就是实践过程中就记住了，不用刻意记。这些类看起来都是单独的，可能刚开始不知道怎么入手。

我来介绍一下它的思想。

一、核心：用于布局的栅格系统

为了很好的布局，内置了布局用的一些类，它们在一起叫做栅格系统。

先说一下最重要的一个container类。container类作为所有元素的容器，它本质上就是一个宽度自适应、居中对齐的div，就像页面中一个居中的版心一样。

因为bootstrap是移动优先的框架，它可以支持响应式布局，页面写出来之后，手机、电脑都能用。它的栅格系统承担了响应式的作用。它内置了四种屏幕宽度，xs、sm、md、lg分别对应不同宽度的屏幕，当屏幕作改变时，bootstrap利用css的媒体查询，对布局作相应的调整。

二、丰富的组件

既然bootstrap提供了很多css类，那么它一定有经常用到的一些功能模块，比如导航条、轮播图、登录页面等等，常用的一些功能它都有，我们不需要记住所有的类，只要知道它大概有什么组件，用的时候去文档上面找就行了。比如我写导航条，我就去它的中文网站看它的组件文档，找到导航条，然后复制它的示例代码，稍作修改即可，非常方便。

好了，就说到这里，如果你还不理解，请往下看。

发自内心的忠告：如果你确实想尽快入门，把前面的当成废话，赶快找一个培训机构的视频看，只有这样才能在最短的时间理解它。如果找不到，问我要。

本文系网站原创，转载请注明文章链接地址