1. 程式人生 > >Bootstrap 樣式之 文字顏色

Bootstrap 樣式之 文字顏色

Bootstrap 自定義的文字顏色 +  原始碼檢視(測試版本3.x)

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

先來看看bootstrap自定義的文字顏色是什麼樣的:

程式碼:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面,任何其他內容都*必須*跟隨其後! -->
    <link rel="stylesheet" href="bootstrap.css">
    <title>Bootstrap 101 Template</title>
    <style>
          p{font-size:50px;}
    </style>
    
  </head>
  <body>
              <p class="text-muted">我是muted</p>
              <p class="text-primary">我是primary</p>
              <p class="text-success">我是success</p>
              <p class="text-info">我是info</p>
              <p class="text-warning">我是warning</p>
              <p class="text-danger">我是danger</p>          
    <script src="jquery.js"></script>
    <script src="bootstrap.js"></script>
  </body>
</html>

顯示效果:

                                         


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

上面就是六個不同的文字顏色,我們再來看看具體的文字顏色是多少?

開啟Bootstrap.css  , 搜尋text-muted:

結果如下:

這樣我們就可以看出預設情況下bootstrap給出的文字顏色樣式為:

.text-muted{  color: #777 ;  }

.text-primary{  color: #337ab7 ;  }

.text-success{  color: #3c763d ;  }

.text-info{  color: #31708f ;  }

.text-warning{  color: #8a6d3b ;  }

.text-danger{  color: #a94442 ;  }

我們也可以基於這些樣式進行修改和新增,得到符合自己需求的樣式;