Kết nối

[Bootstrap] Phần 10: Nhóm nút nhấn

5.454 lượt xem 
 Cập nhật lần cuối: 10/01/2017 lúc 23:57:00
Thể loại: Bootstrap, Thiết kế Web 

Trong bài này, các bạn sẽ học nhóm các nút nhấn trong Bootstrap cũng như tạo các dạng menu cơ bản dùng nút nhấn.

Nhóm nút nhấn

Bootstrap cho phép nhóm 1 các nút nhấn cùng nhau trên 1 hàng dọc hoặc 1 dòng đơn. Để làm được như vậy, chúng ta dùng phần tử div với lớp .btn-group để tạo nhóm nút nhấn.

button_group

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Nhóm nút nhấn theo hàng dọc
Chúng ta có thể dùng lớp .btn-group-vertical để liệt kê các nút theo hàng dọc.

button_vertical

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Nhóm nút canh đều
Để tạo 1 nhóm nút có độ rộng đều nhau, bạn dùng lớp .btn-group-justified

justified_button

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>

Tạo nút con bên trong nút và menu dropdown
Tiếp đến, chúng ta xét đến trường hợp tạo 1 nhóm nút bên trong 1 nút, và khi nhấn nút lên nút cha này thì sẽ xổ ra 1 danh sách các nút con.

nesting_button

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

Trong ví dụ trên, chúng ta thấy nút có tên là Sony có thêm thuộc tính class=”dropdown-toggle”data-toggle=”dropdown” để khai báo nguồn dữ liệu danh sách các nút con là từ dropdown và khi nhấn nút sẽ hiển thị nhóm nút con. Đoạn span class=”caret” dùng để tạo 1 nút nhỏ hình tam giác hướng xuống để tạo hiệu ứng đồ họa nút Sony chứa các nút con.

Liên quan:  [Bootstrap] Phần 23: Carousel

Tổng kết: qua bài này các bạn đã học được cách định nghĩa nhóm các nút và cách tạo nhóm nút con bằng menu xổ xuống.

Trích dẫn bài viết
  • APA:
    Dammio. (2016). [Bootstrap] Phần 10: Nhóm nút nhấn. https://www.dammio.com/2016/10/12/bootstrap-phan-10-nhom-nut-nhan.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[Bootstrap] Phần 10: Nhóm nút nhấn},
    year = {2016},
    url = {https://www.dammio.com/2016/10/12/bootstrap-phan-10-nhom-nut-nhan},
    urldate = {2024-03-15}
    }
Theo dõi
Thông báo của
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x