Tất cả bài viết | Bootstrap
Tìm hiểu cách tạo menu bằng Bootstrap
Trong bài học thiết kế web này các Bạn sẽ được Tìm hiểu cách tạo menu bằng Bootstrap
Bước 1: Tạo cấu trúc HTML
Bước 2: Định dạng CSS
.toplogo {
max-height: 70px;
max-width: 210px;
margin: 12px 11px;
}
.callnow {
font-weight: 200;
color: #333;
vertical-align: middle;
line-height: 35px;
font-size: 19px;
padding-right: 8px;
}
.topper {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.navbar.navbar-inverse {
background-image: linear-gradient(#9f9f9f, #535353 3%, #1f1f1f 17%, #212121 49%, #191919 89%, #000000 100%);
border-top: 1px inset rgba(255, 255, 255, 0.1);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
border-radius: 10px;
margin-top: 10px;
}
.navbar .navbar-nav > li > a {
color: #d1d1d1;
font-weight: 700;
text-rendering: optimizeLegibility;
text-shadow: 0px -1px black, 0px 1px rgba(255, 255, 255, 0.25);
line-height: 18px;
}
.navbar .navbar-nav > li.active {
color: #f8f8f8;
background-color: #080808;
box-shadow: inset 0px -28px 23px -21px rgba(255, 255, 255, 0.15);
border-left: 1px solid #2A2A2A;
border-right: 1px solid #272727;
}
.btn.btn-gradient-blue {
background-color: #0c5497 !important;
background-image: -webkit-linear-gradient(top, #127bde 0%, #072d50 100%);
background-image: -o-linear-gradient(top, #127bde 0%, #072d50 100%);
background-image: linear-gradient(to bottom, #127bde 0%, #072d50 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff127bde', endColorstr='#ff072d50', GradientType=0);
border-color: #072d50 #072d50 #0c5497;
color: #fff !important;
text-shadow: 0 -1px 0 rgba(31, 31, 31, 0.29);
-webkit-font-smoothing: antialiased;
}
Bước 3: Gọi thư viện Bootstrap và Font awesome
Bước 4: Gọi thư viện JQUERY
Bootstrap Xem (6403) Học thiết kế web giá rẻ
