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; }); });
Bootstrap Xem (2611) Học thiết kế web giá rẻ