NTM Solutions

Facebook Youtube Google+

Chủ Nhật, 19 tháng 3, 2017

Tự học Bootstrap – Cơ bản – bài 10 – Định dạng nhóm nút bấm

Nhóm các nút bấm

Bootstrap cho phép bạn nhóm 01 loạt các nút lại với nhau (trên cùng 01 dòng) trong 01 nhóm nút:



Dùng 01 thẻ <div> với lớp .btn-group để tạo 01 nhóm nút bấm.

Ví dụ:

<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>
Mẹo: Thay vì thiết lập cỡ nút trên từng nút bấm trong nhóm, bạn có thể sử dụng lớp .btn-group-lg|sm|xs để định dạng kích cỡ cho tất cả nút trong nhóm.

Ví dụ:

<div class="btn-group btn-group-lg">
  
<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 theo chiều đứng

Bootstrap cũng cung cấp nhóm các nút bấm theo chiều đứng:



Sử dụng lớp .btn-group-vertical để tạo 01 nhóm nút theo chiều đứng.
<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 bấm đã căn chỉnh

Để tạo nhóm nút tràn ra toàn bề rộng màn hình dùng lớp .btn-group-justified.

Ví dụ với thẻ <a>:
<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>
Ghi chú: Đối với thẻ <button>, bạn phải bao mỗi nút lại trong 01 nhóm bằng lớp .btn-group:
<div class="btn-group btn-group-justified">
  
<div class="btn-group">
    
<button type="button" class="btn btn-primary">Apple</button>
  
</div>
  
<div class="btn-group">
    
<button type="button" class="btn btn-primary">Samsung</button>
  
</div>
  
<div class="btn-group">
    
<button type="button" class="btn btn-primary">Sony</button>
  
</div>
</div>

Nhóm nút bấm menu & Dạng menu dropdown


Nhóm các nút bấm để tạo menu dropdown:
<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>

Split Button Dropdowns




Ví dụ:


<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <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>