Bạn đang xem : 3 màu nút của bootstrap

Các nút

Bootstrap

Kiểu nút

Bootstrap cung cấp các kiểu nút khác nhau:

Để đạt được các kiểu nút ở trên, Bootstrap có các lớp sau:

  • . btn
  • . btn-default
  • . btn-primary
  • . btn-success
  • . btn-info
  • . btn-warning
  • . btn-risk
  • . btn-link

Ví dụ sau hiển thị mã cho các kiểu nút khác nhau:

Các lớp nút có thể được sử dụng trên & lt; a & gt; , & lt; button & gt; , hoặc
Phần tử & lt; input & gt; :

Tại sao chúng tôi đặt dấu # trong thuộc tính href của liên kết?

Kể từ khi
chúng tôi không có bất kỳ trang nào để liên kết đến và chúng tôi không muốn nhận được “404”
thông báo, chúng tôi đặt # làm liên kết trong các ví dụ của chúng tôi. Nó phải là một URL thực đến một
trang cụ thể.

Kích thước nút

Bootstrap cung cấp bốn kích thước nút:

Các lớp xác định các kích thước khác nhau là:

  • . btn-lg
  • . btn-sm
  • . btn-xs

Ví dụ sau đây cho thấy mã cho các kích thước nút khác nhau:

Các nút cấp độ khối

Một nút cấp khối kéo dài toàn bộ chiều rộng của phần tử mẹ.

Thêm lớp . btn-block để tạo nút cấp khối:

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

Một nút có thể được đặt thành trạng thái hoạt động (xuất hiện khi nhấn) hoặc trạng thái tắt (không thể nhấn):

Lớp . active làm cho một nút xuất hiện được nhấn và lớp
. bị vô hiệu hóa
làm cho một nút không thể nhấp được:

Tự kiểm tra bằng các bài tập

Bài tập:

Thêm lớp Bootstrap để tạo kiểu nút đúng cách là nút “nguy hiểm”.

& lt; button class = "" & gt; Nguy hiểm & lt; / button & gt;

Bắt đầu bài tập

Toàn bộ Tham chiếu Nút Bootstrap

Để có tài liệu tham khảo đầy đủ về tất cả các lớp nút, hãy chuyển đến phần hoàn chỉnh của chúng tôi
Tham chiếu nút Bootstrap .


Xem thêm những thông tin liên quan đến chủ đề bootstrap 3 màu nút

How to Customize the Colors of Bootstrap Navigation Bar

  • Tác giả: The Wheelchair Guy
  • Ngày đăng: 2021-02-28
  • Đánh giá: 4 ⭐ ( 9910 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this tutorial, I will show you how to customize the background color of the navigation bar in bootstrap and how to change the color of the links in bootstrap. Also, I will explain how to add hover color.

    Buy me coffee https://www.buymeacoffee.com/WheelchairGuy

    Follow me on instagram @thebahjat
    bootstrap tutorial navigation

Tạo button trong bootstrap 3

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 9715 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách Tạo button trong bootstrap 3, sử dụng các class có sẵn trong bootstrap 3 để tạo các button đẹp lộng lẫy, các button disabled trong bootstrap 3

Cấu trúc toàn diện CSS cho lập trình

  • Tác giả: getbootstrap.com.vn
  • Đánh giá: 4 ⭐ ( 2427 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Những cách thiết lập phổ biến cho nền tảng bootstrap CSS tùy biến giúp phát triển bộ nhận diện website thân thiện

Hướng dẫn và ví dụ Bootstrap Button

  • Tác giả: openplanning.net
  • Đánh giá: 5 ⭐ ( 7033 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bài 3: Alert và Button trong Bootstrap

  • Tác giả: goclamweb.com
  • Đánh giá: 3 ⭐ ( 3050 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này, mình sẽ giới thiệu cho các bạn những thành phần chính là Alert và Button trong Bootstrap. Ngoài ra, mình cũng giới thiệu sơ lược về Breadcrumb và Badges.

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

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 8822 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Cách dễ nhất để xem bạn cần ghi đè thuộc tính nào là xem mã nguồn…

11 Bootstrap Button Dành Cho Website

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 3 ⭐ ( 1196 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xin chào các bạn quay lại blog của mình. Hôm nay chúng ta sẽ đi tìm hiểu các ví dụ về component button đẹp trong Bootstrap 4 . Nào hãy cũng mình tìm hiểu nhé!

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

Xem Thêm  Kích thước phông chữ, họ và kiểu - kích thước và kiểu phông chữ

By ads_php