Bootstrap-全局樣式的文本顏色和背景顏色

時間 2020-06-29

原文原文鏈接

.text-五種顏色文本顏色
.text-info文本淺藍顏色-提示
.text-warning文本黃色-警告顏色
.text-success文本綠色-成功顏色
.text-primary文本深藍色-警告顏色css

.bg-五中顏色背景顏色
.bg-warning文本紅色背景
.bg-success文本綠色背景
.bg-info文本淺藍色背景
.bg-warning文本黃色背景
.bg-primary文本綠色背景html

 1 <head>
 2     <meta charset="utf-8">
 3     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 4     <meta name="viewport" content="width=device-width, initial-scale=1">
 5     <title>Bootstrap 101 Template</title>
 6 
 7     <!-- Bootstrap -->
 8     <link href="css/bootstrap.css" rel="stylesheet">
 9 
10     <!--[if lt IE 9]>
11     <script src="js/html5shiv.min.js"></script>
12     <script src="js/respond.min.js"></script>
13     <![endif]-->
14 </head>
15 <body>
16 <h3>文本相關class</h3>
17 <p class="text">文本的五種顏色</p>
18 <p class="text-info">文本淺藍顏色-提示</p>
19 <p class="text-warning">文本黃色-警告顏色</p>
20 <p class="text-success">文本綠色-成功顏色</p>
21 <p class="text-primary">文本深藍色-警告顏色</p>
22 
23 <P class="bg">文本背景五種顏色</P>
24 <P class="bg-warning">文本紅色背景</P>
25 <P class="bg-success">文本綠色背景</P>
26 <P class="bg-info">文本淺藍色背景</P>
27 <P class="bg-warning">文本黃色背景</P>
28 <P class="bg-primary">文本綠色背景</P>
29 
30 <p class="text-uppercase">jshfjskhkjdshkfhdsjkhfdkj</p><!--文本轉大寫形式-->
31 <p class="text-lowercase">SHDJASHJDKHAJSKHDJKDASHDH</p><!--文本轉小寫形式-->
32 <p class="text-capitalize">jsdklajslkdjkaljsdkljaskj</p><!--文本首字母與大寫形式-->
33 <p class="text-left">文本左對齊</p>
34 <p class="text-center">文本居中對齊</p>
35 <p class="text-right">文本右對齊</p>
36 <p class="text-justify">文本兩端對齊</p>
37 
38 <br><br>
39 <script src="js/jquery-1.11.3.js"></script>
40 <script src="js/bootstrap.js"></script>
41 </body>
42 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。