Tất cả bài viết | Bootstrap
Cách thiết kế Bootstrap Breadcrumb
Trong bài học thiết kế web này các Bạn sẽ được học cách thiết kế Bootstrap Breadcrumb
Bước 1: Tạo cấu trúc HTML
Cách thiết kế Bootstrap Breadcrumb
Bước 2: Định dạng CSS
.breadcrumb {
padding: 0px;
background: #D4D4D4;
list-style: none;
overflow: hidden;
margin-top: 20px;
}
.breadcrumb>li+li:before {
padding: 0;
}
.breadcrumb li {
float: left;
}
.breadcrumb li.active a {
background: brown;
background: #ffc107;
}
.breadcrumb li.completed a {
background: brown;
background: hsla(153, 57%, 51%, 1);
}
.breadcrumb li.active a:after {
border-left: 30px solid #ffc107;
}
.breadcrumb li.completed a:after {
border-left: 30px solid hsla(153, 57%, 51%, 1);
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 45px;
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(0, 0%, 83%, 1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 15px;
}
.breadcrumb li a:hover {
background: #ffc107;
}
.breadcrumb li a:hover:after {
border-left-color: #ffc107 !important;
}
Bước 3: Gọi thư viện Bootstrap và Font awesome
Bước 4: Gọi thư viện JQUERY
Bootstrap Xem (2169) Học thiết kế web giá rẻ
