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

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

Trong bài tự 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 Right cho website

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

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

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

html,		body {			height: 100%;		}	

			#content,		#sidebar {			min-height: 500px;		}	

	#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-right: -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