Hướng dẫn các nút Bootstrap – btn btn màu chính

Bạn đã bao giờ muốn có các nút đẹp trên trang web của mình chưa? Chà, điều đó rất dễ thực hiện với Bootstrap, đó là ngay cả khi bạn…

< font style = "vertical-align: inherit;"> Bạn đang xem: btn btn màu chính

Đã xuất bản: 9.12.2020 | Cập nhật lần cuối: 21.6.2022

Bạn đã bao giờ muốn có các nút đẹp trên trang web của mình chưa?

Chà, điều đó rất dễ thực hiện với Bootstrap, ngay cả khi bạn không phải là chuyên gia CSS.

Hướng dẫn này sẽ chỉ cho bạn cách sử dụng nút Bootstrap để xây dựng và tạo kiểu cho 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.

Hãy bắt đầu.

Phần tử HTML

Các lớp nút được thiết kế để sử dụng với các phần tử & lt; button & gt; , & lt; a & gt; hoặc & lt; input & gt; .

Để tạo một nút cơ bản, hãy thêm lớp .btn vào phần tử & lt; a & gt; hoặc & lt; input & gt; . Điều này sẽ áp dụng các kiểu mặc định cho nó.

Các lớp nút

Các nút cơ bản 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 btn . Ví dụ: btn-primary tạo nút có nền chính, btn-success có nền xanh, v.v.

Vì các nút này nổi bật khá nhiều, chúng rất thích hợp để được 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 tác vụ 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 btn-link đặc biệt, nút sẽ giống như một liên kết văn bản có đệ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”.

  & lt; button type = "button" class = "btn btn-primary" & gt; Primary & lt; / button & gt;
& lt; button type = "button" class = "btn btn-Secondary" & gt; Phụ & lt; / button & gt;
& lt; button type = "button" class = "btn btn-success" & gt; Thành công & lt; / button & gt;
& lt; button type = "button" class = "btn btn-risk" & gt; Nguy hiểm & lt; / button & gt;
& lt; button type = "button" class = "btn btn-warning" & gt; Cảnh báo & lt; / button & gt;
& lt; button type = "button" class = "btn btn-info" & gt; Thông tin & lt; / button & gt;
& lt; button type = "button" class = "btn btn-light" & gt; Light & lt; / button & gt;
& lt; button type = "button" class = "btn btn-dark" & gt; Dark & ​​lt; / button & gt;
& lt; button type = "button" class = "btn btn-link" & gt; Liên kết & lt; / button & gt;  

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

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

Để tạo nút phác thảo, hãy thay thế lớp bổ trợ nút mặc định bằng biến thể .btn-outline- * .

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

  & lt; button type = "button" class = "btn btn-outline-primary" & gt; Chính & lt; / button & gt;
& lt; button type = "button" class = "btn btn-outline-Secondary" & gt; Phụ & lt; / button & gt;
& lt; button type = "button" class = "btn btn-outline-success" & gt; Thành công & lt; / button & gt;
& lt; button type = "button" class = "btn btn-outline-risk" & gt; Nguy hiểm & lt; / button & gt;
& lt; button type = "button" class = "btn btn-outline-warning" & gt; Cảnh báo & lt; / button & gt;
& lt; button type = "button" class = "btn btn-outline-info" & gt; Thông tin & lt; / button & gt;
& lt; button type = "button" class = "btn btn-outline-light" & gt; Light & lt; / button & gt;
& lt; button type = "button" class = "btn btn-outline-dark" & gt; Dark & ​​lt; / button & gt;  

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ờ thông thường.

Các nút có nền trong suốt có thể được sử dụng để hòa trộn 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 có thể 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 điều gì đang xảy ra.

Kích thước nút

Nhỏ và lớn

Các nút trong Bootstrap 4 và 5 có ba kích thướ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ể rất dễ dàng thay đổi kích thước nút bằng cách thêm lớp btn-lg hoặc btn-sm vào nó. 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.

  & lt; button type = "button" class = "btn btn-primary btn-lg" & gt; Large button & lt; / button & gt;
& lt; button type = "button" class = "btn btn-Secondary btn-lg" & gt; Nút lớn & lt; / button & gt;
& lt; button type = "button" class = "btn btn-primary btn-sm" & gt; Nút nhỏ & lt; / button & gt;
& lt; button type = "button" class = "btn btn-Secondary btn-sm" & gt; Nút nhỏ & lt; / button & gt;  

Khi nào 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 lại cho người dùng trải nghiệm nâng cao.

Xem Thêm  Bài tập mảng 1 chiều c++ có lời giải - nhập xuất mảng 1 chiều c++

Kích thước của nút càng lớn, họ càng có nhiều khả năng để ý 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.

Đ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 phần tử 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õ ràng những gì họ làm khi nhấp vào.

Khi nào 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ỏ 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 dung lượng trên màn hình, đặc biệt nếu bạn có những việc khác đang diễn ra cùng lúc

Lớp đệ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.

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

Điều tôi thực sự yêu thích về 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, ví dụ: theo chiều ngang hoặc sử dụng kết hợp các lớp tiện ích.

Dưới đây là một số ví dụ:

  & lt; button type = "button" class = "btn btn-primary p-4" & gt; Nút chuẩn có thêm phần đệm & lt; / button & gt;
& lt; button type = "button" class = "btn btn-primary btn-sm p-3" & gt; Nút nhỏ có thêm phần đệm & lt; / button & gt;

& lt;! - Nút tiêu chuẩn có phần đệm ngang hơn một chút & amp; tăng khoảng đệm theo chiều dọc - & gt;
& lt; button type = "button" class = "btn btn-primary px-4 py-5" & gt; Kết hợp các lớp & lt; / button & gt;  

Các 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 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 như một 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 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.

Hãy cùng xem:

Bootstrap 5

  & lt; div class = "d-grid gap-2" & gt;
  & lt; button class = "btn btn-primary" type = "button" & gt; Nút & lt; / button & gt;
  & lt; button class = "btn btn-Secondary" type = "button" & gt; Nút & lt; / button & gt;
& lt; / div & gt;  
Các nút khối đáp ứng trong Bootstrap 5

Ví dụ sau đây cho thấy cách tạo các nút khối trên thiết bị di động sẽ trở thành các nút tiêu chuẩn trên các cửa sổ 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 chính: .d-grid .d-md-block .

  & lt; div class = "d-grid gap-2 d-md-block" & gt;
  & lt; button class = "btn btn-primary" type = "button" & gt; Nút & lt; / button & gt;
  & lt; button class = "btn btn-Secondary" type = "button" & gt; Nút & lt; / button & gt;
& lt; / div & gt;  

Bootstrap 4

Thêm lớp btn-block vào nút để tạo một nút khối kéo dài bằng toàn bộ chiều rộng của lớp cha của nó.

  & lt; button type = "button" class = "btn btn-primary btn-lg btn-block" & gt; Nút cấp khối & lt; / button & gt;
& lt; button type = "button" class = "btn btn-Secondary btn-lg btn-block" & gt; Nút cấp khối & lt; / button & gt;  

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

Các nút hoạt động

Các nút, khi được sử dụng với nút & lt; & gt;Phần tử sẽ tự động xuất hiện khi được nhấn (nghĩa là với nền tối hơn và đường viền tối hơn) khi hoạt động.

Khi sử dụng các lớp nút trên phần tử & lt; a & gt; , bạn sẽ cần lớp .active cho nó để đạt được điều tương tự.

Các nút bị tắt

Để tắt một nút nếu bạn đang sử dụng phần tử & lt; button & gt; , hãy thêm thuộc tính đã tắt vào nó.

Khi bạn đang sử dụng & lt; a class = "btn" & gt; , chỉ cần thêm lớp .disabled vào nút như trong ví dụ bên dưới.

Phương pháp hay nhất là bao gồm thuộc tính aria-disable = "true" để cho biết trạng thái của phần tử đối với các công nghệ hỗ trợ.

  & lt; button type = "button" class = "btn btn-lg btn-primary" bị vô hiệu hóa & gt; Nút chính & lt; / button & gt;

& lt; a href = "#" class = "btn btn-primary btn-lg bị vô hiệu hóa" tabindex = "- 1" role = "button" aria-disable = "true" & gt; Nút liên kết chính & lt; / a & gt;  

Xem trực tiếp

Xem các nút Pen Bootstrap: các lớp đang hoạt động và bị vô hiệu hóa của Ondrej ( @ondrejsvestka ) trên CodePen .

Căn chỉnh các nút Bootstrap

Bạn có thể căn chỉnh các nút Bootstrap một cách độc đáo bằng cách sử dụng các lớp tiện ích Bootstrap trên cha của nút.

Căn nút sang trái

Sử dụng lớp tiện ích text-start (Bootstrap 5) hoặc text-left (Bootstrap 4) để căn chỉnh nút Bootstrap sang trái .

  & lt;! - Bootstrap 5 - & gt;
& lt; div class = "text-start" & gt;
& lt; a href = "#" class = "btn btn-primary" & gt; Căn trái & lt; / a & gt;
& lt; / div & gt;

& lt;! - Bootstrap 4 - & gt;
& lt; div class = "text-left" & gt;
& lt; a href = "#" class = "btn btn-primary" & gt; Căn trái & lt; / a & gt;
& lt; / div & gt;  

Nút khởi động trung tâm

Sử dụng lớp tiện ích text-center để căn giữa nút Bootstrap .

  & lt; div class = "text-center" & gt;
    & lt; a href = "#" class = "btn btn-primary" & gt; Căn giữa & lt; / a & gt;
& lt; / div & gt;  

Căn nút sang bên phải

Sử dụng text-end (Bootstrap 5) hoặc lớp tiện ích text-right (Bootstrap 4) để căn chỉnh nút Bootstrap sang phải .

  & lt;! - Bootstrap 5 - & gt;
& lt; div class = "text-end" & gt;
    & lt; a href = "#" class = "btn btn-primary" & gt; Căn phải & lt; / a & gt;
& lt; / div & gt;

& lt;! - Bootstrap 4 - & gt;
& lt; div class = "text-right" & gt;
    & lt; a href = "#" class = "btn btn-primary" & gt; Căn phải & lt; / a & gt;
& lt; / div & gt;  

Xem trực tiếp

Xem Pen Bootstrap Buttons: Align - Left, Center, Right của Ondrej ( @ondrejsvestka ) trên CodePen .

Khoảng cách giữa các nút

Cách dễ nhất để thêm khoảng cách vào các nút Bootstrap là thêm một số lề phải.

Điều này có thể được thực hiện bằng cách sử dụng các lớp .me- * trong Bootstrap 5 hoặc các lớp .mr- * trong Bootstrap 4.

Thông thường, chỉ cần đặt lề ngang là 1 hoặc 2 bước là đủ.

Dưới đây là ví dụ về hai nút Bootstrap cạnh nhau với một khoảng trống:

  & lt; a href = "#" class = "btn btn-primary me-2" & gt; Thêm một số lề phải ở đây. & lt; / a & gt;
& lt; a href = "#" class = "btn btn-primary" & gt; Không cần ký quỹ & lt; / a & gt;
 

Nhóm nút Bootstrap và Thanh công cụ

Nhóm nút

Để tạo nhóm nút đẹp mắt, hãy bọc chúng thành phần tử mẹ .btn-group .

Ngoài ra, bạn có thể sử dụng các plugin Bootstrap JavaScript để biến nhóm nút thành nút Radio.

  & lt; div class = "btn-group" role = "group" aria-label = "Ví dụ về nhóm nút" & gt;
  & lt; button type = "button" class = "btn btn-primary" & gt; Left & lt; / button & gt;
  & lt; button type = "button" class = "btn btn-primary" & gt; Middle & lt; / button & gt;
  & lt; button type = "button" class = "btn btn-primary" & gt; Phải & lt; / button & gt;
& lt; / div & gt;  

Thanh công cụ Nút

Để tạo thanh công cụ , hãy gói nhiều nhóm nút hơn vào một .btn-toolbar .

Không có khoảng cách nào được thêm tự động giữa các nhóm nút. Để thêm một số khoảng cách vào thanh công cụ của bạn , hãy sử dụng Tiện ích khoảng cách Bootstrap .

 & lt; div class = "btn-toolbar" role = "toolbar" aria-label = "Thanh công cụ với các nhóm nút" & gt;
  & lt; div class = "btn-group mr-2" role = "group" aria-label = "Ví dụ về nhóm nút" & gt;
    & lt; button type = "button" class = "btn btn-outline-Secondary" & gt; B & lt; / button & gt;
    & lt; button type = "button" class = "btn btn-outline-Secondary" & gt; I & lt; / button & gt;
    & lt; button type = "button" class = "btn btn-outline-Secondary" & gt; U & lt; / button & gt;
  & lt; / div & gt;

  & lt; div class = "btn-group" role = "group" aria-label = "Ví dụ về nhóm nút" & gt;
    & lt; button type = "button" class = "btn btn-outline-Secondary" & gt; L & lt; / button & gt;
    & lt; button type = "button" class = "btn btn-outline-Secondary" & gt; R & lt; / button & gt;
    & lt; button type = "button" class = "btn btn-outline-Secondary" & gt; T & lt; / button & gt;
  & lt; / div & gt;
& lt; / div & gt;  

Xem trực tiếp

Xem các nút Pen Bootstrap: nhóm nút và thanh công cụ của Ondrej ( @ondrejsvestka ) trên CodePen .

Nút radio Bootstrap

Kiểu nút của Bootstrap có thể được áp dụng cho các phần tử khác, chẳng hạn như & lt; label & gt; s, để cung cấp hộp kiểm hoặc nút kiểu radio.

Thêm data-toggle = "button" vào .btn-group chứa các nút được sửa đổi này để kích hoạt hành vi chuyển đổi của chúng qua JavaScript và thêm .btn- chuyển đổi nhóm để tạo kiểu phù hợp cho các & lt; input & gt; trong các nút của bạn.

Lưu ý rằng các nút được chọn trước yêu cầu bạn thêm lớp .active theo cách thủ công vào nhãn & lt; & gt; của đầu vào và cả đã chọn thuộc tính của chính input .

  & lt; div class = "btn-group btn-group-toggle" data-toggle = "các nút" & gt;
  & lt; label class = "btn btn-primary active" & gt;
    & lt; input type = "radio" name = "options" id = "option1" autocomplete = "off" đã chọn & gt; Tích cực
  & lt; / label & gt;
  & lt; label class = "btn btn-primary" & gt;
    & lt; input type = "radio" name = "options" id = "option2" autocomplete = "off" & gt; Đài
  & lt; / label & gt;
  & lt; label class = "btn btn-primary" & gt;
    & lt; input type = "radio" name = "options" id = "option3" autocomplete = "off" & gt; Đài
  & lt; / label & gt;
& lt; / div & gt;  

Xem trực tiếp

Xem các nút Pen Bootstrap: Radio button của Ondrej ( @ondrejsvestka ) trên CodePen .

Đặc biệt & amp; các nút tùy chỉnh

Nút tải lên tệp tùy chỉnh

Bootstrap 5 chứa nút tải tệp lên được tạo kiểu độc đáo, nhưng bạn cũng có thể tạo một nút hoàn toàn tùy chỉnh để khởi chạy trình duyệt tệp để chọn tệp tải lên khá dễ dàng.

Xem thêm về chủ đề này, bao gồm các ví dụ, trong đoạn mã tải lên tệp Bootstrap của tôi.

Các nút vòng tròn Bootstrap

Với một chút kiểu CSS tùy chỉnh, bạn cũng có thể tạo nút vòng tròn Bootstrap 5 tùy chỉnh. Xem thêm trong đoạn mã của tôi .


Xem thêm những thông tin liên quan đến chủ đề btn btn màu chính

What to Do If the Power Button on the Maker is Blue

  • Tác giả: Crafting Unedited
  • Ngày đăng: 2020-08-13
  • Đánh giá: 4 ⭐ ( 6102 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: What to do if the power button on the Maker is blue. Cricut machines are amazing, they do so many things but what happens when they don't do all the things? Sometimes Cricut machines shed a different color light for the power button such as red or blue (those are the only two other than white), what does it mean, what is your best friend trying to tell you? It is like Lassie trying to tell you theres a little boy in the well (just kidding, kind of). Most of the time if you look at Design Space it will tell you exactly what is wrong, but when the power goes weird it doesn't, that is why I am here, for you! Watch and learn what the power button colors mean.

    Got questions or need help with something specific?

    Drop a line here in the Crafting Unedited Discord!

    https://discord.gg/AaFEuHVc

    Be sure to check out my website as well for some great tutorials, jewelry making fun, and more! Remember to subscribe for more inexpensive and easy beginner projects!

    https://craft-ily.com
    https://www.facebook.com/craftilydesigns

    Also, if you have a Cricut...
    Cricut has a pretty sweet deal on machines and materials right now, you should totally check it out (if you do so using this link I will earn a little cash from your purchase at no extra cost to you!).

    https://www.shareasale.com/u.cfm?d=451226&m=51766&u=2448759

Cách để Đổi màu button trong HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 5 ⭐ ( 4895 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bài viết này sẽ hướng dẫn bạn cách đổi màu button (nút) trong HTML. Bạn có thể thay đổi màu nút bằng cách sử dụng plain HTML (HTML đơn thuần) hoặc CSS (các tập tin định kiểu theo tầng) trong HTML5. Gõ vào phần thân HTML. Đây là khởi đầu...

Cách thay đổi màu btn trong Bootstrap

  • Tác giả: vi.dpbhouse.com
  • Đánh giá: 4 ⭐ ( 1605 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có cách nào để thay đổi tất cả các thuộc tính .btn trong Bootstrap không? Tôi đã thử những cái bên dưới, nhưng đôi khi nó vẫn hiển thị màu xanh lam mặc định (giả sử sau khi nhấp và xóa chuột, v.v.). Làm sao tôi có thể ch ...

[Góc Tư Vấn] Cách Lựa Chọn Đá Ốp Cầu Thang Từ A - Z

  • Tác giả: www.noithattrongoi.com.vn
  • Đánh giá: 3 ⭐ ( 4542 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đá ốp cầu thang cần được chú trọng và quan tâm để làm ra một công trình cầu thang hoàn mỹ. Nhất là trong việc chọn màu sắc, chất liệu... | Nội thất BTN - Chuyên thiết kế và thi công nội thất trọn gói chung cư, biệt thự, nhà phố. Đại lý cung cấp và thi công đá nhân tạo Vicostone cho các công trình nhà dân, dự án tại Hà Nội

Cách thay đổi màu btn trong Bootstrap

  • Tác giả: vi.chefbradleyogden.com
  • Đánh giá: 4 ⭐ ( 4503 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có cách nào để thay đổi tất cả các thuộc tính .btn trong Bootstrap không? Tôi đã thử những cái bên dưới, nhưng đôi khi nó vẫn hiển thị màu xanh lam mặc định (giả sử sau khi nhấp và xóa chuột, v.v.). Làm sao tôi có thể ch ...

Bê tông nhựa là gì? Các loại bê tông C12.5 C19 C9.5 | Đặc Điểm

  • Tác giả: gachbetongnhe.com.vn
  • Đánh giá: 5 ⭐ ( 1878 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bê tông nhựa là gì? Phân loại theo cấp phối, kích cỡ danh định của hạt nhựa. Bê tông nhựa chặt, rỗng cấp C19 C12.5 C9.5 là gì?

Các thành phần trong bootstrap 4

  • Tác giả: longnv.name.vn
  • Đánh giá: 3 ⭐ ( 4589 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thành phần trong bootstrap 4 thì rất nhiều, bạn dùng chúng để tạo giao diện cho trang. Sau đây là các components thường dùng trong bootstrap 4

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình