Bootstrap颜色详解

小蓝 • 2024-12-05 14:01 • 编程

一、Bootstrap颜色选择

Bootstrap的颜色主要由6种颜色组成，分别是primary（蓝色）、secondary（灰色）、success（绿色）、danger（红色）、warning（黄色）、info（青色）。其中，primary颜色在bootstrap中扮演了重要的角色，用于强调和突出重点。

除了这六种颜色，Bootstrap还提供了一些辅助颜色，如light和dark。

    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-secondary">Secondary</button>
    <button class="btn btn-success">Success</button>
    <button class="btn btn-danger">Danger</button>
    <button class="btn btn-warning">Warning</button>
    <button class="btn btn-info">Info</button>
    <button class="btn btn-light">Light</button>
    <button class="btn btn-dark">Dark</button>

二、Bootstrap按钮颜色

Bootstrap中的按钮样式非常丰富，可以根据需要选择不同的颜色。

除了上面提到的6个主要颜色，Bootstrap还提供了outline和link两种样式，以及不同颜色的大小样式，例如large、small和block。

    <button class="btn btn-primary">Primary</button>
    <button class="btn btn-primary btn-outline">Primary Outline</button>
    <button class="btn btn-primary btn-link">Primary Link</button>
    <button class="btn btn-primary btn-lg">Large Primary</button>
    <button class="btn btn-primary btn-sm">Small Primary</button>
    <button class="btn btn-primary btn-block">Block Primary</button>

三、Bootstrap颜色渐变

Bootstrap中提供了grdient-color类，用于为元素添加颜色渐变效果。

    <div class="bg-gradient-primary">Primary Gradient</div>
    <div class="bg-gradient-secondary">Secondary Gradient</div>
    <div class="bg-gradient-success">Success Gradient</div>
    <div class="bg-gradient-danger">Danger Gradient</div>
    <div class="bg-gradient-warning">Warning Gradient</div>
    <div class="bg-gradient-info">Info Gradient</div>

四、Bootstrap颜色代码bg

Bootstrap中通过添加bg-*类来添加颜色样式，可以实现不同背景颜色的效果。

    <div class="bg-primary">Primary Background</div>
    <div class="bg-secondary">Secondary Background</div>
    <div class="bg-success">Success Background</div>
    <div class="bg-danger">Danger Background</div>
    <div class="bg-warning">Warning Background</div>
    <div class="bg-info">Info Background</div>

五、Bootstrap颜色代码

Bootstrap中的颜色样式都有对应的代码，可以通过颜色名称和代码前缀bg-进行调用。

    primary:   #007bff;
    secondary: #6c757d;
    success:   #28a745;
    danger:    #dc3545;
    warning:   #ffc107;
    info:      #17a2b8;
    
    <div class="bg-primary text-white">Primary</div>
    <div class="bg-secondary text-white">Secondary</div>
    <div class="bg-success text-white">Success</div>
    <div class="bg-danger text-white">Danger</div>
    <div class="bg-warning text-white">Warning</div>
    <div class="bg-info text-white">Info</div>

六、Bootstrap颜色表

以下是Bootstrap中所有的颜色样式表，以及对应的代码。

颜色样式	代码
Primary	.bg-primary, .text-primary
Secondary	.bg-secondary, .text-secondary
Success	.bg-success, .text-success
Danger	.bg-danger, .text-danger
Warning	.bg-warning, .text-warning
Info	.bg-info, .text-info
Light	.bg-light, .text-light
Dark	.bg-dark, .text-dark
Primary Gradient	.bg-gradient-primary
Secondary Gradient	.bg-gradient-secondary
Success Gradient	.bg-gradient-success
Danger Gradient	.bg-gradient-danger
Warning Gradient	.bg-gradient-warning
Info Gradient	.bg-gradient-info

七、Bootstrap颜色英文

Bootstrap颜色样式中的英文名称和对应的汉语名称如下：

英文名称	汉语名称
Primary	蓝色
Secondary	灰色
Success	绿色
Danger	红色
Warning	黄色
Info	青色

八、Bootstrap颜色选择器

Bootstrap提供了颜色选择器组件，在需要选择颜色的场景中可以很方便地使用。

    <input type="color" class="form-control form-control-color">

九、Bootstrap颜色主题

Bootstrap除了提供上述的官方颜色外，还允许用户自定义颜色主题。

用户可以在Bootstrap的官网中，选择自己喜欢的颜色主题，并下载对应的源代码。

下载的源代码包中，包含了针对各种组件的颜色样式表，可以方便地进行定制。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/199810.html