Bootstrap 樣式之 文字顏色
阿新 • • 發佈:2019-02-01
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 ; }
我們也可以基於這些樣式進行修改和新增,得到符合自己需求的樣式;