01 初识Bootstrap

Bootstrap特性

Bootstrap构成

  Bootstrap构成模块从大的方面可以分为布局框架、页面排版、基本组件、jQuery插件以及变量编译的LESS几个部分。

1. 页面布局
     Bootstrap在960网格系统的基础上扩展了一套优秀的网格布局，而在响应式布局中有更强大的功能，能够让网格布局适应各种设备。
2. 页面排版
     页面排版的风格直接影响产品风格。在Bootstrap中，页面的排版都是从全局的概念上出发，定制了主体文本、段落文本、强调文本、标题、Code风格、按钮、表单、表格等格式。
3. 基本组件
     基本组件是Bootstrap精华之一，都是开发者平时需要的交互式组件。这些组件都配有jQuery插件，运用它们可以大幅度提高用户的交互体验。
4. jQuery插件
     Bootstrap中的jQuery插件主要用来帮助开发者实现与用户交互的功能，下面是Bootstrap提供的插件：

• 对话框（Modals）：是在JavaScript模板基础上自定义的一款流线型、灵活性极强的弹出蒙版效果的插件
• 下拉框（Dropdowns）：可以制作具有下拉功能，如下拉菜单、下拉按钮、下拉工具条等。
• 滚动条（Scrollspy）：实现滚动条位置的效果，如在导航条中有多个标签，用户单击其中一个标签，滚动条会自动定位到导航中标签对应的文本位置。
• Tabs：能够快速实现本地内容的转换，动态切换标签对应的本地内容
• 提示工具（Tooltips）：无需加载任何图片，采用CSS3新技术，动态显示data-attributes存储的标题信息
• 提示面板（Popover）：在Tooltips的插件上扩展，用来显示一些叠加内容的提示效果，此插件需要配合Tooltips一起使用。
• 警告框（Alert）：用来关闭警告信息块
• 按钮（Button）：用来控制按钮的状态或更多组件功能，如复选框、单选按钮以及载入状态条等
• 折叠（Collapse）：手提琴插件，可以用来制作折叠面板或菜单等效果
• 幻灯片（Carouse）：实现图片播放功能的插件
• 补全文本（Typeahead）：可以记住文本框输入的文本，下次输入时可以自动补全
• 动画效果（Transitions）：Bootstrap使用这个插件，为一些动画效果增加过渡性，使动画效果更细腻、更生动。

5. 动态样式语言-LESS
     LESS是动态CSS语言，基于JavaScript引擎或者服务端对传统的CSS进行动态的扩展，使得LESS具有更强大的功能和灵活性。基于LESS，编辑CSS就可以像使用编程语言一样，定义变量、嵌入声明、混合模式、运算等。
6. Bootstrap的jQuery UI
     Bootstrap的jQuery UI其实是从框架中衍生出来的一个jQuery UI主题，jQuery UI Bootstrap除了包含Bootstrap各个方面功能之外，还在其基础上补充了以下特性：动态添加Tabs、日期范围选择组件、自定义文件载入框、滑动块、日期控件等。

Bootstrap的特色

  Bootstrap是非常棒的前端开发工具包，具有以下特色：

• 由匠人造，为匠人用
• 适应各种技术水平
• 跨设备、跨浏览器
• 提供12列栅格布局
• 支持响应式设计
• 样式化的文档
• 不断完善的代码库
• 可定制的jQuery插件
• 选用LESS构建动态样式
• 支持HTML5
• 支持CSS3
• 提供代码开源

Bootstrap的功能

  Bootstrap集成HTML、CSS、JavaScript技术，主要包含三个部分：

• Bootstrap的HTML：是基于HTML5的最新的前沿技术
• Bootstrap的CSS：是使用LESS创建的CSS，是新一代动态CSS
• Bootstrap的JavaScript：使用jQuery的JavaScript，它不会使每个用户都为了相似的功能，在每个网站下都去下载一份相同的代码，而是用一个代码库，将常用的函数放进去，按需取用。

Bootstrap插件

  下面介绍几个比较常用的Bootstrap插件的案例：

1. Sco.js：由于大部分的Bootstrap js插件是无法扩展的，因此才有了sco.js，它是对Bootstrap中js插件的增强实现。
2. Chart.js：Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库
3. Bsie：Bsie弥补了Bootstrap对IE6的不兼容
4. jQuery UI Bootstrap：jQuery UI Bootstrap允许在使用jQuery UI控件时也能充分利用Bootstrap的样式，而且不会出现样式不统一的现象，使得Bootstrap和jQuery UI可以完美地融合在一起。
5. Flat UI：Flat UI是基于Bootstrap做的Metro化改造
6. Metro UI CSS：Metro UI CSS是一套用来创建类似Windows 8 Metro UI风格网站的样式
7. HTML5 Boilerplate：是一套专业的前端模板，用以开发快捷、健壮、适应性强的APP或网站。
8. BootstrapEd：BootstrapEd是基于Bootstrap，并且优化Bootstrap在中文Web环境中的效果，增强Bootstrap中的内置组件，增加有价值的通用组件。

使用Bootstrap

Bootstrap开发工具和资源

  Jetstrap是国外开发者为Bootstrap专门设计的可视化制作工具，允许其他开发者、设计师直接在网页端拖拽各个组件即可制作出漂亮的网页，通过Jetstrap制作出来的网页100%符合Bootstrap标准。
  Layout lt是一个在线工具，它可以简单而又快速地搭建Bootstrap响应式布局，操作基本是使用拖拽的方式来完成，而元素都是基于Bootstrap框架集成的。

下载定制Bootstrap

下载Bootstrap

  从Bootstrap的官网上可以下载最新的Bootstrap，这里学习是基于Bootstrap3的版本。

定制Bootstrap

  Bootstrap库文件很大，如果仅希望应用其中几个效果，或者特定插件，则建议通过定制方式使用Bootstrap。把所有效果和插件都导入页面，一方面会增加宽带负荷，影响网页的加载速度；另一方面，众多的CSS类样式和JavaScript源代码，会与制作页面的样式和脚本发生冲突。定制Bootstrap的具体方法如下：

1. 访问Bootstrap的主页面，点击菜单栏中的“定制”按钮，打开定制页面
2. 选择组件，在定制页面的右侧的导航栏中选择"Less components"按钮，页面会切换到组件选择页面
3. 单击页面中的"全选/全部取消"按钮，取消所有选项的勾选状态，然后根据需要勾选需要的组件。组件包括如下几个部分，每个部分又可以包含多个项目：

• Common CSS（常用CSS），是用来设置页面基本样式和布局的
• Components（组件）
• JavaScript components（JS组件）

4. 然后使用同样的方式点击页面右侧的"Less variables（定制变量）"、"jQuery plugins（jQuery插件）"选择需要的变量和插件
5. 打包下载，在页面右侧的导航栏中单击"Download"按钮，切换到下载页面，单击"编译并下载"按钮，下载定制后的Bootstrap压缩包。

认识Bootstrap结构

源码版Bootstrap文件结构

  解压下载好的源码版后的文件说明如下：

• dist文件夹：包含了预编译Bootstrap包内的所有文件
• docs文件夹：存储Bootstrap参考文档，在该文件夹中单击index.html文件，可以查阅相关参考资料。在examples子目录中可以浏览Bootstrap应用示例
• fonts文件夹：存储字体图标文件
• js文件夹：存储各种jQuery插件和交互行为所需要的JavaScript脚本文件，每一个插件都是一个独立的JavaScript脚本文件，可以根据需要进行独立引入
• less文件夹：存储所有CSS动态脚本文件，所有文件都以less作为扩展名，但可通过任何文本编辑软件的打开。less是动态样式表语言，需要编译才能在页面中应用，即只有less文件被转换为普通的CSS样式表文件后才可以被浏览器正确解析

  docs-assets文件夹、examples文件夹和所有*.html文件是文档的源码文件。除了前面提到的这些文件，还包含package定义文件、许可证文件等。其中最为重要的是docs目录下的CSS样式文件、less目录中的编译文件、js目录中的jQuery插件。

编译版Bootstrap文件结构

  编译后的文件可快速应用于任何Web项目，压缩包中提供了编译版的CSS和JS文件，同时也提供了编译并压缩之后的CSS和JS文件。

注意：所有的JavaScript插件都依赖jQuery库，因此jQuery必须在BootStrap之前引入

文件名	说明
bootstrap. css	完整的Bootstrap样式表，未经压缩过的，可供开发人员调试使用
bootstrap. min.css	经过压缩的Bootstrap样式表，内容和bootstrap.css完全一样，但是将不需要的东西删除了，体积会小
bootstrap-theme. css	是Bootstrap框架主体样式表，如果网站项目不需要各种复杂的主体样式，可以不引入
bootstrap-theme.min.css	是压缩版的bootstrap-theme.css文件
bootstrap.js	是Bootstrap的所有JavaScript指令的集合，Bootstrap中的所有的JavaScript效果，都是这个文件控制的
bootstrap. min.js	是压缩版本的bootstrap.js文件

安装Bootstrap

  把Bootstrap压缩包下载到本地之后，就可以安装使用了。

本地安装

1、安装Bootstrap的基本样式
  样式的安装有多种方法，下面的代码使用link标签调用CSS样式，这是一种常用的调用方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap学习</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap-theme.css">
    <link rel="stylesheet" href="./self.css">
</head>
<body>

</body>
</html>

  其中bootstrap.css是Bootstrap的基本样式，bootstrap-theme.css是Bootstrap的主题样式，self.css是自己写的样式文档。

注意：

1. 其中bootstrap.css是Bootstrap框架集中的基本样式文件，只要应用Bootstrap，就必须调用这个文件。
2. bootstrap-theme.css则可根据需要选择性安装，如果想要使用各种主题效果，就必须调用这个样式文件。
3. 调用必须遵循先后顺序，bootstrap.theme.css必须置于bootstrap.css之后，否则就不具有响应式布局功能。
4. 最后，self.css是项目中的自定义样式，用来覆盖Bootstrap中的一些默认设置，便于开发者定制本地样式，放在最后。

2、调用JavaScript
  调用JavaScript仅把需要的jQuery插件源文件按照与上一步相似的方式加入到页面中即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap学习</title>
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap-theme.css">
    <link rel="stylesheet" href="./self.css">
</head>
<body>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>

  其中jquery.js是jQuery库基础文件，bootstrap.js是Bootstrap的jQuery插件源文件。JavaScript脚本文件建议置于文档尾部，即放置在</body>标签的前面，而不是放在head标签内。

在线安装

  Bootstrap中文网为Bootstrap构建了CDN加速服务，访问速度快、加速效果明显。用户可以在文档中直接引用：

<!-- 最新Bootstrap核心CSS文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css" >
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css" >
<!-- jQuery文件，务必在bootstrap.min.js之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- 最新的Bootstrap核心JavaScript文件 -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap,min.js"></script>

实战案例

设计按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计按钮</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body class="text-center">
    <h1 class="btn btn-success btn-lg"><i class="glyphicon glyphicon-user"></i>Hello World</h1>
</body>
</html>

设计Tabs组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计tabs组件</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Chart.js</a></li>
        <li><a href="#tab2" data-toggle="tab">grumble.js</a></li>
        <li><a href="#tab3" data-toggle="tab">Sco.js</a></li>
        <li><a href="#tab4" data-toggle="tab">Headroom.js</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1"><img src="./images/1.png"></div>
        <div class="tab-pane" id="tab2"><img src="./images/2.png"></div>
        <div class="tab-pane" id="tab3"><img src="./images/3.png"></div>
        <div class="tab-pane" id="tab4"><img src="./images/4.png"></div>
    </div>

    <script src="../jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>

示例代码可以参考：代码