前端框架之BootStrap学习

BootStrap简介

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目。

为啥我们要学习

1. 对于我们后端的程序员来说 找几个简单上手快的前端框架学习是必不可少的 而bootstrap是css和html的一个框架 对我们学习前端知识很有帮助
2. 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
3. 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
4. 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
5. 它包含了功能强大的内置组件，易于定制。它还提供了基于 Web 的定制。
6. 它是开源的

Bootstrap它的包有哪些内容呢

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

Bootstrap 网格系统

什么是 Bootstrap 网格系统（Grid System）？

	Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类

Bootstrap 网格系统（Grid System）的工作原理

1. 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
2. 使用行来创建列的水平组。
3. 通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
4. 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
5. 媒体查询就是给一个范围的样式 满足这个范围我就给你展示这个样式关键字是@media

网格选项

	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px） }	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px一个列的每边分别 15px）	30px（一个列的每边分别 15px）	30px（一个列的每边分别 15px）	30px（一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

基本的网格结构

1. 响应式的列重置
2. 偏移列偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。
   为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
3. 嵌套列
   为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。
4. 列排序
   Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。
   您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。。

Bootstrap 表格

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

标签	描述
< table >	为表格添加基础样式。
< thead >	表格标题行的容器元素（
< tbody >	表格主体中的表格行的容器元素（
< tr >	一组出现在单行上的表格单元格的容器元素（< td > 或 < th >）。
< td >	默认的表格单元格。
< th >	特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在
< caption >	关于表格存储内容的描述或总结。

），用来标识表格列。）。 内使用。

表格类

下表样式可用于表格中：

类	描述
.table	为任意 添加基本样式 (只有横向分隔线)
.table-striped	在
.table-bordered	为所有表格的单元格添加边框
.table-hover	在
.table-condensed	让表格更加紧凑

内添加斑马线形式的条纹 ( IE8 不支持) 内的任一行启用鼠标悬停状态

< tr >, < th > 和 < td > 类

下表的类可用于表格的行或者单元格：

类	描述
.active	将悬停的颜色应用在行或者单元格上
.success	表示成功的操作
.info	表示信息变化的操作
.warning	表示一个警告的操作
.danger	表示一个危险的操作

字体图标

	这个直接将用法把 上代码 <span class="glyphicon glyphicon-search"></span>
	<button type="button" class="btn btn-default btn-xs">
	<span class="glyphicon glyphicon-user"></span> User
	</button> 这样就能做成这样的一个效果

表单

Bootstrap 提供了下列类型的表单布局：

• 垂直表单（默认）
• 内联表单
• 水平表单
• 具体实现没写了

下拉菜单 DropDowns

类	描述
.dropdown 指定下拉菜单，	下拉菜单都包裹在 .dropdown 里
.dropdown-menu	创建下拉菜单
.dropdown-menu-right	下拉菜单右对齐
.dropdown-header	下拉菜单中添加标题
.dropup	指定向上弹出的下拉菜单
.disabled	下拉菜单中的禁用项
.divider	下拉菜单中的分割线

Bootstrap 按钮组

按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。您可以通过 Bootstrap 按钮（Button） 插件 添加可选的 JavaScript 单选框和复选框样式行为。
下面的表格总结了 Bootstrap 提供的使用按钮组的一些重要的 class：

Class	描述
.btn-group	该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
.btn-toolbar	该 class 有助于把几组 结合到一个 中，一般获得更复杂的组件。
.btn-group-lg,	.btn-group-sm, .btn-group-xs 这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。
.btn-group-vertical	该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。

总之 还有很多的东西 当然只能靠大家慢慢摸索啦