Bootstrap 4 (viết tắt là BS4) là phiên bản mới của Bootstrap, là framework HTML, CSS và JavaScript phổ biến nhất để thiết kế web đáp ứng, ưu tiên trên nền tảng di động. Tương tự như Bootstrap 3, Bootstrap 4 hoàn toàn miễn phí tải về và tự do sử dụng.
So sánh Bootstrap 3 và Bootstrap 4
Bootstrap 4 là phiên bản mới nhất của Bootstrap tính đến thời điểm viết bài này, với các thành phần mới, css nhanh hơn và khả năng đáp ứng cao hơn. Bootstrap 4 hỗ trợ tất cả các trình duyệt và nền tảng với các phiên bản ổn định và mới nhất. Tuy nhiên, một nhược điểm duy nhất đó IE9 không hỗ trợ Bootstrap 4.Nếu bạn cần chạy giao diện web trên trình duyệt IE8 và IE9, bạn nên dùng Bootstrap 3. Đây là phiên bản ổn định, hỗ trợ các bản vá lỗi và các thay đổi tài liệu.
Lý do sử dụng Bootstrap
Sau đây là các lý do sử dụng Bootstrap:- Dễ dùng: bất cứ ai với kiến thức cơ bản về HTML và CSS đều cũng có thể sử dụng Bootstrap
- Các tính năng đáp ứng: CSS đáp ứng của Bootstrap thích hợp với điện thoại, máy tính bảng và máy tính để bàn.
- Tiếp cận ưu tiên thiết bị di động đầu tiên: Trong Bootstrap, các phong cách điện thoại di động là một phần của framework lõi.
- Tương thích trình duyệt: Bootstrap 4 tương thích với các trình duyệt hiện đại (Chrome, Firefox, InternetExplorer 10+, Edge, Safari, and Opera).
Giao diện Bootstrap 4 cơ bản
Bạn có thể tham khảo mẫu Bootstrap 4 cơ bản sau để có cái nhìn đầu tiên về phiên bản này.
| 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | <!DOCTYPE html><html lang="en"><head> <title>Ví dụ website dùng Bootstrap 4 --- dammio.com</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.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/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</h1> <p>Phóng to/thu nhỏ kích thước trang để xem thay đổi</p> </div><nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">DAMMIO</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="#">Liên kết 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Liên kết 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Liên kết 3</a> </li> </ul> </div> </nav><div class="container" style="margin-top:30px"> <div class="row"> <div class="col-sm-4"> <h2>Về tôi</h2> <h5>Hình ảnh của tôi:</h5> <div class="fakeimg">Hình ảnh giả</div> <p>Nội dung về tôi ở đây...</p> <h3>Các đường dẫn</h3> <p>Nội dung đường dẫn --- dammio.com</p> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Kích hoạt</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Liên kết</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Liên kết</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Hủy</a> </li> </ul> <hr class="d-sm-none"> </div> <div class="col-sm-8"> <h2>Thẻ tiêu đề h2</h2> <h5>Thẻ tiêu đề h5</h5> <div class="fakeimg">Hình ảnh giả</div> <p>Tiêu đề...</p> <p>Nội dung giới thiệu về website dammio.com: Trang lập trình, thiết kế Web, học tiếng Anh.</p> <br> <h2>Thẻ tiêu đề h2</h2> <h5>Thẻ tiêu đề h5</h5> <div class="fakeimg">Hình ảnh</div> <p>Tiêu đề...</p> <p>Nội dung giới thiệu về website dammio.com: Trang lập trình, thiết kế Web, học tiếng Anh.</p> </div> </div></div><div class="jumbotron text-center" style="margin-bottom:0"> <p>Phần đáy trang</p></div></body></html> |
Kết luận
Bài này giúp bạn có cái nhìn tổng quát về Bootstrap 4. Tuy có nhiều ưu điểm vượt trội, Bootstrap 4 vẫn chưa thể giải quyết vấn đề tương thích với IE9, cũng như tương thích hoàn toàn với IE10+. Bạn có thể dùng Bootstrap 3 để thực hiện nhu cầu tương thích với IE9 và IE10. Mời bạn theo dõi bài tiếp theo để bắt đầu học và tìm hiểu sâu hơn về Bootstrap 4.
| |||||
Khóa học Phân tích dữ liệu sử dụng Microsoft Power BI
Khóa học Phân tích dữ liệu sử dụng Power Query trong Excel
HƯỚNG DẪN THIẾT KẾ QUẢNG CÁO VÀ ĐỒ HỌA CHUYÊN NGHIỆP VỚI CANVA
Hãy tham gia khóa học để trở thành người chuyên nghiệp. Tuyệt HAY!😲👍
GOOGLE SPREADSHEETS phê không tưởng
Nếu bạn muốn tạo video chuyên nghiệp và sáng tạo hãy tham gia khóa học HƯỚNG DẪN TỰ TẠO VIDEO CLIP CHUYÊN NGHIỆP SÁNG TẠO
Cập nhật công nghệ từ Youtube tại link: https://www.youtube.com/channel/UCOxeYcvZPGf-mGLYSl_1LuA/videos
Để tham gia khóa học công nghệ truy cập link: http://thuvien.hocviendaotao.com
Mọi hỗ trợ về công nghệ email: dinhanhtuan68@gmail.com
