Tin tức

Tìm hiểu về column và row trong Bootstrap

09:28 - 02/11/2018

Column và row trong Bootstrap có mối quan hệ chặt chẽ với nhau. Theo như quy tắc và thiết lập cấu trúc của một website thì các cột sẽ được chia thành 12 phần bằng nhau.

Kinh doanh theo xu hướng của giới trẻ hiện nay
Phần mềm mã nguồn và những lợi ích bạn cần biết
Bật mí cách trình bày email chuyên nghiệp nhất
Các mặt hàng thiết yếu trong cuộc sống để kinh doanh
Nghiên cứu thị trường là gì? Tại sao phải nghiên cứu thị trường?

Bất cứ ai có sự hiểu biết về HTML, CSS và JavaScript đều biết rằng Bootstrap rất quan trọng. Column (cột) và row (hàng) là 2 thành phần quan trọng nằm trong hệ thống lưới, góp phần tạo dựng lên một Bootstrap. Ở bài viết này, chúng ta sẽ cùng nhau đi tìm hiểu về column và row trong Bootstrap.

  1. Row (hàng)

Bootstrap được hiểu là một khung framework frontend được sử dụng vô cùng rộng rãi. Để học về Bootstrap, chúng ta cần tìm hiểu hàng loạt các vấn đề khác nhau như container-fluid là gì, các class trong Bootstrap, class container trong Bootstrap… và đặc biệt là tìm hiểu về cột và hàng. Các lưới điện bao gồm hàng và cột cho phép đặt những yếu tố theo chiều dọc và chiều ngang.

row-trong-Bootstrap-01

Hình ảnh column và row trong Bootstrap

Hàng có nghĩa là khối. Khi chúng ta tạo ra một hàng thì nó sẽ chiếm toàn bộ chiều rộng của phần tử đó. Một cách hiểu đơn giản hơn thì bạn có thể nghĩ rằng row trong Bootstrap chính là những dòng mới trong cách bố trí. Những liên kết ngang trong lưới điện sẽ được thực hiện thông qua các cột. Nếu đặt sai vị trí nội dung sẽ phá vỡ bố cục của tổng thể.

Một ví dụ để hiểu khi đặt sai nội dung trong row, phá vỡ bố cục của Bootstrap:

    <!-- Wrong -->

    <div class="row">

        Some content

    </div>

Tiếp theo là ví dụ khi đặt nội dung ở vị trí đúng, nghĩa là là đặt nội dung ở trong column, đúng với bố cục của Bootstrap:

    <!-- Correct -->

    <div class="row">

        <div class="col-md-12">Content Goes Here</div>

    </div>

  1. Column (cột)

Column và row trong Bootstrap có mối quan hệ chặt chẽ với nhau. Theo như quy tắc và thiết lập cấu trúc của một website thì các cột sẽ được chia thành 12 phần bằng nhau.

Trong quá trình tạo lập cột nằm trong một hàng, bạn cần phải xác định tỷ lệ hợp lý mà những thành phần đấy sẽ chiếm. Điều này được thực hiện bằng việc áp dụng một lớp cụ thể .col-md-NUMBER, trong đó NUMBER chính là một số nguyên từ 1 đến 12.

row-trong-Bootstrap-02

Tìm hiểu về cột và hàng trong Bootstrap rất cần thiết

Tùy thuộc vào số lượng của những bộ phận mà hàng chiếm, cột sẽ chiếm một tỷ lệ phần trăm của chiều rộng của hàng. Cụ thể, nếu 6 cột sẽ là 50% (6/12), 3 cột sẽ là 25% (3/12). Bạn có thể quan sát ví dụ dưới đây để hiểu rõ hơn.

        <div class="row">

            <div class="col-md-12">Full width 100%</div>

        </div>

        <div class="row">

            <div class="col-md-3">25%</div>

            <div class="col-md-3">25%</div>

            <div class="col-md-6">50%</div>

        </div>

Trong Bootstrap, chỉ có 12 chỗ trống có sẵn trong một hàng. Khi tổng hợp các không gian theo yêu cầu của những cột liền kề, nếu kết quả vượt quá 12 thì cột cuối cùng trong nhóm sẽ phải di chuyển đến dòng kế tiếp. Cụ thể hơn hãy xem ví dụ này:

        <div class="row">

            <div class="col-xs-8"></div>

            <div class="col-xs-4"></div>

            <div class="col-xs-9">This column will move to the next line.</div>

        </div>

Nhìn vào ví dụ này chúng ta sẽ thấy 2 cột đầu tiên có kích thước là 8 và 4 (8 + 4 = 12) nên sẽ không có đủ không gian cho cột thứ ba ở đó. Chính vì vậy chúng ta phải để cột tiếp theo vào hàng tiếp theo.

Chúng ta vừa cùng nhau đi tìm hiểu về column và row trong Bootstrap. Bạn đừng nên bỏ qua những thông tin hữu ích này. Để tìm hiểu những thông tin hay về thế giới công nghệ, bạn hãy truy cập vào website Nhanhoa.com để tìm hiểu hoặc nhờ tư vấn trực tiếp qua hotline 19006680 bạn nhé!

>>> Xem thêm: phần mềm quản lý bán hàng trên điện thoại - Trải nghiệm 15 ngày miễn phí với hệ thống bán hàng 4s Online

>>> Xem thêm: những trang web bán hàng online - Giải pháp 4s tối ưu website cho việc bán hàng