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