`

自定义Bootstrap

 
阅读更多
原文地址:http://www.w3cplus.com/css/customizing-bootstrap.html

特别声明:此篇文章由Sunnylost根据Thomas Park的英文文章原名《Customizing Bootstrap》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap以及作者相关信息
——作者:Thomas Park

——译者:Sunnylost

自从一年前Twitter推出Bootstrap以来,它的推广程度就像火箭发射一样节节攀升。这个广受欢迎的CSS框架为众多网站提供了响应式网格系统,预定义样式的组件与JavaScript插件。

Bootstrap的设计初衷之一就是实用。当你要新建网站时,Bootstrap绝对是一个节约时间的利器,以至于许多庞大的组织比如NBC,NASA还有白宫都选择了它。它甚至还可以让我们之中不懂设计的人也能做出很体面的网站。

举个例子,要想将下面左边的默认按钮变成右面漂亮的按钮,你只需要增加两个class:btn与btn-primary。

bootstrap

浏览器默认按钮(左)与Bootstrap按钮(右)

但如果你公司的logo使用了不一样的蓝色阴影呢?别担心,你没有必要坚持使用默认主题。这篇文章将介绍几种自定义Bootstrap的方法来满足你的需求,不管你是想微调一个按钮,还是一个完整的主题。

bootstrap

来自于Bootswatch的三种Bootstrap主题


使用CSS覆盖

最直接的方式是用CSS覆盖掉Bootstrap的默认样式。可以通过针对Bootstrap中使用的class编写你自己的样式来实现。比如说,可以通过增加以下代码来使你的按钮变得更圆滑:

.btn {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}
bootstrap

一个增加了border radius的自定义的Bootstrap按钮。

为了能够成功覆盖,记得在Bootstrap的声明之后增加你的代码。

这种方法的优点在于它几乎不会改变你的工作流程。即便使用了Bootstrap,你还是需要自己的样式表来使框架适合你的内容。你可能没有意识到,Bootstrap自己的网站还依赖了除Bootstrap框架外的上千行样式。

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

生成一个自定义构建

一个替代方案是创建一个彻底的自定义构建。借助官方的生成器,你可以将框架内使用的关键变量设置成自己需要的值,比如说 @linkColor,@navbarHeight 和 @baseFontFamily。点击生成器页面底部的大按钮就可以下载最终的样式表。你甚至还能对框架包含的组件进行挑选,这样能够减少文件的体积。

bootstrap

一些能够在官方生成器中设置的变量。

网上还有一些第三方生成器。与官方版本不同,它们提供了调整变量时的动态预览效果。Bootswatchr网站使用变量来组织,而StyleBootstrap则使用组件。BootTheme添加了扔骰子特性来随机设置值。如果幸运女神不站在你这边,Lavish能够根据你提供的任何图片来生成一个主题,PaintStrap则是根据已有的配色方案来生成。

深入挖掘LESS

即便有上百个能定制的变量,你可能还是会发现生成器有诸多限制。或者你不想在浏览器中完成这样的工作,因为这会减少与你的工作流程的集成度。无论处于哪种情况,都是时候深入研究下Bootstrap的源码了。

获得源码

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

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

在 less 文件夹中,你会看到许多按照组件来划分的 LESS 文件。

bootstrap

组成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

在你做完修改并准备查看效果时,你需要把文件编译成 CSS。要完成这个工作,你需要先安装 LESS。关于安装有许多方式;对于初学者来说,我建议使用一个叫做LESS.app的客户端程序。如果你喜欢命令行,可以选择安装包含Node Package Manager(NPM)的Node.js。然后执行如下命令:

npm install less
当安装结束后,你可以这样来编译bootstrap.less:

lessc bootstrap.less > bootstrap.css
如果想编译压缩版本,使用这个命令:

lessc --compress bootstrap.less > bootstrap.min.css
无论你使用哪种方式编译,编译的目标只能是bootstrap.less,而并非其他任何文件。

模块化你的修改

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

为了避免出现这个问题,你需要模块化你的修改。这是我为Bootswatch制作主题时的采取的方法。

首先,我下载了Bootstrap的源代码,把它的名字修改为bootstrap后原封不动的放好。我并没有对它包含的文件进行任何修改,而是新创建了一个单独的文件夹,取名为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文件夹替换,再重新编译即可。

我为这种方法创建了一个叫做swatchmaker的样板文件。它还包含了其他内容,例如测试页面和更新Bootstrap到最新版的命令,当修改被保存时执行自动编译,还可以重置你自定义的内容。

技巧与技术

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

了解Bootstrap。

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

先从变量开始
当你使用生成器或者直接编辑源码时,先从它们支持的变量开始修改。你会发现它们就已经能够满足你的需求了。改变导航栏与基本颜色就是一个重大起步。
选择调色板
考虑网站的配色方案,特别是主要与次要颜色。这里有些优秀资源 能够提供帮助。你在调色板上选择好后,可以将这些颜色设置为变量。这样就不会看到散落在代码中的十六进制颜色值了。
增加一些资源
纹理背景与自定义字体能让世界变得大不相同。对于Web字体,你可以在代码中的任何位置加入@import语句,LESS会自动将生成的CSS代码提升到顶部。我比较喜欢将这些内容放到custom-other.less文件的顶部。
使用alpha透明
当增加box-shadow和text-shadow这样的效果时,颜色使用RGBa来定义,为旧的浏览器做好降级处理,始终使用这样的值。这会为你的组件增加内聚性。
匹配选择器
当要覆盖一个类时,试着采用Bootstrap中使用的选择器。这会保证你的类与原始类保持同步,还避免了不断升级的特异性战争。记住一点,特异性相同的情况下,后写的选择器生效。经过上面的模块化处理,你的自定义内容将始终覆盖掉原始内容。
封装你的代码
记住 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获取到。
你想添加自己的技巧吗?请分享在下面的留言中吧。

总结

如果你注重性能——通常来说应该如此——那么你最好在一个更轻量级的基础上实现自己的解决方案。

但如果你的首要目标是尽快上线你的网站,或者前端开发并非你的强项,那么Twitter Bootstrap可能正适合你。许多人就是因为Bootstrap的人气而纷纷转向这个阵营。

鉴于Bootstrap在Web上的大量应用,你要学习它的所有优点并让其为你所用。

扩展阅读

How to Build a Website Using Twitter Bootstrap and SASS – Part 1
How to Build a Website Using Twitter Bootstrap and SASS – Part 2
GETTING STARTED WITH BOOTSTRAP: PART 1 OF SERIES
GETTING STARTED WITH BOOTSTRAP: PART 2 OF SERIES
GETTING STARTED WITH BOOTSTRAP: PART 3 OF SERIES
How to Customize Twitter Bootstrap’s Design in a Rails app
How to use Twitter Bootstrap to Create a Responsive Website Design
Twitter BootStrap:前端框架利器
CSS——Bootstrap From Twitter
Mark Otto(马克奥托)的BootStrap.less
Preboot
Twitter Bootstrap Tutorials
The Best BootStrap Resources
——大漠

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

关于Sunnylost

08年开始自学java,09年加入北漂行列,从事Java Web工作,出于对JavaScript的喜爱,在2011年以外包身份进入新浪微博从事JS开发,目前就职于一淘。由于工作关系,逐步接触CSS,开始完善自身的前端技能。欢迎随时关注我:新浪微博

如需转载烦请注明出处:

英文原文:http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/

中文译文:http://www.w3cplus.com/css/customizing-bootstrap.html
分享到:
评论

相关推荐

    自定义bootstrap导航栏 下载

    9行代码实现一个自定义bootstrap导航栏,高端大气很简洁

    Bootstrap-table自定义可编辑每页显示记录数.docx

    Bootstrap-table 自定义可编辑每页显示记录数 Bootstrap-table 是一个基于 Bootstrap 的表格插件,它提供了许多实用的功能,如排序、过滤、分页等。然而,在实际应用中,我们可能需要根据特定的需求来自定义表格的...

    custom-bootstrap-example:使用带有bootstrap-sass和bower的自定义Bootstrap构建的示例

    使用Bower自定义Bootstrap SASS构建 该项目演示了自定义Bootstrap SASS构建的示例。 此示例项目使用Bower安装Bootstrap,并使用Gulp使用gulp-sass构建CSS。 要构建CSS,请运行gulp : $ gulp 构建CSS后,请在网络...

    在ASP.NET Core 2.2 Web应用程序项目中自定义Bootstrap

    在这个项目中,我们关注的是如何在ASP.NET Core 2.2的Web应用程序中自定义Bootstrap,以便为用户提供更个性化的界面体验。 Bootstrap是一个流行的前端开发框架,它提供了丰富的UI组件、响应式布局和移动设备优先的...

    基于bootstrap的jquery弹出层确认框插件

    PopConfirm是一款基于bootstrap的jquery弹出层确认框插件。该jquery弹出层确认框插件兼容bootstrap2和bootstrap3。它能够使用bootstrap Popover来替代确认框功能,非常方便。

    instant-bootstrap:立即在您的页面上自定义 Bootstrap 3!

    立即在您的页面上自定义 Bootstrap 3! 执照 麻省理工学院许可证 (MIT) 版权所有 (c) 2015 pswai 特此授予任何人免费获得本软件副本和相关文档文件(“软件”)的许可,不受限制地处理本软件,包括但不限于使用、...

    jmcglone.github.io:jmcglone.com的数据。 包括自定义Bootstrap 3.0。 Jekyll生成的博客和页面。 托管在GitHub上

    包括自定义Bootstrap 3.0。 Jekyll生成的博客和页面。 托管在GitHub上。 本网站上的所有内容均根据。 注意:如果您分叉或重新使用此项目,请确保您: 编辑_includes/analytics.html然后用您自己的代码替换Google ...

    一个自定义jenkins的启动文件,里面内容大家可以自己改

    一个自定义jenkins的启动文件,里面内容大家可以自己改,一键桌面启动bat

    custom-bootstrap-cards:自定义Bootstrap 4卡。 我从定制的Foundation 6卡中汲取了灵感,对它们进行了抛光和重新加工后制成Bootstrap 4

    Bootstrap 4 是一个广泛使用的前端框架,用于快速构建响应式和移动优先的网站。...同时,这个项目也为我们提供了一个学习如何自定义Bootstrap组件的实例,有助于提升我们对前端开发的理解和实践能力。

    Bootstrap开发精解 随书代码

    了解如何根据项目需求自定义Bootstrap,包括改变颜色主题、字体大小、间距等,以及如何使用官方提供的Sass版本进行深度定制。 6. **响应式设计** 学习Bootstrap的响应式工具,如媒体查询(Media Queries)和隐藏/...

    bui-bootstrap.zip

    5. **LESS或SASS文件**:对于开发者来说,原始的LESS或SASS源码可以帮助他们根据需求自定义Bootstrap的主题。 6. **文档**:可能会有一个README文件或文档目录,提供关于如何使用这个自定义Bootstrap的信息。 7. *...

    bootstrap.min.js和bootstrap.min.css

    在实际项目中,你可以根据需求自定义Bootstrap,例如改变主题颜色、调整字体大小或者修改某些组件的行为。这通常通过覆盖默认的CSS样式或者使用SASS(Syntactically Awesome Style Sheets)预处理器来实现。另外,你...

    bootstrap_4.0_template

    通过Sass(预处理器)和Webpack,开发者可以自定义Bootstrap的颜色、字体、间距等,以适应特定项目的需求。"bootstrap_4.0_template"可能包含了这些配置文件,帮助你快速定制自己的风格。 6. **字体与图标** ...

    bootstrap-4.6.2

    5. 自定义Bootstrap,通过修改SCSS或LESS源码,调整颜色、间距等设计细节,然后重新编译生成自己的CSS文件。 总的来说,Bootstrap 4.6.2是一个强大而灵活的工具,为开发者提供了构建高质量网站所需的一切,无论是在...

    bootstrap库文件+源文件+中文文档离线网页+网站例子

    开发者可以修改源文件以自定义Bootstrap的主题或增加新的样式。 3. **中文文档离线网页**:这是一份完整的Bootstrap中文文档,可以在没有网络连接的情况下查看。文档详细介绍了Bootstrap的各个组件、API、最佳实践...

    bootstrap 3.3.4 中文文档

    “定制并下载 Bootstrap”部分指导开发者如何根据项目需求自定义Bootstrap的CSS、JavaScript和字体资源。你可以选择要包含的组件、插件和主题,调整变量来改变颜色、间距等设计细节,然后生成定制的压缩包进行下载,...

    bootstrap table 分页栏修改

    在本项目中,我们关注的是如何自定义Bootstrap Table的分页栏,使其外观和功能更接近jqGrid。 首先,jqGrid是一款强大的jQuery插件,主要用于处理和展示大量的数据,其分页栏功能强大,样式精致。在Bootstrap Table...

    bootstrap-3.4.1.zip

    4. **LESS和SASS源文件**:如果你需要自定义Bootstrap的样式,可以在`less`或`scss`目录下找到源代码。LESS和SASS是预处理器,允许你编写更结构化的CSS,并提供了变量、嵌套规则和混合等功能。 5. **文档**:`docs`...

    Bootstrap离线文档.zip

    同时,了解如何自定义Bootstrap,比如改变主题颜色、调整字体大小或者添加自定义CSS,也是十分重要的。 为了熟练掌握Bootstrap,建议按照以下步骤进行学习: 1. 阅读`v3.bootcss.com`下的文档,理解每个组件的工作...

    bootstrap- 編譯版.zip

    开发者可以在这个文件中查看并理解每一条样式规则,这对于调试和自定义Bootstrap的样式非常有用。未压缩意味着代码间距较大,易于阅读,但加载速度相对较慢。 2. **bootstrap.min.css**: 这是bootstrap.css的压缩...

Global site tag (gtag.js) - Google Analytics