BootStrap复习总结

Bootstrap3 复习总结:

 

1. 栅格系统:

sm:768px 

md:992px

lg:1200px

 

(响应式布局) 

1.横向分割页面的空间。

2.在分割的同时考虑到响应式。

 

内部实现是12列的栅格系统，为什么是12？

答:因为12是1，2，3，4，6的最小公倍数，所以12列栅格系统相对较灵活

 

.col

.col-md-2

.col-sm-3

... 

 

2.表单

 .container

 

.form-group         (内容是margin-bottom:1rem;)

        .has-error 

.form-inline 

.form-control        (内容是一些特殊的css样式)

 

3.按钮

.btn btn-default

btn-primary

btn-danger

btn-warning

btn-info

btn-lg

btn-sm

btn-xs 

btn-block(占父元素整宽)

 

4.按钮组

.btn-group 给div一个类，里面是一组按钮

.btn-group-vertical

 

5.导航

ul.nav.nav-tabs 

li.active

 

ul.nav.nav-pills

.nav-stacked(竖着放)

 

.nav-justified(平均分布)

 

6.导航栏

.navbar-header

   .navbar-brand

  

.nav.navbar-nav

.nav.navbar-nav.navbar-right

 

7.面板

.panel.panel-default

.panel-heading

.panel-body

.panel-footer

 

8.表格

.table

.table-striped

.table-hover(鼠标滑上去有动画)

.table-borderd

 

tr.success

tr.warning

tr.danger

 

9.其他组件

分页

ul.pagination

   li

ul.pager 

   li.disabled

 

 

面包屑导航

div.breadcrumb

   li.active

 

 

标签

span.label.label-success

span.label.label-info

span.label.label-warning

 

徽章

span.badge

 

警告

div.alert.alert-danger

div.alert.alert-success

 

列表

div.list-group

    a.list-group-item