JavaWeb--------BootStrap基础
一. Bootstrap 简介
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
为什么使用 Bootstrap？
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
Internet Explorer Firefox Opera Google Chrome Safari
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。
它是开源的。
Bootstrap 包的内容
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构部分做详细的讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分做详细的讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件部分做详细的讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件部分做详细的讲解。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
Bootstrap 实例1，代码如下：
我的第一个 Bootstrap 页面
重置窗口大小，查看响应式效果！
Column 1
开始学习BootStrap！
Column 2
开始学习BootStrap！
Column 3
开始学习BootStrap！
Bootstrap 实例2，代码如下：
Create a responsive table with alternating cell background color:
#
Name
Street
1
Anna Awesome
Broome Street
2
Debbie Dallas
Houston Street
3
John Doe
Madison Street
二. BootStrap 环境的安装
Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。
1） 下载 Bootstrap
您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：
Bootstrap 下载，您会看到两个按钮：
Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。
为了更好的了解和更方便的使用，我们将在本教程中使用 Bootstrap 的预编译版本。
由于文件是被编译过和压缩过的，在独立的功能开发中，您不必每次都包含这些独立的文件。
本教程编写时，使用的是最新版（Bootstrap 3）。
2） 文件结构
预编译的 Bootstrap
当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：
已编译的 Bootstrap 文件结构
如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的 CSS 和 JS（bootstrap.min.*）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。
Bootstrap 源代码
如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：
Bootstrap 源代码结构
less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。
3） HTML 模板
一个使用了 Bootstrap 的基本的 HTML 模板如下所示：
Bootstrap 模板
Hello, world!
在这里，您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。
有关上面代码段中每个元素的细节将在 Bootstrap CSS 概览 章节详细讲解。
现在让我们尝试使用Bootstrap输出"Hello, world!"：
Hello, world!
三. BootStrap 网格
1） Bootstrap 网格系统
网格系统允许我们正确地布局我们网站的内容。
它将屏幕划分为多个行和列，可用于创建各种类型的布局。
一旦我们定义了行和列，我们可以在其中放置HTML元素。
Bootstrap的网格系统将屏幕划分为列 - 每行最多12个。
列宽根据屏幕的大小而变化。因此，Bootstrap的网格系统是响应式的，因为当浏览器窗口的大小改变时，列动态地调整大小。
你可以创建无限数量的行。这些行和列的交集形成了一个矩形网格，以包含网站的内容。
列类
Twitter Bootstrap 3具有响应式移动第一流体网格系统，随着设备或视口大小的增加，可适当放大到12列。
Bootstrap 3有预定义的网格类，可以快速为不同类型的设备，如手机、平板电脑、台式机等制作网格布局。
我们可以使用 .col-xs- 类来为超小型设备，如手机，创建网格列。对于像平板电脑这样的小屏幕设备，使用 .col-sm- 。对中等大小的设备（如台式机）使用 .col-md- 类，对于大型桌面显示器使用.col-lg- 。
下表总结了新网格系统的一些关键特性。
以下代码显示如何使用 col-md- 类。
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
Box 9
Box 10
Box 11
Box 12
Example of Twitter Bootstrap 3 Grid System
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
Box 9
Box 10
Box 11
Box 12
案例，以下代码显示了如何使用.clearfix类和响应实用程序类。
Example of Twitter Bootstrap 3 Grid System
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
Box 9
Box 10
Box 11
Box 12
默认网格系统有12列，我们在每第三次出现后清除列。
用.visible-md-block 使.clearfix 使类仅在中等大小的设备上有效，并且隐藏在其他设备上。
定制各种尺寸设备
自定义平板电脑的布局，将内容呈现为2x6网格（即2列和6行），在每个列上添加.col-sm-6类。
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
Box 9
Box 10
Box 11
Box 12
2） Bootstrap 网格列
Bootstrap有四种类型的前缀，用于为不同大小的显示创建列：
col-xs用于超小显示器（屏幕宽度<768px）
col-sm用于较小的显示器（屏幕宽度> = 768px）
col-md用于中等显示器（屏幕宽度> = 992px）
col-lg用于较大的显示器（屏幕宽度> = 1200px）
当我们指定类 col-xs-12 时，它表示元素应在额外的小屏幕上跨越所有12个可用的Bootstrap列。
让我们检查下面的标记：
Column 1
Column 2
在这段代码中，我们将col-xs-12 类用于超小显示器和类 col-sm-6 用于较小的显示器。 因此，超小型显示器中的每一列将占用所有12个可用的Bootstrap列，这将显示为列的堆栈。然而在较小的显示器上，它们每个只占用6个Bootstrap列，实现两列布局。
案例，代码如下：
Column 1
Column 2
你可以调整浏览器窗口的大小以查看动态更改。
嵌套列
我们可以在布局中的任何列中创建一组新的12个Bootstrap列，以便创建嵌套列。
Column 1
Column 4
Column 5
Column 2
偏移列
偏移用于增加列的左边距。
例如，如果你有一个列出现在三个Bootstrap列之间，则可以使用偏移功能。
可用于偏移的类有：
col-xs-offset-*
col-sm-offset-*
col-md-offset-*
col-lg-offset-*
假设我们要在超小显示器中向右移动一列三个Bootstrap列，我们可以使用类“col-xs-offset-3”，例如：
此代码将产生一个跨越6个Bootstrap列的列，向右偏移三列。
居中列
Hello!
我们可以使用偏移来使列居中。只需将相同数量的列放置在居中列的两侧。
Hello!
向左拉，向右拉
诸如col-xs-pull- * 和 col-xs-push- * 等的类用于将列向左和向右移动一定数量的列。
col-xs-push-3
col-xs-pull-9
注意：在代码中，col-xs-9列由三列推送，因此它向右移动。 col-xs-3列也被向左拉9列。它们似乎在浏览器上查看时已交换了其原始位置。
根据屏幕大小有push和pull类的几个变体：
col-xs-pull-*和col-xs-push-*用于超小的屏幕
col-sm-pull-*和col-sm-push-*用于较小的屏幕
col-md-pull-*和col-md-push-*用于中等的屏幕
col-lg-pull-*和col-lg-push-*用于较大的屏幕
你可以用1到12之间的整数替换*。
Bootstrap 动态布局
3） Bootstrap 网格列
让我们看看如何把网格系统付诸实践，创造一个动态布局，可根据要查看的设备的大小进行调整。
台式机的设计
下面的代码显示了如何使用 col-md-12 中等大小的列来为台式机设计。
My First Bootstrap Blog
Post Title 1
Lorem ipsum dolor sit amet, consectetur adipisicing aliqua.
Post Title 2
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
Post Title 3
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.
接下来，我们将直接将列添加到之前代码中列的现有行。
Bootstrap在一行中只允许12个Bootstrap列。如果我们试图超过这一点，其余的列将被调整进入下一行。这个新行将再次具有12个Bootstrap列的容量。 这样我们可以将所有日志帖子列绑定到一行。
My First Bootstrap Blog
Post Title 1
Lorem ipsum dolor sit amet ...
Post Title 2
Lorem ipsum dolor sit amet ...
Post Title 3
Lorem ipsum dolor sit amet ...
Post Title 4
Lorem ipsum dolor sit amet ...
Post Title 5
Lorem ipsum dolor sit amet ...
Post Title 6
Lorem ipsum dolor sit amet ...
平板电脑的设计
接下来我们将修改我们的代码来实现平板电脑的布局。
平板电脑可以以两种格式查看：纵向和横向。
平板电脑的横向视图被视为中等大小的显示（屏幕宽度>= 992px），我们使用col-md-*类来处理。
我们现在剩下的是纵向视图，这是一个小尺寸的显示。这可以使用 col-sm-* 类来实现。
由于我们必须在较小的显示器中实现两列布局，我们必须强制每列跨越6个Bootstrap列。这样我们在每一行中只得到两列（2*6个Bootstrap列= 12个Bootstrap列）。因此，一旦所有的12个Bootstrap列被占用，其余列将出现在下一行中，用于每次创建新的行时。
My First Bootstrap Blog
Post Title 1
Lorem ipsum dolor sit amet ...
Post Title 2
Lorem ipsum dolor sit amet ...
Post Title 3
Lorem ipsum dolor sit amet ...
Post Title 4
Lorem ipsum dolor sit amet ...
Post Title 5
Lorem ipsum dolor sit amet ...
Post Title 6
Lorem ipsum dolor sit amet ...
调整浏览器窗口大小以查看更改。
手机的设计
像平板电脑一样，手机也可以在横向和纵向模式下查看。移动设备中的横向视图使用col-sm-* 类的小尺寸显示（屏幕宽度> = 768px）。
移动设备中的纵向视图采用超小尺寸显示（屏幕宽度<768px）。
对于超小屏幕，我们必须使用col-xs 前缀的类。在这里，我们希望每个日志帖子列占用所有的12个Bootstrap列，以便我们有每行只有一个日志帖子。
我们的类将是 col-xs-12 ，所以让我们继续将这个类添加到我们的代码：
My First Bootstrap Blog
Post Title 1
Lorem ipsum dolor sit amet ...
Post Title 2
Lorem ipsum dolor sit amet ...
Post Title 3
Lorem ipsum dolor sit amet ...
Post Title 4
Lorem ipsum dolor sit amet ...
Post Title 5
Lorem ipsum dolor sit amet ...
Post Title 6
Lorem ipsum dolor sit amet ...
4） Bootstrap 实用类
我们可以使用以下类来启用屏幕尺寸落在特定范围内的设备上的元素的可见性。
.visible-*-*类有三种变体，每个CSS显示属性值一个：inline，block和inline-block。
我们可以混合上述类，使元素在多个设备上可见。
我们可以对任何元素应用类 .visible-xs-* 和 .visible-md-*，使其在超小型和中型设备上可见。
This paragraph is visible only on Extra Small Devices
that has screen width less than 768px.
This paragraph is visible only on Small Devices
that has screen width greater than equal to 768px but less than 992px.
This paragraph is visible only on Medium Devices
that has screen width greater than or equal to 992px but
less than 1200px.
This paragraph is visible only on Large Devices that
has screen width greater than or equal to 1200px.
hidden类
我们可以使用以下hidden类来隐藏某些设备上的元素。
我们可以混合上面的类，使元素在多个设备上隐藏。
我们可以在任何元素上应用类 .hidden-xs和 .hidden-md，使其在超小型和中小型设备上隐藏。
This paragraph is hidden only on Extra Small Devices that
has screen width less than 768px.
This paragraph is hidden only on Small Devices that has
screen width greater than equal to 768px but less than 992px.
This paragraph is hidden only on Medium Devices that has
screen width greater than or equal to 992px but less than 1200px.
This paragraph is hidden only on Large Devices that has
screen width greater than or equal to 1200px.
显示/隐藏打印
我们可以使用以下实用类来显示或隐藏某些元素用于打印目的。
四. BootStrap 按钮
我们可以在Bootstrap中轻松创建一个按钮，通过添加 btn 类将a，button或input元素转换为Bootstrap中的花式粗体按钮。
Click Here
Click Here
上面的代码呈现如下：
按钮有各种颜色选项：
btn-default为白色
btn-primary为深蓝色
btn-success为绿色
btn-info为浅蓝色
btn-warning为橙色
btn-danger为红色
下表列出了Bootstrap中可用的不同按钮：
各种尺寸：
btn-lg用于大按钮
btn-sm用于小按钮
btn-xs用于超小的按钮
还有一些辅助类的按钮可用：
btn-block将使按钮跨越整个网格
active将使按钮看起来像它当前点击
disabled将使按钮无法单击并显示渐变色。
以下示例将显示这些按钮的操作。
Default
Primary
Info
Success
Warning
Danger
Link
上面的代码呈现如下：
五. BootStrap 表单
1） Bootstrap 复选框
由 wcxstyle 创建，youj 最后一次修改 2017-01-05
Bootstrap将一组复选框或单选按钮组合成一组并排放置的Bootstrap按钮。
你可以通过混合Bootstrap的按钮类，例如btn-primary，btn-info等在按钮组中创建多颜色按钮。
复选框组
我们可以将属性data-toggle=“buttons”添加到一组复选框，用于在按钮组上切换复选框样式。
预检查
将input的label元素上的类.active添加到预检查的选项。
2） Bootstrap 表单
在本教程中，我们将学习如何使用Bootstrap创建精致的表单。
Bootstrap提供三种不同类型的表单布局：
垂直表单（默认表单布局）
水平表单
内联表单
垂直表单布局
垂直表单布局中的表单控件在顶部以左对齐标签堆叠。
Bootstrap将设置文本元素，如，