Bootstrap框架

boostrap的概述

1.bootstrap的作用

1. 前端框架，在Web开发中，用于表示层。
2. 基于HTML、CSS、JS、jQuery等技术

2.Bootstrap的优势

1. 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
2. 浏览器支持：Bootstrap支持所有的主流浏览器。如：Internet Explorer、 Firefox、 Opera、 Google Chrome、Safari。
3. 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
4. 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。 响应式设计

3.在不同的分辨率下网页的宽度进行自动适配
即一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本，这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。响应式布局基于HTML5和CSS3，才可以实现。

boostrap的使用

1.Bootstrap包含的内容

1. 全局CSS：基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。
2. 组件：无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能
3. JavaScript 插件：是jQuery插件，带了一些其它的功能。如：轮播图

2.Bootstrap的目录结构

css/ 全局CSS样式
js/ 使用JavaScript插件，就要导入这个JS文件
fonts/ 字体图标

3.创建Bootstrap模板文件的步骤

1. 复制三个文件夹css、js、fonts到项目目录下
2. 复制jQuery框架到js目录下
3. 复制“起步 ==> 基本模板"的代码到HTML中

栅格系统

1.组成

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内间距（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

2.常用的类样式

.container栅格系统容器，类似于table，固定宽度
.container-fluid 占100%宽度
.row表示一行
.col-xs-n微型设备占n列
.col-sm-n小型设备占n列
.col-md-n中型设备占n列
.col-lg-n大型设备占n列
.hidden-lg/md/sm/xs在某种设备上隐藏
.visible-lg/md/sm/xs只在某种设备上显示

全局CSS样式

按钮

		    <input type="button" id="" value="普通按钮" class="btn btn-default"/>
			<input type="button" id="" value="普通按钮" class="btn btn-primary"/>

图片

表单

所有设置了 .form-control 类的 、 和 元素都将被默认设置宽度属性为
width: 100%;。
将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

表格

基本实例
table
条纹状表格
table-striped 类可以给 之内的每一行增加斑马条纹样式
带边框的表格
table-bordered 类为表格和其中的每个单元格增加边框。
鼠标悬停
table-hover 类可以让 中的每一行对鼠标悬停状态作出响应。

组件

导航条

navbar navbar-default
默认导航条的样式
navbar-header
显示第一项有一个开关，在移动设备上显示得更好
collapse navbar-collapse
用于折叠的菜单项：各种链接，表单，其它内容
dropdown
下拉菜单
navbar-left
向左对齐，navbar-right向右对齐
navbar-inverse
反转颜色，变成黑色

分页组件
分页容器是一个nav 每个li代表其中的一项

javascript插件

模态框

data-toggle=“modal"打开模态框的功能
data-target=”#id值" 或 =".类名"指定需要打开的id或类名来打开模态框
data-dismiss="modal"关闭模态框的功能

轮播图

carousel slide轮播图最外面容器
carousel-indicators指示器：中间的小圆点
carousel-inner内部放所有图片的容器
carousel-caption图片标题
carousel-control下面的控制按钮