bootstrap 归纳

1.窗口和设备的窗口保持一致，初始缩放100%，禁止用户缩放

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

2.css 布局

<div class="container">内容</div>      固定宽段1170px

<div class="container-fluid">内容</div>      固定宽段100%

3.排版

h1   36px

h2   30px

h3   24px

h4   18px

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  给表单加 变成响应式效果   必须结合栅格系统

 

转载于:https://www.cnblogs.com/yin-dt/p/8185472.html