联系我们
简单又实用的WordPress网站制作教学
当前位置：网站首页 > 网页前端技术 > 正文

【Bootstrap第二节】基本环境的配置 - Web前端

作者：98wpeu发布时间：2026-05-08分类：网页前端技术浏览：3

导读：上一篇文章我们讲到“【Bootstrap第一节】基本介绍”，主要介绍了Bootstrap的一些基本知识和竞争优势，这节主要让大家了解下bootstrap基本环境的配置。Bootst...

Bootstrap

上一篇文章我们讲到“【Bootstrap第一节】基本介绍”，主要介绍了Bootstrap的一些基本知识和竞争优势，这节主要让大家了解下bootstrap基本环境的配置。Bootstrap 3.0版本提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容，看看哪种方式适合你的需求吧。

■ 用于生产环境的 Bootstrap： 编译并压缩后的 CSS、javascript 和字体文件。不包含文档和源码文件。点击下载

■ Bootstrap源码：Less、JavaScript 和 字体文件的源码，并且带有文档。需要 Less 编译器和一些设置工作。点击下载

■ sass：这是 Bootstrap 从 Less 到 Sass 的源码移植项目，用于快速地在 RAIls、Compass 或 只针对 SASS 的项目中引入。点击下载

上面三种方式，在一些小公司可能第一种用的比较多，如果是大公司，后面两种居多，因为他们便于管理和维护。对于我们个人来说，三种都应该掌握。

说完三种方式，接下来介绍如何把bootstrap应用到具体页面中呢，我们可以在页面中引入如下代码：

<!-- 新 Bootstrap 核心 css 文件 --> 
<link rel="StyleSheet" href="//CDN.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） --> 
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- JQuery文件。务必在bootstrap.min.JS 之前引入 -->
<script src="//cdn.bootcss.com/jQuery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 Javascript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Bootstrap中文网为Bootstrap专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 主页查看更多可用的工具库。【当然啦，我们可以进行二次开发】

预编译版

当我们下载完安装包后，解压后可以看下文件目录:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

上面展示的就是 Bootstrap 的基本文件结构：预编译文件可以直接使用到任何 WEB 项目中。我们提供了编译好的 CSS 和 JS (bootstrap.*) 文件，还有经过压缩的 CSS 和 JS (bootstrap.min.*) 文件。同时还提供了 CSS 源码映射表 (bootstrap.*.map) ，可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体，在附带的 Bootstrap 主题中使用到了这些图标。

Bootstrap 源码

Bootstrap 源码包含了预先编译的 CSS、javascript 和图标字体文件，并且还有 LESS、javaScript 和文档的源码。具体来说，主要文件组织结构如下：

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

说明：less/ js/ 和 fonts/ 目录分别包含了 CSS、JS 和字体图标的源码。dist/ 目录包含了上面所说的预编译 Bootstrap 包内的所有文件。docs/ 包含了所有文档的源码文件，examples/ 目录是 Bootstrap 官方提供的实例工程。除了这些，其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。

编译 CSS 和 JavaScript 文件

Bootstrap 使用 Grunt 作为编译系统，并且对外提供了一些方便的方法用于编译整个框架。下面讲解的就是如何编译源码、运行测试用例等内容。

安装 Grunt 前，你需要首先下载并安装 node.js （npm 已经包含在内）。npm 是 node packaged modules 的简称，它的作用是基于 node.js 管理扩展包之间的依赖关系。

然后在命令行中输入以下命令：

  1. 在全局环境中安装 grunt-cli ：npm install -g grunt-cli 。

  2. 进入 /bootstrap/ 根目录，然后执行 npm install 命令。npm 将读取 package.json 文件并自动安装此文件中列出的所有被依赖的扩展包。

上述步骤完成后，你就可以运行 Bootstrap 所提供的各个 Grunt 命令了。

可用的 Grunt 命令

grunt dist （仅编译 CSS 和 JavaScript 文件）

重新生成 /dist/ 目录，并将编译压缩后的 CSS 和 JavaScript 文件放入这个目录中。作为一名 Bootstrap 用户，大部分情况下你只需要执行这一个命令。

grunt watch （监测文件的改变，并运行指定的 Grunt 任务）

监测 Less 源码文件的改变，并自动重新将其编译为 CSS 文件。

grunt test （运行测试用例）

在 PhantomJS 环境中运行 JSHint 和 QUnit 自动化测试用例。

grunt docs （编译并测试文档中的资源文件）

编译并测试 CSS、JavaScript 和其他资源文件。在本地环境下通过 jekyll serve 运行 Bootstrap 文档时需要用到这些资源文件。

grunt （重新构建所有内容并运行测试用例）

编译并压缩 CSS 和 JavaScript 文件、构建文档站点、对文档做 html5 校验、重新生成定制工具所需的资源文件等，都需要 Jekyll 工具。这些只有在你对 Bootstrap 深度研究时才有用。

除错

如果你在安装依赖包或者运行 Grunt 命令时遇到了问题，请首先删除 npm 自动生成的 /node_modules/ 目录，然后，再次运行 npm install 命令。

基本模板

使用以下给出的这份超级简单的 html 模版，或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。

拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。

<!DOCtype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-eqUIv="X-UA-Compatible" content="ie=Edge">
    <meta name="vIEwport" content="width=device-width, initial-scale=1">
    <!-- 上述3个metA标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for ie8 support of Html5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>
    <!-- jquery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/JQuery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

预览效果：

总结

关于bootstrap的基本配置方面的知识主要介绍这么多，下一节我们介绍：bootstrap栅格系统。

相关推荐

网页前端技术排行
最近发表
网站分类
标签列表