您的位置:首页 > Web前端 > BootStrap

bootstrap对HTML标签的默认样式有哪些修改?

2015-12-04 20:23 841 查看
CSSReset:重新设置HTML标签的默认样式。
(1)重设了盒子模型的计算方法*{box-sizing:border-box;}
(2)重设了所有元素的默认字体14px/1.42857143"HelveticaNeue"
(3)body{margin:0;color:#333;background-color:#fff;}
(4)h1~h6{font-size:xxpx;margin-top:20px/10px;margin-botton:10px;}
(5)a{color:#xxxxx;text-decoration:none;}


CSS布局陷阱——子元素的margin-top越界:
若父元素没有上边框/上margin,则第一个子元素的margin-top会越界!
最佳解决方案:
.parent2:before{
content:'';
display:table;
}

父元素中所有子元素由于浮动造成的影响,最佳解决方案:
parent:after{
content:'';
display:table;
clear:both;
}


6.Boostrap提供的全局CSS样式——按钮相关样式
提示:按钮相关的样式可以作用于button/input/a三种元素
.btn设置了按钮的padding、margin、font、border
--------------------------------------------------------------------
.btn-default设置了按钮的color、background、border
Bootstrap五种常用颜色:
.btn-warning警告色(橙黄色)的按钮
.btn-danger危险色(红色)的按钮
.btn-info提示色(浅蓝色)的按钮
.btn-success成功色(绿色)的按钮
.btn-primary基础色(深蓝色)的按钮
Bootstrap四种大小:
.btn-lg大号按钮(large)
默认默认大小
.btn-sm小号按钮(small)
.btn-xs超小号按钮(extrasmall)


1.全局CSS样式——图片
.img-circleborder-radius:50%
.img-roundedborder-radius:6px;
.img-thumbnailborderpadding
.img-responsivemax-widthdisplay


2.全局CSS样式——文本
.text-warning
.text-success
.text-danger
.text-info
.text-primary
-------------------
.text-lowercase
.text-uppercase
.text-capitalize
-------------------
.text-left
.text-center
.text-right右对齐
.text-justify(两端)调整对齐
---------------------
.bg-warning
.bg-success
.bg-danger
.bg-info
.bg-primary
----------------------
.pull-leftfloat:left;
.pull-rightfloat:right;
.clearfixclear:both;
-----------------------
.showdisplay:block;
.hiddendisplay:none;


table全局样式
.tablewidthmargin-bottom.table>td
.table-borderedborder:1pxsolid#ddd;
.table-condensed把单元格的padding有8px改为5px,内容看起来“紧凑”些
.table-striped条纹状表格,为奇数tr添加了一个浅色的背景色
.table-hover当鼠标悬停在tr上时,添加浅色的背景色
.table-responsive响应式表格——屏幕变小时,出现水平滚动条——该class不能用于<table>,只能用于其父元素<div>上!
--------------------------------------------------------------
用在tr和td上的class——WebStorm默认没有提示
.danger背景色淡红色,且悬停后变为深红色
.warning背景色淡黄色,且悬停后变为深黄色
.info背景色淡蓝色,且悬停后变为深蓝色
.success背景色淡绿色,且悬停后变为深绿色
.active背景色淡灰色,且悬停后变为深灰色

6.全局CSS样式——栅格布局系统——重点


两个容器类:


.container宽度固定的容器


width:1170px;屏幕宽度>=1200


width:970px;屏幕宽度>=992


width:750px;屏幕宽度>=768


padding-left/right:15px;


margin-left/right:auto;


.container:before:防止第一个子元素的margin-top越界


.container:after:清除子元素浮动造成的影响


.container-fluid流式容器


width:auto;


padding-left/right:15px;


.container-fluid:before


.container-fluid:after

Bootstrap提供的响应式网格布局系统——GridLayoutSystem


<divclass="container/container-fluid">


<divclass="row">


<divclass="col"></div>


<divclass="col"></div>


</div>


<divclass="row">


<divclass="col"></div>


<divclass="col"></div>


<divclass="col"></div>


</div>


</div>




Bootstrap把屏幕分为四类:


(1)xs-超小屏幕(手机):<768px


(2)sm-小屏幕(平板):>768px<=992px


(3)md-中等屏幕(一般PC显示器):>992px<=1200


(4)lg-大型屏幕(大型PC显示器):>1200px




.col-xs-1~.col-xs-12对超小、小、中等、超大屏幕有效


.col-sm-1~.col-sm-12对小屏幕、中等、超大屏幕都有效


.col-md-1~.col-md-12对中等屏幕、超大屏幕有效


.col-lg-1~.col-lg-12只对超大屏幕有效


.col-xs-offset-1~.col-xs-offset-12偏移量


.col-sm-offset-1~.col-sm-offset-12偏移量


.col-md-offset-1~.col-md-offset-12偏移量


.col-lg-offset-1~.col-lg-offset-12偏移量


.hidden-xs在超小屏幕下隐藏


.hidden-sm在小屏幕下隐藏


.hidden-md在中等屏幕下隐藏


.hidden-lg在超大屏幕下隐藏


                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: