NTM Solutions

Chủ Nhật, 2 tháng 4, 2017

Tự học Bootstrap - Cơ bản - bài 20 - Menu TAB và Menu Pill

Menus

Hầu hết các trang web đều có 01 loại menu nào đó.
Trong HTML, 01 menu thường được xác định bằng thẻ <ul> như thế này:
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>
Nếu bạn muốn tạo 01 menu ngang thêm lớp .list-inline vào thẻ <ul>:
<ul class="list-inline">


Hoặc bạn có thể hiển thị menu trên bằng Bootstraps' Tabs và Pills (xem bên dưới).



Tabs



Menu Tabs được tạo bởi <ul class="nav nav-tabs">
Mẹo: bạn có thể đánh dấu trang hiện hành bằng thẻ <li class="active">.
Ví dụ sau tạo menu tab điều hướng:
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>


Tabs và Menu Dropdown


Tabs cũng có thể chứa menu dropdown.
Ví dụ sau thêm 01 menu dropdown vào "Menu 1":
<ul class="nav nav-tabs">
  
<li class="active"><a href="#">Home</a></li>
  
<li class="dropdown">
    
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
    
<span class="caret"></span></a>
    
<ul class="dropdown-menu">
      
<li><a href="#">Submenu 1-1</a></li>
      
<li><a href="#">Submenu 1-2</a></li>
      
<li><a href="#">Submenu 1-3</a></li>
    
</ul>
  
</li>
  
<li><a href="#">Menu 2</a></li>
  
<li><a href="#">Menu 3</a></li>
</ul>

Menu Pills

Menu Pills được tạo ra bởi thẻ <ul class="nav nav-pills">. Và cũng đánh dấu trang hiện hành bằng thẻ <li class="active">
<ul class="nav nav-pills">
  
<li class="active"><a href="#">Home</a></li>
  
<li><a href="#">Menu 1</a></li>
  
<li><a href="#">Menu 2</a></li>
  
<li><a href="#">Menu 3</a></li>
</ul>

Menu Pills dọc


Menu Pills cũng có thể hiển thị theo chiều dọc. Chỉ thêm lớp .nav-stacked
<ul class="nav nav-pills nav-stacked">
  
<li class="active"><a href="#">Home</a></li>
  
<li><a href="#">Menu 1</a></li>
  
<li><a href="#">Menu 2</a></li>
  
<li><a href="#">Menu 3</a></li>
</ul>

Menu Pills dọc trên cùng 01 hàng



<div class="col-md-3">
  
<ul class="nav nav-pills nav-stacked">
    
<li class="active"><a href="#">Home</a></li>
    
<li><a href="#">Menu 1</a></li>
    
<li><a href="#">Menu 2</a></li>
    
<li><a href="#">Menu 3</a></li>
  
</ul>
</div>

Pills với menu dropdown



Pills cũng có thể là menu hold dropdown.
Ví dụ sau thêm 01 menu dropdown vào "Menu 1":
<ul class="nav nav-pills nav-stacked">
  
<li class="active"><a href="#">Home</a></li>
  
<li class="dropdown">
    
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
    
<span class="caret"></span></a>
    
<ul class="dropdown-menu">
      
<li><a href="#">Submenu 1-1</a></li>
      
<li><a href="#">Submenu 1-2</a></li>
      
<li><a href="#">Submenu 1-3</a></li>
    
</ul>
  
</li>
  
<li><a href="#">Menu 2</a></li>
  
<li><a href="#">Menu 3</a></li>
</ul>

Menu Tabs và Pills canh giữa



Để canh giữa/tùy biến các thẻ tabs và pills, dùng lớp .nav-justified
Chú ý rằng trên màn hình nhỏ hơn 768px, danh sách các mục sắp xếp theo kiểu ngăn xếp (nội dung sẽ vẫn canh giữa)

Ví dụ:

<!-- Centered Tabs -->
<ul class="nav nav-tabs nav-justified">
  
<li class="active"><a href="#">Home</a></li>
  
<li><a href="#">Menu 1</a></li>
  
<li><a href="#">Menu 2</a></li>
  
<li><a href="#">Menu 3</a></li>
</ul>
<!-- Centered Pills -->
<ul class="nav nav-pills nav-justified">
  
<li class="active"><a href="#">Home</a></li>
  
<li><a href="#">Menu 1</a></li>
  
<li><a href="#">Menu 2</a></li>
  
<li><a href="#">Menu 3</a></li>
</ul>

Toggleable / Dynamic Tabs



Để tạo menu tabs toggleable, thêm thuộc tính data-toggle="tab" vào mỗi liên kết . Sau đó thêm lớp .tab-pane với 01 ID duy nhất cho mỗi tab và bao chúng bên trong 01 thẻ <div> với lớp .tab-content.
Nếu bạn muốn các thẻ tabs nhạt dần rồi biến mất khi bấm lên chúng, ta thêm lớp .fade vào lớp .tab-pane:

Ví dụ:

<ul class="nav nav-tabs">
  
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
  
<div id="home" class="tab-pane fade in active">
    
<h3>HOME</h3>
    
<p>Some content.</p>
  
</div>
  
<div id="menu1" class="tab-pane fade">
    
<h3>Menu 1</h3>
    
<p>Some content in menu 1.</p>
  
</div>
  
<div id="menu2" class="tab-pane fade">
    
<h3>Menu 2</h3>
    
<p>Some content in menu 2.</p>
  
</div>
</div>

Toggleable / Dynamic Pills



Ta dùng code giống như menu pills; chỉ thay đổi thuộc tính data-toggle => data-toggle="pill"

Ví dụ:


<ul class="nav nav-pills">
  <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
  <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48