Bố cục đáp ứng với Bootstrap

Trong hướng dẫn này, bạn sẽ học cách tạo các trang web đáp ứng với Bootstrap.

Thiết kế web đáp ứng là gì?

Thiết kế web đáp ứng là một quá trình thiết kế và xây dựng trang web để cung cấp khả năng truy cập tốt hơn và trải nghiệm xem tối ưu cho người dùng bằng cách tối ưu hóa nó cho các thiết bị khác nhau.

Với xu hướng ngày càng phát triển của điện thoại thông minh và máy tính bảng, việc bỏ qua việc tối ưu hóa trang web cho thiết bị di động đã trở nên gần như không thể tránh khỏi. Thiết kế web đáp ứng là một giải pháp thay thế thích hợp hơn và là một cách hiệu quả để nhắm mục tiêu nhiều loại thiết bị với ít nỗ lực hơn nhiều.

Bố cục đáp ứng tự động điều chỉnh và thích ứng với bất kỳ kích thước màn hình thiết bị nào, cho dù đó là máy tính để bàn, máy tính xách tay, máy tính bảng hay điện thoại di động. Xem hình minh họa sau đây.

Thiết kế web đáp ứng là gì?

Tạo bố cục đáp ứng với Bootstrap

Với hệ thống lưới flexbox đầu tiên dành cho thiết bị di động mạnh mẽ Bootstrap, việc tạo các trang web và ứng dụng đáp ứng và thân thiện với thiết bị di động đã trở nên dễ dàng hơn nhiều.

Bootstrap đáp ứng và thân thiện với thiết bị di động ngay từ đầu. Hệ thống lưới của nó cung cấp khả năng kiểm soát tốt hơn đối với bố cục cũng như cách nó sẽ được hiển thị trên các loại thiết bị khác nhau như điện thoại di động, máy tính bảng, máy tính xách tay và máy tính để bàn, thiết bị màn hình lớn, v.v.

Ví dụ sau sẽ tạo bố cục đáp ứng được hiển thị dưới dạng bố cục 4 cột trong thiết bị cực lớn (khung nhìn ≥ 1200px) và bố cục 3 cột trong thiết bị lớn (992px ≤ khung nhìn < 1200px), trong khi bố cục 2 cột trong thiết bị vừa (768px ≤ khung nhìn < 992px), và bố cục 1 cột trong các thiết bị nhỏ và cực nhỏ (khung nhìn < 768px). Hãy thử ví dụ sau và xem nó hoạt động như thế nào:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Responsive Layout Example</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">Comdy</a>
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-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 ms-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="p-5 my-4 bg-light rounded-3">
        <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://comdy.vn" class="text-success" target="_blank">comdy.vn</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://comdy.vn" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
    </div>
    <div class="row g-3">
        <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://comdy.vn/lap-trinh-html/" target="_blank" class="btn btn-success">Learn More &raquo;</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://comdy.vn/lap-trinh-css/" target="_blank" class="btn btn-success">Learn More &raquo;</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://comdy.vn/lap-trinh-javascript/" target="_blank" class="btn btn-success">Learn More &raquo;</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://comdy.vn/bootstrap/" target="_blank" class="btn btn-success">Learn More &raquo;</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://comdy.vn/lap-trinh-php/" target="_blank" class="btn btn-success">Learn More &raquo;</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://comdy.vn/sql-server/" target="_blank" class="btn btn-success">Learn More &raquo;</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://comdy.vn/boostrap/" target="_blank" class="btn btn-success">Learn More &raquo;</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://comdy.vn/bootstrap/" target="_blank" class="btn btn-success">Learn More &raquo;</a></p>
        </div>
    </div>
    <hr>
    <footer>
        <div class="row">
            <div class="col-md-6">
                <p>Copyright &copy; 2021 Comdy</p>
            </div>
            <div class="col-md-6 text-md-end">
                <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>
</body>
</html>
BootstrapBootstrap Cơ Bản
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.