-
字体图标
.glyphicon
.glyphicon-star
.glyphicon-*
查看全部 -
Bootstrap组件-怪异的属性
1.role html5标签属性
2.aria-label 通常使用在输入框
3.tabIndex
4.data- html5规范自定义属性,在页面上不显示
查看全部 -
图标
.glyphicon-*
查看全部 -
单位
px
em 1em=16px
汇继承父级元素的字体大小
IE浏览器不支持em
rem 与em类似
会继承根元素的字体大小
html{ font-size:62.5%; }
查看全部 -
栅格布局
@media screen and (min-width: px) and (max-width: px){
}
查看全部 -
Bootstrap中的viewport(手机适配)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minium-scale=1,user-scalable=no" >
查看全部 -
图片--形状
.img-rounded 圆角
.img-circle 圆形
.img-thumbnail 带有边框的圆角图形
查看全部 -
表单
<button></button> // 或者用<a></a>标签
.btn Bootstrap基础按钮
.btn-default 默认按钮
,btn-primary 主要按钮
.btn-warning 警告按钮
.btn-info 信息按钮
.btn-success 成功按钮
.btn-danger 报错按钮
.btn-link 链接按钮
.btn-lg 大按钮
.btn-sm 小按钮
.active 默认选中
.btn-block 全屏按钮
.disabled 禁止按钮
查看全部 -
表单
<form class=""></form>
.form-inline
<div class=""></div>
.form-group
.has-success 代表状态
.has-warning
.has-error
<input class="" />
.form-cotrol
.input-lg
.input-sm
<label class=""></label>
.sr-only 标签消失
.control-label
查看全部 -
排版--表格
<table class=""></table>
.table 基础表格效果
.table-striped 斑马线效果
.table-bordered 边框效果
.table-hover 高亮效果(鼠标经过的变色效果)
<tr class=""></tr> //表格颜色
.danger
.warping
.info
.success
.active
查看全部 -
排版--文本
.text-left 内容左置
.text-center 内容居中
.text-right 内容右置
.text-lowercase 内容变成小写
.text-uppercase 内容变成大写
.text- capitalize 内容首字母变大写
查看全部 -
Bootstrap 全局样式的特点
代码整洁
风格统一
美观易用
查看全部 -
字体图标可以阿里 字体图标不会失真查看全部
-
字体图标,特殊形式的字体,可以使用字体样式改变大小颜色查看全部
-
如果有兼容性问题 px写在前面,rem写在后面查看全部
举报