Bootstrap学习总结

---

这篇文章是本人对于学习Bootstrap的一些总结，在此分享给大家。

1. Bootstrap是什么？

Bootstrap是一个为我们构建网站样式提供方便的框架，它分为主要分为三大块。即css样式板块、font字体板块与js插件板块。bootstrap着重于把所有样式都实现好，供我们调用，所以js板块的代码很大一部分是为了实现样式的动画效果。而字体文件可以用于生成图标，不过字体的文件比较大，一般比较少使用到。

2. Bootstrap CSS样式

Bootstrap里的CSS样式文件全部都是Less文件作为组件，导入到bootstrap.less文件中，然后再对bootstrap.less进行编译，得到bootstrap.css文件。
以下是bootstrap.less的源码

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/* Core variables and mixins (mixins文件夹里的less文件)*/
@import "variables.less";
@import "mixins.less";

/* 基础和依赖 */
/* Reset and dependencies */
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";

/* Core CSS 核心 */
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";

/* Components 各种组件 */
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "responsive-embed.less";
@import "wells.less";
@import "close.less";

/* Components w/ JavaScript */
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";

/* Utility classes */
@import "utilities.less";
@import "responsive-utilities.less";

如果想学习Less这门CSS预编译语言，不妨登录他们的官网Less，进行学习。

3. 自定义Bootstrap

由于Bootstrap里面的样式都帮我们设置好了，如一个按钮的样式，我们只需在html文件中为此按钮添加对应的类名就能渲染出很好看的按钮样式。但是如果我们要对此按钮的样式进行修改就比较麻烦了。虽然比较少样式进行修改我们还可以写写行内样式 ，但是修改的样式多起来时不仅修改困难，日后维护也将会十分困难。

综上，我们应该做的是学习Bootstrap的设计理念，基于这个理念来编写我们的自定义样式。如创建自己的按钮模块，然后在bootstrap.less中引入。同时我们已可以把项目中不需要的样式从bootstrap.less中删除对应的组件。

4. 总结

我觉得Bootstrap有两大形态：

①原始形态。不限制页面样式或对于样式无要求时网页的快速搭建，如后端工程师写页面时可以直接套用Bootstrap的默认样式，对数据进行简单的呈现；

②高度定制化形态。有设计要求的响应式页面，如必须按照PSD图进行网页的搭建时就需要前端工程师按照设计要求进行组件的创建，然后引入需要的bootstrap模块（常用的组件有grid.less）实现高度定制化后的Bootstrap。