Bootstrap

一、Bootstrap 简介

1.什么是 Bootstrap？
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

2.历史:
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

3.为什么使用 Bootstrap？

• 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。 浏览器支持：所有的主流浏览器都支持

• Bootstrap。 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

• 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见
  Bootstrap响应式设计。

• 它为开发人员创建接口提供了一个简洁统一的解决方案。

• 它包含了功能强大的内置组件，易于定制。

• 它还提供了基于 Web 的定制。

• 它是开源的。

4.Bootstrap 包的内容

• 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
• CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的
  class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
• 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
• JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery
  插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
• 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

二、Bootstrap CSS

1.Bootstrap 排版
1.1标题：Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。
例子：

我是标题1 h1

我是标题2 h2

我是标题3 h3

我是标题4 h4

我是标题5 h5

我是标题6 h6

1.2强调：HTML 的默认强调标签 （设置文本为父文本大小的 85%）、（设置文本为更粗的文本）、（设置文本为斜体）。

1.3列表
Bootstrap 支持有序列表、无序列表和定义列表。
有序列表：有序列表是指以数字或其他有序字符开头的列表。

无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。

定义列表：在这种类型的列表中，每个列表项可以包含 dt 和 dd 元素。dt 代表 定义术语，就像字典。接着，dd 是 dt 的描述。.dl-horizontal 可以让 dl 内的短语及其描述排在一行。开始是像 dl 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。
2.Bootstrap 代码
Bootstrap 允许您以两种方式显示代码：

第一种是 code 标签。如果您想要内联显示代码，那么您应该使用 code 标签。
第二种是 pre 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 pre 标签。
请确保当您使用 pre 和 code 标签时，开始和结束标签使用了 unicode 变体： < 和 >。
3.Bootstrap 表单
3.1Bootstrap 提供了下列类型的表单布局：
垂直表单（默认）
内联表单
水平表单

3.2支持的表单控件:
Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。
输入框（Input）
最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让 input 获得完整的样式。
文本框（Textarea）
当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。

3.3复选框（Checkbox）和单选框（Radio）
复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。
当创建表单时，如果您想让用户从列表中选择若干个选项时，请使用 checkbox。如果您限制用户只能选择一个选项，请使用 radio。
对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

选择框（Select）
当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框。
使用 展示列表选项，通常是那些用户很熟悉的选择列表，比如州或者数字。
使用 multiple=“multiple” 允许用户选择多个选项