Bootstrap hình nền

Question

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 ứng dụng nền không được đặt

Nội dung chính Show

Độ dốc nền
ngổ ngáo
hỗn hợp
tiện ích API
Làm thế nào chúng ta có thể đặt hình nền trong bootstrap?
Làm thế nào để thay đổi nút màu nền trong bootstrap?
Bạn có thể tùy chỉnh bootstrap màu không?

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

0, vì vậy trong một số trường hợp, bạn sẽ muốn sử dụng các tiện ích màu

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

1. không đặt

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

0, vì vậy trong một số trường hợp, bạn sẽ muốn sử dụng các tiện ích màu

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

1

Nội dung chính Hiển thị

bg-chính

bg-trung học

bg-success

nguy hiểm bg

cảnh báo bg

thông tin bg

ánh sáng bg

BG-TỐI

bg-cơ thể

bg-trắng

bg-trong suốt

<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-dark">.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-body text-dark">.bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

Độ dốc nền

By way add an layer

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

2, một gradient tuyến tính được thêm vào làm hình nền trên nền. Độ dốc này bắt đầu với một màu trắng bán trong suốt, mờ dần xuống đáy

Bạn có cần một gradient trong CSS tùy chỉnh của bạn không?

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

3

bg-chính. độ dốc bg

bg-trung học. độ dốc bg

bg-success. độ dốc bg

nguy hiểm bg. độ dốc bg

cảnh báo bg. độ dốc bg

thông tin bg. độ dốc bg

ánh sáng bg. độ dốc bg

bg-tối. độ dốc bg

ngổ ngáo

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 được gọi là các biến CSS) để chọn màu sắc và hơn thế nữa

Variation

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;

4 được tạo ra bởi các chủ đề màu sắc của chúng tôi, chỉ được định lại từ các biến bảng màu chung của chúng tôi.

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

____9

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

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

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

1

map

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

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

2

Thang độ màu 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. Bản đồ này không được sử dụng để tạo ra bất kỳ tiện ích nào

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

3

hỗn hợp

Không có bộ trộn hỗn hợp nào được sử dụng để tạo ra các nền tảng tiện ích hữu ích của chúng tôi, nhưng chúng tôi có một số bộ trộn bổ sung cho các tình huống khác nhau mà bạn muốn tạo độ dốc của riêng mình. , nhưng chúng tôi có một số mixin 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

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

4

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

5

tiện ích API

Các ứng dụng nền ẩn được khai báo trong ứng dụng API 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;

5. Tìm hiểu cách sử dụng API Tiện ích.

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

7

Làm thế nào chúng ta có thể đặt hình nền trong bootstrap?

Ví dụ cơ bản. .

Thêm hình nền thông qua CSS nội tuyến

Xác định chiều cao nền. Trong ví dụ dưới đây, chúng tôi sử dụng các VH đơn vị, là viết tắt của "Chiều cao chế độ xem" ( chiều cao. 100VH có nghĩa là 100% chiều cao có sẵn. )

Add Layer. BG-IMAGE để mở rộng hình ảnh đúng cách và cho phép phản hồi

Làm thế nào để thay đổi nút màu nền trong bootstrap?

Màu nút Bootstrap Sử dụng một trong các lớp được sửa đổi mặc định sẽ thay đổi màu của văn bản và màu nền của các nút. . BTN-Danger sẽ làm cho nút màu đỏ và phông chữ trắng, trong khi. BTN-Warning will make cho nút màu vàng và màu đen, v. v. Việc sử dụng một trong các lớp công cụ sửa đổi mặc định sẽ thay đổi màu của văn bản và màu nền của các nút của bạn . . Btn-danger sẽ làm cho nút có màu đỏ và phông chữ màu trắng, trong khi. cảnh báo btn sẽ làm cho nút có màu vàng và phông chữ màu đen, v.v.

Bạn có thể tùy chỉnh bootstrap màu không?

Sử dụng ghi đè CSS là khả thi cho các tùy chọn điều chỉnh bootstrap đơn giản, nhưng đối với những thay đổi rộng rãi hơn, SASS là phương pháp được đề xuất. Giả sử ví dụ bạn muốn thay đổi màu "chính" màu xanh mặc định trong bootstrap thành một màu khác (ví dụ. color red). Bạn có thể làm cho CSS đơn giản ghi đè

programming bootstrap