第 1 章 初识Bootstrap

第 1 章 初识Bootstrap

作为Web前端开发框架,Bootstrap的流行很容易理解。它为大多数标准的UI设计场景提供了用户友好、跨浏览器的解决方案。它现成可用且经受了社区考验的HTML标记、CSS样式及JavaScript插件,极大提高了Web前端界面的开发效率,创造出令人愉悦的效果。有了这些基本的元素,开发人员就有了定制设计的坚实基础。

Bootstrap使用Grunt构建CSS和JavaScript,并使用Jekyll来写作文档。Grunt是Node.js中的一个JavaScript任务管理器。除此之外,也可使用其他的工具与技术来构建Bootstrap。本书将介绍一些其他的构建Bootstrap的方法。

不过,流行、高效、有效也不一定都是好事。由于工具便捷而导致人们养成坏习惯的例子屡见不鲜。然而,Bootstrap却没有,至少不一定有这个问题。从它面世就一直关注它的人都知道,它的早期版本和更新有时候会更侧重实际效率,而非最佳实践。事实上,一些最佳实践,不管是语义标记还是移动优先的设计,抑或资源性能优化,都需要额外的时间和精力才能实现。本章将介绍Bootstrap,并教大家以下内容:

采用当前的一些最佳实践,创建出高质量的HTML5标记结构:

  • 用Bootstrap CLI创建一个新的Bootstrap项目;
  • 在项目页面中加入折叠内容;
  • 为页面创建导航条;
  • 将导航条制作为响应式组件。

1.1 数量和质量

运用得当的情况下,我认为Bootstrap无论从质量还是效率上讲,都是Web开发社区的一大福利。随着越来越多的开发者使用这个框架,越来越多的人也加入了这个社区,从而逐步接受了前沿的最佳实践。Bootstrap从一开始就鼓励可靠、成熟及面向未来的CSS方案,比如Nicholas Galagher的CSS normalize,以及用CSS3方案解决图片过多的问题。此外,它也支持HTML5语义标记。

1.1.1 与时俱进

Bootstrap v2.0发布之后,响应式设计随之成为主流,其界面元素也做到了跨设备响应(包括台式设备、平板和手持设备)。

随着Bootstrap v3.0的发布,其功能愈加完善,拥有了如下特性。

  • 移动优先的响应式网格。
  • 基于Web字体的图标,适用于移动端及高分辨率屏幕。
  • 不再支持IE7,标记和样式更加简洁高效。
  • 从3.2版本开始,必须使用autoprefixer才能构建Bootstrap。
  • 本书对应的是Bootstrap v4.0版本。该版本在引入很多新的组件与改进的同时,也摒弃了一些旧的组件。下述摘要中列举了Bootstrap 4中最重要的改进与变化:
    • Less(Leaner CSS)被Sass所替代;
    • 重构了CSS代码,避免使用标签选择符与子元素选择符;
    • 改进网格系统,更好地适配移动端设备;
    • 替换导航条;
    • 可选的Flexbox支持。
  • 新的HTML重置模块Reboot。Reboot继承自Nicholas Galagher的CSS normalize,并负责CSS规则box-sizing: border-box的声明。
  • jQuery插件现已均由ES6编写,并支持UMD模块方案。
  • 受助于Tether这一类库,提示语(tooltip)组件和弹框(popover)组件的自动布局获得了改进1
  • 舍弃了对Internet Explorer 8的支持,因此可以将样式单位中的像素值替换为rem和em。
  • 增加Card组件,替换之前版本中的Well、Thumbnail和Panel组件。
  • 舍弃Glyphicon Halflings图标集中的字体图标。
  • 舍弃Affix插件,由支持position: sticky的修补器(polyfill)所替代。

1对Tether的依赖仅存在于Bootstrap 4 Alpha版本,自Bootstrap 4 Beta版本开始,这一依赖关系被Popper.js插件取代。——译者注

1.1.2 Sass的威力

使用Bootstrap时,可以考虑用上强大的Sass。作为CSS的预处理器,Sass延伸了CSS的语法,增添了变量、混入和函数等特性,帮助用户以DRYDon't Repeat Yourself,避免重复代码)的方式来编写CSS代码。原生的Sass是用Ruby编写的,如今则可以使用速度更快的C++移植版,libSass。与旧式的Sass缩排语法相比,Bootstrap使用的是更为现代的SCSS语法。

 对于那些在日常工作中使用CSS,并对函数式编程语言有所了解的读者来说,学习Sass的难度不大。如需深入理解Sass,可以阅读敝作Sass and Compass Designer's Handbook

Bootstrap 4用Sass取代了之前的CSS预处理器Less。由于Sass开发者社区日渐壮大,因此与Less相比,Bootstrap团队更加青睐Sass。习惯使用Less并有意就此切换到Sass的读者需要认识到:与声明式风格的Less相比,Sass更像是一种函数式编程语言。在Sass中,变量不经定义是无法使用的,因此需要在代码的开头就修改变量。Bootstrap中的变量都有默认值,可以再次声明和赋值这些变量名,从而实现对默认值的覆写。

与Less相反,Sass不支持if-else-then结构和forforeach循环。

从单纯给标记添加类到定制Bootstrap的SCSS文件,大幅提高了我们的能力和工作效率。在Bootstrap默认的样式表基础之上,开发人员可以发挥自己的创造力,定制自己的内容。换句话说,Bootstrap确实非常强大。我会在本书中告诉大家如何以有趣而严谨的方式,利用它实现高效工作和最佳实践,以及做出漂亮、用户友好的界面。

1.1.3 下载已编译代码

http://getbootstrap.com/网站上,可以找到按钮来下载编译好的Bootstrap代码。下载下来的文件包括编译好的CSS代码和JavaScript代码,可以直接用于项目中。这些编译好的CSS和JavaScript代码囊括了Bootstrap中所有的组件和功能。本书稍后将介绍如何创建定制版本的Bootstrap,其中只包含那些真正要用到的组件和功能。

除了下载默认的版本外,还可以选择支持Flexbox的版本,或者仅包含网格系统的Bootstrap版本。

1.1.4 支持Flexbox的版本

http://getbootstrap.com/网站上,还可以下载支持Flexbox的Bootstrap。切换到Flexbox版本后无须对HTML做任何变更,唯一要做的就只是修改CSS源文件。

1.1.5 仅包含网格系统的版本

Bootstrap内置了一个移动优先的、12栏布局的、响应式网格系统。对于那些只需要在项目中使用网格系统的人来说,可以选择下载仅包含网格系统的Bootstrap版本。该版本提供了预定义的网格标签类,且无须加载任何JavaScript文件。在这种情况下,如1.6节中“Box-sizing”部分所描述的,使用者需自行定义包括box-sizing: border-box在内的HTML重置规则。

在该版本中,除了能使用预定义的网格标签类,还能利用Sass中的变量和混入来定制符合语义的响应式页面布局。

1.1.6 从CDN加载运行Bootstrap

除了下载Bootstrap这一方法外,还可以在项目中通过CDN(内容分发网络)来加载Bootstrap。CDN可用来给多个服务器分配带宽,进而让用户从离其最近的资源节点下载静态内容。

 可以从以下CDN加载Bootstrap:https://www.bootstrapcdn.com/。BootstrapCDN由MaxCDN提供技术支持,其官方网站为:https://www.maxcdn.com/

子资源完整性(SRI)

其他人可以通过控制CDN上的代码而随心所欲地向文件中注入恶意内容,因此CDN还是存在不小的风险的。为了规避这一风险,可以在那些加载CDN文件的<script>元素和<link>元素中添加完整性属性。该属性值应当是一个以base64编码的sha384散列。除此之外,还应当在这些元素中添加crossorigin属性。从MaxCDN加载jQuery的script元素的写法如下:

<script src="http://code.jquery.com/jquery-2.2.3.min.js"
integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
crossorigin="anonymous"></script>

 关于子资源完整性,可以从https://www.w3.org/TR/SRI/获取更多的信息。

1.2 下载Bootstrap源文件

下载Bootstrap的途径很多,但通过这些途径下载的文件并不完全一样。为了后面考虑,我们必须确保下载到Sass文件,因为这些文件可以为我们提供定制和创新的基础。在这里,我们溯本求源,打开http://getbootstrap.com

打开网站,一眼就能看到大大的“Download”按钮。

若情形有变,也可以访问GitHub上的项目链接(https://github.com/twbs/bootstrap),点击“Download ZIP”按钮来下载;或者运行以下命令来克隆整个Bootstrap项目:

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

1.2.1 下载后的文件

下载Bootstrap的源文件之后,应该能看到类似下图所示的文件结构。

除了SCSS代码和jQuery插件的EM6代码等Bootstrap源文件外,上述文件中还包括了用于构建Bootstrap的内容。Bootstrap默认由Grunt来构建。诚然,文件不少,但并非全都需要。无论如何,这里包含了Bootstrap所能提供的一切。值得注意的是,正如之前所提到的,Glyphicon Halfling字体集已被舍弃,因此源文件中并不包含字体文件。Bootstrap中的默认字体仅由CSS设定,无须依赖任何字体文件。

随着时间推移,下载到的文件中的实际内容可能会有所变化,但主要内容通常不会变。需要注意的是,在scss文件夹中,可以找到所有重要的Sass文件,它们是本书所有项目的关键。另外,js文件夹中包含Bootstrap的独立JavaScript插件,可供我们选择使用。

此外,假如你只需要Bootstrap默认提供的预编译的CSS或JavaScript文件(如bootstrap.css或bootstrap.min.js),也可以在dist文件夹中找到它们。这些预编译文件的结构如下。

上图中,umd文件夹包含了用于在CommonJS环境中进行require()操作的插件文件。这些文件符合UMD(Universal Module Definition)规范。作为脚本加载机制,CommonJS和AMD都能确保不同的JavaScript组件以正确的顺序加载、协同。通用的UMD规范同时支持CommonJS和AMD。

另外,在源文件里,还有一个docs/examples文件夹,其中包含示例HTML模板。我们第一个项目的模板文件夹就会基于其中一个示例来创建。

1.2.2 下载安装Bootstrap的其他方法

除了直接下载,还可以用其他工具和包管理器来获取Bootstrap文件,具体可参考下列命令和工具。

  • npm来安装:npm install bootstrap
  • Meteor来安装:meteor add twbs:bootstrap
  • Composer来安装:composer require twbs/bootstrap
  • Bower来安装:bower install bootstrap
  • NuGet来安装:
    • CSSInstall-Package bootstrap -Pre
    • SassInstall-Package bootstrap.sass -Pre

1.3 工具配置

如果要使用Grunt文件来在本地运行Bootstrap文档,则需下载Bootstrap源文件并配置Node和Grunt环境。可通过执行以下步骤来实现Bootstrap的构建流程:

  • 通过npm install -g grunt-cli安装Grunt命令行工具grunt-cli;
  • 到/bootstrap根目录,运行npm install来安装在package.json文件中所列举的本地依赖;
  • 安装Ruby,并用gem install bundler来安装Bundler,最后再运行bundle install,该命令会安装项目中所有的Ruby依赖,如Jekyll和其他插件。

至此,即可在/bootstrap根目录中通过运行以下命令来在本地启动Bootstrap文档:

bundle exec jekyll serve

接下来,可以访问http://localhost:9001来查看文档和示例。

HTML初始模板

下载Bootstrap源文件后,即可将dist文件夹中编译好的CSS和JavaScript文件用于HTML中。可参考以下示例,创建一个新的HTML模板:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <!-- Required meta tags always come first -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/
4.0.0-alpha.2/css/bootstrap.min.css">
      </head>
      <body>
        <h1>Hello, world!</h1>
        <!-- jQuery first, then Bootstrap JS. -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/
jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.2/js/
tether.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/
js/bootstrap.min.js"></script>
      </body>
    </html>

如上所示,HTML代码应以HTML5的文档类型标记<!DOCTYPE html>开头。

  1. 响应式meta标签

    Bootstrap支持响应式并遵循“移动优先”的设计理念,所以HTML代码的head区域中应包含如下响应式meta标签:

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    Bootstrap采用“移动优先”的策略,其代码首先为移动端设备优化,然后再用CSS媒体查询技术来增加对更大尺寸屏幕的支持。

  2. X-UA-Compatible meta标签

    X-UA-Compatible是另一个应当添加到HTML模板的head区域中的重要meta标签,其写法如下:

    <meta http-equiv="x-ua-compatible" content="ie=edge">

    该meta标签可以强制Internet Explorer以最新的渲染模式来显示内容。

  3. Bootstrap的CSS代码

    除了上述标签,还应当在HTML文档中加载Bootstrap的CSS代码。在之前的示例模板中,CSS代码是从CDN加载的。也可以将这一CDN URI替换成dist文件夹中的本地CSS文件:

    <link rel="stylesheet" href="dist/css/bootstrap.min.css">
  4. JavaScript文件

    最后,应在HTML代码的末尾加载JavaScript文件,从而加速页面的加载。Bootstrap的JavaScript插件依赖jQuery,因此在加载这些插件前需要先行加载jQuery。对于popover和插件而言,除了jQuery,它们还依赖Tether,因此在加载jQuery后应当立即加载Tether,然后再加载其他插件文件。相关的HTML代码的写法如下:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.2/js/tether.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

    和CSS代码一样,也可用本地的JavaScript文件来替代上述例子中的CDN URI。

1.4 使用Bootstrap CLI

本书将介绍Bootstrap CLI 。除了使用Bootstrap的打包构建流程,还可以通过运行Bootstrap CLI命令来创建新项目。

Bootstrap CLI是Bootstrap 4中的命令行界面,其内置了一些示例项目,你也可以将它用于自己的项目。

使用Bootstrap CLI需安装以下软件。

  • Node.js 0.12+:可从Node.js官方网站下载并安装程序。
  • 安装Node.js后,运行[sudo] npm install -g grunt bower
  • Git:运行你的电脑操作系统所对应的Git安装程序。
  • Windows用户也可尝试使用Git for Windows。

除Grunt外,Gulp是Node.js体系中的另一个任务管理工具。如果你偏好使用Gulp,则可运行以下命令来安装该工具:

[sudo] npm install -g gulp bower

第2章将详细介绍Gulp。

安装完上述软件后,可以运行以下命令,通过npm来安装Bootstrap CLI:

npm install -g bootstrap-cli

该操作会在操作系统中增加bootstrap这一命令。

1.5 准备新的Bootstrap项目

安装好Bootstrap CLI后,就可以运行以下命令来创建新的Bootstrap项目了:

bootstrap new --template empty-bootstrap-project-gulp

命令运行后,会收到询问“What's the project called? (no spaces)”。输入项目名,即可创建出一个同名的文件夹。初始化配置完成后,该项目文件夹中的目录和文件结构将如下图所示。

上述项目文件夹中包含了Gulpfile.js文件。在第2章中,你将学习如何用Gulp构建流程创建自己的Bootstrap项目。

至此,可以运行Bootstrap的watch命令,同时修改html/pages/index.html文件来观察效果。该HTML模板文件是用Panini来编译的。作为平面文件编译工具,Panini可以帮助你创建出布局一致、文件片段可复用的HTML页面。

如需了解更多有关Panini的信息,可访问http://foundation.zurb.com/sites/docs/panini.html

Panini会将HTML模板编译成单个的index.html文件,就像之前章节中所描述的那样。

1.6 设置主结构元素

下面开始准备页面内容。我们将添加以下页面元素:

  • 包含logo和导航的页头区;
  • 包含页面内容的主内容区;
  • 包含版权信息和社交媒体链接的页脚区。

添加这些内容,我们都会基于最新的HTML5最佳实践来做,而且会考虑ARIA(Accessible Rich Internet Applications,无障碍富互联网应用)的role属性(即bannernavigationmaincontentinfo这几个角色)。

运行bootstrap watch命令,浏览器将自动访问http://localhost:8080地址。接着,编辑html/pages/index.html文件。你可以使用自己最喜欢的文本编辑器,在该文件中输入以下HTML代码:

---
layout: default
title: Home
---
<header role="banner">
  <nav role="navigation">
  </nav>
</header>

<main role="main">
  <h1>Main Heading</h1>
  <p>Content specific to this page goes here.</p>
</main>

<footer role="contentinfo">
  <p><small>Copyright &copy; Company Name</small></p>
</footer>

这就是我们页面的基本结构和内容了。继续往下。值得注意的是,刚才在html/pages/index.html文件中所添加的内容会被编译到html/layout/default.html这一布局模板中。该模板包含了HTML主干结构以及对编译好的CSS和JavaScript代码的链接。

在HTML代码的末尾加载JavaScript代码,以此来获取更快的性能。Gulp会将jQueryTether和各种Bootstrap所需的jQuery插件打包到一个_site/js/app.js文件中。除此之外,也可以从CDN加载jQuery或Tether。

导航条标记

编译后的CSS代码已经链接到编译后的HTML代码,你也可以在_site/css文件夹中找到。下面将简单介绍如何用Sass定制CSS。但首先我们尝试将至少一个Bootstrap特有的元素“导航条”放置到页面中。

开始,我们只做Bootstrap的基本导航条(稍后会添加细节)。使用Bootstrap文档中的标记,得到如下结果,嵌套在header元素中:

<header role="banner">
<nav class="navbar navbar-light bg-faded" role="navigation">
  <a class="navbar-brand" href="index.html">Navbar</a>
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link active" href="#">Home <span class="sr- only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
  <form class="form-inline pull-xs-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-success-outline" type="submit">Search</button>
  </form>
</nav>
</header>

保存结果,浏览器会自动刷新并显示Bootstrap默认样式的导航条。如下图所示,排版和布局上也有所增强,这说明CSS已经生效,祝贺你!

这样我们就配置好了Bootstrap的默认样式。

  1. 导航条所使用的CSS类

    如之前的导航条例子所示,可以使用<nav><a><ul>等标准的HTML元素,配以Bootstrap的CSS类来创建导航条。

    首先观察以下代码片段中<nav>元素所拥有的类:

    <nav class="navbar navbar-light bg-faded" role="navigation"></nav>

    .nav类会设置导航条的基础样式。

    .navbar-light.navbar-dark类则设置导航条中文字和链接的颜色。当导航条的背景色呈亮色时,应当使用.navbar-light类;而当导航条的背景色呈暗色时,则应使用.navbar-dark类。

    最后,.bg-*类会设置导航条具体所采用的背景色;可供选择的类有.bg-inverse.bg-faded.bg-primary.bg-success.bg-info.bg-warning.bg-danger。这些背景色类是Bootstrap所内置的,也可用在其他元素和组件上。

    导航条中的标题可以由包含.navbar-brand类的<a>元素或<span>元素所组成。

    导航条中具体的项目则由无序列表元素(<ul>)所组成。在列表元素内,每个列表成员(<li>)都会拥有.nav-item这一CSS标签,同时包含一个拥有.navbar-link类的<a>元素。对于当前选中的列表成员而言,除了.navbar-link外,还会包含.active类。

    最后,在以下导航条的HTML代码片段中,可以看到.sr-only类:

    <span class="sr-only">(current)</span>

    包含.sr-only类的HTML元素仅在屏幕阅读器中有效。

     如需了解更多信息,可访问http://a11yproject.com/posts/how-to-hide-content/

  2. 在页面中放置导航条

    默认情况下,导航条拥有圆角,并以静态定位的方式出现在页面中。可以使用一些特殊的CSS类,将导航条固定在页面顶部(.navbar-fixed-top)或底部(.navbar-fixed-bottom),也可移除其圆角效果并调整z-index值(.navbar-full)。接下来,我们将导航条做成响应式的。通过这一实验,也可以测试Bootstrap中JavaScript插件的运行结果。

  3. 在导航条中添加可折叠内容

    借助Bootstrap中的折叠插件,我们能创建出可折叠内容,并可以简单地用<a>标签或<button>标签显示或隐藏内容。同时,还可以在导航条中添加这一切换按钮。

    首先,在<div class="collapse">元素内创建可折叠内容,并对该元素赋予唯一的ID。具体写法如下:

    <div class="collapse" id="collapsiblecontent">
    Collapsible content
    </div>

    然后,创建拥有.navbar-toggler类和data-toggledata-target属性的按钮,具体写法如下:

    <button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#collapsiblecontent">
    &#9776;
    ; </button>

    在以上代码片段中,data-toggle属性应当设置为collapse,以触发折叠插件功能;而data-target属性则应指向刚创建的可折叠内容的唯一ID。HTML代码中的&#9776表示汉堡图标,在页面上会显示成以下样式。

    {%}

    现在将这些代码写在一起,并把按钮放在导航条中。在html/pages/index.html文件中编写以下HTML代码,即可在浏览器中看到效果:

    <header>
      <div class="collapse" id="collapsiblecontent">
        Collapsible content
      </div>
      <nav class="navbar navbar-light bg-faded" role="navigation">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#collapsiblecontent">
        ≡
        </button>
      </nav>
    </header>

    如果Bootstrap的watch命令还在运行,浏览器应当会自动刷新。结果如下图所示。

    点击汉堡图标,可折叠内容就会显示出来。如果这一行为符合预期,就表明折叠插件工作正常。除此之外,折叠插件还能用来制作响应式的导航条,下一节将对此进行详细介绍。

    默认情况下,.collapse元素中的内容是被隐藏的。点击切换按钮后,折叠插件会在该元素上添加.in类,从而使内容显示出来。为了让显示/隐藏的过程顺畅,插件还会添加一个临时的.collapsing类来实现动画效果。

  4. 响应式与断点

    默认情况下,Bootstrap中的断点有4个:544、768、992和1200像素。围绕这些断点,设计将适配具体的设备和不同尺寸的浏览器视口。与此同时,Bootstrap中移动优先的响应式网格也会用到这些断点。本书稍后将详细介绍网格。

    可以使用这些断点来指定和命名视口的大小范围:超小(xs)表示视口宽度小于544像素的手机端竖屏模式,小(sm)表示视口宽度小于768像素的手机端横屏模式,中等(md)表示视口宽度小于992像素的平板设备,大(lg)表示视口宽度大于992像素的桌面设备,超大(xl)表示视口宽度大于1200像素的桌面设备。由于视口大小的像素值与页面中的字体大小无关,且现代浏览器普遍修复了缩放所带来的问题,因此这些断点以像素为单位。

    有不同意见认为,断点以em为单位会更好。

     如需了解更多信息,可访问http://zellwk.com/blog/media-query-units/

    偏好使用em作为断点单位的人,可以修改scss/includes/_variables.scss文件中所声明的$grid-breakpoints变量。如果使用em值作为媒体查询的度量,则相关SCSS代码的写法如下:

    $grid-breakpoints: (
      // 超小屏幕 / 手机
      xs: 0,
      // 小屏幕 / 手机
      sm: 34em, // 544px
      // 中型屏幕 / 平板
      md: 48em, // 768px
      // 大屏幕 / 桌面设备
      lg: 62em, // 992px
      // 超大屏幕 / 宽屏桌面设备
      xl: 75em //1200px
    );

    除此之外,还应修改$container-max-widths变量声明。修改Bootstrap变量的操作应当通过编辑本地的scss/includes/_variables.scss文件来实现,具体解释可参考http://bassjobsen.weblogs.fm/preserve_settings_and_customizations_when_updating_bootstrap/。如此操作可以避免Bootstrap版本更新对本地修改的意外覆写。

  5. 响应式工具类

    Bootstrap中预定义了一些工具类,用以加速开发对移动端设备友好的产品。可以使用这些类,通过媒体查询技术在不同设备和不同大小的视口中显示/隐藏内容。

    .hidden-*-up类为例,其中*代表某个断点的名称,该类可在所有设备视口宽度大于指定断点的情况下隐藏相关的内容。如,.hidden-md-up类会在中型视口、大视口和超大视口的情况下隐藏某个元素;与之相反,.hidden-md-down则会在视口宽度小于断点的情况下隐藏某个元素。

    也可以通过Sass混入的方式来使用Bootstrap的媒体查询范围和断点。混入media-breakpoint-up()接受断点名称作为输入参数,用于设置min-width这一媒体查询规则。在该规则下,相关的CSS内容仅在视口宽度大于断点的情况下才生效。与之相反,混入media-breakpoint-down()用于设置max-width规则,相关的CSS内容仅在视口宽度小于断点的情况下有效。

    对于以下可写在scss/app.scss文件末尾的SCSS代码而言:

    p {
    font-size: 1.2em;
      @include media-breakpoint-up(md) {
        font-size: 1em;
      }
    }

    该SCSS代码会被编译成以下CSS内容:

    p {
      font-size: 1.2em;
    }
    
    @media (min-width: 768px) {
      p {
        font-size: 1em;
      }
    }
  6. 完成响应式导航条

    为了在Bootstrap响应式导航条基础上完成我们的导航条,还得增加两个新元素,以及相应的类和data属性。

    先在之前的导航条代码中添加切换按钮。该按钮的HTML代码如下所示:

    <button class="navbar-toggler hidden-md-up pull-xs-right" type="button" data-toggle="collapse" data-target="#collapsiblecontent">
        ≡
      </button>

    从以上HTML代码可以看到,响应式导航条组件也会用到折叠插件,因此和之前可折叠内容中的例子一样,该按钮也拥有相同的data属性。此外,该按钮有一个.hidden-md-up工具类(如之前描述),用于在视口宽度大于768像素的情况下隐藏按钮。.pull-xs-right类则在移动设备上让按钮浮动于导航条的右侧。

    然后,添加需要折叠的元素的类。在本例中,需要折叠的是含导航链接的<ul>元素。在该元素上添加.collapse类,使得元素默认处于隐藏状态;同时添加.navbar-toggleable-sm类,避免在视口较大的设备上发生内容的折叠。最后,将元素的ID值设为刚才按钮元素的data-target属性值。HTML代码如下:

    <ul class="nav navbar-nav navbar-toggleable-sm collapse" id="collapsiblecontent"></ul>

    完整的响应式导航条的HTML代码如下。你可以将该代码写到html/pages/index.html文件中,并在浏览器中测试:

    <header role="banner">
      <nav class="navbar navbar-light bg-faded" role="navigation">
        <a class="navbar-brand" href="index.html">Navbar</a>
        <button class="navbar-toggler hidden-md-up pull-xs-right" type="button" data-toggle="collapse" data-target="#collapsiblecontent">
        ≡
        </button>
        <ul class="nav navbar-nav navbar-toggleable-sm collapse"
    id="collapsiblecontent">
          <li class="nav-item">
            <a class="nav-link active" href="#">Home <span class="sr- only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
        </ul>
      </nav>
    </header>

     随着Bootstrap版本的更新,标签结构、CSS类名和data属性可能会发生变化。如果以上代码行不通,可以查看Bootstrap的官方文档。作为备选方案,可以基于本书提供的示例代码来创建项目。

    默认情况下,.navbar-brand.nav-link CSS类中会定义float:left规则。对于可折叠版本的导航条来说,导航链接不应出现浮动,因此需撤销浮动操作。可以在scss/app.scss文件的末尾添加以下SCSS代码,在小型视口中移除浮动。

    .navbar {
      @include media-breakpoint-down(sm) {
        .navbar-brand,
        .nav-item {
          float: none;
        }
      }
    }

    如果Bootstrap的watch命令还在运行,则浏览器会在HTML或Sass代码保存后自动刷新;否则的话,再次启动watch命令,在浏览器中访问http://localhost:8080/会看到结果。通过鼠标点击和拖曳来调整浏览器窗口的大小,使其宽度窄于768像素。

    如果一切运行正常,就能看到如下图所示的可折叠导航条,其中包含了网站名称、logo和切换按钮。

    好兆头!点击切换按钮,导航条会下滑打开,结果如下图所示。

    搞定!祝贺你!

  7. 新的Reboot模块和Normalize.css

    说起CSS的级联特性,就不得不提到,浏览器的默认样式要优先于开发者偏好的样式。换而言之,除非开发者显式声明,否则浏览器会以自带的默认样式来渲染内容。不同的浏览器所自带的默认样式各不相同,而这也是造成浏览器兼容性问题的主要原因。为避免类似的麻烦,可以重置CSS或HTML,即由开发者将常用的HTML元素设置默认的样式,从而杜绝由浏览器默认样式所造成的问题,同时保证HTML元素在不同的浏览器上呈现出相同的效果。

    Bootstrap使用由Nicholas Galagher所编写的Normalize.css。这是一个适用HTML5的现代CSS重置工具,可以从http://necolas.github.io/normalize.css/下载。使用该工具后,不同的浏览器对HTML元素的显示效果会更加一致,且符合现代标准。Normalize.css和其他一些样式规则组成了Bootstrap中新的Reboot模块。

  8. box-sizing

    Reboot模块会从全局层面将box-sizing值从默认的content-box改为border-boxbox-sizing是CSS盒模型中用于计算某个元素宽高的属性。事实上,box-sizing并不是CSS中的新内容,但将其设置为border-box可以让工作轻松很多。设置为border-box后,计算元素的宽度时会将其边框和内边距也包括在内。如此一来,对元素边框或内边距的调整就不会影响到整体的布局了。

  9. 预置CSS类

    Bootstrap中预置的CSS类包罗万象。只用div元素,配以正确的网格类,即可在项目中开发出移动优先的响应式网格。与此同时,也可以用CSS类给其他元素和组件定制样式。对于以下HTML代码中的按钮样式来说:

    <button class="btn btn-warning">Warning!</button>

    按钮显示在页面上会如下图所示。

    可以看到,Bootstrap使用两个类来定制按钮的样式。第一个.btn类使元素具有通用的按钮布局样式。第二个.btn-warning类则对按钮设置定制的颜色。

     CSS中的子串属性选择符可以部分匹配属性的值。比如,可以匹配所有class值以btn-开头的元素。你或许会疑惑:为什么Bootstrap不用[class^='btn-']属性选择符,而要用.btn类来设置按钮的通用样式呢?原因有两点。首先,有意见表明子串属性选择符性能不佳,因此Bootstrap会避免使用该技术。其次,[class^='btn-']不会匹配not btn-的情况。

    除了<button>标签,也可以用这些类将超链接<a>显示成按钮的样子:

    <a class="btn btn-primary" href="#" role="button">Link</a>
  10. Sass变量和混入

    可以通过修改scss/_variabels.scss文件中的Sass变量来改变Bootstrap的默认样式。例如,将$brand-primary变量设置为别的颜色,即可改变之前例子中含.btn-primary类的按钮的样子。

    也可以通过Bootstrap中的Sass混入,用自己定制的CSS类来扩展Bootstrap。除了用Sass混入和变量来构建自己的(语义)网格外,还可以用它们来创建自己的按钮类,如以下SCSS代码所示。

    .btn-tomato {
      @include button-variant(white, tomato, white);
    }

    该SCSS代码会被编译为以下CSS代码:

    .btn-tomato {
      color: white;
      background-color: tomato;
      border-color: white;
    }
    .btn-tomato:hover {
      color: white;
      background-color: #ff3814;
      border-color: #e0e0e0;
    }
    .btn-tomato:focus, .btn-tomato.focus {
      color: white;
      background-color: #ff3814;
      border-color: #e0e0e0;
    }
    .btn-tomato:active, .btn-tomato.active,
    .open > .btn-tomato.dropdown-toggle {
      color: white;
      background-color: #ff3814;
      border-color: #e0e0e0;
      background-image: none;
    }
    .btn-tomato:active:hover, .btn-tomato:active:focus,
    .btn-tomato:active.focus, .btn-tomato.active:hover,
    .btn-tomato.active:focus, .btn-tomato.active.focus,
    .open > .btn-tomato.dropdown-toggle:hover,
    .open > .btn-tomato.dropdown-toggle:focus,
    .open > .btn-tomato.dropdown-toggle.focus {
      color: white;
      background-color: #ef2400;
      border-color: #bfbfbf;
    }
    .btn-tomato.disabled:focus, .btn-tomato.disabled.focus,
    .btn-tomato:disabled:focus, .btn-tomato:disabled.focus {
      background-color: tomato;
      border-color: white;
    }
    .btn-tomato.disabled:hover, .btn-tomato:disabled:hover {
      background-color: tomato;
      border-color: white;
    }

    Bootstrap中的Sass代码会避免使用元素选择符和嵌套选择符,其背后的考量可以参考http://markdotto.com/2015/07/20/css-nesting/

    Bootstrap还会避免使用Sass中的@extend功能。使用@extend功能的风险在于它可能会引入复杂的CSS冗余代码。具体情况可参考Hugo Giraudel的文章(https://www.sitepoint.com/avoid-sass-extend/)。

    使用临时选择符能有效降低这一风险。Bootstrap代码中不会使用临时选择符,不过这并不影响你用@extend功能来定制和扩展Bootstrap。比如,可以用@extend功能让所有的图片元素默认具备响应式特性。

    在Bootstrap中图片元素默认是不具备响应式特性的。让一张图片变成响应式的话,需要在<img>元素上添加.img-fluid类。

    可以在scss/app.scss文件的末尾添加以下SCSS代码,用@extend功能让图片默认具备响应式特性:

    img {
      @extend .img-fluid;
    }

    相较于@extend,有些人可能认为使用混入是更好的选择。但应该看到,在Bootstrap的Sass代码中,并不存在让图片变成响应式的混入操作。

1.7 浏览器支持

之前提到,Bootstrap 4不支持IE8及之前的IE浏览器。对于需要支持IE8的项目来说,建议使用Bootstrap 3。Bootstrap 4还提供Flexbox支持。需要注意的是,对于IE浏览器而言,CSS3中的弹性盒模型布局(Flexbox)仅在IE11及之后的版本中有效。1.7.2节将介绍Flexbox的优劣。除了IE8及之前的老版本浏览器,Bootstrap对包括移动浏览器在内的所有主流浏览器均提供支持。

1.7.1 浏览器引擎前缀

CSS3引入了浏览器引擎规则。开发者可以使用这些规则编写仅适用于某个浏览器的CSS代码。乍一看,这么做有违初衷。理想情况下,所有的浏览器都能以相同的方式支持Web标准和相关实践,而HTML和CSS也能在所有的浏览器上显示相同的结果。但事实上,这些浏览器引擎前缀反而能让我们离理想更近一步,让我们在标准实现的早期就能用上新的语法规则。最后,这些前缀还能让浏览器实现私有的CSS属性,而这些属性在正常情况下是不太可能(甚至永远没有可能)成为标准的。

由于以上原因,浏览器引擎前缀在很多新的CSS3特性中扮演了重要的角色,比如:动画圆角阴影等属性,这些属性过去都曾依赖于浏览器引擎前缀规则。可以看到,有些属性会从引擎前缀进化成标准规则,比如border-radiusbox-shadow属性,都被现如今的绝大多数浏览器所支持,无须添加任何前缀。

浏览器引擎前缀包括:

  • WebKit-webkit
  • Firefox-moz
  • Opera-o
  • Internet Explorer-ms

对于以下CSS代码来说:

transition: all .2s ease-in-out;

如需在所有的浏览器上正常工作,或者至少在Bootstrap所支持的浏览器上正常工作,则需写成:

-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;

如需了解更多有关transition属性及其浏览器支持方面的信息,可以访问http://caniuse.com/#feat=css-transitions

由于浏览器及其版本的不同,相同的CSS属性可能会对应很多不同的引擎前缀,因此编写跨浏览器的CSS代码就会变得非常复杂。

编译成CSS代码的Bootstrap中的Sass代码不包含任何前缀。事实上,Bootstrap的构建流程中包含了PostCSS autoprefixer。当创建自己的构建流程时,也应将PostCSS autoprefixer这一工具包含在内。第2章将介绍如何用Gulp来创建构建流程。

1.7.2 弹性盒模型

根据需要,Bootstrap 4还提供Flexbox支持。Flexbox布局是CSS3的一个新特性。在编写灵活的响应式布局时非常有用。Flexbox提供了在不同的屏幕分辨率下动态改变页面布局的功能。该盒模型不使用浮动,同时其外边距也不会随内容塌缩。所有最新版本的主流浏览器都很好地支持Flexbox布局。

 有关浏览器支持的详情,可以访问http://caniuse.com/#feat=flexbox。遗憾的是,很多旧版本的浏览器不支持Flexbox布局。

如需使用Flexbox布局,则应将Sass变量$enable-flex设置为true并重新编译Bootstrap。在该操作后,无须修改已有的HTML代码。

1.8 Yeoman工作流

Yeoman可以帮助开发人员启动新的项目,你可以使用它来替代Bootstrap CLI。

Yeoman工作流中包含了3种工具,可以用来提升创建Web应用时的效率和质量:脚手架工具(yo)、构建工具(Grunt和Gulp等),以及包管理器(如Bower和npm)。

可以访问https://github.com/bassjobsen/generator-bootstrap4,从中找到搭建Bootstrap 4前端Web应用的Yeoman脚手架。在安装Yeoman后,可以通过运行以下命令,安装脚手架工具。

  • 安装:npm install -g generator-bootstrap4
  • 运行:yo bootstrap4
  • 运行grunt构建代码,然后运行grunt serve预览结果。

这一生成Bootstrap项目的Yeoman工具让开发人员可以安装具有Flexbox支持的代码。它还能在Web应用中安装Font Awesome和Octicons字体图标库以直接使用。

1.9 排错

如果不顺利,可以再检查一遍以下事项:

  • 你的标记结构是否正确?有没有未闭合、不完整或错配的标签、类,等等?

另外,下面这些事项也可能有用:

把那么多部件合到一起,让它们协作运行,出点问题很正常。而学会找到问题并解决问题同样是我们的生存之道!

Bootply是一个用于实验Bootstrap、CSS、JavaScript和jQuery的小工具,可以用来测试HTML代码。虽然不能直接在Bootply上编译CSS,但可以添加自己编译好的CSS代码。

 Bootply的官网地址为:http://www.bootply.com/

我们的网站模板已经基本完成了。在继续学习之前,先停下来总结一下。

1.10 小结

如果大家一直跟着前面的教程在做,那现在已经为继续实现更高级的设计打好了基础。我们学习了创建新的Bootstrap 4项目所需的基础。可以轻松地用Bootstrap CLI来新建一个项目,并用JavaScript的折叠插件做出响应式的导航条。在学习如何将Bootstrap的Sass代码编译成CSS代码后,我们对Bootstrap中的CSS和HTML代码,以及相关的浏览器支持有了更好的理解。

 现在,或许把所有文件都备份一下比较好,因为后面的项目都以它们为基础。

在下一章中,我们将学习如何用Gulp打造自己的构建流程,并自动编译项目。

目录

  • 版权声明
  • 前言
  • 第 1 章 初识Bootstrap
  • 第 2 章 用Gulp打造自己的构建流程
  • 第 3 章 用Bootstrap和Sass定制博客站点
  • 第 4 章 WordPress主题
  • 第 5 章 作品展示站点
  • 第 6 章 企业网站
  • 第 7 章 电子商务网站
  • 第 8 章 单页面营销网站
  • 第 9 章 用Bootstrap搭建Angular应用