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在超大屏幕下隐藏
相关文章推荐
- bootstrap ace admin 整合java HTML5 全新高大尚后台框架
- BootStrap table 传递搜索参数
- bootstrap风格的multiselect插件——类似邮箱收件人样式
- CSS,bootstrap表格控制当td内容过长时用省略号表示,以及在不使用bootstrap时过长也用省略号表示
- app bootstrap font icon
- bootstrap modal动态加载内容
- Bootstrap中的下拉菜单
- 全面解析Bootstrap手风琴效果
- bootstrap-datepicker 日期拾取器
- 全面解析Bootstrap手风琴效果
- bootstrap模态框
- 基于Bootstrap jQuery.validate Form表单验证实践
- Bootstrap历练实例:响应式导航(带有表单)
- Bootstrap简介及Bootstrap里的栅格系统col-md/sm/xs-x;
- [ruby]Rails中使用bootstrap
- HTML、CSS、Javascript、Bootstrap学习链接
- 10003---BootStrap网格系统
- bootstrap提供了六种列表效果
- 10002---BootStrap--CSS概览
- JS组件系列——两种bootstrap multiselect组件大比拼