Bootstrap简介、模板、CSS样式、表单样式

Bootstrap简介

• 什么是Bootstrap？

由两个设计师开发，主要用于前端方向（HTML、CSS、JS、PHP）

解决IE低版本不支持HTML5元素：

根据自己的存放路径修改。

• 为什么使用Bootstrap？

1. 入门简单，只要有HTML、CSS、JS基础就可以学习
2. 响应式的布局
3. 移动设备优先

中文网址：http：//v3.bootcss.com/

• Bootstrap环境安装

Bootstrap下载：

要使用Bootstrap，必须要加载jquery（JS文件中）

Bootstrap基本模板

• HTML5文档类型定义

Bootstrap文档是基于HTML5的，因此，要使用HTML5的文档类型定义（DTD）

• 字符集设置（防止文字显示为乱码）

• 移动设备优先

• 引入CSS和JS文件

用相对路径引入

 CSS全局样式 

• 布局容器类样式

1. .container：固定宽度并且具有响应式
2. .container-fluid：自由宽度（100%宽度）

• 标题样式：<h1>到<h6>，.h1~.h6

1. <h1>——<h6>样式重写了，基本上做到了兼容性

• 行内文本样式

1. <b>：加粗
2. <strong>：加粗（HTML5支持）
3. <i>：斜体
4. <em>：斜体（HTML5新标记）
5. <del>：删除线（HTML5新标记）
6. <s>：删除线

• 文本对齐样式

1. .text-left：文本做对齐
2. .text-center：居中对齐
3. .text-right：右对齐
4. .text-justify：两端对齐

• 列表样式

1. .list-unstyled（无符号）：去掉前面的符号
2. .list-inline：行内块

• 表格样式

.table：表格全局样式（少量padding和水平方向的分割线）

.table-striped：有条纹的背景色行（隔行变色）

.table-bordered：带边框的表格

.table-hover：鼠标悬停效果（指向时变色，离开恢复）

.table-condensed：紧凑的表格（单元格内部会减半，文字与边缘的间距减少）

• 行或单元格加背景色

.active：当前样式

.success

.info：

.warning

.danger

注：只能给<tr>或<td>添加类样式

响应式表格：将.table元素包裹在.table-responsive元素内，即可创建响应式表格

屏幕宽度小于768px时，表格将会出现滚动条，反之屏幕条消失

• 表单样式

1. .form-group表单组样式：将<label>和表单元素包含在其中，可以获得更好的排列
2. .form-control表单元素样式：常用于<imput>、<textrea>、<select>
3. placehoder属性：给<input>添加提示信息，是HTML5新增属性
4. .form-inline内联表单样式：用于form元素，可以使元素一行排列
5. .sr-only：隐藏元素
6. .radio-inline：控制多个单选框在同一行显示
7. .checkbox：复选框样式
8. .checkbox-inline：控制多个复选框在同一行显示
9. .disable：可以禁用单选框或复选框的文本

运行结果如下（与value不同）：