Các nút bootstrap quá gần nhau

Tìm hiểu cách tạo kiểu nút khối [toàn chiều rộng] bằng CSS

Nút chặn

Cách tạo kiểu cho các nút khối

Bước 1] Thêm HTML

Thí dụ

Nút chặn

Bước 2] Thêm CSS

Để tạo nút có chiều rộng đầy đủ, hãy thêm chiều rộng 100% và biến nút đó thành phần tử khối

Thí dụ

.block {
  hiển thị. khối;
  chiều rộng. 100%;
  đường viền. không;
  màu nền. #04AA6D;
  phần đệm. 14px 28px;
  cỡ chữ. 16px;
  con trỏ. con trỏ;
  căn chỉnh văn bản. trung tâm;
}

Tự mình thử »

Truy cập Hướng dẫn về Nút CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu cho các nút

Hướng dẫn này sẽ chỉ cho bạn cách sử dụng các nút Bootstrap để xây dựng và tạo kiểu trang web của bạn dễ dàng và nhanh chóng hơn. Các ví dụ ở đây sẽ chỉ cho bạn cách làm việc với các nút trong Bootstrap 5 và cả Bootstrap 4

Bắt đầu nào

phần tử HTML

Các lớp nút được thiết kế để sử dụng với các phần tử , 

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

5 hoặc 

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

5 .  

Để tạo một nút cơ bản, hãy thêm lớp

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

7 vào phần tử

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

5hoặc

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

5. Điều này sẽ áp dụng các kiểu mặc định cho nó

lớp nút

Các nút cơ sở và màu sắc của chúng

Bootstrap bao gồm chín kiểu nút cơ sở, mỗi kiểu phục vụ mục đích ngữ nghĩa riêng

Các nút có văn bản màu trắng và nền dựa trên lớp btn-[color] được sử dụng cùng với lớp

Large button
Large button
Small button
Small button

0. e. g. ,

Large button
Large button
Small button
Small button

1 tạo nút có nền chính,

Large button
Large button
Small button
Small button

2 có nền xanh lục, v.v.

Vì các nút này khá nổi bật nên chúng rất phù hợp để sử dụng làm nút Kêu gọi hành động chính hoặc nút hành động chính

Các nút hành động chính là yếu tố quan trọng nhất trên trang của bạn và nên được sử dụng để hướng khách truy cập đến mục tiêu chính của trang web của bạn

Khi bạn sử dụng một lớp

Large button
Large button
Small button
Small button

3 đặc biệt, nút sẽ trông giống như một liên kết văn bản với phần đệm. Tôi thường sử dụng các nút này cho các hành động phụ như "Quay lại"

Large button
Large button
Small button
Small button

4

các nút phác thảo

Bootstrap 4 và Bootstrap 5 cũng đi kèm với các nút viền ngoài [ma], trong trường hợp bạn sẽ cần các nút tinh tế hơn mà không có màu nền mạnh

Để tạo nút viền, hãy thay thế lớp công cụ sửa đổi nút mặc định bằng biến thể 

Large button
Large button
Small button
Small button

5 

Tất cả các khả năng cho các nút đường viền được hiển thị bên dưới

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

Các nút trong suốt không chỉ dễ nhìn mà còn giúp bạn tự do hơn rất nhiều khi thiết kế chúng so với các nút mờ đục thông thường

Các nút có nền trong suốt có thể được sử dụng để hòa vào nền của trang web hoặc blog của bạn

Điều này đặc biệt hữu ích nếu bạn có nhiều nội dung quan trọng để người đọc xem ngay nhưng không muốn nội dung đó cạnh tranh với các nút và các yếu tố thiết kế khác của bạn

Khi sử dụng các nút trong suốt có văn bản, hãy đảm bảo có đủ độ tương phản giữa màu văn bản và màu nền của nút, nếu không, những người bị mù màu hoặc thị lực kém sẽ khó nhìn thấy những gì đang diễn ra

Kích thước nút

nhỏ và lớn

Các nút trong Bootstrap 4 và 5 có ba kích cỡ khác nhau. Có các nút nhỏ, lớn và trung bình. Kích thước mặc định là trung bình

Bạn có thể dễ dàng thay đổi kích thước nút bằng cách thêm lớp 

Large button
Large button
Small button
Small button

6 hoặc 

Large button
Large button
Small button
Small button

7 vào nút đó. Các lớp này sửa đổi phần đệm của nút cũng như kích thước phông chữ và bán kính đường viền CSS

Large button
Large button
Small button
Small button

Khi nào nên sử dụng nút lớn trong thiết kế web của bạn?

Một nút lớn trên trang web của bạn mang đến cho người dùng trải nghiệm nâng cao

Kích thước của nút càng lớn thì càng có nhiều khả năng họ sẽ chú ý và nhấp vào nút đó. Nó cũng giúp họ dễ dàng nhấp vào nó vì họ không phải di chuyển ngón tay nhiều để tìm đúng vị trí để nhấp vào

Điều quan trọng là các nút của bạn phải nổi bật so với các thành phần còn lại trên trang của bạn để người dùng có thể nhìn thấy chúng dễ dàng và hiểu rõ chúng làm gì khi nhấp vào

Khi nào thì sử dụng nút nhỏ?

Trong một số trường hợp, bạn có thể muốn sử dụng một loại nút khác, chẳng hạn như nút phụ hoặc nút nhỏ

Các nút nhỏ rất hữu ích khi bạn muốn cung cấp thông tin về hành động mà không chiếm quá nhiều không gian trên màn hình, đặc biệt nếu bạn có nhiều việc khác đang diễn ra cùng lúc

đệm

Nếu bạn muốn thay đổi phần đệm của nút, tôi khuyên bạn nên sử dụng lại các lớp tiện ích

E. g. nếu bạn muốn thêm một chút đệm vào nút, hãy sử dụng. p-4 hoặc thậm chí. các lớp p-5 trên nút. Điều này sẽ ghi đè lên phần đệm của nút tiêu chuẩn

Điều tôi thực sự yêu thích ở Bootstrap là tính linh hoạt của nó. Vì vậy, cũng có thể chỉ áp dụng các phần đệm khác nhau. g. theo chiều ngang hoặc sử dụng kết hợp các lớp tiện ích

Đây là vài ví dụ

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

6

nút chặn

Các nút có chiều rộng đầy đủ hữu ích trong một số trường hợp. Chúng có thể được sử dụng làm lời kêu gọi hành động chính trên trang web hoặc trên trang đích, thay thế cho biểu tượng menu bánh hamburger hoặc làm thành phần trong menu điều hướng

Tôi thường sử dụng chúng trên màn hình di động và thay thế chúng bằng nút có chiều rộng tiêu chuẩn trên các thiết bị lớn hơn

Cú pháp của chúng khác nhau giữa Bootstrap 5 và Bootstrap 4

Chúng ta hãy có một cái nhìn

Bootstrap 5

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

7Các nút chặn phản hồi trong Bootstrap 5

Ví dụ sau đây cho thấy cách tạo nút khối trên thiết bị di động sẽ trở thành nút tiêu chuẩn trên chế độ xem lớn hơn

Bí quyết là sử dụng kết hợp các lớp tiện ích hiển thị trên div cha.

Large button
Large button
Small button
Small button

8và

Large button
Large button
Small button
Small button

9

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

0

Bootstrap 4

Thêm lớp

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

60 vào nút để tạo nút khối mở rộng toàn bộ chiều rộng của nút cha

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

2

Các nút hoạt động và bị vô hiệu hóa

nút hoạt động

Các nút khi được sử dụng với phần tử sẽ xuất hiện khi được nhấn [i. e. , với nền tối hơn và đường viền tối hơn] tự động khi hoạt động

Khi sử dụng các lớp nút trên phần tử

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

5, bạn sẽ cần lớp

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

62 cho nó để đạt được điều tương tự

nút bị vô hiệu hóa

Để tắt một nút nếu bạn đang sử dụng

phần tử, hãy thêm thuộc tính

Primary
Secondary
Success
Danger
Warning
Info
Light
Dark

63 vào phần tử đó

Khi bạn đang sử dụng