Bootstrap 样式之 元素背景颜色

在Bootstrap中既有文本颜色的样式也有元素背景颜色的样式,

我们先来看看元素背景的颜色有哪几种?

一共五种背景色:分别是 bg-primary   bg-success    bg-info     bg-warning     bg-danger

代码:

<!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="bg-primary">我是bg-primary</p>
              <p class="bg-success">我是bg-success</p>
              <p class="bg-info">我是bg-info</p>
              <p class="bg-warning">我是bg-warning</p>
              <p class="bg-danger">我是bg-danger</p>
              
    <script src="jquery.js"></script>
    <script src="bootstrap.js"></script>
  </body>
</html>

显示效果:

我们打开 Boostrap.css 文件,搜索 bg-primary:

我们可以看到背景颜色的样式分别为:

.bg-primary{  background-color:#337ab7;  }

.bg-success{  background-color:#dff0d8;  }

.bg-info{  background-color:#d9edf7 ;  }

.bg-warning{  background-color:#fcf8e3 ;  }

.bg-danger{  background-color:#f2dede ;  }

我们可以根据需要对这些样式进行选取和修改;

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值