Bootstrap-全局样式的文本颜色和背景颜色

开发者梓豪技术 2022年11月14日

0 收藏 731 点赞 4,244 浏览 1360 个字

.text-五种颜色文本颜色
.text-info文本浅蓝颜色-提示
.text-warning文本黄色-警告颜色
.text-success文本绿色-成功颜色
.text-primary文本深蓝色-警告颜色

.bg-五中颜色背景颜色
.bg-warning文本红色背景
.bg-success文本绿色背景
.bg-info文本浅蓝色背景
.bg-warning文本黄色背景
.bg-primary文本绿色背景

 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Bootstrap 101 Template</title>     <!-- Bootstrap -->
     <link href="css/bootstrap.css" rel="external nofollow"  rel="stylesheet">     <!--[if lt IE 9]>
     <script src="js/html5shiv.min.js"></script>
     <script src="js/respond.min.js"></script>
     <![endif]-->
 </head>
 <body>
 <h3>文本相关class</h3>
 <p class="text">文本的五种颜色</p>
 <p class="text-info">文本浅蓝颜色-提示</p>
 <p class="text-warning">文本黄色-警告颜色</p>
 <p class="text-success">文本绿色-成功颜色</p>
 <p class="text-primary">文本深蓝色-警告颜色</p> <P class="bg">文本背景五种颜色</P>
 <P class="bg-warning">文本红色背景</P>
 <P class="bg-success">文本绿色背景</P>
 <P class="bg-info">文本浅蓝色背景</P>
 <P class="bg-warning">文本黄色背景</P>
 <P class="bg-primary">文本绿色背景</P> <p class="text-uppercase">jshfjskhkjdshkfhdsjkhfdkj</p><!--文本转大写形式-->
 <p class="text-lowercase">SHDJASHJDKHAJSKHDJKDASHDH</p><!--文本转小写形式-->
 <p class="text-capitalize">jsdklajslkdjkaljsdkljaskj</p><!--文本首字母与大写形式-->
 <p class="text-left">文本左对齐</p>
 <p class="text-center">文本居中对齐</p>
 <p class="text-right">文本右对齐</p>
 <p class="text-justify">文本两端对齐</p> <br><br>
 <script src="js/jquery-1.11.3.js"></script>
 <script src="js/bootstrap.js"></script>
 </body>
 </html>