Bootstrap 自定义

整理自慕课笔记

局限性

很多时候在创建 Web 页面或应用的时，需要自己独立的 UI 界面效果，此时仅仅使用 Bootstrap 框架并不能满足我们自身 UI 的需求，也造成要写很多的样式代码来覆盖 Bootstrap 框架提供的样式代码。如此一来，这也失去使用 Bootstrap 框架的意义。
很多同学会问，我要使用Bootstrap框架，而且还要让其出来的 UI 界面效果能和满足自己的UI设计效果。

解决方法

在 Bootstrap 框架中提供多种方式来自定义 Bootstrap，让 Bootstrap 框架适合自己的需求，接下来，简单的向大家介绍怎样自定义 Bootstrap 框架。
自定义Bootstrap框架主要有两种方式来实现：
1. 使用 CSS 预处理器语言
2. 使用在线自定义设置

使用 CSS 预处理器语言

在学习 Bootstrap 框架的使用时，可以看到 Bootstrap 框架中很多组件的 UI 效果都有对应的 LESS 版本和 Sass 版本源码。其实需要自定义 Bootstrap 框架，完全可以在这些组件的 LESS 或 Sass 源码文件上进行修改，然后将修改好的源码重新编译出 bootstrap.css 文件，从而实现适合自己的 UI 界面风格。
使用 CSS 预处理器语言来重新定义 Bootstrap 框架有一个前提条件，那就是开发人员会使用 LESS 或 Sass 预处理器语言，否则要在此基础上实现 Bootstrap 框架自定义不是一件容易的事情。不过大家不用担心，就算你不懂 LESS 或 Sass 也不用怕，可以通过在线自定义设置来实现自定义 Bootstrap 框架。

使用在线自定义设置

在Bootstrap框架的官网为大家提供了一个在线自定义 Bootstrap 框架的配置页面 http://getbootstrap.com/customize/　，可以通过这里进行配置。
在线自定义设置主要包括三个部分：
1. Bootstrap 组件
2. Bootstrap 插件
3. Bootstrap 的 LESS 版本变量设置
我们只需要根据自己的需求设置完成之后，点击最底部的下载按钮就可以得到自定义后的 Bootstrap 框架。