Tất cả bài viết | Bootstrap
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
Bước 1: Tạo cấu trúc HTML
Thiết kế menu dọc với trạng thái Active
Bước 2: Tạo cấu trúc CSS
.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;
}
Bước 3: Gọi thư viện Bootstrap và Font awesome
Bước 4: Gọi thư viện JQUERY
Bootstrap Xem (10128) Học thiết kế web giá rẻ
