Tất cả bài viết | Bootstrap

Hướng dẫn cách tạo Tab bằng Bootstrap

Trong bài học thiết kế website online bằng Bootstrap này các Bạn sẽ được hướng dẫn cách tạo Tab bằng Bootstrap

Bước 1: Tạo cấu trúc HTML cho các Tab

 
  
  Học thiết kế website online bằng Bootstrap 
   
    
     
      
      Section 1
       
      Section 2
       
      Section 3
       
      
      
       
       1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis. 
       
       
       2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis. 
       
       
       3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a blandit enim. Aliquam gravida orci id fringilla feugiat. Integer convallis ut ex quis semper. Suspendisse ut lobortis urna. Proin viverra, eros iaculis iaculis posuere, risus justo tincidunt ex, eget tempor lectus erat vel massa. Cum sociis natoque penatibus et magnis.

Bước 2: Định dạng CSS

.tab .nav-tabs {	
border-bottom:0 none;	
background: #eaeaea;	
border-radius: 0 20px 0 20px;
}
.tab .nav-tabs li a {	
background: transparent;	
border-radius: 0;	
font-size: 16px;	
border: none;	
color: #333;	
padding: 12px 22px;
}
.tab .nav-tabs li a i {	
margin-right:10px;	
color:#F90;
}
.tab .nav-tabs li:first-child a {	
border-bottom-left-radius:20px;
}
.tab .nav-tabs li.active a, .tab .nav-tabs li.active a i {	
border: 0 none;	
color:#fff;	
background-color: #F90;
}
.tab .nav-tabs li.active a:after {	
content: "";	
position: absolute;	
left: 45%;	
bottom: -14px;	
border-top-width: 7px;	
border-right-width: 7px;	
border-bottom-width: 7px;	
border-left-width: 7px;	
border-top-style: solid;	
border-right-style: solid;	
border-bottom-style: solid;	
border-left-style: solid;	
border-top-color: #F90;
}

.tab .tab-content {	
padding:12px;	
color:#5a5c5d;	
font-size: 14px;	
line-height:24px;	
margin-top: 25px;	
border-bottom-width: 3px;	
border-bottom-style: solid;	
border-bottom-color: #F90;
}

@media only screen and (max-width: 480px) { 
.tab .nav-tabs,  .tab .nav-tabs li { 
width:100%; 
background:transparent;
} 
.tab .nav-tabs li.active a { 
border-radius:10px 10px 0 0;
}
.tab .nav-tabs li:first-child a { 
border-bottom-left-radius:0;
} 
.tab .nav-tabs li a { 
margin-bottom:10px; 
border:1px solid lightgray;
} 
.tab .nav-tabs li.active a:after { 
border:none;
}
}

Bước 3: Gọi thư viện Bootstrap và Font awesome

Bước 4: Gọi thư viện JQUERY

Xem demo Tải Code Đăng ký tham gia làm hội viên của kênh để được xem các bài học mới nhất