1. 传智播客讲解全局CSS样式-布局容器

.container    ---1170px

.container-fluid  100%

2. 传智播客讲解全局CSS样式-排版

h1,36px

h2 30px

h3,h4,h5,h6 颜色灰色

给标题下方加一条线

.page-header    class=”page-header”

设置文本对齐方式

.text-left,

.text-center,

.text-right

class=”text-left” class=”text-center” class=”text-right”

设置英文 大小写

.text-lowercase, 小

写

.text-uppercase,大小 .text-capitalize 首字母大小

3. 传智播客讲解全局CSS样式-列表

.list-style

.list-inline

4. 传智播客讲解全局CSS样式-表格

.table, 表格的基本的样式

.table-striped, 隔行换色

.table-bordered, 外边框

.table-hover, 悬停效果 鼠标移到表格的行上，改变颜色

.table-condensed, 紧凑效果

.table-responsive 表格的父元素上 添加 ，表格出现滚动条

5. 传智播客讲解全局CSS样式-表单

.form-control 输入框变成圆角的 并且宽度是100%

.form-horizontal 注意：下午将栅格系统用

.checkbox-inline  给复选框加样式

.radio-inline  给单选框架样式

作业

自学的内容

图片

响应式图片 img-responsive   class=”img-responsive”

6. 传智播客讲解全局CSS样式-栅格系统 重点和难点

注意：必须把栅格系统放入的

布局

表格

row   col

.col-xs-*

.col-sm-*

.col-md-*

.col-lg-*

7. 传智播客讲解全局CSS样式案例：一个表单页面