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 帶懸停效果的表格