bootstrap如何设置背景色 - 网站

bootstrap如何设置背景色

分类:Bootstrap框架进阶教程_Bootstrap技术文章 · 发布时间:2020-11-15 16:31 · 阅读:3082

  • 该方法适用于所有品牌的电脑。

Bootstrap 样式之 元素背景颜色

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

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

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

代码:

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

显示效果:

b497bc694ba7fad8aa3e65093f007fe.png-600

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

f1dc7da3e197bbcc0f4eab9b4198b2e.png-600

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

.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 ;  }

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

标签:
bootstrap

相关文章

bootstrap如何实现table表格超过长度不显示

bootstrap实现table表格超过长度不显示的方法:可以通过text-overflow和max-width属性来实现,如【&quot;white-space&quot;: &quot;nowrap&quot;,&quot;text-overflow&quot;: &quot;ellipsis&quot;】。

在bootstrap如何将图片全屏显示

bootstrap将图片全屏显示的方法:1、使用“&lt;div class=&quot;container&quot;&gt;&lt;/div&gt;”方式;2、使用“&lt;div class=&quot;container-fiuled&quot;&gt;&lt;/div&gt;”方式。

bootstrap表格显示不出来数据怎么办

bootstrap表格显示不出来数据的解决办法:1、清理下浏览器缓存;2、修改JSON数据格式;3、修改js的bootstraptable配置。

bootstrap怎么让div水平居中

bootstrap让div水平居中的方法:首先打开相应的代码文件;然后使用“&lt;div d-flex justify-content-center&quot;&gt;&lt;div class=&quot;align-self-center&quot;&gt;”实现居中即可。

bootstrap小图标替换的方法

bootstrap小图标替换的方法:首先使用“&lt;span class=&quot;glyphicon glyphicon-search&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;”;然后将glyphicon-search替换即可。

返回分类 返回首页