bootstrap:(扁平化)
基于css3+html5的框架(less+sass)
本身用到jquery;
目录:
css(静态页面只需导入bootstrap.css)
fonts,
js(想调用里面的js代码,先导入jquery)
响应式布局:不仅支持pc端,也支持移动设备
栅格系统:
使用栅格系统:class="container";(-fluid:宽度铺满)
分成12份:外部元素:class="row"(代表一 行) 里面的元素:class="col-md-几份";(小的元素内可以持续分)
列偏移:
col-md-offset-单位
文本:
class="text-left"(center/right);
text-danger...(字体颜色);
列表:
list-unstyled:去掉黑点
list-inline:横排放
表格:
class="table"
条纹(隔行变色):table-striped
边框:table-border;
鼠标悬停变色:table-hover;
可以给每个tr加状态:class=xxx
表单:
role="form";
按钮:
多种标签都可以设置为按钮:a/span....
class="btn"(-//设置颜色)
图片:
class="img-rounded";(圆角)
class="img-circle";(椭圆)
class="img-thumbnail"(相框);
图标:
按钮
按钮组:btn-group
基于css3+html5的框架(less+sass)
本身用到jquery;
目录:
css(静态页面只需导入bootstrap.css)
fonts,
js(想调用里面的js代码,先导入jquery)
响应式布局:不仅支持pc端,也支持移动设备
栅格系统:
使用栅格系统:class="container";(-fluid:宽度铺满)
分成12份:外部元素:class="row"(代表一 行) 里面的元素:class="col-md-几份";(小的元素内可以持续分)
列偏移:
col-md-offset-单位
文本:
class="text-left"(center/right);
text-danger...(字体颜色);
列表:
list-unstyled:去掉黑点
list-inline:横排放
表格:
class="table"
条纹(隔行变色):table-striped
边框:table-border;
鼠标悬停变色:table-hover;
可以给每个tr加状态:class=xxx
表单:
role="form";
按钮:
多种标签都可以设置为按钮:a/span....
class="btn"(-//设置颜色)
图片:
class="img-rounded";(圆角)
class="img-circle";(椭圆)
class="img-thumbnail"(相框);
图标:
按钮
按钮组:btn-group