这是一系列文章，此系列所有的练习都存在了我的github仓库中vue-webpack，在本人有了新的理解与认识之后,会对文章有不定时的更正与更新。下面是目前完成的列表：

• webpack入坑之旅（一）不是开始的开始
• webpack入坑之旅（二）loader入门
• webpack入坑之旅（三）webpack.config入门
• webpack入坑之旅（四）扬帆起航
• webpack入坑之旅（五）加载vue单文件组件
• webpack入坑之旅（六）配合vue-router实现SPA

在上面我们已经尝试过了两种对于loader的使用方式，无论是在require的时候编写我们loader的前缀，还是在我们的命令行中进根据扩展名来自动绑定我们的loader，显然都不够自动化，在需要编译的语言继续增加的情况下，显然会是一个噩梦。
所以webapck实际上为我们提供了一个简单的方法，下面就一起来看看。

了解webpack配置

Webpack在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的webpack.config.js文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。

所以现在我们就来新建一个webpack.config.js，在里面填写进下面的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

const webpack = require("webpack");
const path = require('path')
module.exports = {
    entry: ["./entry.js"],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin("这里是打包文件头部注释")
    ]
}

我们现在仅仅需要运行:webpack，如果你的配置没有问题的话，可以在命令行中看到正确的输出，因为这个命令会自动在当前目录中查找webpack.config.js的配置文件，并按照里面定义的规则来进行执行。

去修改我们的css文件吧，感受一下它的便利。

上面我们仅仅是使用了这个配置文件，我们肯定想在实际的工作环境中，自我对于项目进行针对性的配置。下面我们就先来简单的了解一下里面参数的意义：

• entry：指入口文件的配置项，它是一个数组的原因是webpack允许多个入口点。 当然如果你只有一个入口的话，也可以直接使用双引号"./entry.js"
• output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称
• module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。

在这里仅仅能做一些很简单的介绍，如果想要真正做到在项目中的实际应用，还需要大量的练习与尝试。在此暂时不做过多的探究。等真正用到了再记录下来。

了解webpack插件

下面就来看看webpack中的插件：

插件可以完成更多loader不能完成的功能。插件的使用一般是在webpack.config.js中的plugins 选项中指定。

Webpack本身内置了一些常用的插件，还可以通过npm安装第三方插件。

接下来，我们从一个最简单的，用来给输出的文件头部添加注释信息BannerPlugin的内置插件来实践插件的配置和运行。

修改 webpack.config.js，添加 plugins配置项：

1
2
3
4
5
6

var Webpack = require("webpack");//必须引入
module:{
},
plugins: [
    new webpack.BannerPlugin("这里是打包文件头部注释！")//注意这是一个数组..
]

运行正确的话应该是这样的，打开bundle.js，会发现在文件头部已经有了我们添加的注释：

1
2
3
4
5
6
7
8
9
10

/*! 这里是打包文件头部注释 */
/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
        /***  省略 ***/
        })

最简单的插件使用方式就是这样的了，就如上面一样的，平淡无奇。

还有部分说明

如果看到了这里，相信你对于webpack的最基本的了解应该就差不多了，下面正式进入实战的阶段，来看看我们的一些loader到底是怎么样使用的。

这是一系列文章，此系列所有的练习都存在了我的github仓库中vue-webpack 在本人有了新的理解与认识之后,会对文章有不定时的更正与更新。下面是目前完成的列表：

• webpack入坑之旅（一）不是开始的开始
• webpack入坑之旅（二）loader入门
• webpack入坑之旅（三）webpack.config入门
• webpack入坑之旅（四）扬帆起航
• webpack入坑之旅（五）加载vue单文件组件
• webpack入坑之旅（六）配合vue-router实现SPA

引子

在上一篇博客中我们已经成功的把简单的事情变得复杂了，把我们的只有几行代码的两个文件first.js、entry.js使用webpack进行文件打包生成了bundle.js。

Webpack 能做的就是这样，只能处理 JavaScript 模块。

当然它如果能做的仅仅是这样，那它也就不可能这么火了=_=。所以它可以通过引入其他的loader，进而可以处理其它类型的文件。

loader介绍

Loader可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过require来加载任何类型的模块或文件，比如VUE、JSX、SASS 或图片。

先来看看 loader 有哪些特性？(网上复制的，不喜欢可以跳过。loaders-地址)

• Loader可以通过管道方式链式调用，每个loader可以把资源转换成任意格式并传递给下一个loader，但是最后一个loader必须返回JavaScript。
• Loader可以同步或异步执行。
• Loader运行在node.js环境中，所以可以做任何可能的事情。
• Loader可以接受参数，以此来传递配置项给loader。
• Loader可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。
• Loader可以通过npm发布和安装。
• 除了通过package.json的main指定，通常的模块也可以导出一个loader来使用。
• Loader可以访问配置。
• 插件可以让loader拥有更多特性。
• Loader可以分发出附加的任意文件。

loader使用

安装

根据上面说的loader的知识，就这样编译是肯定不行的，所以我们安装用来读取css文件的css-loader，再用 style-loader 把它插入到页面中。

在命令行中输入：

1

npm install css-loader style-loader --save-dev

在package.json中，主要是devDependencies这个字段有了改变：

1
2
3
4
5

"devDependencies": {
    "css-loader": "^0.23.1",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.2"
}

当然你可以用一个更加方便的方式进行安装，可以直接在package.json中，添加相应的依赖（如上面的代码），之后的命令行中运行npm intall，它会自动帮我们安装相应的依赖。

安装完毕。

加载 CSS 文件

还是上一篇博客中的文件，来添加一个css文件。style.css,在里面添加

1
2
3

body {
    background: red;
}

修改我们的entry.js，原文件不变，添加require("!style-loader!css-loader!./style.css");,用来引入我们的css文件。

我们继续编译:

1

npx webpack entry.js --output-filename=./bundle.js --mode=development

完成后，刷新我们的页面，背景颜色是不是已经变成了红色了呢？

扩展名自动绑定loader

这就是我们的loader的使用方式了。如果每次 require CSS 文件的时候都要写 loader 前缀!style-loader!css-loader!这样的东西，显然是一件很麻烦的事情。我们需要它可以根据模块类型（扩展名）来自动绑定需要的 loader。

来看看更简便的方式，将 entry.js 中的 require("!style-loader!css-loader!./style.css") 修改为require("./style.css")，可以改变一个背景颜色让你更明显的查看到变化！然后执行：

1

npx webpack entry.js --output-filename=./bundle.js --mode=development --module-bind "css=!style-loader!css-loader"

。。

。。。

没成功对吧!
因为!在命令行中具有特殊的含义，所以我们需要对它进行转义操作。再来试试：

1

npx webpack entry.js --output-filename=./bundle.js --mode=development --module-bind "css=style-loader\!css-loader"

成功的话，应该能再次看到背景的变化。

虽然这样可以将多个css文件进行编译打包，但是总感觉很是繁琐，我不想每次都运行那么一长串的命令怎么办？继续向下走吧。

最近学习框架，选择了vue，然后接触到了vue中的单文件组件，官方推荐使用 Webpack + vue-loader构建这些单文件 Vue 组件，于是就开始了webpack的入坑之旅。
因为原来没有用过任何的构建工具与模块化工具，所以本系列会十分的基础。并且可能有很多不正确的地方，希望大家谅解，并指出错误帮助改进。谢谢！

这是一系列文章，此系列所有的练习都存在了我的github仓库中vue-webpack，在本人有了新的理解与认识之后,会对文章有不定时的更正与更新。下面是目前完成的列表：

• webpack入坑之旅（一）不是开始的开始
• webpack入坑之旅（二）loader入门
• webpack入坑之旅（三）webpack.config入门
• webpack入坑之旅（四）扬帆起航
• webpack入坑之旅（五）加载vue单文件组件
• webpack入坑之旅（六）配合vue-router实现SPA

什么是webpack

其实不是特别想写这个东西，但貌似所有的教程都有这个。随便写两句吧。可以直接跳过。

Webpack 是德国开发者 Tobias Koppers 开发的模块加载器兼打包工具，在webpack中，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl。
对应各种不同文件类型的资源, Webpack 有对应的模块 loader比如vue用的是vue-loader当然这是后话，在后面我们再来说。

请看下图：

https://github.com/webpack/webpack

安装

前提：因为webpack是一个基于node的项目，所以首先需要确保你的电脑里面已经安装了node.js，以及npm。在这里我使用的版本是：node：v8.11.2 ，npm：6.2.0,若是版本问题，请更新到最新版。
若是有出现npm安装过慢的情况，可以使用nrm这个项目来进行npm源地址的切换。或者使用使用淘宝出品的 cnpm

首先我们直接进行全局的安装，运行如下命令：npm install webpack webpack-cli -g，可能需要一点时间。

安装成功后，在命令行输入webpack -h即可查看当前安装的版本信息。以及可以使用的指令。

当然，我们都应该将webapck安装到当前的项目依赖中，此时就可以使用项目的本这样就可以使用项目本地版本的 Webpack。

1
2
3
4
5
6
7
8
9
10
11
12

# 确保已经进入项目目录
# 确定已经有 package.json，没有就通过
npm init
# 创建，直接一路回车就好，后面再来详细说里面的内容。
# 安装 webpack 依赖

npm install webpack webpack-cli --save-dev
# 简单的写法：-_-,缩写形式
npm i webpack webpack-cli -D
# –save：模块名将被添加到dependencies，可以简化为参数-S。
# –save-dev: 模块名将被添加到devDependencies，可以简化为参数-D。

安装好之后我们的package.json的目录应该是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
  "name": "first-demo",
  "version": "1.0.0",
  "description": "this is my first-demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "guowenfh",
  "license": "MIT",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^4.16.4",
    "webpack-cli": "^3.1.0"
  }
}

既然环境都已经安装好了，那么我们就开始来用webpack进行我们的第一个打包运行程序吧！

首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js,（这里你想用什么名字都可以，只需要在打包的时候读取文件为该名字就好，不过，到时候就知道这个名字的含义啦！）：

1
2
3
4
5
6
7
8
9
10
11

<!-- index.html -->
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <h1 id="app"></h1>
    <script src="./dist/bundle.js"></script>
    <!-- 注意这里引入的不是我们创建的文件，而是用webpack生成的文件 -->
</body>
</html>

1
2

/*** entry.js ***/
document.getElementById('app').innerHTML="这是我第一个打包成功的程序";

文件都已经创建成功了，那么就开始我们的打包吧！

由于我们将 webpack 安装在了 项目目录。所以是不会向终端写入 webpack 命令的，这时我们可以像 npm script 中加入命令 :

1
2
3

"scripts": {
  "start": "webpack entry.js --output-filename=./bundle.js --mode=development"
},

然后我们运行 npm run start,就会执行 webpack entry.js --output-filename=./bundle.js --mode=development。

或者我们可以借用 npm 内置的执行器做到同样的事情 npx webpack entry.js --output-filename=./bundle.js --mode=development

在浏览器中打开index.html，就能看到我们设置的文字啦！：这是我第一个打包成功的程序

这么简单的功能直接在html中引入不就好了吗？确实是这样的，不过我们这才刚刚开始嘛，不要急。

下面我们再来增加一个文件，名为first.js内容如下：

1
2
3

var h2= document.createElement("h2")
h2.innerHTML="不是吧，那么快第二个打包程序啦！";
document.body.appendChild(h2);

更改 entry.js:

1
2
3

document.getElementById('app').innerHTML="这是我第一个打包成功的程序";
//添加
require("./first.js");

再来进行一次重复的工作，再打包一次。webpack entry.js --output-filename=./bundle.js --mode=development，如果成功，打包过程会显示日志：

1
2
3
4
5
6
7

Hash: b1cfe7ff9d75ce235dc9
Version: webpack 1.12.14
Time: 54ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.82 kB       0  [emitted]  main
   [0] ./entry.js 208 bytes {0} [built]
   [1] ./first.js 145 bytes {0} [built]

Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。

刷新浏览器，可以发现我们的刚刚的代码已经生效，又有了新的文字出现。

好吧，我知道这么简单的你们不屑于看，等下我们升个级。

下面是参考文档，也相当于一个汇总吧，有很多我还没实践到，还是可以多看看，好文章应该贴出来

• webpack入门 - 汇智网
• Webpack 怎么用
• Webpack 入门指迷
• Webpack傻瓜式指南（一）
• Webpack傻瓜式指南（二）
• Vue + webpack 项目实践
• webpack 入门及实践
• JavaScript 标准参考教程（alpha）–Node.js
• 应该是最好懂的Webpack教程—阮一峰 还没敲呢，应该全部敲一遍的。
• webpack常用配置总结
• Express结合Webpack的全栈自动刷新
• Vue.js官方教程
• vue-router文档

博客之外

只剩最后一天，二月份就结束了。距离上一篇博客已经有着整整一个月的时间，这一个月的时间，感觉技术上的成长又被搁置了，没有了之前闭关学习的心无旁骛，那段时间成长真的飞快。
在家喝酒，玩耍，到现在实习入职了一个星期，整整一个月时间，学习效率都十分的低，也可以说基本没学到什么新东西。今天是2月最后一天，不能再这样下去，好了懊恼的时间，不能太多，应该着眼当下，现在是2016-02-29 21:40，开始把bootstrap入门理论基础部分完结了吧，下一步就该进入一个新的阶段了！我将一直前行，加油！

缩略图

其实在我们日常使用的网页中，随处都可以看到有缩略图的存在，比如淘宝的商品列表，慕课网上的课程列表等等，Bootstrap自然不会放过那么常见效果，它将这样的效果独立成为了一个模块组件，使用.thumbnail样式类，Boostrap缩略图的默认设计仅需最少的标签就能展示带链接的图片。

我们需要配合Bootstrap的栅格系统来达到一个不错的显示效果。在Bootstrap中文网中，我们可以看到这样的示例代码:

1
2
3
4
5
6
7
8
9
10
11

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="..." alt="...">
                <!-- 此处应对图片做一些样式设置height: 180px;width: 100%; display: block;等 -->
            </a>
        </div>
        ...
    </div>
</div>

我们将上面代码中的列复制3份，改变浏览器的大小，我可以看到因为栅格系统的存在，我们的缩略图已经变成了响应式的。这是栅格系统起到的效果那么.thumbnail又起到了什么效果呢？
我们可以看到图片周围有了一圈边框，并且在边框与图片之间有着4px的padding，除此之外bootstrap还人性化的为我们的缩略图效果提供了hover效果。

添加标题、描述内容、按钮

我们当然不可能仅仅只展示一张可点击的图片就完了，我们时常还会配上相关的说明文字以及一些按钮等等。在已有的缩略图的基础上，我们需要使用.caption容器，并且在这个容器中放置其它的内容，来达到统一的显示效果。

1
2
3
4
5
6
7

<!-- 添加到上面代码中的.thumbnail容器内，a标签后 -->
<div class="caption">
    <h2>说明文字</h2>
    <p>这里是说明文字</p>
    <button class="btn btn-info">按钮</button>
    <button class="btn btn-success">按钮</button>
</div>

看看效果吧：

警示框

其实在我们的网页中，总是避免不了各种的提示信息，比如我们的登陆界面中，总是避免不了输入错误的情况，就需要使用警示框来提示用户错误信息。Bootstrap为我们提供了一组这样的样式类。

Bootstrap使用.alert来控制警示框的大小边距等样式，然后再用：成功：.alert-success、信息：.alert-info、警告：.alert-warning和错误：.alert-danger、这样的一组样式类,来表示不同的情景颜色。

1
2

<div class="alert alert-success" role="alert">恭喜您操作成功！</div>
<!-- ...等等 -->

关闭

除了展示效果之外，如果你还引入了Bootstrap的js文件。那么我们的还可以为我们的警示框非常简单的创造一些交互效果。

1
2
3
4
5
6

<div class="alert alert-success alert-dismissable">
    success操作成功
    <button class="close" data-dismiss="alert">
        <span class="glyphicon glyphicon-remove"></span>
    </button>
</div>

可以看到效果如下：（点击后面的icon便可以关闭该提示信息）

那么好的效果，在实现的时候需要注意一些什么呢？主要有三个步骤：

1. 在普通的警示框.alert的基础上，添加。alert-dismissable类
2. 在button标签中加入close类，实现警示框关闭按钮的样式（我在上面使用了Bootstrap自带的icon图标来实现关闭按钮）
3. 在关闭按钮上添加自定义属性data-dismiss="alert"（Bootstrap中是通过这样的自定义属性，再使用JS检测来实现关闭效果的）

警示框的链接

有时我警示框中除了错误信息之外，还会加入一个链接地址，以便于用户在在新的页面中查找问题去处理他的错误。

Bootstrap仅仅使用了一个.alert-link的类就实现了这样的效果，主要是对于链接样式的高亮显示、加粗，并且颜色相应加深。（除此之外在hover上去后有下划线）

进度条

Bootstrap框架对于进度条提供了一个基本样式，一个100%宽度的背景色，然后一个子容器高亮，表示完成进度。其实制作这样进度条非常容易，一般使用两个容器，外容器具有一定的宽度，设置一个背景色，他的子元素设置一个宽度（父容器的宽度比例值如60%），同时设置一个高亮的背景色。

Bootstrap也是这样实现的，外层容器使用.progress类，子容器使用.progress-bar类（别忘记设置宽度）如：

1
2
3

<div class="progress">
       <div class="progress-bar" style="width:80%"></div>
</div>

同样它也提供了四个不同的情景颜色。.progress-bar-info..等，添加到子容器原有的类后即可

除了色彩，还可以使进度条的变为条纹的，只需要将progress-striped添加到原有的父容器类后，它同样具有彩色效果。更进一步的是，若在其后再添加一个.active类，可以实现动态的条纹进度条。（必须两个同时使用，使用css3动画实现）我们来试试：

1
2
3
4

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-danger" style="width:80%"></div>
</div>
<!-- .... -->

我们还可以在一个进度条内，将不同状态的进度条放置在一起，水平排列，形成叠加进度条，这个就自己试试吧！^_^

带标签的显示条
使用很简单，只需要在子容器中添加相应的数字就可以了，不过下面这段代码会有什么效果呢？不妨也自己去试试吧！(在源码中搜索aria-valuenow="0"可看到原因)

1
2
3

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>

媒体对象

媒体对象一般包括以下几个部分：

1. 媒体对像的容器：常使用.media类名表示，用来容纳媒体对象的所有内容
2. 媒体对像的对象：常使用.media-object表示，就是媒体对象中的对象，常常是图片
3. 媒体对象的主体：常使用.media-body表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容
4. 媒体对象的标题：常使用.media-heading表示，就是用来描述对象的一个标题，此部分可选
5. .pull-left或者.pull-right来控制媒体对象中的对象浮动方式。(如图片在左或者在右)

那么我们可以看到的结构如下：

1
2
3
4
5
6
7
8
9

<div class="media">
    <a class="pull-left" href="#">
        <img class="media-object" src=".." alt="...">
    </a>
    <div class="media-body">
        <h4 class="media-heading">Bootstrap</h4>
        <div>默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）。</div>
    </div>
</div>

可以实现最普通的图片在左，标题与介绍文字在右的媒体对象组。

我们在论坛中常常能看到和Bootstrap中文官网媒体对象组模块类似的阶梯状媒体对象，它是怎么实现的呢？
其实很简单，我们只需要在上一级的.media-body容器最后添加新的额媒体对象容器.media就可以实现这样的阶梯效果

除了这样的阶梯形式，我们还可以在论坛评论系统中看到，评论是平铺着下来的，也就是媒体对象列表。

我们只需要将原来的.media放在.media-list容器中就可以实现，不过既然都说了是列表，那我们还是直接使用ul>li的排列方式吧:

1
2
3
4
5

<ul class="media-list">
    <li class="media">…</li>
    <li class="media">…</li>
    <li class="media">…</li>
</ul>

Bootstrap同样帮我们清除了，媒体对象列表中的ul>li的默认样式，使展示更急美观

列表组

列表组是Bootstrap框架新增的一个组件，可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。它主要包括两个部分：

1. .list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素
2. .list-group-item：列表项，常用的是li元素，当然也可以是div元素

如：

带徽章的列表组

带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单，只需要在.list-group-item中添加徽章组件.badge：

1
2
3
4

<ul class="list-group">
    <li class="list-group-item">玩转Bootstrap  <span class="badge">5</span></li>
    <li class="list-group-item">基础Bootstrap的网页开发  <span class="badge">12</span></li>
</ul>

可以实现笑效果如下：

如果在列表组中，我们希望列表项是链接的话，Bootstrap为我们提供了两种方案：

1. 直接将链接置于li.list-group-item容器内，它会有链接下划线的存在
2. 将ul.list-group>li.list-group-item的结构换成div.list-group>a.list-group-item，此时与默认的列表组显示无异(emmet会吧？那就能理解我的代码的意思…)

自定义列表组

除了上面默认的列表组之外，为了更清晰的展示内容，Bootstrap实现了自定义列表组，主要是新增了两个类：

1. .list-group-item-heading：用来定义列表项头部样式
2. .list-group-item-text：用来定义列表项主要内容

结构如下编写：

1
2
3
4
5
6
7
8
9
10

<div class="list-group">
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">图解CSS3</h4>
        <p class="list-group-item-text">...</p>
    </a>
    <a href="##" class="list-group-item">
        <h4 class="list-group-item-heading">Sass中国</h4>
        <p class="list-group-item-text">...</p>
    </a>
</div>

列表项的状态设置

和其他的组件一样，列表组也两个状态效果：

• .active：表示当前状态
• .disabled：表示禁用状态

只需要在相应的列表项上添加。class="list-group-item active">，主要对于该项的背景颜色进行高亮，以及其中的徽章进行了高亮处理

禁用状态，只是添加了一个灰色的背景色，以及文字的暗色处理

除了上面的两个最常用的状态之外，Bootstrap为我们的列表组也提供了不同的情景颜色，只需要在列表项中添加.list-group-item-danger这一系列的类。

面板

同样作为一个新增的组件，基础面板非常简单，就是一个div容器运用了.panel样式，产生一个具有边框的文本显示块。由于.panel不控制主题颜色，所以在.panel的基础上增加一个控制颜色的主题.panel-default，另外在里面添加了一个.div.panel-body来放置面板主体内容：

1
2
3
4

<div class="panel panel-default">
    <!-- panel-default就是那一系列的情景类，设置不同的可以设置不同的颜色 -->
    <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div>
</div>

带有头和尾的面板

基础面板看上去太简单了，Bootstrap为了丰富面板的功能，特意为面板增加“面板头部”和“页面尾部”的效果：

1. .panel-heading：用来设置面板头部样式
2. .panel-footer：用来设置面板尾部样式

1
2
3
4
5
6

<div class="panel panel-default">
    <!-- 这里对于不同的情景颜色，面板头的颜色改变十分明显 -->
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <div class="panel-footer">作者：大漠</div>
</div>

面板中嵌套表格

其实面板作为一个用于处理，别的组件完成不了的情况的组件，一般情况下可以把面板理解为一个区域，所以在使用面板的时候，都会在.panel-body放置需要的内容，可能是图片、表格或者列表等。

如果在面板中嵌套表格，只需要将编写好的表格直接放置在面板中即可，不过有着如下两种形式：

1
2
3
4
5
6
7

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <!-- 这里是放在panel-body后面，实际上我们还可以将table放在panel-body里面 -->
    <table class="table table-bordered">…</table>
    <div class="panel-footer">作者：大漠</div>
</div>

两个效果最大的差异是：

1. 放在.panel-body内的表格，实际上就是简单的嵌套，设置了一些padding值等。
2. 房在.panel-body后的表格，会与面板融合在一起，与面板相接的地方，不会有着边框的展示，而是直接展示面板的边框

在面板中嵌套列表组时，同样是这样的两个差异

到这里我们的Bootstrap基础理论入门就结束了，实际上花了很多时间都是在理论上，并且中间还停歇了很长的时间。下一步我们需要做的就是在实战中去不断掌握它，了解它的细节，帮助我们能够缩短搭建时间、快速的搭建网站，并且让其在不同的终端下达到一个非常好的显示效果。

现在各个方面还是有很多不足，坚持学习，继续改进，加油！我的目标可是web全栈呢！

2016-03-01 01:40

导航条

导航条（navbar）和我们在上一个笔记中介绍的导航（nav）相比，就多了一个“条”字。其实在Bootstrap框架中他们有着一定的区别。
在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。

基础导航条

实际上，导航条和导航在外观上的差别并不是那么的大，但是在实际使用中导航条要比导航复杂得多。下面就来实现一个最基础的导航条。

1
2
3
4
5
6
7
8

<div class="navbar navbar-default" role="navigation"><!--role是为了方便屏幕阅读器理解此处内容-->
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">PHP</a></li>
     </ul>
</div>

Other more
可以达到的效果是这样的：

宽屏：

窄屏：

在制作一个基础导航条时，主要注意以下几点：

1. 首先在制作导航的列表(<ul class="nav">)基础上添加类名.navbar-nav
2. 在列表外部添加一个容器（div）在这里允许的话推荐使用<nav>，并且使用类名.navbar和.navbar-default
3. .navbar类的主要功能就是设置左右padding和圆角等效果，通过.navbar-default来进行控制导航条的颜色比如还有.navbar-inverse。（有兴趣的可以去看看源码）

带标题、二级菜单

在Web页面制作中，一般都可以在菜单前面看到有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，其通过.navbar-header和.navbar-brand来实现，如：

1
2
3

<div class="navbar-header">
    <a href="##" class="navbar-brand">WEB开发</a>
</div>

当然也可以用来做logo，中文官网描述，在此不进行详细描述。

二级菜单自然不用多说，在上一篇博客中已经进行了详细说明，若还是不太了解的话，可以再去翻翻我的上一篇博客，我们一起来看看下面这段代码以及能实现的效果：（注意这里使用的是navbar-inverse反色的导航条）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <a href="##" class="navbar-brand">WEB开发</a>
     </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li class="dropdown" >
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">JavaScript
            <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">jQuery</a></li>
                <li><a href="#">Vue</a></li>
                <li><a href="#">NodeJS</a></li>
            </ul>
        </li>
        <li ><a href="#">PHP</a></li>
    </ul>
</div>

效果如下：

我们常常在导航条中都能看到搜索表单，比如知乎，新浪微博等等都具有，Bootstrap框架当然不可能缺掉这样的东西。使用方法也非常简单：

在Bootstrap框架中提供s 了一个.navbar-form，在.navbar容器中放置一个带有.navbar-form类名的表单；再添加.navbar-left让表单左浮动，更好实现对齐。
在Bootstrap中，还提供了.navbar-right样式，让元素在导航条靠右对齐。

把这段代码复制到代码当中看看效果吧：

1
2
3
4
5
6

<form action="##" class="navbar-form navbar-left" rol="search">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="请输入关键词" />
    </div>
    <button type="submit" class="btn btn-default">搜索</button>
</form>

按钮、文本和链接

除了上面的一些样式之外，bootstrap框架提供了三种其他样式：

1. 导航条中的按钮navbar-btn，使不在<form>中的按钮在导航条里垂直居中
2. 导航条中的文本navbar-text，一般使用<p>元素，达到最优的行距
3. 导航条中的普通链接navbar-link，非导航的链接，添加这个类，可以有正确的默认颜色与反色设置

但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。

固定导航条

有时，我们希望导航条固定在浏览器顶部或底部，Bootstrap为我们方便的提供了两个类来实现这样的样式：

1. .navbar-fixed-top：导航条固定在浏览器窗口顶部
2. .navbar-fixed-bottom：导航条固定在浏览器窗口底部

使用方法很简单，只需要在制作导航条最外部容器（navbar）上追加对应的类名即可。

1
2
3

<nav class="navbar navbar-default navbar-static-top">
    ...
</nav>

这个固定的导航条会遮住页面上的其它内容，除非你给<body>元素底部设置了padding。提示：导航条的默认高度是 50px。如：body { padding-bottom: 70px; }，当然你也可以使用你自己的值。

响应式导航条

在上面的例子中，导航条就仅仅能大屏幕下有一个不错的效果，在屏幕变小的情况下，还直接把所有的导航项直接展现出来就不适合了。为了有一个更好的显示效果，响应式的导航条设计也就随之而来。我们先来看看效果，再一步一步分析它！

窄屏时，点击右边的按钮图标可展开，效果与上面的展开效果除了active状态不再溢出容器外，其他基本相同。实现代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
            <span class="sr-only">Toggle Navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
        <a href="#" class="navbar-brand">WEB开发</a>
    </div>
    <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
    <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">PHP</a></li>
        </ul>
    </div>
</div>

分析：

1. 和普通导航条一样，最外层使用<div class="navbar navbar-default" role="navigation">容器包裹，主要是.navbar和 .navbar-default类。
2. 保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入.collapse、.navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。
3. 保证在窄屏时要显示的图标样式（固定写法）：

   1 2 3 4 5 6

   <button class="navbar-toggle" type="button" data-toggle="collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

4. 并为button添加data-target=”.类名/#id名”，究竞是类名还是id名呢？由需要折叠的div来决定。（这里很关键，你可以把上面的代码在这里进行修改，会发现无法展开）

分页导航

分页导航几乎在所有的网站都可以看到，好的分页导航可以给用户带来更好额用户体验，还可以方便爬虫在网页中进行搜索。

带页码的分页导航

带页码的分页导航，应该是最常见的一种分页导航，特别是在列表页内容很多的时候，会给用户提供带页码的分页导航方式，在Bootstrap中使用的是ul>li>a这样的结构，在ul标签上加入pagination类：

1
2
3
4
5
6
7
8
9

<ul class="pagination ">
    <li><a href="#">&laquo;第一页</a></li>
    <li><a href="#">6</a></li>
    <li class="active"><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li class="disabled"><a href="#">最后一页&raquo;</a></li>
</ul>

实现效果如下：

可以看到同样会有hover、active、disabled等等状态，当然它也可以调整大小：在外层容器中的.pagination类后，添加.pagination-lg让分页导航变大；.pagination-sm让分页导航变小：

翻页分页导航

其实这种方式，就是看不到具体的页码，只会提供一个上一页和下一页的按钮。

使用方式很简单，也就是在ul标签上添加pager类：

1
2
3
4

<ul class="pager">
    <li><a href="#">&laquo;上一页</a></li>
    <li><a href="#">下一页&raquo;</a></li>
</ul>

它默认是居中显示的，如果我们需要一个居左一个居右显示的话，添加两个样式：previous让“上一步”按钮居左；next让“下一步”按钮居右。（同样可以使用disabled表示禁用状态）

1
2
3
4

<ul class="pager">
    <li class="previous disabled"><a href="#">&laquo;上一页</a></li>
    <li class="next"><a href="#">下一页&raquo;</a></li>
</ul>

其他

标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。
在Bootstrap专门将这样的效果提取成为了单独的标签组件。可以使用<span>这样的行内标签添加.label类来控制大小，再使用情景类来控制高亮显示的颜色如：label-default、label-danger等等（在原来笔记中说到过这样的情景类，只不过这里需要加上不同的前缀）

徽章（角标）

其实和上面的标签效果很大一部分是类似的，一般用作信息提示，例如剩余多少未读信息等等，也就是我们常常能在右上角看到的未读信息提示。在Bootstrap中，把这种效果称作为徽章效果，使用badge类来实现。

给链接、导航等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。

1
2
3
4

<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

通过查看源码，我们可以发现Bootstrap同样使用:empty伪元素，来设置当没有内容的时候隐藏：

1
2
3

.badge:empty {
    display: none;
}

需要注意的是IE8 不支持 :empty 选择符，所以不会默认隐藏；

Bootstrap 中的徽章会适配导航元素的激活状态。

1
2
3
4
5

<ul class="nav nav-pills" role="tablist">
    <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

好了《导航条、分页导航》的学习到此就结束了，下面需要学习Bootstrap中其他的一些比较零散的内置组件。

继续坚持，加油！

参考：

• 慕课网：玩转Bootstrap
• Bootstrap中文官网：全局 CSS 样式

我们接下来要学习的东西呢，是Bootstrap为我们提供的一些组件，这些组件的使用非常简单，可以方便快捷帮助我们搭建网站，并且能达到一个不错的显示效果。我们最需要注意的就是：HTML的结构和bootstrap提供添加到结构上的类以及属性。
这些组件的交互功能是依赖于jQuery库实现的，所以还必须引入jQuery.js，且必须在Bootstrap.js之前。正式上线的话直接使用压缩版本就可以了如下：

1
2

<script src="../js/jquery-min-1.11.3.js"></script>
<script src="../js/bootstrap.min.js"></script>

菜单

基本用法

在官方文档中，我们看到的下拉菜单组件是这样的：

1
2
3
4
5
6
7
8
9

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    下拉菜单<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">菜单项1</a></li>
        <li><a href="#">菜单项2</a></li>
    </ul>
</div>

那么，到底哪一些属性是必须的、用来控制行为的呢？又有哪一部分是起到修饰作用的？

我们来自己简化一下这一段代码：

1
2
3
4
5
6
7

<div class="dropdown">
    <button class="dropdown-toggle"data-toggle="dropdown">下拉菜单</button>
    <ul class="dropdown-menu" >
        <li>菜单项1</li>
        <li>菜单项2</li>
    </ul>
</div>

我们来看看简化前后的对比图：

在使用Bootstrap框架中的下拉菜单组件时，其结构运用的正确与否非常的重要，如果结构和类名未使用正确，直接影响组件是否能正常运用。经过我们上面的简化，最终可以看到核心要求有以下几点：

1. 使用一个名为.dropdown的容器包裹了整个下拉菜单元素，示例中为：<div class="dropdown"></div>
2. 使用了一个<button>按钮做为父菜单，并且定义类名.dropdown-toggle和自定义data-toggle属性，且值必须和最外容器类名一致，此示例为：data-toggle="dropdown"
3. 下拉菜单项使用一个ul列表，并且定义一个类名为.dropdown-menu，此示例为：<ul class="dropdown-menu">

也就是说，我们仅仅需要牢记这3个步骤我们就可以使下拉菜单生效，<button>内的<span>标签，也仅仅是用来进行图标的展示，让菜单更加清晰。不过虽然如此，我个人建议在实际的使用过程中，把Bootstrap框架中的下拉菜单的其它属性也一并加上，这样更加友好的为不同的客户如：屏幕阅读器提供了一个优质的体验。

那么这些是怎么起作用的呢？

查看CSS源码可以看到.dropdown-menu有一个display:none，所以下拉列表项默认隐藏的；我们继续打开chrome开发者工具（F12），可以看到每一次在列表项展现出来时，.dropdown类后还增加了一个.open的类；不用多说想肯定就是这个类在起作用，我们再继续回到CSS源码中去可以看到：

1
2
3

.open > .dropdown-menu {
  display: block;
}

看到这里也应该不用过多说明了，添加了这个.open类时，.dropdown-menu自然的就显示出来了。

下拉菜单修饰

下拉分隔线

在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的<li>，并且给这个<li>添加类名.divider来实现添加下拉分隔线的功能。<li class="divider"></li>对应的样式代码：

1
2
3
4
5
6

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

菜单标题

上一小节讲解通过添加divider可以将下拉菜单分组，为了让这个分组更明显，还可以给每个组添加一个头部（标题）：<li class="dropdown-header">第一部分菜单头部</li>。

从源码中比较关键的两个点是：标题的字体颜色是：color: #777;，还有内填充padding: 3px 20px;

对齐方式

Bootstrap框架中下拉菜单默认是左对齐也就是添加.dropdown-menu-left 类所能达到的效果，如果你想让下拉菜单相对于父容器右对齐时，可以在.dropdown-menu上（也就是你的菜单项的ul）添加一个.pull-right或者.dropdown-menu-right类名，如下所示：<ul class="dropdown-menu pull-right" >
源码如下：

1
2
3
4
5

.dropdown-menu.pull-right,
.dropdown-menu-right {/*两个类自选*/
  right: 0;
  left: auto;
}

当然你只进行这样的设置的话，可能还会有一些奇怪的情况出现，比如列表项跑到屏幕最右边去了，所以同时一定要为.dropdown添加float:left样式。

1
2
3

.dropdown{
  float: left;
}

菜单项状态

下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）：（包括下面提到的状态都必须在li中包含a标签才有- -）

下拉菜单项除了上面两种状态，还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名如：<li class="disabled"><a href="#">桃</a></li>

我们可以实现下面这样的效果：

按钮

我们在《Bootstrap入门笔记之（二）表单》中，已经了解过了Bootstrap中按钮的使用，在这里我们继续进行一些扩展！

按钮组及工具栏

单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。这个时候我们就会需要用到按钮组

对于结构方面，非常的简单。使用一个名为.btn-group的容器，把多个按钮放到这个容器中。如：

1
2
3
4
5

<div class="btn-group">
    <button type="button" class="btn btn-default">向左</button>
    <button type="button" class="btn btn-danger">中间</button>
    <button type="button" class="btn btn-default">向右</button>
</div>

如何转化成工具栏呢？只需要再用一个.btn-toolbar的内容，将我们的.btn-group再进行一次包裹，同时，我们还可以使用.btn-group-lg大按钮组、.btn-group-xs:超小按钮组这一系列的类添加到.btn-group容器来进行对一组按钮进行大小控制如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class= "btn-toolbar">
    <!-- …… -->
    <div class= "btn-group ">
        <button type="button" class="btn btn-default">向左</button>
        <button type="button" class="btn btn-danger">中间</button>
        <button type="button" class="btn btn-default">向右</button>
    </div>
    <div class= "btn-group btn-group-sm">
        <button type="button" class="btn btn-default">向左</button>
        <button type="button" class="btn btn-danger">中间</button>
        <button type="button" class="btn btn-default">向右</button>
    </div>
    <!-- …… -->
</div>

上面两段代码效果如下：

嵌套分组

这里的嵌套分组其实就是在分组按钮中嵌套了一个下拉菜单。使用的时候，只需要把当初制作下拉菜单的.dropdown的容器换成.btn-group，并且和普通的按钮放在同一级。如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="btn-group">
    <button class="btn btn-default" type="button">首页</button>
    <div class="btn-group">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">产品展示<span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="##">公司简介</a></li>
            <li><a href="##">企业文化</a></li>
            <li><a href="##">组织结构</a></li>
            <li><a href="##">客服服务</a></li>
        </ul>
    </div>
    <button class="btn btn-default" type="button">关于</button>
</div>

当然我们还可以从水平按钮组变成垂直分组，只需要在水平分组的最外层容器的类名.btn-group替换成.btn-group-vertical，就可以实现垂直分组的效果。

按钮的向下向上三角形

我们在下拉菜单和嵌套分组都都看到了一个按钮的向下三角形，我们是通过在<button>标签中添加一个<span>标签元素，并且命名为caret，这个三角形完全是通过CSS代码来实现的：

1
2
3
4
5
6
7
8
9
10

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

有的时候我们的下拉菜单会向上弹起，这个时候我们的三角方向需要朝上显示，实现方法：需要在.btn-group类上追加dropup类名（这也是做向上弹起下拉菜单要用的类名）。

1
2
3
4
5

.dropup .caret{
    content: "";
    border-top: 0;/*可以看到这里top与bottom的变化*/
    border-bottom: 4px solid;
}

那么现在就来对比一下，上面代码以及类的添加可以达到的不同效果：

导航

导航对于一位前端开发人来说眼应该都不陌生。可以说，每一个网页里面都会有导航的存在，便于用户查找网站所提供的各项功能服务。那么如何使用Bootstrap框架制作各式各样的导航呢？

基础样式

Bootstrap框架中制作导航条主要通过.nav样式。默认的.nav样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如nav-tabs、nav-pills之类。

1
2
3
4
5

<ul class="nav nav-tabs">
    <li><a href="#">HTML5</a></li>
    <li><a href="#">CSS3</a></li>
    <li><a href="#">JavaScript</a></li>
</ul>

当然他们同样也有当前状态（.active）和禁用状态（.disabled），我们给第一个导航添加当前状态，最后一个导航添加禁用状态，实现效果如下：

修饰

垂直堆叠的导航

在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在**.nav-pills**的基础上添加一个.nav-stacked类名即可，同时，我们和下拉菜单一样，同样可以使用组之间的分割线例，只需要在导航项之间添加<li class=”nav-divider”></li>,如：

1
2
3
4
5
6

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="#">HTML5</a></li>
    <li><a href="#">CSS3</a></li>
    <li class="nav-divider"></li>
    <li class="disabled"><a href="#">JavaScript</a></li>
</ul>

复制到浏览器中看看效果吧！

你应该已经发现了在垂直导航中，每一个导航项都是占文字居左，占100%的父容器宽度的，如果你想有响应式的效果，应该和栅格系统一起使用，另外为什么不试试使用nav-tabs来实现垂直导航呢？看看效果，你就会明白为什么不使用了。

自适应导航

自适应导航和前面制作自适应按钮是一样的，不过更换了一个类名，.nav-justified。当然他需要和.nav-tabs或者.nav-pills配合在一起使用。 它是响应式的，在宽度足够时，给多个导航项，均分空间；在达到一个临界值（768px）时，它会和垂直导航一样：每一项都充满父容器的宽度，不同的是，他的文字是居中显示的

导航中加下拉菜单（二级导航）

前面介绍的都是使用制作一级导航，但很多时候，在Web页面常常会用到二级导航的效果。
在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名.dropdown，同时在**li中嵌套另一个列表ul
**

1
2
3
4
5
6
7
8
9
10
11

<ul class="nav nav-pills">
    <li ><a href="#">HTML5</a></li>
    <li><a href="#">CSS3</a></li>
    <li class="dropdown">
        <a href="##" class="dropdown-toggle" data-toggle="dropdown">JavaScript<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="##">JQuery</a></li>
            <li><a href="##">Vue</a></li>
            …
       </ul>
</ul>

这里的话不进行太多的讲解，与上面的嵌套按钮效果一致。

面包屑式导航

面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。一般在文章、博客、列表处用的比较多，需要用到.breadcrumb类。

1
2
3
4
5

<ol class="breadcrumb">
    <li><a href="#">个人首页</a></li>
    <li><a href="#">标签</a></li>
    <li class="active">Bootstrap</li>
</ol>

可以实现的效果：

是不是很简洁明了呢？

好了我们对于《 菜单、按钮及导航》的学习到这里呢先就告一段落了，下一章节应该就是对于导航条、分页导航的学习了。继续加油！

参考：

• 慕课网：玩转Bootstrap
• Bootstrap中文官网：全局 CSS 样式