Sử dụng Nav trong Bootstrap

Giới thiệu nội dung bài viết

Chào các bạn,hôm nay anh sẽ hướng dẫn mọi người về nav là gì? Các sử dụng nó trong lập trình website.

1. Nav Menu nằm ngang trong Bootstrap 4

Chúng ta muốn làm menu cho website thì có thể sử dụng class .nav trong các thẻ ul. Và theo sau đó là các class .nav-item trong các thẻ li. Nếu trong menu có thêm link tới một website khác thì dùng class .nav-link

nav1


1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <ul class="nav">
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul> 
  • Để canh giữa cho các Nav thì chúng ta sử dụng class .justify-content-center lúc này thanh menu sẽ nằm giữa màn hình. Nếu muốn thanh menu mà nằm bên trái thì dùng class .justify-content-end


1
2
3
4
5
<!-- Centered nav -->
<ul class="nav justify-content-center">

<!-- Right-aligned nav -->
<ul class="nav justify-content-end">

2. Nav Menu nằm dọc trong Bootstrap 4

Chúng ta có thể làm các thanh menu nằm dọc bằng cách thêm class là .flex-column .

nav2


1
 <ul class="nav flex-column">

3. Tab trong Bootstrap 4

Chúng ta sử dụng .nav-tab và .active để tạo các tab.

nav3


1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul> 

4. Tab Pills trong Bootstrap 4

Chúng ta sử dụng .nav-pills để có thể làm toggle các

nav4


1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul> 

5. Dynamic tab trong Bootstrap 4

Chúng ta sử dụng data-toggle=”table”, .tab-pane và .tab-content để làm Dynamic Tab như sau.

nav5


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  <!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane container active" id="home">...</div>
  <div class="tab-pane container fade" id="menu1">...</div>
  <div class="tab-pane container fade" id="menu2">...</div>
</div>

Mọi người hãy subcribe kênh youtube dưới đây nhé. Videos về các kỹ năng mềm và lập trình sẽ được cập nhật hằng tuần


Comments