bookstrap能编辑css吗,bootstrap的定制和修改

使用CSS覆盖

使用Bootstrap的class编写你自己的样式来实现。比如，增加下面代码让按钮变得圆滑。为了能够成功覆盖，记得在Bootstrap的声明之后增加你的代码。

.btn {

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

}

它的优点在于它几乎不会改变你的工作流程，但是对于更彻底的修改(比如重新设计导航栏)或是非局部的修改(比如修改适用于整个网站的高亮颜色)来说，这样东一块，西一块的覆盖样式更像是一种打补丁式的解决方案。而且你的新样式要添加到Bootstrap的默认样式表里，让本已经100 KB的文件越发臃肿。如果你不仅仅想要做一些覆盖，那就要考虑一种更具扩展性的方法了。

生成一个自定义构建

借助官方的生成器，你可以将框架内使用的关键变量设置成自己需要的值，比如说 @linkColor，@navbarHeight 和 @baseFontFamily。

深入挖掘LESS

获得源码

作为一个开源项目，Bootstrap的源码可以自由(ZIP格式)下载。

打开源码，你会发现Bootstrap的样式是用LESS而不是CSS写的。LESS 是一种动态样式表语言，相比于CSS，它支持多种优秀特性，包括选择器嵌套，创建变量(就像在上面生成器中使用的)。一旦写完，你可以选择将LESS代码预先或在运行时编译成 CSS。如果你喜欢 Sass，可以使用这个适用于Sass的Bootstrap。在 less 文件夹中，你会看到许多按照组件来划分的 LESS 文件。

组成Bootstrap源码的 LESS 文件

bootstrap.less:

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

reset.less:

始终是最先引入的文件。

variables.less 和 mixins.less:

这两个文件总是同时出现，因为其他文件都依赖于它们。前一个文件包含了在生成器网站上使用的相同的变量。

utilities.less

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

打开 LESS 文件，看看Bootstrap是如何为每个组件设置样式的。举例来说，在buttons.less中，.btn-large类的规则是这样的：

.btn-large {

padding: 9px 14px;

font-size: @baseFontSize + 2px;

line-height: normal;

.border-radius(5px);

}

如你所见，代码看起来和 CSS 非常像。但它也确实有一些 LESS 独有的功能。在font-size声明中，变量@baseFontSize——在variables.less中声明——与一个加法操作组合起来计算得到结果。在mixins.less中定义的.border-radius混合能够自动帮你处理浏览器前缀。

你可以通过修改这些 LESS 文件来实现自定义。先从variables.less中的值开始，然后再尝试下其余源码中的样式。好好享受吧！

安装LESS

npm install less

编译bootstrap.less命令：lessc bootstrap.less > bootstrap.css

如果想编译压缩版本，使用这个命令：

lessc --compress bootstrap.less > bootstrap.min.css

注意，无论使用哪种方式编译，编译的目标只能是bootstrap.less，而并非其他任何文件。

模块化你的修改

上面方法的缺陷，就是你修改的内容与原始文件纠缠在了一起。结果当Bootstrap不可避免的因为修复bug或增加新功能而进行升级时，你根本不可能将自定义的内容更新到新的版本上。

为了避免出现这个问题，你需要模块化你的修改。可以按下面的做法：

1.下载Bootstrap的源代码，文件夹名字为bootstrap

2.新创建一个单独的文件夹，取名为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";

修改内容被分隔开后，可以很轻松的升级到Bootstrap的新版本。只需要将旧bootstrap文件夹替换，再重新编译即可。

技巧与技术

下面介绍一些在你自定义Bootstrap时可能会用到的技巧与技术。

了解Bootstrap。

阅读官方文档，熟悉所有组件，深入学习源码。如果你经常需要自定义Bootstrap，在这些内容上的投入所带来的回报将会物超所值。

先从变量开始

当你使用生成器或者直接编辑源码时，先从它们支持的变量开始修改。你会发现它们就已经能够满足你的需求了。改变导航栏与基本颜色就是一个重大起步。

选择调色板

考虑网站的配色方案，特别是主要与次要颜色。这里有些优秀资源 能够提供帮助。你在调色板上选择好后，可以将这些颜色设置为变量。这样就不会看到散落在代码中的十六进制颜色值了。

增加一些资源

纹理背景与自定义字体能让世界变得大不相同。对于Web字体，你可以在代码中的任何位置加入@import语句，LESS会自动将生成的CSS代码提升到顶部。我比较喜欢将这些内容放到custom-other.less文件的顶部。

使用alpha透明

当增加box-shadow和text-shadow这样的效果时，颜色使用RGBa来定义，为旧的浏览器做好降级处理，始终使用这样的值。这会为你的组件增加内聚性。

匹配选择器

当要覆盖一个类时，试着采用Bootstrap中使用的选择器。这会保证你的类与原始类保持同步，还避免了不断升级的特异性战争。记住一点，特异性相同的情况下，后写的选择器生效。经过上面的模块化处理，你的自定义内容将始终覆盖掉原始内容。

u

封装你的代码

记住 LESS 允许嵌套选择器。利用这个特性来封装每个组件。我发现这对于保持代码的整洁与可读性有很大帮助。两段效果相同的代码里，不要这么使用

.navbar .brand { color: @white;}

.navbar .nav > li > a { color: @grayLighter;}

试试这个：

.navbar {

.brand {

color: @white;

}

.nav > li > a {

color: @grayLighter;

}

}

善用混合(mixin)

LESS提供了便利的混合，比如说lighten()与darken()。Bootstrap在mixins.less中定义的内容也归你支配。并且不要忘记，你可以随时创建自己的混合。

配合实例学习

看看其他人是如何自定义Bootstrap的。例如，一些优秀的自定义主题代码GitHub