定制自己的Bootstrap样式

bootsrap

本文主要针对对Bootstrap有所了解，或者使用过Bootstrap的读者提供参考。
官方提供了个性化定制功能 ,可以选择自己需要的组件，插件，自己设置不同模块的less变量，最后从官网下载到一份编译后的个性化bootsrap。

如果是比较复杂的项目，虽然官网开放的变量上百个，但还是不能满足业务需求，这时候就需要下载源码修改less文件，bootstrap是通过less预编译的。

less介绍

less是一种动态样式语言。LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数.
使用less可以这样写css：

@base: #f938ab;.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

less文件需要编译器才能转化为css文件。体验less编译可以在在线less编译器中编写less语句，然后编译成css文件。gulp使用gulp-less实现编译。

变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。例如：

 // LESS@color: #4D926F;#header {
  color: @color;
}
h2 {
  color: @color;
}

编译之后的css文件：

/* 生成的 CSS */#header {  color: #4D926F;
}h2 {  color: #4D926F;
}

混合

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

// LESS.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}#header {
  .rounded-corners;
}#footer {
  .rounded-corners(10px);
}

编译后的css文件

* 生成的 CSS */#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

嵌套规则

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

// LESS#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

编译后的css文件：

/* 生成的 CSS */#header h1 {  font-size: 26px;  font-weight: bold;
}#header p {  font-size: 12px;
}#header p a {  text-decoration: none;
}#header p a:hover {  border-width: 1px;
}

函数 & 运算

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

// LESS@the-border: 1px;
@base-color: #111;@red:        #842210;#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

编译后的css文件：

/* 生成的 CSS */#header {  color: #333;  border-left: 1px;  border-right: 2px;
}#footer { 
  color: #114411;  border-color: #7d2717;
}

bootstrap源码

Bootstrap 插件全部依赖 jQuery
请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本模版中所展示的一样。在 bower.json 文件中 列出了 Bootstrap 所支持的 jQuery 版本。

下载源码

bootsrap源码托管于github，可以通过git命令克隆仓库：

git clone https://github.com/twbs/bootstrap.git

还可以通过包管理工具bower安装：

bower install bootsrap

运行次命令后，bower会下载最新版的bootsrap源码包到项目中。

源码解读

Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件，并且还有 LESS、JavaScript 和文档的源码。具体来说，主要文件组织结构如下

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/、js/ 和 fonts/ 目录分别包含了 CSS、JS 和字体图标的源码。dist/ 目录包含了编译后的bootsrap的css文件。docs/ 包含了所有文档的源码文件，examples/ 目录是 Bootstrap 官方提供的实例工程。除了这些，其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。

bootstrap/less目录下的文件均为.less文件，是bootsrap样式的主要代码，不同的文件根据功能及性质命名。

• bootstrap.less:
  这个是核心文件。它用来引入其他文件，最终由你来编译它。

• reset.less:
  初始化文件，始终是最先引入的文件。

• utilities.less
  这个文件总是最后引入，你可以把想要覆盖的类写到这里。

模块化修改

为了让修改的内容和原始文件分离开，需要引进模块的方式，这样的好处是如果bootstrap升级的时候，也不影响自定义后的样式文件。由于less文件可以相互引入，因此很容易实现了模块化
在bootsrap文件外边平级创建一个custom文件夹，并创建以下文件

• custom-variables.less:
  我从Bootstrap源码中复制了一份variables.less并在这份拷贝中修改变量。

• custom-other.less:
  这个文件中包含了那些无法定义成变量的自定义内容。

• custom-bootstrap.less
  这是新的「核心」文件。我们将把它编译成CSS。与原始的 LESS文件一样，它使用下面的命令来引入上面那两个自定义文件：

@import "../bootstrap/less/bootstrap.less";
@import "custom-variables.less";
@import "custom-other.less";
@import "../bootstrap/less/utilities.less";

这样等bootsrap版本升级的时候也能轻松实现升级。

可视化修改

最后提供两个可视化修改bootsrap变量的网站
bootswatchr 通过修改变量值实现。
stylebootstrap 通过组件化组织内容。

参考资料：

http://www.bootcss.com/p/lesscss/#docs
http://www.w3cplus.com/css/customizing-bootstrap.html
Thomas Park 《Customizing Bootstrap》

作者：墨鸿
链接：https://www.jianshu.com/p/2dc0ab5e6377