Bootstrap学习

一、网格布局（栅格系统）概念

1、有12列（col）

2、col有四个类分别适应不同设备 xs——extra small        sm——small            md——medium        lg——large

二、表格样式

可选表格类

1、条纹表格 table-striped

2、边框表格 table-bordered

3、悬停表格 table-hover

4、精简表格 table-condensed

上下文类

.active 灰色

.success 绿色

.warning 黄色

.danger 红色

响应式类

table-responsive

<768px 可水平滚动     >768px 正常

三、表单样式

基础：role ="form"      class="form-group"

垂直（默认）       内联form-inline       水平form-horizontal

四、按钮

.btn为按钮添加基本样式尝试一下

.btn-default默认/标准按钮尝试一下

.btn-primary原始按钮样式（未被操作）尝试一下

.btn-success表示成功的动作尝试一下

.btn-info该样式可用于要弹出信息的按钮尝试一下

.btn-warning表示需要谨慎操作的按钮尝试一下

.btn-danger表示一个危险动作的按钮操作尝试一下

.btn-link让按钮看起来像个链接 (仍然保留按钮行为)尝试一下

.btn-lg制作一个大按钮尝试一下

.btn-sm制作一个小按钮尝试一下

.btn-xs制作一个超小按钮尝试一下

.btn-block块级按钮(拉伸至父元素100%的宽度)尝试一下

.active按钮被点击尝试一下

.disabled禁用按钮

五、图片

.img-rounded为图片添加圆角 (IE8 不支持)尝试一下

.img-circle将图片变为圆形 (IE8 不支持)尝试一下

.img-thumbnail缩略图功能尝试一下

.img-responsive图片响应式 (将很好地扩展到父元素)

作者：杨肆月

链接：http://www.jianshu.com/p/5472c4f19d0e

來源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。