Bootstrap顏色詳解

一、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中所有的顏色樣式表，以及對應的代碼。

七、Bootstrap顏色英文

Bootstrap顏色樣式中的英文名稱和對應的漢語名稱如下：

八、Bootstrap顏色選擇器

Bootstrap提供了顏色選擇器組件，在需要選擇顏色的場景中可以很方便地使用。

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

九、Bootstrap顏色主題

Bootstrap除了提供上述的官方顏色外，還允許用戶自定義顏色主題。

用戶可以在Bootstrap的官網中，選擇自己喜歡的顏色主題，並下載對應的源代碼。

下載的源代碼包中，包含了針對各種組件的顏色樣式表，可以方便地進行定製。