BootStrap_02之全局样式及组件
1、BootStrap指定的四种屏幕尺寸:
①超大PC屏幕——lg(large):w>=1200px;
②中等PC屏幕——md(medium):1200px>w>=992px;
③Pad屏幕——sm(small):992px>w>=768px;
④Phone屏幕——xs(extra small):768px>w;
2、BootStrap中的两种容器:
①定宽容器:.container——1170px(lg)、970px(md)、750px(sm)、100%(xs);
②变宽容器:.container——100%;
③两种容器都有:before和:after,可以清除子元素的margin和float造成的影响;
3、全局CSS样式——表格:
.table——基础表格;
.table-bordered——带边框的表格;
.table-striped——隔行变色的表格;
.table-hover——带鼠标悬停效果的表格;
.table-responsive——响应式表格,必须使用在table的父元素div上;
4、全局CSS样式——栅格布局系统:
①最外层必须是容器类:.container或.container-fluid;
②容器中放置行:.row;
③行中放置列:.col;
④针对不同的屏幕使用不同的列:
.col-lg-*:适用于超大PC屏幕;
.col-md-*:适用于中等PC屏幕;
.col-sm-*:适用于Pad屏幕;
.col-xs-*:适用于Phone屏幕;
一个div可以同时声明多个不同屏幕下的列宽:
<div class="col-lg-* col-md-* col-sm-* col-xs-*">
⑤一行均分为12份,每个列都需要指定自己所占的份数:
<div class="col-lg-2 col-md-6 col-sm-8 col-xs-12">
⑥每个列都可以指定向右的偏移量:,可以实现右错位的效果:
<div class=".col-lg/md/sm/xs-offset-1/2/3/4/...">
⑦不同的列在不同的屏幕下有不同的适用性:
.col-lg-*:只适用于LG屏幕;
.col-md-*:适用于MD/LG屏幕;
.col-sm-*:适用于SM/MD/LG屏幕;
.col-xs-*:适用于XS/SM/MD/LG屏幕;
列的偏移适用同样的规则,对当前屏幕以及更大屏幕有效;
⑧可以指定某列在特定尺寸的屏幕下隐藏:
.hidden-lg/md/sm/xs;
隐藏只对当前指定的屏幕有效;
⑨栅格系统可以嵌套:
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6"></div>
</div>
</div>
</div>
</div>
5、全局CSS样式——表单:
①HTML5标准对表单相关的推荐写法:
button必须指定type;
输入组件必须有对应的label——为无障碍阅读准备:
<label for="xx">example</label>
<input id="xx">
<label>
<input type="radio/checkbox">example
</label>
②BootStrap提供的默认表单:
<form>
<div class="form-group">
<label></label>
<input class="form-control">
<span class="help-block"></span>
</div>
</form>
③BootStrap提供的行内表单:
<form class="form-inline">
<div class="form-group">
<label class="sr-only"></label>
<input class="form-control">
</div>
</form>
④BootStrap提供的水平表单:
<form class="form-horizontal">
<div class="form-group">
<div class="col-*-*">
<label class="control-label"></label>
</div>
<div class="col-*-*">
<label class="form-control"></label>
</div>
</div>
</form>
6、BootStrap组件——图标字体:
①图标字体是字体,可以无限缩放、修改文本颜色、背景颜色、阴影...,显示的内容却是图形图标;
②图标字体在Web项目中都是作为服务器端字体来使用——当客户端访问页面时,即时从服务器下载必须的图标字体:
@font-face{
font-family:"Glyphicons Halflings";
src:url("../fonts/glyphicons-halflings-regular.eot");
}
.glyphicon{
position:relative;
top:1px;
display:inline-block;
font-family:"Glyphicons Halflings";
}
③使用:
<span class="glyphicon glyphicon-*"></span>
* span中不能含有任何文本或子标签;