第5章 深入了解：自定义Bootstrap
想象一下，一个网站，所有的网站都是用Bootstrap构建的，看起来和感觉都一样。无聊,对吧?幸运的是，我们有能力改变我们使用的任何框架的默认样式。
许多Bootstrap的组件和插件都有自己的默认样式。为了给他们一个特别的体验，你需要替换他们的CSS规则并定义你的自己的。
在第一章，我和大家分享了一些建立在Bootstrap上的流行网站。它们都有自定义的Bootstrap的CSS，以使它们的模板看起来独一无二且美观。
在本章中，我们将讨论可以完全自定义Bootstrap默认样式的各种方法，并分析哪种方法更可取，为什么。最后，我们将尝试理解Bootstrap的CSS是如何编写的，使它成为一个高度响应的框架。
自定义Bootstrap样式
您可以通过各种方式自定义引导程序。在本节中，我们将通过静态CSS文件和较少的文件进行自定义。
什么是Less？
Less是一个CSS预处理器，它扩展了CSS功能，添加了诸如变量、混合、函数等编程特性。
它保持CSS模块化、可维护和可扩展。
更少的文件被编译来生成CSS文件，然后你可以在你的项目中使用。
如果你使用Ruby,Sass是一个替代选择。
它也是一个CSS预处理器，Bootstrap支持;然而，我们不会在本书中涵盖Sass的定制。
带有Bootstrap默认包的样式表是普通的CSS文件。如果您使用文本编辑器打开静态CSS文件，您将发现许多选择器及其相关的CSS属性。您可能会倾向于在这些文件中直接更改CSS属性及其值，以节省时间，但我强烈建议您不要使用它!
直接修改CSS文件有很多缺点。尤其是下列一些:
1、这些变化是不可逆的。您将不记得最初出现的CSS属性和它们的值，因此您将无法还原回原来的引导样式。
2、您对一个选择器所做的任何更改可能会破坏Bootstrap的响应性。
3、调试变得非常困难;您需要了解CSS继承链来到达父选择器。
在我们进入定制阶段之前，让我们首先来建立本章中将要使用的项目。和往常一样，我们将使用在第1章中创建的项目Bootstrap_demos。将所有内容复制到一个名为Chapter_5的新文件夹中。并更改index.html页面标题为“Customizing Bootstrap”。现在将<h1>标记从<body>中删除。
使用CSS自定义Bootstrap
这种类型的定制通常被称为覆盖默认的CSS。我们实际上用我们自己的自定义值覆盖了一些Bootstrap的CSS属性。
首先，我们在/css文件夹中创建一个名为app.css(或任何你想要的)的新文件。然后我们打开index.html并链接到新的CSS文件。这个新CSS文件的链接应该包含在Bootstrap的CSS文件的链接下面:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
让我们添加一个Bootstrap按钮，如图5.1所示。
<div class="container">
<a href="#" class="btn btn-primary btn-lg">Big Fat Button</a>
</div>
Figure
图5.1
我们将使用它展示如何对其默认设计进行一些更改:
1、从这个按钮上删除圆角
2、改变填充量
3、调整字体大小
4、改变背景颜色
让我们使用开发工具来检查这个按钮。我们将使用Chrome，如图5.2所示，但是您可以使用任何类似的工具，比如Firefox中的Firebug。填充、字体大小和边界半径等属性来自btn类，而属性背景则应用于类btn-primary。要修改它们，我们需要在CSS文件app.css中使用相同的选择器重写属性。
图5.2
打开app.css加入下列CSS代码:
.btn{
border-radius: 0;
padding: 5px 10px;
font-size: 16px;
}
.btn-primary{
background: #63AEF0;
}
如果我们刷新页面，我们的按钮应该看起来像图5.3。
图5.3
注意，我们使用了Bootstrap类btn和btn - primary来覆盖CSS样式。从此以后，每当您使用Bootstrap的按钮组件时，它将会有一个类似于图5.3的更改样式。要还原回原来的样式，我们只需从app. CSS文件中删除CSS样式。
如果您想要更改web页面中仅一个特定按钮的样式，而不是针对Bootstrap的选择器，请使用ID来应用CSS更改。
使用Less自定义Bootstrap
如果您是一个Less的开发人员，您将喜欢这个部分，因为有很多选择，可以使用Less的自定义Bootstrap。每个Bootstrap组件都可以轻松地更改它们的属性。要访问所有Less文件，您需要下载一个特定版本的Bootstrap。请登录http://getbootstrap.com/docs/3.3/getting-started/#download并点击[Download source]按钮(选择下载源代码)。这个源代码包包含编译后的和原始的Less文件。【注：在翻译这本书的时候，Bootstrap已经推出了v4.0.0-beta版本，但建议在推出稳定版本后再去用于实际项目】
Less文件位于Less文件夹内。在这里，你会发现很多根据Bootstrap的组件命名的.less文件。所有与特定组件相关的CSS属性和值都存在于相应的.less文件中。您还将找到一个bootstrap.less，这是.less主文件。它包含了该文件夹中的所有的less文件。您只需要编译此文件就可以生成定制的Bootstrap样式。让我们把这个文件夹里的所有文件分类。
Bootstrap的Variables和Mixins
所有Bootstrap中使用到的变量和混入分别放在两个文件中：
1、variables.less 包含了Bootstrap中使用的全部标准颜色，默认的响应宽度值、默认填充值和边界值。如果你想做任何这样的改变，你需要处理这个文件。
2、mixins.less 包含用于生成前缀的混入，并动态计算网格的宽度、占位符、按钮大小等。
复位文件
这里有两个复位文件去清除浏览器的默认值:
- normalize.less清除了许多浏览器默认设置如字体，字体大小，填充和边距，标题标签设置，表单元素的样式，等等。
2、print.less包含打印支持媒体查询。
核心文件
这里有七个核心文件
1、scaffolding.less包含所有辅助类的图像（如img响应。IMG圈），对各种状态的链接元素，风格水平规则，屏幕阅读方式，等等。
2、type.less是一个排版文件，它包含了标题标签、段落标记和其他与内容相关的助手类的样式，例如.lead、.text-muted等等。
3、code.less包含CSS属性，用于样式化web页面上的任何代码。
4、grid.less涉及到在Bootstrap网格系统上应用的所有CSS值。
5、tables.less用于装饰<table>元素的样式。它还为诸如此类的表定义各种助手类，例如：table-condensed。table-bordered等等。
6、forms.less美化窗体元素，如文本框、复选框、单选按钮等等。
7、buttons.less包含各类Bootstrap按钮风格造型。这里定义了所有与按钮相关的类。
组件文件
这里有Bootstrap的21个组件文件；前一章所涵盖的每个组件都有自己的文件。与组件相关的所有CSS定义都可以在其对应的less文件中找到。
■ component-animations.less
■ glyphicons.less
■ dropdowns.less
■ button-groups.less
■ input-groups.less
■ navs.less
■ navbar.less
■ breadcrumbs.less
■ pagination.less
■ pager.less
■ labels.less
■ badges.less
■ jumbotron.less
■ thumbnails.less
■ alerts.less
■ progress-bars.less
■ media.less
■ list-group.less
■ panels.less
■ wells.less
■ close.less
这个列表中还有一个文件，实际上它本身不是一个组件，close.less。它包含了将用于模式按钮的CSS规则，警报，以及关闭此特定组件的其他元素。
插件文件
这里有四个.less文件定义了通过引导标记触发或创建的JavaScript插件的CSS样式：
■ modals.less
■ tooltip.less
■ popovers.less
■ carousel.less
实用程序文件
最后，我们在Bootstrap中有两个实用程序文件
■ utilities.less
■ responsive-utilities.less
这些文件定义了帮助我们更好地组织Bootstrap组件的类。它们帮助其他类，比如.clearfix从它周围的所有元素中清除一个组件。.hide和 .show用来切换组件可见性。例如，responsive-utilities.less包含visible-lg .hidden-sm这样的可见性实用工具。
使用Less覆盖样式
让我们使用Less覆盖模式对话框的样式。我们将自定义modals.less，提供一个扁平化设计，去掉圆角，减少阴影。我们也将改变模式对话框的背景颜色和字体颜色,让我们打开modals.less并做这些改变。
模式对话框的圆角是通过类modal-content提供的。让我们在modals.less找到这个选择器。应该是这样的：
// Actual modal
.modal-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-fallback-border-color;
➥//old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-large;
.box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: 0;
}
从这代码中，我们可以看见圆角由属性border-radius设定，它的值是作为一个Less变量在variables.less中初始化的。让我们注释这一行来去除圆角。
// Actual modal
.modal-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-fallback-border-color;
➥//old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
// border-radius: @border-radius-large;
.box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: 0;
}
现在，我们来减少阴影。分析代码，我们可以看到.box-shdow()混入是在CSS中产生阴影属性的原因。这个混入只定义在mixins.less文件中的，阴影的参数被传给这个混入。让我们根据我们的要求改变这个值。阴影效果是由参数的第三项设定的，当前值是9px。让我们把这个值减少到2px。因此，我们的选择器现在应该如下所示：
// Actual modal
.modal-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-fallback-border-color;
➥//old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-large;
.box-shadow(0 3px 2px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: 0;
}
我们还需要更改媒体查询属性(media queries)中的box-shadow值，该查询覆盖了前面的更改。我们很快将学习媒体查询。不过现在，你需要理解的是Bootstrap 对于不同大小的设备有不同的CSS规则。让我们继续，并在modals.less中找到媒体查询属性（@media）：
// Scale up the modal
@media (min-width: @screen-sm-min) {
// Automatically set modal's width for larger viewports
.modal-dialog {
width: @modal-md;
margin: 30px auto;
}
.modal-content {
.box-shadow(0 5px 15px rgba(0,0,0,.5));
}
// Modal sizes
.modal-sm { width: @modal-sm; }
}
让我们在媒体查询中给box-shadow定义一个新的值传递给.box-shadow()混入：
// Scale up the modal
@media (min-width: @screen-sm-min) {
// Automatically set modal's width for larger viewports
.modal-dialog {
width: @modal-md;
margin: 30px auto;
}
.modal-content {
.box-shadow(0 5px 2px rgba(0,0,0,.5));
}
// Modal sizes
.modal-sm { width: @modal-sm; }
}
让我们改变模式对话框的背景颜色。我们将使用一个在variables.less中预定义的变量@brand-info设置模式对话框的背景颜色。这个变量初始化为#5bc0de，是淡蓝色的。文字颜色，让我们在同一文件中使用设置为#fff的@body-bg参数。现在，修改后的modal-content选项卡将如下所示：
// Actual modal
.modal-content {
position: relative;
background-color: @modal-content-bg;
border: 1px solid @modal-content-fallback-border-color;
➥//old browsers fallback (ie8 etc)
border: 1px solid @modal-content-border-color;
border-radius: @border-radius-large;
.box-shadow(0 3px 9px rgba(0,0,0,.5));
background-clip: padding-box;
// Remove focus outline from opened modal
outline: 0;
background: @brand-info;
color: @body-bg;
}
我们已经完成了所有定制的计划，但我们最后还需要修改modal-backdrop选择器。modal-backdrop是一个透明层，当模式对话框组件被触发时，它将出现在modal-content后面。
让我们把modal-background的背景色从黑变成白：
// Modal background
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal-background;
background-color: @body-bg;
// Fade for backdrop
&.fade { .opacity(0); }
&.in { .opacity(@modal-backdrop-opacity); }
}
最后，我们完成了全部的自定义，是时候去编译bootstrap.less导入modals.less了。一旦这个.less文件被编译去生成Bootstrap.css,你可以在你的项目中替换旧的Bootstrap.css(我们将在下节讨论如何编译Less文件)。从此，无论何时你使用模式对话框，它都将使用自定义样式。图5.4是显示定制模式组件的屏幕截图。
图5.4
编译Less
编译Less是相对简单的。在这里，我将向你们展示一些标准的方法。
使用Node
如果你已经安装了Node，你可以用Node的包管理工具(npm)来安装less编译器.
一旦less编译器安装完毕，使用下面的命令去把bootstrap.less编译成bootstrap.css.你需要在命令行工具中切换到/less目录，然后输入命令：
$ lessc bootstrap.less > bootstrap.css
使用第三方软件
这里有一些可视化的第三方软件用于编写和编译Less代码。比较流行的有Crunch!, SimpLESS,Mixture。【注：在window下可以使用WinLess】
在下载前自定义Bootstrap
是的，你没有听错，Bootstrap允许你编辑和旋转这些你希望出现在你自己的自定义Bootstrap包中的功能。
这是每一个Less变量边上都有一个字段，所以如果你不知道如何去使用Less，你可以使用这个表单去编辑默认值。每一个Bootstrap组件和插件也都有一个多选框。如图5.5所示，你可以不选择你不需要使用的。
图5.5
不选择特定的组件可能也会关联取消选择有依赖关系的组件。例如，在自定义页面上不选择Forms(表单)也将自动不选择Input groups(输入组件)和Navbar(导航条)。因此，选择时要小心。
【注：Bootstrap 3.3版本的自定义页面的链接是http://getbootstrap.com/docs/3.3/customize/】
媒体查询(Media Queries)和Bootstrap
媒体查询被作为CSS3的一部分引入，用来根据屏幕分辨率动态控制网站内容。它是今天可用的每一个响应框架下的关键技术之一。Bootstrap使用媒体查询来正确定义许多CSS规则，使之成为响应框架。
如果想自定义Bootstrap的响应网格系统，理解媒体查询是很重要的。让我们来看一个简单的媒体查询：
@media all and (min-width: 699px){
h1{
display: none;
}
}
每个媒体查询都应该有一个媒体类型和一个表达式。媒体类型指定链接文档将显示在什么类型的设备上。在这里，媒体类型是全部。该表达式使用媒体特性进一步限制样式表的范围，如宽度、高度和颜色。在这里，表达式的最小宽度是：699px。如果浏览器宽度大于699px，这个媒体查询将应用它所包含的CSS属性。因此，在大于699px的屏幕上h1元素将被隐藏。
有许多媒体类型和媒体功能可供我们使用。媒体类型的例子包括all(所有的)、print(打印的)、screen(屏幕的)和projection(投影的)。媒体特征的例子包括height(高度)，max-height(最大高度)，和max-width(最大宽度)。
Bootstrap已经为各种设备大小定义了许多媒体查询，以创建一个高度响应的框架。这里是Bootstrap的CSS文件中的一个片段:
@media (min-width: 768px) {
.container {
width: 750px;
}
}
要了解更多关于媒体查询的信息，请参考《Mozilla Developer Network documentation》链接是https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
小结
在本章中，我们讨论了自定义Bootstrap的各种方法，并看到了如何用CSS和Less自定义Bootstrap。正如我们所看到的，Bootstrap提供了许多改变默认样式的选项，赋予您创建自己独特而漂亮的设计的能力。
网友评论