Làm cách nào để tùy chỉnh các nút bootstrap?

Để tìm hiểu về các nút Bootstrap 4, hãy xem hướng dẫn của nó với các bản trình diễn tại đây

Một vài điểm để tạo các nút theo kiểu Bootstrap

• Bạn có thể tạo các nút bằng cách sử dụng thẻ đầu vào, thẻ nút hoặc thẻ liên kết
• Lớp nút chính được sử dụng là btn, lớp Bootstrap
• Màu sắc của các nút có thể được thay đổi bằng cách sử dụng các lớp được xác định trước như btn-info, btn-default, btn-primary, btn-danger
• Kích thước của nút cũng có thể được xác định bằng cách sử dụng các lớp được xác định trước e. g. để sử dụng nút lớn. btn-lg Đối với nút nhỏ, hãy sử dụng. btn-sm và để sử dụng thêm lớp btn-xs

Xem ví dụ sau để tạo các nút bằng cách sử dụng các lớp Bootstrap. Trong phần tiếp theo, tôi sẽ chỉ cho bạn cách ghi đè các lớp mặc định để thay đổi một số thuộc tính như sử dụng một số màu khác với cùng kiểu Bootstrap HOẶC thay đổi kích thước theo nhu cầu của trang web của bạn

Các nút Bootstrap với các kích cỡ và màu sắc khác nhau

Trong bản trình diễn này, tôi sẽ chỉ sử dụng các lớp được xác định trước để chỉ ra cách bạn có thể tạo các nút với các lớp bootstrap. Xem bản demo trực tuyến với mã

Trong bản trình diễn, bạn có thể thấy các nút có kích thước và kiểu dáng khác nhau ở các hàng khác nhau. Sau đây là các mã cho từng phong cách

Đối với kích thước bình thường của các nút Bootstrap, không chỉ định bất kỳ kích thước nào như sau

1

2

3

4

5

6

7

8

9

10

11

12

13

Đối với các nút kích thước lớn, hãy sử dụng lớp btn-lg

1

Đối với các nút có kích thước nhỏ, hãy sử dụng lớp btn-sm, e. g

1

  loại = "nút" class="btn btn-success btn-sm">success style

Đối với các nút có kích thước cực nhỏ, hãy sử dụng lớp btn-xs, e. g

1

  loại = "nút" class="btn btn-info btn-xs">info style

Và các nút cấp Khối đang sử dụng lớp btn-block chẳng hạn

1

  loại = "nút" class="btn btn-danger btn-block">danger style

Bạn có thể xem mã của tất cả các nút với các lớp tương ứng trong phần mã của trang demo

Một bản demo với nút kích hoạt và vô hiệu hóa Bootstrap

Ví dụ sau sử dụng. lớp tích cực trong một nút. Trong khi hàng khác sử dụng thuộc tính bị vô hiệu hóa của nút để tắt nút

Lớp đang hoạt động tối hơn một chút so với trạng thái bình thường cho thấy một nút đang “hoạt động” hoặc được nhấp để nổi bật so với các nút khác

Ví dụ

1

Thuộc tính bị vô hiệu hóa chỉ là một thuộc tính nút bình thường không thể nhấp được

1

Tùy chỉnh các nút Bootstrap bằng cách ghi đè các lớp

Các nút được tạo kiểu độc đáo trong khung Bootstrap bằng cách sử dụng các lớp của nó. Tuy nhiên, màu sắc bị hạn chế khi sử dụng các lớp có sẵn. Trong một số trường hợp nhất định, bạn có thể muốn sử dụng màu tùy chỉnh cho các nút để phù hợp với chủ đề trang web của mình

Để thực hiện được điều đó, một trong những cách là ghi đè lên các lớp của Bootstrap liên quan đến các nút. Ví dụ: bạn có thể lấy lớp btn-default từ tệp Bootstrap CSS, sao chép nó vào phần kiểu và sử dụng các thuộc tính tùy chỉnh

Chỉ cần đổi màu thôi, còn lại e giữ lại. g. cạnh tròn vv

Xem bản demo với các màu khác nhau

Trong bản demo, bạn có thể thấy cách phối màu khác nhau được sử dụng cho các nút có cùng kiểu như trong các ví dụ trên. Nếu bạn nhìn vào mã của các nút trong trang demo, nó cũng giống như được sử dụng trong ví dụ trên

1

2

3

Sự khác biệt duy nhất là các lớp được sử dụng trong phần đầu

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

btn-mặc định

{

màu nền. #68889E;

màu. #FFF;

màu đường viền. #2F3E48;

}

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {

màu nền. #2F3E48;

màu. #FFF;

màu đường viền. #31347B;

}

Những gì tôi đã làm là, lấy các lớp từ Bootstrap CSS cho kiểu btn-default và trong bản trình diễn đó chỉ ghi đè các thuộc tính màu nền, màu đường viền và màu phông chữ. Vì các thuộc tính khác không thay đổi nên các thuộc tính khác sẽ được giữ nguyên

Tương tự, bạn chỉ có thể thay đổi lớp btn sẽ thay đổi màu của tất cả các nút. Hoặc thay đổi các lớp khác như btn-danger, btn-info, v.v.

Một điều quan trọng là bạn phải đặt style này sau khi đã bao gồm tệp Bootstrap CSS

Mặc dù, bạn có thể thay đổi các kiểu này trong tệp nguồn, tuy nhiên, điều này không được khuyến nghị vì mục đích nhất quán

Bản trình diễn nút có thuộc tính CSS 3

Bản trình diễn sau đây sử dụng nhiều thuộc tính hơn bao gồm các thuộc tính CSS3 để tạo kiểu cho các nút Bootstrap. Xem bản demo trực tuyến, sau đó là cách bạn có thể thực hiện

Đây gần giống như ví dụ trên ngoại trừ tôi đã sử dụng một vài thuộc tính CSS 3. Trong khi lần này tôi đã sử dụng lớp btn-danger để ghi đè lên các thuộc tính của nó

Chỉ cần chơi với các màu sắc và thuộc tính khác nhau để thiết kế của riêng bạn

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

nguy hiểm btn

{

màu nền. hsl(351, 68%, 11%) !important;

lặp lại trong nền. repeat-x;

hình nền. -o-linear-gradient(top, #d12741, #2f080e);

hình nền. gradient tuyến tính(#d12741, #2f080e);

màu đường viền. #2f080e #2f080e hsl(351, 68%, 1.5%);

màu. #fff . quan trọng;

bóng chữ. 0 -1px 0 rgba . 620, 0, 0, 0.62);

}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {

màu nền. hsl(360, 68%, 60%) !important;

lặp lại trong nền. repeat-x;

hình nền. độ dốc tuyến tính(#fbeded, #de5353);

màu đường viền. #de5353 #de5353 hsl(360, 68%, 51%);

màu. #333 . quan trọng;

bóng chữ. 0 1px 1px rgba( . 59255, 255, 255, 0.59);

}

Ngoài ra, lưu ý rằng bạn cũng có thể sử dụng tên tùy chỉnh và chỉ tham chiếu tên này sau lớp btn, e. g

btn btn-tùy chỉnh

Nút Bootstrap dưới dạng danh sách thả xuống

You may turn a button into a dropdown (acting as a dropdown menu). By using a button tag with