Java Web程序设计任务教程（第2版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.5 Bootstrap框架基础

1.5.1 Bootstrap框架简介

Bootstrap是由Twitter公司的设计师Mark Otto（马克·奥托）和Jacob Thornton（雅各布·桑顿）合作开发的开源框架，该框架基于HTML、CSS和JavaScript语言编写，于2011年8月在GitHub上发布，一经推出就颇受欢迎。Bootstrap具有简单、灵活的特性，能够帮助开发者快速搭建前端页面，常用于开发响应式布局和移动设备优先的Web项目。

小提示：

所谓框架，顾名思义就是一套架构，它有一套比较完整的解决方案，而且控制权在框架本身。Bootstrap是一款用于网页开发的框架，它拥有样式库、组件和插件，使用者需要按照框架所规定的某种规范进行开发。

Bootstrap框架结合HTML、CSS和JavaScript技术，可以构建出非常优雅的前端页面，而且占用资源较少。下面列举了Bootstrap框架的一些特点。

1． 响应式设计

Bootstrap框架为用户提供了一套响应式的移动设备优先的流式栅格系统，拥有完备的框架结构，项目开发方便、快捷，提高了开发效率。

2． 移动设备优先

随着移动设备的使用者越来越多，自Bootstrap 3开始，Bootstrap框架设计理念发生了改变，转为以移动设备优先为目标，Bootstrap 3默认样式为移动设备提供了友好支持。

3． 浏览器支持

目前主流浏览器都支持Bootstrap框架，包括IE、Firefox、Chrome、Safari等。Bootstrap 4兼容IE 10+和iOS 7+。

4． 低成本、易上手

学习Bootstrap框架，只需要读者具备HTML、CSS和JavaScript的基础知识，门槛不高。Bootstrap框架拥有完善的文档，在开发中便于查找，使用起来比较方便。Bootstrap 还具有强大的扩展性，能够很好地与Web项目相结合。

5. CSS预编译

Bootstrap 框架提供了便捷的语法和特性以供开发者编写源码，并可使用专门的编译工具将源码转化为CSS语法。Bootstrap 4使用Sass（一种CSS扩展语言）进行CSS编写和预编译，减少了冗余代码，使得CSS样式代码更易于维护和扩展。

6． 框架成熟

Bootstrap框架不断适应Web技术的发展，在原有架构的基础上，进行更新迭代和完善，并在大量的项目中充分使用和测试。因此，Bootstrap框架比较成熟。

7． 丰富的组件库

Bootstrap框架提供了功能强大的组件与插件，例如小图标、按钮组、菜单导航、标签页等。丰富的组件和插件可以使开发人员快速搭建前端页面。开发人员还可以根据实际需要进行组件和插件的定制。

1.5.2 Bootstrap框架的下载与使用

登录Bootstrap中文官方网站，获取Bootstrap的下载地址。Bootstrap官方网站首页如图1-26所示。

图1-26 Bootstrap官方网站首页

在图1-26中单击“下载Bootstrap”按钮，进入下载页面，如图1-27所示。

图1-27 Bootstrap下载页面

Bootstrap提供了3种下载方式供开发者进行选择：第1种方式是下载预编译的文件；第2种方式是下载源文件进行手动编译；第3种方式是使用CDN引入。

如果不需要了解Bootstrap的源代码，则直接选择预编译的文件即可。Bootstrap预编译文件不包含文档和最初的源代码文件，可以直接应用到Web项目中。预编译的Bootstrap文件下载成功后，进行解压，在解压文件中会看到css和js两个文件夹，这两个文件夹下还有很多个子文件，其结构如下：

bootstrap/
├── css/
│  ├── bootstrap-grid.css
│  ├── bootstrap-grid.css.map
│  ├── bootstrap-grid.min.css
│  ├── bootstrap-grid.min.css.map
│  ├── bootstrap-reboot.css
│  ├── bootstrap-reboot.css.map
│  ├── bootstrap-reboot.min.css
│  ├── bootstrap-reboot.min.css.map
│  ├── bootstrap.css
│  ├── bootstrap.css.map
│  ├── bootstrap.min.css
│  └── bootstrap.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

在上述bootstrap目录的基本结构中，bootstrap.＊表示预编译好的文件；bootstrap.min.＊表示经过压缩的文件；bootstrap.＊.map表示CSS源码映射表文件，这些文件可直接在某些浏览器的开发工具中使用。

了解预编译Bootstrap的文件结构之后，下面主要讲解如何在页面开发中引入预编译Bootstrap的核心CSS和JavaScript文件。首先将bootstrap.min.css和bootstrap.min.js文件复制到之前已经创建的chapter01文件夹中，然后在需要使用bootstrap时编写代码引入bootstrap文件。引入bootstrap文件的示例代码如下：

<!-- 引入Bootstrap核心CSS文件 -->
<link rel=＂stylesheet＂ href=＂bootstrap.min.css＂>
<!-- 引入Bootstrap核心JavaScript 文件 -->
<script src=＂bootstrap.min.js＂></script>

上述代码通过<link>标签引入bootstrap.min.css文件，其中，href属性的值为本地文件路径；通过<script>标签引入bootstrap.min.js文件，设置src属性值为本地文件路径。

上一章目录下一章