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

Cách tạo Bootstrap Breadcrumb

Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn Cách tạo Bootstrap Breadcrumb

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

 
 	
   
   Cách tạo Bootstrap Breadcrumb 
    
    
     
    Danh mục 1
     
    Danh mục 2
     
    Sản phẩm 1 
    
   
   
    
    
     
    Danh mục 1
     
    Danh mục 2
     
    Sản phẩm 1 
    
   
   
    
    
     
    Danh mục 1
     
    Danh mục 2
     
    Sản phẩm 1 
    
   
   
    
    
     
    Danh mục 1
     
    Danh mục 2
     
    Sản phẩm 1

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

hr {  
height: 4px;  
margin-left: 15px;  
margin-bottom:-3px;
}

.hr-warning{  
background-image: -webkit-linear-gradient(left, rgba(210,105,30,.8), rgba(210,105,30,.6), rgba(0,0,0,0));
}

.hr-success{  
background-image: -webkit-linear-gradient(left, rgba(15,157,88,.8), rgba(15, 157, 88,.6), rgba(0,0,0,0));
}

.hr-primary{  background-image: -webkit-linear-gradient(left, rgba(66,133,244,.8), rgba(66, 133, 244,.6), rgba(0,0,0,0));
}

.hr-danger{  
background-image: -webkit-linear-gradient(left, rgba(244,67,54,.8), rgba(244,67,54,.6), rgba(0,0,0,0));
}


.breadcrumb {  
background: rgba(245, 245, 245, 0);   
border: 0px solid rgba(245, 245, 245, 1);   
border-radius: 25px;   
display: block;
}


.btn-bread{    
margin-top:10px;    
font-size: 12px;        
border-radius: 3px;
}

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