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

Hướng dẫn cách tạo Bootstrap Collapsible Sidebar Left

Trong bài học lập trình web này các Bạn sẽ được Hướng dẫn cách tạo Bootstrap Collapsible Sidebar Left cho website

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

 
 Tạo Bootstrap Collapsible Sidebar Left 
  
   
    
    #sidebar .col-md-3
     
    Nội dung cột bên trái 
    
    
    #content .col-md-9 .col-md-12
     
     
      
     
    Nội dung chính của trang web

Bước 2: Tạo cấu trúc CSS

html,		body {			height: 100%;		}	
			#content,		#sidebar {			min-height: 670px;		}	
	#row-main {			overflow-x: hidden;		}	

	#content {	
		background-color: lightyellow;	
					-webkit-transition: width 0.3s ease;	
		-moz-transition: width 0.3s ease;	
		-o-transition: width 0.3s ease;	
		transition: width 0.3s ease;	
	}	

	#content .btn-group {			margin-bottom: 10px;		}	
	.col-md-9 .width-12,		.col-md-12 .width-9 {			display: none;		}	
	#sidebar {	
		background-color: lightgrey;	
					-webkit-transition: margin 0.3s ease;	
		-moz-transition: margin 0.3s ease;	
		-o-transition: margin 0.3s ease;	
		transition: margin 0.3s ease;	
	}	

	.collapsed {			display: none;		}	
	@media (min-width: 992px) {	
		.collapsed {	
			display: block;	
			margin-left: -25%;	
		}	
	}

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

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

Bước 5: Tạo hiệu ứng Collapsed bằng JQUERY

$(document).ready(function () {	
		$(".toggle-sidebar").click(function () {	
			$("#sidebar").toggleClass("collapsed");	
			$("#content").toggleClass("col-md-12 col-md-9");	
							return false;			});	
	});

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