Thực hiện layout với bootstrap

  • Để thực hiện layout với bootstrap cho trang web, bạn dùng grid system do bootstrap hỗ trợ. Grid system của bootstrap sẽ giúp bạn làm layout rất dễ dàng.
  • Khi thực hiện layout, trang của bạn phải có 1 div container chứa toàn bộ nội dung trang. Toàn bộ các tag sẽ được đặt trong 1 div có class là container hoặc container-fluid.
  • container-fluid bằng 100% độ rộng trang, còn container sẽ fix theo độ rộng (tùy thiết bị).
  • Các dòng trong layout được đặt trong div có class là row
https://getbootstrap.com/docs/3.3/css/
https://getbootstrap.com/docs/4.0/layout/grid/

1. Grid system và các loại thiết bị

Grid system là hệ thống lưới gồm 12 cột. Bootstrap cung cấp các class css giúp tổ chức giao diện trang web dạng lưới 12 cột giúp bạn dễ dàng tổ chức giao diện trang web. 

Bootstrap 4 có năm loại class css cho nhiều thiết bị khác nhau (căn cứ theo độ rộng màn hình):

.col- small devices, screen width <=576px
.col-sm- small devices,  screen width >576px
.col-md- medium devices, screen width >=768px
.col-lg- large devices,  screen width >=992px
.col-xl- xlarge devices , screen width >=1200px

Sau đây là các thông số cần biết về container:

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Max container widthNone (auto)540px720px960px1140px
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-
# of columns12
Gutter width30px (15px on each side of a column)
NestableYes
Column orderingYes

2.Độ rộng các cột bằng nhau cho các thiết bị

<!doctype html><html> <head> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>Tiêu đề trang web</title>
<style> .row div{height: 100px; } </style>
</head><body>
<div class="container">
    <div class="row">
        <div class="col bg-danger"> Cột 1 </div>
        <div class="col bg-success"> Cột 2</div>
    </div>
    <div class="row">
        <div class="col bg-info"> Cột 1 </div>
        <div class="col bg-warning"> Cột 2 </div>
        <div class="col bg-info"> Cột 3 </div>
    </div>
</div>
</body></html>
grid-1

3.Độ rộng các cột bằng nhau từ md trở lên

<!doctype html><html> <head> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>Tiêu đề trang web</title>
<style> .row div{height: 100px; } </style>
</head><body>
<div class="container">
    <div class="row">
        <div class="col-md bg-danger"> Trái </div>
        <div class="col-md bg-success"> Phải</div>
    </div>
    <div class="row">
        <div class="col-md bg-info"> Cột 1 </div>
        <div class="col-md bg-warning"> Cột 2 </div>
        <div class="col-md bg-info"> Cột 3 </div>
    </div>
</div>
</body></html>

Xem, bằng thiết bị trên md như hình trên, nhưng trên di động sẽ thế này:

4.Độ rộng các cột bằng nhau từ lg trở lên

<!doctype html><html> <head> <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <title>Tiêu đề trang web</title>
    <style> .row div{height: 100px; } </style>
    </head><body>
    <div class="container">
        <div class="row">
            <div class="col-lg bg-danger"> Trái </div>
            <div class="col-lg bg-success"> Phải</div>
        </div>
        <div class="row">
            <div class="col-lg bg-info"> Cột 1 </div>
            <div class="col-lg bg-warning"> Cột 2 </div>
            <div class="col-lg bg-info"> Cột 3 </div>
        </div>
    </div>
    </body></html>

Kết quả xem thế nào? bạn suy luận và xem thử nhé

5. Độ rộng bằng nhau , có ngắt dòng

<!doctype html><html> <head> <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <title>Tiêu đề trang web</title>
    <style> .row .col{height: 100px; } </style>
    </head><body>
    <div class="container">
        <div class="row">
                <div class="col bg-warning">col</div>
                <div class="col bg-secondary">col</div>
                <div class="col bg-warning">col</div>
                <div class="col bg-secondary">col</div>            
                <div class="w-100"></div>
                <div class="col bg-success">col</div>
                <div class="col bg-info">col</div>
                <div class="w-100"></div>
                <div class="col bg-secondary">col</div>
                <div class="col bg-warning">col</div>
                <div class="col bg-secondary">col</div>   
        </div>
    </div>
</body></html>
grid-5

6.Chỉ định độ rộng các cột

<!doctype html><html> <head> <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <title>Tiêu đề trang web</title>
    <style> .row div{height: 100px; } </style>
    </head><body>
    <div class="container">
        <div class="row">
            <div class="col bg-warning"> 1 of 3 </div>
            <div class="col-6 bg-info"> 2 of 3 (wider) </div>
            <div class="col bg-warning"> 3 of 3 </div>
        </div>
        <div class="row">
            <div class="col bg-primary"> 1 of 3 </div>
            <div class="col-5 bg-success"> 2 of 3 (wider) </div>
            <div class="col bg-primary"> 3 of 3 </div>
        </div>
    </div>
    </body></html>

7. Chỉ động độ rộng, trên nhiều thiết bị

<!doctype html><html> <head> <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <title>Tiêu đề trang web</title>
    <style> .row div{height: 100px; } </style>
    </head><body>
    <div class="container">
            <div class="row">
                <div class="col-12 col-md-8 bg-warning">.col-12 .col-md-8</div>
                <div class="col-6 col-md-4 bg-primary">.col-6 .col-md-4</div>
            </div>
                  
             <!-- Columns start 50% on mobile and  33.3%  on desktop -->
            <div class="row">
                <div class="col-6 col-md-4 bg-secondary">.col-6 .col-md-4</div>
                <div class="col-6 col-md-4 bg-info">.col-6 .col-md-4</div>
                <div class="col-6 col-md-4 bg-secondary">.col-6 .col-md-4</div>
            </div>
                  
            <!-- Columns always 50%, on mobile and desktop -->
            <div class="row">
                <div class="col-6 bg-primary">.col-6</div>
                <div class="col-6 bg-warning">.col-6</div>
        </div>      
    </div>
    </body></html>

Trên di động như hình dưới, còn từ md trở lên thế nào? Bạn suy luận nhé

grid-7

8. Responvice với nhiều thiết bị

<!doctype html><html> <head> <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <title>Tiêu đề trang web</title>
    <style> .row div{height: 100px; } </style>
    </head><body>
    <div class="container">
            <div class="row">
                <div class="col-4 col-md-8 col-lg-6 bg-warning"> Ô THỨ 1</div>
                <div class="col-8 col-md-4 col-lg-6 bg-info"> Ô THỨ 2</div>
            </div>
            <div class="row">
                <div class="col-md-4 bg-success"> Ô A </div>
                <div class="col-md-4 bg-secondary"> Ô B </div>
                <div class="col-md-4 bg-success"> Ô C </div>
            </div>
            <div class="row">
                <div class="col-sm-9 col-lg-3 bg-primary"> Ô TRÁI</div>
                <div class="col-sm-3 col-lg-9 bg-danger"> Ô PHẢI </div>
            </div>
    </div>                   
    </body></html>

Máy tính

grig-7-lg

Trên md

grig-7-md

Trên sm

grig-7-sm

Smartphone

grid-7-smartphone

4. Dịch chuyển cột

Bootstrap 3 có class col-offset-n còn bootstrap 4 có các class offset-n giúp bạn dịch chuyển vào n cột

  • offset-n: dịch vào n cột
  • offset-md-n : dịch n cột trên thiết bị md
<div class="container">
        <div class="row">
            <div class="col-4 bg-success">LEFT</div>
            <div class="col-4 offset-4 bg-danger">RIGHT</div>
        </div>
        <div class="row">
            <div  class="col-6 offset-3 bg-info">MAIN</div>
        </div>              
</div>   

Kết quả:

(https://longnv.name.vn/bt/ bt-offset.html)

5. Ứng dụng tạo layout

HTML:

<div class="container">
    <header class="row bg-primary"> HEADER </header>
    <nav class="row bg-secondary">MENU</nav>
    <div class="row">
        <aside class="col-2 bg-success">LEFT</aside>
        <article class="col-8 bg-danger">MAIN</article>
        <aside class="col-2 bg-warning">RIGHT</aside>
    </div>    
    <footer class="row bg-dark text-white"> FOOTER </footer>
</div> 

CSS:

 header {height: 100px} 
 footer {height:50px}
 nav    { height: 60px;} 
 aside  {height:400px}  
 article {height:400px} 

(https://longnv.name.vn/bt/bt-layout1.html)

6. Tham khảo thêm

https://www.w3schools.com/bootstrap/bootstrap_templates.asp

7. Quiz bootstrap

https://www.w3schools.com/quiztest/quiztest.asp?qtest=Bootstrap