Boostrap全局CSS样式

1、Bootstrap提供的CSS Reset

  * { box-sizing: border-box; }

  body { font ...; color: #333; background: ...; margin: 0;}

  h1 { font-size: ;  margin-top: 20px;  margin-bottom: 10px;}

  h2 { font-size: ;  margin-top: 20px;  margin-bottom: 10px;}

  h3 { font-size: ;  margin-top: 20px;  margin-bottom: 10px;}

  h4  { font-size: ;  margin-top: 10px;  margin-bottom: 10px;} 

  h5  { font-size: ;  margin-top: 10px;  margin-bottom: 10px;} 

  h6  { font-size: ;  margin-top: 10px;  margin-bottom: 10px;} 

  a { color:;  text-decoration: ;}

  img { border: 0;  vertical-align: middle; }

  p { margin-bottom:10px; }

  ......

2、Bootstrap全局CSS样式——按钮——简单&有趣

  .btn { padding:;  border: ;}

  .btn-default { color:;  background:;  border-color:;}

----------------------

  .btn-danger

  .btn-success

  .btn-warning

  .btn-info

  .btn-primary

---------------------

  .btn-lg

  .btn-sm

  .btn-xs

----------------------

  .btn-block

----------------------

  .pull-left { float: left; }

  .pull-right { float: right; }

3、Bootstrap全局CSS样式——图片——简单&有趣

  .img-rounded

  .img-circle

  .img-thumbnail 缩略图片/拇指图片

  .img-responsive  响应式图片

4、Bootstrap全局CSS样式——排版和代码

 .text-danger

 .text-success

 .text.warning

 .text-info

 .text-primary

 .bg-danger

 .bg-success

 .bg-warning

 .bg-info

 .bg-primary

 .text-left

 .text-right

 .text-center

 .text-justify  文本两端调整对齐

 .text-uppercase  

 .text-lowercase

 .text-capitalize  

 .list-unstyled

 .list-inline    

5、Bootstrap全局CSS样式——表格——简单&有趣

  .table

  .table-bordered 带边框的表格

  .table-responsive 响应式表格  注意：使用在table的父元素上，而不是table上

  .table-striped 隔行变色的表格

  .table-hover 带悬停效果的表格

转载于:https://www.cnblogs.com/-walker/p/5022549.html