Hướng dẫn menu dọc bootstrap 4

Hướng dẫn thiết kế menu dọc với trạng thái Active bằng Bootstrap

Trong bài học lập trình web này các Bạn sẽ được Hướng dẫn thiết kế menu dọc với trạng thái Active bằng Bootstrap cho website

 
 
Thiết kế menu dọc với trạng thái Active
 
 
  
 
   
 DANH MỤC KHÓA HỌC
   
 
   
 Chuyên viên website lành nghề Online
   
 
   
 Thiết kế giao diện web Online
   
 
   
 Lập trình PHP cơ bản Online
   
 
   
 Lập trình HTML5, CSS3, BOOTSTRAP, JS, RWD Online
   
 
  
 

 

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {	
color: #fff;	
background-color: #428bca;	
font-weight:bold;	
font-size:16px;
}

.margintop20 {	
margin-top:20px;
}

.nav-pills>li>a {	
border-radius: 0px;
}

a {	color: #000;	
text-decoration: none;
}

a:hover {	
color: #000;	
text-decoration: none;
}

.nav-stacked>li+li {	
margin-top: 0px;	
margin-left: 0;	
border-bottom:1px solid #dadada;	
border-left:1px solid #dadada;	
border-right:1px solid #dadada;
}

.active2 {
	border-right:4px solid #428bca;
}

Nội dung bài viết

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

Trong lập trình web, các lập trình viên sẽ sử dụng các lớp Nav trong Bootstrap 4 để tạo ra các kiểu Menu nằm ngang hay nằm dọc. Bài viết hôm nay, anh sẽ hướng dẫn các bạn cách thao tác với các lớp Nav để làm các kiểu Menu trên. Đồng thời anh cũng hướng dẫn để các bạn sử dụng được Nav trong Bootstrap để tạo kiểu Tab, Tab Pills và Dynamic tab trong Bootstrap 4.

Hi vọng với những chia sẻ về cách thao tác với Nav trong Bootstrap 4 sẽ giúp các bạn áp dụng vào quá trình lập trình web để tạo ra các trang website hoàn thiện, thu hút và đáp ứng các nhu cầu của khách hàng.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
  
    Link
  
  
    Link
  
  
    Link
  
  
    Disabled
  
 

• Để 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

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 .

1

 

3. Tab trong Bootstrap 4

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

  
  
    Active
  
  
    Link
  
  
    Link
  
  
    Disabled
  
 

4. Tab Pills trong Bootstrap 4

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

  
  
    Active
  
  
    Link
  
  
    Link
  
  
    Disabled
  
 

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

  

  
    Home
  
  
    Menu 1
  
  
    Menu 2
  




  ...
  ...
  ...

6. Video demo

7. Thực hành và Source code

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây