bootstrap

1、引入bootstarp.min.css
2、最外层盒子的名字
.container类用于固定宽度并支持响应式布局的容器

.container-fluid类用于100%宽度,占据全部视口viewport容器
3、栅格系统一行最多分为12列,超过12列,另起一行显示

行必须包含在cantainer里面或者.container-fluid里面
只有列能作为行的直接子元素
4、终端
超小屏幕<768(手机) 小屏幕>=768<992(平板) 中等屏幕 >=992<1200 大屏幕>=1200
最大宽度auto 750 970 1170
.col-xs- .col-sm- .col-md- .col-lg-
5、.cl-md-offset-* *代表要偏移的列数,相当于maarginleft
6、h1-h6 36px 30,24,18,14,12

del 删除标签
small小号文本

7、文本对齐
.text-left text-right text-center text-justify text nowrap

8、大小写转化
.text-lowercase //变小写
.text-uppercase //大写
.text-capitalize //首字母大写

9、代码 &lt左尖角号 &gt右尖角号

10、 设置table
基础类名 .table
条纹状表格.table-striped
带边框的表格 .table-bordered
鼠标悬停 .table-hover
紧缩性表格 .table-condensed //padding 减半实现的
状态类
给行或者列添加的类名
.active
.success
.info
.warning
.danger

响应式表格 .table-responsive
将任何元素放在名为.table-responsive里面
11、表单
所有设置了.from-control类的<input><textarea>和<select>元素都将被width:100%
内联表单 .from-inline //是所有的from-group在一行显示,给form表单添加的
水平排列的表单 .form-horizontal 让label和input在一行显示给form添加的

禁用 disabled

控件尺寸
input-lg
默认的
input-sm
12、按钮
a,button,input都可以作为按钮
状态类
.btn-default
.btn.primary
.btn-success
.btn.info
.btn.warning
.btn-danger
.btn-link

按钮尺寸
.btn-lg
.btn-sm(默认的)
.btn-xs

禁用disabled

13、图片
.img-responsive 让图片支持响应式
图片形状
.img-rounded 圆角
.img-circle 圆形
.img-thumbnail 带边框的图片

14、情景文本类
.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger

15、情景颜色颜色
.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger

16、三角符号
<span class="caret"></span>

17、列表组
.list-group ul
.list-group-item li

18、面板
.paanel
.panel-default
.panel-heading 带标题的面板
.panel-body 正文
.panel-footer 带脚注的

19、js插件
bootstrap里面的所有插件都依赖于jquery,所以在引入之前要引入jquery

模态框调用
1、通过按钮调用
data-target="#模态框的id"
2、通过js调用
$('#myModel').model();
3/关闭模态框
data-dismiss="model"

 

posted @ 2018-09-18 16:48  maps..xy  阅读(129)  评论(0编辑  收藏  举报