码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-12-04 22:47:49      阅读:502      评论:0      收藏:0      [点我收藏+]

标签:

 CSS Reset:重新设置HTML标签的默认样式。
  (1)重设了盒子模型的计算方法  * { box-sizing: border-box; }
  (2)重设了所有元素的默认字体   14px/1.42857143 "Helvetica Neue"
  (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            超小号按钮(extra small)

 

1.全局CSS样式——图片
  .img-circle            border-radius:50%
  .img-rounded        border-radius:6px;
  .img-thumbnail        border padding
  .img-responsive        max-width  display
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-left        float: left;
  .pull-right        float: right;
  .clearfix            clear:both;
-----------------------
  .show            display:block;        
  .hidden            display:none;
table全局样式
.table          width   margin-bottom     .table>td
  .table-bordered      border:1px solid #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        背景色淡灰色,且悬停后变为深灰色

 

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

标签:

原文地址:http://www.cnblogs.com/yexiangwang/p/5020342.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!