定制自己的Bootstrap样式正规网赌平台

Bootstrap(http://twitter.github.com/bootstrap)默认是12列的栅格布局(http://twitter.github.com/bootstrap/scaffolding.html\#gridSystem),有时候不满足我们布局的需求,这时侯,可以通过修改less/variables.less文件中关于栅格布局的变量就可以了。

源码解读

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
    这个文件总是最后引入,你可以把想要覆盖的类写到这里。

比如我们想修改改为24列的栅格布局,可以参考以下我修改的配置参数:

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实现编译。

修改完成后,在Bootstrap源码目录重新执行编译命令:make
bootstrap,这样就可以得到修改过后的bootstrap所有文件。

函数 & 运算

运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。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;
}

嵌套规则

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

// 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;
}
// GRID  // --------------------------------------------------      // Default 940px grid  // -------------------------  @gridColumns:             24;  @gridColumnWidth:         30px;  @gridGutterWidth:         10px;  @gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));    // 1200px min  @gridColumnWidth1200:     35px;  @gridGutterWidth1200:     15px;  @gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));    // 768px-979px  @gridColumnWidth768:      21px;  @gridGutterWidth768:      10px;  @gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));  

模块化修改

为了让修改的内容和原始文件分离开,需要引进模块的方式,这样的好处是如果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版本升级的时候也能轻松实现升级。

同理,由于Bootstrap是基于less的,我们可以很方便的通过修改less/variables.less中的变量,定义和生成满足自己需求的bootstrap样式。

参考资料:

正规网赌平台,http://www.bootcss.com/p/lesscss/\#docs
http://www.w3cplus.com/css/customizing-bootstrap.html
Thomas Park 《Customizing
Bootstrap》

http://www.cnblogs.com/TerryLiang/archive/2013/02/19/2916460.html

下载源码

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

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

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

bower install bootsrap

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

相关文章