Hướng dẫn bootstrap body background color - màu nền cơ thể bootstrap

Màu nền

Tương tự như các lớp màu văn bản theo ngữ cảnh, đặt nền của một phần tử thành bất kỳ lớp ngữ cảnh nào. Các tiện ích nền không đặt

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.BG-DARK

.bg-body

.bg-white

.bg-transparent

<div class="p-3 mb-2 bg-primary text-white">.bg-primarydiv>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondarydiv>
<div class="p-3 mb-2 bg-success text-white">.bg-successdiv>
<div class="p-3 mb-2 bg-danger text-white">.bg-dangerdiv>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warningdiv>
<div class="p-3 mb-2 bg-info text-dark">.bg-infodiv>
<div class="p-3 mb-2 bg-light text-dark">.bg-lightdiv>
<div class="p-3 mb-2 bg-dark text-white">.bg-darkdiv>
<div class="p-3 mb-2 bg-body text-dark">.bg-bodydiv>
<div class="p-3 mb-2 bg-white text-dark">.bg-whitediv>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparentdiv>

Độ dốc nền

Bằng cách thêm một lớp

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

Bạn có cần một gradient trong CSS tùy chỉnh của bạn? Chỉ cần thêm

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

.bg-primary.bg-gradient

.bg-secondary.bg-gradient

.bg-success.bg-gradient

.bg-danger.bg-gradient

.bg-warning.bg-gradient

.bg-info.bg-gradient

.bg-light.bg-gradient

.bg-dark.bg-gradient

Sass

Ngoài các chức năng SASS sau đây, hãy xem xét đọc về các thuộc tính tùy chỉnh CSS được bao gồm của chúng tôi (còn gọi là các biến CSS) cho màu sắc và hơn thế nữa.

Biến

Hầu hết các tiện ích

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

$gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0));

Màu sắc diện tích cũng có sẵn, nhưng chỉ có một tập hợp con được sử dụng để tạo ra bất kỳ tiện ích nào.

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

Bản đồ

Màu sắc chủ đề sau đó được đặt vào bản đồ SASS để chúng ta có thể lặp lại chúng để tạo ra các tiện ích, bộ sửa đổi thành phần và hơn thế nữa.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Màu sắc thang độ Grays cũng có sẵn dưới dạng bản đồ sass. Bản đồ này không được sử dụng để tạo ra bất kỳ tiện ích nào.This map is not used to generate any utilities.

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

Mixins

Không có hỗn hợp nào được sử dụng để tạo ra các tiện ích nền của chúng tôi, nhưng chúng tôi có một số hỗn hợp bổ sung cho các tình huống khác mà bạn muốn tạo độ dốc của riêng mình., but we do have some additional mixins for other situations where you’d like to create your own gradients.

@mixin gradient-bg($color: null) {
  background-color: $color;

  @if $enable-gradients {
    background-image: var(--#{$variable-prefix}gradient);
  }
}

// Horizontal gradient, from left to right
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
  background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
}

// Vertical gradient, from top to bottom
//
// Creates two color stops, start and end, by specifying a color and position for each color stop.
@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: null, $end-percent: null) {
  background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
}

@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
  background-image: linear-gradient($deg, $start-color, $end-color);
}

@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
  background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
}

@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
  background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
}

@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
  background-image: radial-gradient(circle, $inner-color, $outer-color);
}

@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
  background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}

API tiện ích

Các tiện ích nền được khai báo trong API tiện ích của chúng tôi trong

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

    "background-color": (
      property: background-color,
      class: bg,
      values: map-merge(
        $theme-colors,
        (
          "body": $body-bg,
          "white": $white,
          "transparent": transparent
        )
      )
    ),