bootstrap对HTML标签的默认样式有哪些修改？-白红宇

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

阅读量：5121 次

发布时间：2019-06-13

本文共 3607 字，大约阅读时间需要 12 分钟。

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不能用于
     
      上！  --------------------------------------------------------------  用在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;