BootStrap的table表格，栅格系统，form表单的样式

BootStrap

BootStrap的简介

1. 什么是Bootstrap

由两个前端设计师开发的一个前端的框架（Html，css，js）

简化了程序员写css的代码

2. 为什么使用BootStrap，有什么特点

l 学习比较简单，有了Html，css和js就能学习

l 响应式布局，可以适应多种的设备

l 移动设备优先

BootStrap的使用

环境的安装

官网上下载包

要想使用bootStrap 必须加载jquery

bootStrap的基本模板

1. Html文档的类型定义

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

2. 字符集的设置

<meta charset="utf-8">

3. 移动设备优先

<meta name="viewport" content="width=device-width,initial-scale=1">

4. 引入css和js文件

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="bootstrap/js/jquery-1.10.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

Css全局样式

1.布局容器样式

l .container 固定宽度且具有响应式

l .container-fluid 自由宽度（100%）

<div class="container">

3. 样式：<h1>到<h6>、h1~h6

H1~H6 样式重写的，几乎做到了兼容性

3.文本样式

1. <b>:加粗

2. <strong>:加粗

3. <i>:斜体

4. <em>:斜体，HTML5新标记

5. <del>:删除线，HTML5新标记

6. <s>:删除线

4. 文本对齐样式

1、 .text-left 本左对齐

2、 .text-right 文本右对齐

3、 .text-center 文本居中对齐

4、 .text-justify 两端对其

5. 列表样式

1、 .list-unstyled 无符号

2、 .list-inline 行内样式

6. 表格样式

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

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

3、.table-boedered：点边框的表格

4、.table-hover：鼠标悬停效果（放上变色、离开恢复）

5、.table-condensed：紧凑的表格（单元格内不会减半）

6、行或单元格背景色：.active、.success、.info、.warning、.danger

.active 当前样式

.success

.info

.warning

.danger

注意只能给<tr><td>添加颜色

7、响应式表格

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

当屏幕宽度小于你的表格的时候，表格会出现滚动条

当屏幕宽度大于你的表格的时候，表格的滚动条自然消失

7. 表单样式

1、.form-group 表单组样式：将<label>和表单元素包含其中，你可以获得更好的排列。

2、.form-control 表单元素：常用于<input>、<textarea>、<select>元素

alceholder属性：给<input>添加提示信息

3、.form-inline 内联表单样式（用于form元素）：可以使元素一行排列

4、.sr-only:用于隐藏元素

5、.radio-inline 可以使一组单选框排在同一行

6、.checkbox-inline 可以使一组复选框排在同一行

7、.checkbox 复选框样式

8、.radio 单选框样式

9、.disable 可以禁用单选框或者复选框的样式

10、.help-block 帮助信息（与上面间隔，字体颜色变浅）

CSS的全局样式----栅格系统

栅格系统介绍

BootStrap提供了一套响应式、移动设备优先的流式的栅格系统

BootStrap把一个容器或整个网页平均分成12列

BootStrap的栅格系统，由一个行(.row)和多个列组成

栅格系统通过行列的形式来创建网页的布局，把具体的数据放入列当中

注意：栅格系统必须放在.container和.container-fluid之中

栅格系统参数

Col-xs-* 超小屏幕

Col-sm-*小屏幕

Col-md-*中等屏幕

Col-lg-*大屏幕

栅格系统的简单应用

注意：列数超过12列会自动换行

列偏移

也就是指：一个栏向右偏移多少

.col-md-offset-*

.col-md-offset-2 //指定栏向右偏移2个列 思想就是加上了一个左外边距

列嵌套

在某个栏中再嵌套一个完整栅格系统

8. 按钮样式：

1、 可作为按钮使用的元素：<a> 、<input>、<button>

2、 .btn：按钮的全局样式 <input type=”button” class=”btn”>

3、 预定义样式：.btn-default、.btn-primary、.btn-info、.btn-waring、.btn-danger、.btn-link

4、 .active 按钮激活状态、.disabled 按钮禁用样式

5、 按钮尺寸：.btn-lg（大按钮）、.btn-sm（小按钮）、.btn-xs（超小按钮）

6、 .btn-block：将按钮拉伸到撑满整个父元素