Ghi đè phản ứng css bootstrap

Xin chào @Palak@tru,

nếu tôi hiểu chính xác thì bạn muốn đặt kiểu của riêng mình cho lớp

Những phong cách không làm việc?

 .classic-tabs .nav li a.active { 
    border-bottom: 5px solid blue !important; 
    transition: width 1s ease, 0.5s ease !important
 }

Vui lòng đảm bảo rằng bạn đã nhập chính xác và theo đúng thứ tự các kiểu bạn đã nhập, như thế này

import React from 'react';
import ReactDOM from 'react-dom';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

Xin vui lòng cho tôi biết nếu vấn đề vẫn tồn tại

Trân trọng, Konrad

---

Tùy chỉnh Bootstrap 4 với các biến Sass tích hợp mới của chúng tôi cho các tùy chọn kiểu chung để dễ dàng thay đổi chủ đề và thành phần

Giới thiệu

Trong Bootstrap 3, chủ đề chủ yếu được điều khiển bởi các phần ghi đè biến trong LESS, CSS tùy chỉnh và biểu định kiểu chủ đề riêng biệt mà chúng tôi đã đưa vào tệp

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

3 của mình. Với một số nỗ lực, người ta có thể thiết kế lại hoàn toàn giao diện của Bootstrap 3 mà không cần chạm vào các tệp cốt lõi. Bootstrap 4 cung cấp một cách tiếp cận quen thuộc nhưng hơi khác

Giờ đây, chủ đề được thực hiện bằng các biến Sass, bản đồ Sass và CSS tùy chỉnh. Không có biểu định kiểu chủ đề chuyên dụng nào nữa;

ngổ ngáo

Sử dụng các tệp Sass nguồn của chúng tôi để tận dụng các biến, bản đồ, mixin, v.v. Trong bản dựng của chúng tôi, chúng tôi đã tăng độ chính xác làm tròn Sass lên 6 (theo mặc định là 5) để ngăn sự cố làm tròn trình duyệt

cấu trúc tệp

Bất cứ khi nào có thể, hãy tránh sửa đổi các tệp cốt lõi của Bootstrap. Đối với Sass, điều đó có nghĩa là tạo biểu định kiểu của riêng bạn, nhập Bootstrap để bạn có thể sửa đổi và mở rộng nó. Giả sử bạn đang sử dụng trình quản lý gói như npm, bạn sẽ có cấu trúc tệp trông như thế này

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Nếu bạn đã tải xuống các tệp nguồn của chúng tôi và không sử dụng trình quản lý gói, bạn sẽ muốn thiết lập thủ công một cái gì đó tương tự với cấu trúc đó, giữ các tệp nguồn của Bootstrap tách biệt với các tệp nguồn của bạn

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

nhập khẩu

Trong

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

4 của bạn, bạn sẽ nhập các tệp Sass nguồn của Bootstrap. Bạn có hai lựa chọn. bao gồm tất cả Bootstrap hoặc chọn những phần bạn cần. Chúng tôi khuyến khích cách thứ hai, mặc dù lưu ý rằng có một số yêu cầu và sự phụ thuộc giữa các thành phần của chúng tôi. Bạn cũng sẽ cần bao gồm một số JavaScript cho các plugin của chúng tôi

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

Với thiết lập đó, bạn có thể bắt đầu sửa đổi bất kỳ biến Sass và bản đồ nào trong

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

4 của mình. Bạn cũng có thể bắt đầu thêm các phần của Bootstrap trong phần

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

6 nếu cần. Chúng tôi khuyên bạn nên sử dụng ngăn xếp nhập đầy đủ từ tệp

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

7 của chúng tôi làm điểm xuất phát của bạn

Giá trị mặc định của biến

Mỗi biến Sass trong Bootstrap 4 bao gồm cờ

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

8 cho phép bạn ghi đè giá trị mặc định của biến trong Sass của riêng bạn mà không sửa đổi mã nguồn của Bootstrap. Sao chép và dán các biến nếu cần, sửa đổi giá trị của chúng và xóa cờ

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

8. Nếu một biến đã được gán, thì nó sẽ không được gán lại bởi các giá trị mặc định trong Bootstrap

Bạn sẽ tìm thấy danh sách đầy đủ các biến của Bootstrap trong

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

0

Ghi đè biến trong cùng một tệp Sass có thể xuất hiện trước hoặc sau các biến mặc định. Tuy nhiên, khi ghi đè lên các tệp Sass, phần ghi đè của bạn phải đến trước khi bạn nhập tệp Sass của Bootstrap

Đây là một ví dụ thay đổi

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

1 và

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

2 khi nhập và biên dịch Bootstrap qua npm

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

Lặp lại nếu cần cho bất kỳ biến nào trong Bootstrap, bao gồm các tùy chọn chung bên dưới

Bản đồ và vòng lặp

Bootstrap 4 bao gồm một số bản đồ Sass, các cặp giá trị chính giúp tạo các họ CSS liên quan dễ dàng hơn. Chúng tôi sử dụng bản đồ Sass cho màu sắc, điểm ngắt lưới và hơn thế nữa. Giống như các biến Sass, tất cả các bản đồ Sass bao gồm cờ

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

8 và có thể được ghi đè và mở rộng

Một số bản đồ Sass của chúng tôi được hợp nhất thành những bản đồ trống theo mặc định. Điều này được thực hiện để cho phép dễ dàng mở rộng bản đồ Sass nhất định, nhưng phải trả giá bằng việc loại bỏ các vật phẩm khỏi bản đồ khó khăn hơn một chút

sửa đổi bản đồ

Để sửa đổi màu hiện có trong bản đồ

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

4 của chúng tôi, hãy thêm phần sau vào tệp Sass tùy chỉnh của bạn

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Thêm vào bản đồ

Để thêm màu mới vào

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

4, hãy thêm khóa và giá trị mới

$theme-colors: (
  "custom-color": #900
);

Xóa khỏi bản đồ

Để xóa màu khỏi

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

4 hoặc bất kỳ bản đồ nào khác, hãy sử dụng

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

7. Xin lưu ý rằng bạn phải chèn nó vào giữa các yêu cầu và tùy chọn của chúng tôi

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

Các phím bắt buộc

Bootstrap giả định sự hiện diện của một số khóa cụ thể trong bản đồ Sass khi chúng tôi sử dụng và tự mở rộng các khóa này. Khi bạn tùy chỉnh các bản đồ đi kèm, bạn có thể gặp lỗi khi sử dụng khóa của bản đồ Sass cụ thể

Ví dụ: chúng tôi sử dụng các khóa

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

8,

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

9 và

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

0 từ

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

4 cho các liên kết, nút và trạng thái biểu mẫu. Việc thay thế các giá trị của các khóa này sẽ không có vấn đề gì, nhưng việc xóa chúng có thể gây ra sự cố biên dịch Sass. Trong những trường hợp này, bạn sẽ cần sửa đổi mã Sass sử dụng các giá trị đó

Chức năng

Bootstrap sử dụng một số chức năng Sass, nhưng chỉ một tập hợp con được áp dụng cho chủ đề chung. Chúng tôi đã bao gồm ba chức năng để nhận các giá trị từ bản đồ màu

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Những thứ này cho phép bạn chọn một màu từ bản đồ Sass giống như cách bạn sử dụng biến màu từ v3

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Chúng tôi cũng có một chức năng khác để lấy một mức độ màu cụ thể từ bản đồ

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

4. Các giá trị mức âm sẽ làm sáng màu, trong khi các mức cao hơn sẽ tối hơn

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

0

Trong thực tế, bạn sẽ gọi hàm và truyền vào hai tham số. tên của màu sắc từ

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

4 (e. g. , chính hoặc nguy hiểm) và cấp số

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

1

Các hàm bổ sung có thể được thêm vào trong tương lai hoặc Sass tùy chỉnh của riêng bạn để tạo các hàm cấp độ cho các bản đồ Sass bổ sung hoặc thậm chí là một bản đồ chung nếu bạn muốn dài dòng hơn

Độ tương phản màu

Một chức năng bổ sung mà chúng tôi đưa vào Bootstrap là chức năng tương phản màu,

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

4. Nó sử dụng không gian màu YIQ để tự động trả về màu tương phản sáng (

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

5) hoặc tối (

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

6) dựa trên màu cơ bản đã chỉ định. Hàm này đặc biệt hữu ích cho các mixin hoặc vòng lặp mà bạn đang tạo nhiều lớp

Ví dụ: để tạo các mẫu màu từ bản đồ

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

4 của chúng tôi

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

2

Nó cũng có thể được sử dụng cho các nhu cầu tương phản một lần

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

3

Bạn cũng có thể chỉ định một màu cơ bản với các chức năng bản đồ màu của chúng tôi

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

4

tùy chọn sass

Tùy chỉnh Bootstrap 4 với tệp biến tùy chỉnh được tích hợp sẵn của chúng tôi và dễ dàng chuyển đổi các tùy chọn CSS chung với các biến Sass

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

8 mới. Ghi đè giá trị của một biến và biên dịch lại bằng

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

9 nếu cần

Bạn có thể tìm và tùy chỉnh các biến này cho các tùy chọn toàn cầu chính trong tệp

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

0 của Bootstrap

Giá trị biếnMô tả

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

1

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

2 (mặc định) hoặc bất kỳ giá trị nào > 0Chỉ định giá trị bộ đệm mặc định để tạo các tiện ích bộ đệm của chúng tôi theo chương trình.

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

3_______19_______4 (mặc định) hoặc

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

5Bật kiểu

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

6 được xác định trước trên các thành phần khác nhau.

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

7

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

4 hoặc

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

5 (mặc định) Cho phép các kiểu

$theme-colors: (
  "custom-color": #900
);

0 được xác định trước trên các thành phần khác nhau.

$theme-colors: (
  "custom-color": #900
);

1

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

4 hoặc

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

5 (mặc định) Cho phép chuyển màu được xác định trước thông qua kiểu

$theme-colors: (
  "custom-color": #900
);

4 trên các thành phần khác nhau.

$theme-colors: (
  "custom-color": #900
);

5

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

4 (mặc định) hoặc

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

5Bật các

$theme-colors: (
  "custom-color": #900
);

8 được xác định trước trên các thành phần khác nhau.

$theme-colors: (
  "custom-color": #900
);

9_______19_______4 (mặc định) hoặc

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

5Bật tính năng chặn hoạt ảnh/chuyển tiếp nhất định dựa trên tùy chọn trình duyệt/hệ điều hành của người dùng.

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

3

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

4 hoặc

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

5 (mặc định)Không dùng nữa

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

6

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

4 (mặc định) hoặc

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

5Cho phép tạo các lớp CSS cho hệ thống lưới (e. g. ,

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

9,

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

0,

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

1, v.v. ).

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

2_______19_______4 (mặc định) hoặc

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

5Bật dấu mũ phần tử giả trên

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

5.

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

6

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

4 (mặc định) hoặc

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

5Bật các kiểu để tối ưu hóa việc in.

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

9

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

4 (mặc định) hoặc

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

5Bật biểu tượng

$theme-colors: (
  "custom-color": #900
);

4 trong đầu vào văn bản và một số biểu mẫu tùy chỉnh cho trạng thái xác thực

Màu

Nhiều thành phần và tiện ích khác nhau của Bootstrap được xây dựng thông qua một loạt các màu được xác định trong bản đồ Sass. Bản đồ này có thể được lặp lại trong Sass để nhanh chóng tạo ra một loạt các bộ quy tắc

Đủ màu sắc

Tất cả các màu có sẵn trong Bootstrap 4, có sẵn dưới dạng biến Sass và bản đồ Sass trong tệp

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

0. Điều này sẽ được mở rộng trong các bản phát hành nhỏ tiếp theo để thêm các sắc thái bổ sung, giống như những gì chúng tôi đã đưa vào

Đây là cách bạn có thể sử dụng chúng trong Sass của mình

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

5

Các lớp tiện ích màu cũng có sẵn để thiết lập

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

2 và

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

1

Trong tương lai, chúng tôi sẽ nhắm đến việc cung cấp bản đồ Sass và các biến cho sắc thái của từng màu như chúng tôi đã thực hiện với các màu thang độ xám bên dưới

màu sắc chủ đề

Chúng tôi sử dụng một tập hợp con của tất cả các màu để tạo một bảng màu nhỏ hơn để tạo bảng phối màu, cũng có sẵn dưới dạng biến Sass và bản đồ Sass trong tệp

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

0 của Bootstraps

màu xám

Một tập hợp mở rộng các biến màu xám và bản đồ Sass trong

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

0 cho các sắc thái xám nhất quán trong dự án của bạn. Lưu ý rằng đây là "màu xám lạnh", có xu hướng hướng tới tông màu xanh tinh tế, thay vì màu xám trung tính

Trong vòng

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

0, bạn sẽ tìm thấy các biến màu Bootstrap và bản đồ Sass. Đây là một ví dụ về bản đồ

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

9 Sass

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

6

Thêm, xóa hoặc sửa đổi các giá trị trong bản đồ để cập nhật cách chúng được sử dụng trong nhiều thành phần khác. Thật không may, tại thời điểm này, không phải mọi thành phần đều sử dụng bản đồ Sass này. Các bản cập nhật trong tương lai sẽ cố gắng cải thiện điều này. Cho đến lúc đó, hãy lập kế hoạch sử dụng các biến

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

00 và bản đồ Sass này

Các thành phần

Nhiều thành phần và tiện ích của Bootstrap được xây dựng với các vòng lặp

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

01 lặp lại trên bản đồ Sass. Điều này đặc biệt hữu ích để tạo các biến thể của một thành phần bằng

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

4 của chúng tôi và tạo các biến thể đáp ứng cho từng điểm dừng. Khi bạn tùy chỉnh các bản đồ Sass này và biên dịch lại, bạn sẽ tự động thấy các thay đổi của mình được phản ánh trong các vòng lặp này

sửa đổi

Nhiều thành phần của Bootstrap được xây dựng với cách tiếp cận lớp sửa đổi cơ sở. Điều này có nghĩa là phần lớn kiểu dáng được chứa trong một lớp cơ sở (e. g. ,

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

03) trong khi các biến thể phong cách được giới hạn trong các lớp sửa đổi (e. g. ,

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

04). Các lớp công cụ sửa đổi này được xây dựng từ bản đồ

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

4 để tùy chỉnh số lượng và tên của các lớp công cụ sửa đổi của chúng tôi

Dưới đây là hai ví dụ về cách chúng tôi lặp qua bản đồ

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

4 để tạo các công cụ sửa đổi cho thành phần

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

07 và tất cả các tiện ích nền tảng

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

08 của chúng tôi

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

7

Phản ứng nhanh nhẹn

Các vòng lặp Sass này cũng không giới hạn ở các bản đồ màu. Bạn cũng có thể tạo các biến thể đáp ứng của các thành phần hoặc tiện ích của mình. Lấy ví dụ về các tiện ích căn chỉnh văn bản đáp ứng của chúng tôi, nơi chúng tôi kết hợp một vòng lặp

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

01 cho bản đồ

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

10 Sass với một truy vấn phương tiện bao gồm

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

8

Nếu bạn cần sửa đổi

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

10 của mình, những thay đổi của bạn sẽ áp dụng cho tất cả các vòng lặp lặp lại trên bản đồ đó

biến CSS

Bootstrap 4 bao gồm khoảng hai chục thuộc tính tùy chỉnh CSS (biến) trong CSS được biên dịch của nó. Những thứ này cung cấp khả năng truy cập dễ dàng vào các giá trị thường được sử dụng như màu chủ đề, điểm dừng và ngăn xếp phông chữ chính của chúng tôi khi làm việc trong Trình kiểm tra của trình duyệt, hộp cát mã hoặc nguyên mẫu chung

biến có sẵn

Dưới đây là các biến chúng tôi đưa vào (lưu ý rằng

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

12 là bắt buộc). Chúng nằm trong tệp

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

13 của chúng tôi

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

9

ví dụ

Các biến CSS cung cấp tính linh hoạt tương tự như các biến của Sass, nhưng không cần biên dịch trước khi được cung cấp cho trình duyệt. Ví dụ: ở đây chúng tôi đang đặt lại phông chữ và kiểu liên kết của trang bằng các biến CSS

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

0

Biến điểm dừng

Mặc dù ban đầu chúng tôi đã bao gồm các điểm dừng trong các biến CSS của mình (e. g. ,

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

14), chúng không được hỗ trợ trong truy vấn phương tiện, nhưng chúng vẫn có thể được sử dụng trong bộ quy tắc trong truy vấn phương tiện. Các biến điểm dừng này vẫn còn trong CSS đã biên dịch để tương thích ngược với điều kiện chúng có thể được JavaScript sử dụng.

Làm cách nào để ghi đè Bootstrap css trong HTML?

Tôi có thể sử dụng Bootstrap và css cùng nhau không?

Làm cách nào để nhập Bootstrap css trong React?

Bạn có thể sử dụng Bootstrap với các thành phần được tạo kiểu không?