1.窗口和设备的窗口保持一致,初始缩放100%,禁止用户缩放css
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">html
2.css 布局api
<div class="container">内容</div> 固定宽段1170px布局
<div class="container-fluid">内容</div> 固定宽段100%ui
3.排版spa
h1 36pxscala
h2 30pxcode
h3 24pxorm
h4 18pxhtm
h5 14px
h6 12px
.page-header 设置页面的头部 给标题加一个分割线
<small></small> 副标题 小一号
<big></big> 副标题 大一号
<strong></strong> 建议使用
<em></em> 建议使用
<del></del> 删除线
4.文本对齐方式
.text-left 左对齐
.text-center 居中
.text-right 右对齐
.text-uppercase 英文所有大写
.text-lowercase 所有英文小写
.text-capitalize 首字母大写
5.列表
.list-unstyled ul 去远点 去掉原有的格式
.list-inline 变成行内样式
自定义列表 横向排列
<dl class="dl-horizontal">
<dt> 标题</dt>
<dd>标题解释</dd>
</dl>
6.表格
.table 是一个基类 若是要加样式必需要有
.table-bordered 表格的外边框
.table-hover 鼠标悬停效果
.table-striped 各行换色
.table-condensed 变紧凑 主要是padding值减半
.table-responsive 给table的父元素加 变成响应性的表格 以移动设备为优先
7.响应式图片
.img-responsive 响应式
.img-circle 椭圆形
.img-rounded 圆角矩形
.img- thumbnail 圆角边框
8.栅格系统
栅格系统必定要放在容器中 .container .container-fluid
9.偏移
.col-md-offset-* 只能向右偏移
10.排序
.col-md-push-*
向左排序
.col-md-pull-* 向右排序
11.表单
.form-group 一组
.form-control 圆角输入框 给输入框加
.checkbox-inline
或 .radio-inline
类应用到一系列的多选框(checkbox)或单选框(radio)控件上,是给label 加
.disabled 禁止
.input-group-addon 搜索框的样式
.form-horizontal 给表单加 变成响应式效果 必须结合栅格系统