Kể từ khi ra mắt năm 2013 cho đến 2017 Bootstrap 3 đã làm mưa làm gió trong cộng đồng làm web, thế nhưng phát triển và tối ưu là xu hướng tất yếu của công nghệ vì vậy tháng 8 năm 2017 phiên bản Bootstrap 4 đã được phát hành với nhiều cải tiến. Cho đến hiện tại Bootstrap 4 và Bootstrap 3 vẫn là hai phiên bản boostrap vẫn được nhiều người dùng nhất trên thế giới. Nếu Bootstrap 3 đại diện cho độ ổn định và thích hợp nhiều trình duyệt cũ thì Bootstrap 4 đại diện cho công nghệ mới nhiều ưu điểm hơn nhanh hơn. Trong loạt bài viết này chúng ta sẽ cùng nhau học cách sử dụng Bootstrap 4 các bạn nhé.
Bootstrap 3 so với Bootstrap 4
Bootstrap 4 là phiên bản ra đời sau Bootstrap 3 với các thành phần mới, stylesheet nhanh hơn và khả năng phản responsive tốt hơn.
Bootstrap 4 hỗ trợ các bản phát hành ổn định, mới nhất của tất cả các trình duyệt và nền tảng chính. Tuy nhiên, Internet Explorer 9 trở xuống không được hỗ trợ.
Nếu bạn yêu cầu hỗ trợ IE8-9, hãy sử dụng Bootstrap 3. Đây là phiên bản ổn định nhất của Bootstrap và nó vẫn được nhóm hỗ trợ để sửa các lỗi quan trọng và thay đổi tài liệu. Tuy nhiên, các tính năng mới sẽ KHÔNG được thêm vào nó.
Tham khảo loạt bài học Bootstrap 3
Mẫu cơ bản Bootstrap 4
Dưới đây là một mẫu responsive khởi đầu với Bootstrap 4. Bạn có thể tự do sửa đổi, lưu, chia sẻ và sử dụng nó trong các dự án của mình:
<!DOCTYPE html> <html lang=”en”> <head> <title>Ví dụ Bootstrap 4</title> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script> <style> .fakeimg { height: 200px; background: #aaa; } </style> </head> <body> <div class=”jumbotron text-center” style=”margin-bottom:0″> <h1>Trang Bootstrap 4 đầu tiên của tôi</h1> <p>Thay đổi kích thước trang để xem hiệu ứng!</p> </div> <nav class=”navbar navbar-expand-sm bg-dark navbar-dark”> <a class=”navbar-brand” href=”#”>Navbar</a> <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#collapsibleNavbar”> <span class=”navbar-toggler-icon”></span> </button> <div class=”collapse navbar-collapse” id=”collapsibleNavbar”> <ul class=”navbar-nav”> <li class=”nav-item”> <a class=”nav-link” href=”#”>Link</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>Link</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>Link</a> </li> </ul> </div> </nav> <div class=”container” style=”margin-top:30px”> <div class=”row”> <div class=”col-sm-4″> <h2>About Me</h2> <h5>Photo of me:</h5> <div class=”fakeimg”>Fake Image</div> <p>Some text about me in culpa qui officia deserunt mollit anim..</p> <h3>Some Links</h3> <p>Lorem ipsum dolor sit ame.</p> <ul class=”nav nav-pills flex-column”> <li class=”nav-item”> <a class=”nav-link active” href=”#”>Active</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>Link</a> </li> <li class=”nav-item”> <a class=”nav-link” href=”#”>Link</a> </li> <li class=”nav-item”> <a class=”nav-link disabled” href=”#”>Disabled</a> </li> </ul> <hr class=”d-sm-none”> </div> <div class=”col-sm-8″> <h2>TITLE HEADING</h2> <h5>Title description, Dec 7, 2017</h5> <div class=”fakeimg”>Fake Image</div> <p>Some text..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> <br> <h2>TITLE HEADING</h2> <h5>Title description, Sep 2, 2017</h5> <div class=”fakeimg”>Fake Image</div> <p>Some text..</p> <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p> </div> </div> </div> <div class=”jumbotron text-center” style=”margin-bottom:0″> <p>Footer</p> </div> </body> </html>
Danh sách bài học Bootstrap 4 được trình bày ở dưới đây
BOOTSTRAP 4 CƠ BẢN
- Tải và Cài đặt Bootstrap 4
- Container trong Bootstrap 4
- Hệ thống lưới Bootstrap 4
- Văn bản/ kiểu chữ (Text/Typography) trong Bootstrap 4
- Màu sắc (color) trong Bootstrap 4
- Bảng biểu (Table) trong Bootstrap 4
- Hình ảnh (Image) trong Bootstrap 4
- Jumbotron trong Bootstrap 4
- Cảnh báo Alerts trong Bootstrap 4
- Nút nhấn (button) trong Bootstrap 4
- Nhóm nút nhấn (Button Groups) trong Bootstrap 4
- Sử dụng Badges (Huy hiệu) trong Bootstrap 4
- Thanh tiến trình (Progress Bars) trong Bootstrap 4
- Spinner (Con quay) trong Bootstrap 4
- Pagination (Phân trang) trong Bootstrap 4
- Card trong Bootstrap 4
- Cách dùng Collapse để ẩn hiện nội dung trong Bootstrap 4
- Nav trong Bootstrap 4
- Navigation bar (Thanh điều hướng) trong Bootstrap 4
- Form trong Bootstrap 4
- Form Inputs trong Bootstrap 4
- Input Groups trong Bootstrap 4
- Carousel trong Bootstrap 4
- Modal trong Bootstrap 4
- Tooltip trong Bootstrap 4
- Tạo pop up với Popover trong Bootstrap 4
- Toast trong Bootstrap 4
- Scrollspy Bootstrap 4
- Tiện ích (Utilities) trong Bootstrap 4
- Flex trong Bootstrap 4
- Icon trong Bootstrap 4
- Đối tượng Media trong Bootstrap 4
- Lọc (Filter) tùy chọn trong Bootstrap 4
