Bootstrap 4 - Bootstrap Responsive Layout
Responsive Web Design Là Gì?
Responsive Web Design (tạm dịch là thiết kế web đáp ứng) là quá trình thiết kế và xây dựng các trang web cung cấp khả năng truy cập tốt hơn, tối ưu hóa trải nghiệm xem cho người dùng bằng cách tối ưu hóa trang web phù hợp trên các thiết bị khác nhau.
Khi các thiết bị di động ngày càng trở lên phổ biến và lượng người dùng lớn, các doanh nghiệp không thể bỏ qua việc tối ưu hóa các trang web cho các thiết bị di động. Responsive Web Design được xem là lựa chọn hoàn hảo để tối ưu hóa trang web ho các thiết bị di động.
Bố cục có tính đáp ứng (Responsive) tự động điều chỉnh và tương thích với kích thước màn hình thiết bị bất kỳ, kể cả là máy tính, laptop, điện thoại di động hay máy tính bảng.
Cách tạo giao diện responsive cho website với Bootstrap
Trên Bootstrap 4 được bổ sung hệ thống lưới mobile-first, vì vậy việc tạo giao diện trang web Responsive và các ứng dụng thân thiện với các thiết bị di động trở nên dễ dàng hơn nhiều.
Các lớp lưới trong Bootstrap 4 cung cấp khả năng kiểm soát bố cục cũng như cách hiển thị bố cục trang web trên các thiết bị có màn hình khác nhau tốt hơn, chẳng hạn như điện thoại di động, máy tính bảng, laptop, máy tính, ... .
Ví dụ: trong ví dụ dưới đây chúng ta sẽ tạo bố cục có tính đáp ứng dưới dạng bố cục 4 cột trên màn hình thiết bị cực lớn (viewport ≥ 1200px) và 3 cột trên các thiết bị màn hình lớn (lớn hơn hoặc bằng 992px và nhỏ hơn 1200px), 2 cột trên các thiết bị màn hình kích thước trung bình (lớn hơn hoặc bằng 768px và nhỏ hơn 992px) và bố cục 1 cột trên các thiết bị màn hình kích thước nhỏ và cực nhỏ (viewport nhỏ hơn 768px).
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-3">
<div class="container-fluid">
<a href="#" class="navbar-brand mr-3">Tutorial Republic</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Services</a>
<a href="#" class="nav-item nav-link">About</a>
<a href="#" class="nav-item nav-link">Contact</a>
</div>
<div class="navbar-nav ml-auto">
<a href="#" class="nav-item nav-link">Register</a>
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Learn to Create Websites</h1>
<p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://www.hiepsiit.com" target="_blank">hiepsiit.com</a> you will learn the essential web development technologies along with real life practice examples, so that you can create your own website to connect with the people around the world.</p>
<p><a href="https://www.hiepsiit.com" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
</div>
<div class="row">
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>HTML</h2>
<p>HTML is the standard markup language for describing the structure of the web pages. Our HTML tutorials will help you to understand the basics of latest HTML5 language, so that you can create your own website.</p>
<p><a href="https://www.hiepsiit.com/html-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>CSS</h2>
<p>CSS is used for describing the presentation of web pages. CSS can save a lot of time and effort. Our CSS tutorials will help you to learn the essentials of latest CSS3, so that you can control the style and layout of your website.</p>
<p><a href="https://www.hiepsiit.com/css-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>JavaScript</h2>
<p>JavaScript is the most popular and widely used client-side scripting language. Our JavaScript tutorials will provide in-depth knowledge of the JavaScript including ES6 features, so that you can create interactive websites.</p>
<p><a href="https://www.hiepsiit.com/javascript-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>Bootstrap</h2>
<p>Bootstrap is a powerful front-end framework for faster and easier web development. Our Bootstrap tutorials will help you to learn all the features of latest Bootstrap 4 framework so that you can easily create responsive websites.</p>
<p><a href="https://www.hiepsiit.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>PHP</h2>
<p>PHP is the most popular server-side scripting language for creating dynamic web pages. Our PHP tutorials will help you to learn all the features of latest PHP7 scripting language so that you can easily create dynamic websites.</p>
<p><a href="https://www.hiepsiit.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>SQL</h2>
<p>SQL is a standard language designed for managing data in relational database management system. Our SQL tutorials will help you to learn the fundamentals of the SQL language so that you can efficiently manage your databases.</p>
<p><a href="https://www.hiepsiit.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>References</h2>
<p>Our references section outlines all the standard HTML5 tags and CSS3 properties along with other useful references such as color names and values, character entities, web safe fonts, language codes, HTTP messages, and more.</p>
<p><a href="https://www.hiepsiit.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
<div class="col-md-6 col-lg-4 col-xl-3">
<h2>FAQ</h2>
<p>Our Frequently Asked Questions (FAQ) section is an extensive collection of FAQs that provides quick and working solution of common questions and queries related to web design and development with live demo.</p>
<p><a href="https://www.hiepsiit.com/twitter-bootstrap-tutorial/" target="_blank" class="btn btn-success">Learn More »</a></p>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-md-6">
<p>Copyright © 2019 Tutorial Republic</p>
</div>
<div class="col-md-6 text-md-right">
<a href="#" class="text-dark">Terms of Use</a>
<span class="text-muted mx-2">|</span>
<a href="#" class="text-dark">Privacy Policy</a>
</div>
</div>
</footer>
</div>