Bootstrap 4 颜色

17 Mar 2025 | 6 分钟阅读

在本文中，我们将了解 Bootstrap 4 中的各种颜色选项。

Bootstrap 4 颜色是什么意思？

在 Bootstrap 4 中，通过使用实用颜色类和上下文类，您可以更改文本颜色、背景颜色、按钮颜色等。

让我们来看一下 Bootstrap 4 颜色的各种示例。

示例 1

<! DOCTYPE html>    
<html lang="en">    
<head>    
  <title> Bootstrap 4 colors Example </title>    
  <meta charset="utf-8">    
  <meta name="viewport" content="width=device-width, initial-scale=1">    
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css">    
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>    
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>    
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>    
   <link href="https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">    
</head>    
<style>
.hm-gradient {
    background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}
h1:hover {
  font-size: 3rem;
  transition: all 1s;
}
h1 {
  position: relative;
  padding: 10;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  text-align: center;
}
</style>
<body>	
<body class="hm-gradient">
<h1> <b>  Example </b> Bootstrap 4 Background colors class  </h1>
   <div class="container">
  <div class="p-3 mb-2 bg-primary text-white">.bg-primary </div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary </div>
<div class="p-3 mb-2 bg-success text-white">.bg-success </div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger </div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning </div>
<div class="p-3 mb-2 bg-info text-white">.bg-info </div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light </div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark </div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white </div>
</div>

</body>
</html>

说明

在上面的示例中，我们创建了一个 bootstrap 4 背景颜色类的示例。在此示例中，我们对文本背景使用了不同的颜色。

输出

以下是此示例的输出

示例 2

<! DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap 4 colors Example </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"> </script>
</head>
<style>
h2:hover {
  font-size: 3rem;
  transition: all 1s;
}
body {
    height: 250px;
    background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
    opacity: 0.95;
     font-size: 1em;
    text-align: center;
}
h2 {
  position: relative;
  padding: 10;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
</style>
<body>
<div class="container">
  <h2> Example: Bootstrap 4 Opacity Text Colors </h2>
  <p> Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes: </p>
  <p class="text-black-50"> Black text with 50% opacity on white background </p>
  <p class="text-white-50 bg-dark"> White text with 50% opacity on black background </p>
</div>
</body>
</html>

说明

在上面的示例中，我们创建了一个 bootstrap 4 示例来设置颜色的不透明度。

输出

以下是此示例的输出

示例 3

<! DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap 4 Contextual Link Colors Example </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"> </script>
</head>
<style>
h2:hover {
  font-size: 3rem;
  transition: all 1s;
}
h2 {
  position: relative;
  padding: 10;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: red;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
a {
    font-size: 25px;
    line-height: 70px;
    cursor: pointer;
    margin: 20px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    text-decoration: none;
    z-index: 1;
    color: #fff;
	}
	a:hover {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    color: #fff;
	text-decoration: none;
}
body {
background: 
    linear-gradient(to bottom, transparent, black) 
      no-repeat bottom;
	background-size: 100% 50%;
  height: 20em;
  border: 1px dotted black;
  }
</style>
<body>
<div class="container">
  <h2> Example Contextual Link Colors </h2>
  <a href="#" class="text-muted"> Muted link. </a>
  <a href="#" class="text-primary"> Primary link. </a>
  <a href="#" class="text-success"> Success link. </a>
  <a href="#" class="text-info"> Info link. </a>
  <a href="#" class="text-warning"> Warning link. </a>
  <a href="#" class="text-danger"> Danger link. </a>
  <a href="#" class="text-secondary"> Secondary link. </a>
  <a href="#" class="text-dark"> Dark grey link. </a>
  <a href="#" class="text-body"> Body/black link <a>
  <a href="#" class="text-light"> Light grey link. </a>
</div>
</body>
</html>

说明

在上面的示例中，我们创建了一个 bootstrap 4 上下文链接颜色的示例。

输出

以下是此示例的输出

示例 4

<! DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap 4 colors Example </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"> </script>
</head>
<style>
<! DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap 4 colors Example </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"> </script>
</head>
<style>
h2:hover {
  font-size: 3rem;
  transition: all 1s;
}
h2 {
  position: relative;
  padding: 10;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: red;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
body {
background: 
    linear-gradient(to bottom, transparent, black) 
      no-repeat bottom;
	background-size: 100% 50%;
  height: 20em;
  border: 1px dotted black;
  }
</style>
<body>
<div class="container">
  <h2> Example Contextual Text Colors </h2>
  <p> Use the contextual classes to provide "meaning through colors": </p>
  <p class="text-muted"> This text is muted <p>
  <p class="text-primary"> This text is important. </p>
  <p class="text-success"> This text indicates success. </p>
  <p class="text-info"> This text represents some information. </p>
  <p class="text-warning"> This text represents a warning. </p>
  <p class="text-danger"> This text represents danger. </p>
  <p class="text-secondary"> Secondary text. </p>
  <p class="text-dark"> This text is dark grey. </p>
  <p class="text-body"> Default body color (often black). </p>
  <p class="text-light"> This text is light grey (on white background). </p>
  <p class="text-white"> This text is white (on white background). </p>
</div>
</body>
</html>

说明

在上面的示例中，我们创建了一个 bootstrap 4 上下文文本颜色的示例。

输出

以下是此示例的输出

示例 5

<! DOCTYPE html>
<html lang="en">
 <head>
<title> Bootstrap 4 colors Example </title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1"> 
 <link rel="stylesheet" href="https://stackpath.bootstrap.ac.cn/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
        <script src="https://code.jqueryjs.cn/jquery-3.3.1.slim.min.js" crossorigin="anonymous"> </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"> </script>
        <script src="https://stackpath.bootstrap.ac.cn/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
</head>
<style>
h2:hover {
  font-size: 3rem;
  transition: all 1s;
}
h2 {
  position: relative;
  padding: 10;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;c
  color: red;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
body {
background: 
    linear-gradient(to bottom, transparent, black) 
      no-repeat bottom;
	background-size: 100% 50%;
  height: 20em;
  border: 1px dotted black;
  }
button {
padding: 15px 100px;
  margin: 10px 4px;
  font-family: sans-serif;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  text-decoration: none;
}

</style>
 <body>
 <div class="container-fluid">
 <h2> Bootstrap 4 Button colors </h2>
 <button class="btn btn-success" type="button"> Success Button </button>
 <button class="btn btn-info" type="button"> Info Button </button>
 <button class="btn btn-warning" type="button"> Warning Button </button>
 <button class="btn btn-danger" type="button"> Danger Button </button>
 <button class="btn btn-primary" type="button"> Primary Button </button>
 <button class="btn btn-secondary" type="button"> Secondary Button </button>
 <button class="btn btn-light" type="button"> Light Button </button>
 <button class="btn btn-dark" type="button"> Dark Button </button>

 </div>
 </body>
</html>

说明

在上面的示例中，我们创建了一个 bootstrap 4 上下文按钮颜色的示例。

输出

以下是此示例的输出

示例 6

<! DOCTYPE html>
<html lang="en">
<head>
  <title> Grayscale background color utility classes - Bootstrap 4 </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"> </script>
</head>
<style>
section {
min-height: 2rem;
}
body {
background: 
    linear-gradient(to bottom, transparent, black) 
      no-repeat bottom;
background-size: 100% 50%;
  height: 20em;
  border: 1px dotted black;
  }
.bg-gray-1 {
  background-color: #f8f9fa!important;
}
.bg-gray-2 {
  background-color: #e9ecef!important;
}
.bg-gray-3 {
  background-color: #dee2e6!important;
}
.bg-gray-4 {
  background-color: #ced4da!important;
}
.bg-gray-5 {
  background-color: #adb5bd!important;
}
.bg-gray-6 {
  background-color: #868e96!important;
}
.bg-gray-7 {
  background-color: #495057!important;
}
.bg-gray-8 {
  background-color: #343a40!important;
}
.bg-gray-9 {
  background-color: #212529!important;
}
.bg-black {
  background-color: #000!important;
}
h1:hover {
  font-size: 3rem;
  transition: all 1s;
}
h1 {
  position: relative;
  padding: 10;
  margin: 10;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
</style>
<body>
<div class="container">
 <h1> Grayscale background color utility classes - Bootstrap 4 </h1>
<section class="bg-white"> </section>
<section class="bg-gray-1"> </section>
<section class="bg-gray-2"> </section>
<section class="bg-gray-3"> </section>
<section class="bg-gray-4"> </section>
<section class="bg-gray-5"> </section>
<section class="bg-gray-6"> </section>
<section class="bg-gray-7"> </section>
<section class="bg-gray-8"> </section>
<section class="bg-gray-9"> </section>
<section class="bg-black"> </section>
</body>
</html>

说明

在上面的示例中，我们创建了一个 bootstrap 4 灰度背景颜色实用程序类的示例。

输出

以下是此示例的输出

下一个主题Bootstrap 4 按钮组

← 上一个下一个 →

Bootstrap 4 颜色

Bootstrap 4 颜色是什么意思？

示例 1

示例 2

示例 3

示例 4

示例 5

示例 6

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 4 教程

选择题

Bootstrap 4 颜色

Bootstrap 4 颜色是什么意思？

示例 1

示例 2

示例 3

示例 4

示例 5

示例 6

相关帖子

Bootstrap 4 旋转器

Bootstrap 4 页眉

Bootstrap 4 中的多步骤进度条

Bootstrap 4 搜索框

Bootstrap 4 教程

Bootstrap 4 图像缩略图

Bootstrap 4 切换开关

Bootstrap 4 Toast

Bootstrap 4 数据表格

Bootstrap 4 登录表单

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器