Bài 01: Tìm hiểu Bootstrap Grid System và Mode Grid Sizes

Bài 01: Tìm hiểu Bootstrap Grid System và Mode Grid Sizes

codersulution Chủ Nhật, tháng 9 18, 2022

 

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <style>
        .grey{
            color:white;
            background-color: gray;
        }
        .green{
            color:white;
            background-color: green;
        }
        .blue{
            color:white;
            background-color: blue;
        }
    </style>
  </head>
  <body>
    <div class="contaier">
        <div class="row">
            <div class="col-sm-4 grey">
                Hello, world!
            </div>
            <div class="col-sm-4 green">
                Hello, world!
            </div>
            <div class="col-sm-4 blue">
                Hello, world!
            </div>
        </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script 
    src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
    crossorigin="anonymous">
    </script>
    <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" 
    integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" 
    crossorigin="anonymous">
    </script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script 
    src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" 
    crossorigin="anonymous">
    </script>
    <script 
    src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" 
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" 
    crossorigin="anonymous">
    </script>
    <script 
    src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" 
    integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 
    crossorigin="anonymous">
    </script>
    -->
  </body>
</html>
-    Để sử dụng bootstrap chúng ta có thể sử dụng option 1 hoặc option 2:
-    Kết quả :
-    Khi thu nhỏ màn hình nội dung sẽ co dãn theo kích thước màn hình:

 Mode Grid Sizes

Xem các khía cạnh của hệ thống lưới Bootstrap hoạt động như thế nào trên nhiều thiết bị bằng một bảng tiện dụng.

Cực nhỏ
<576px		Nhỏ
≥576px		Trung bình
≥768px		Lớn
≥992px		Cực lớn
≥1200px
Chiều rộng vùng chứa tối đaKhông có (tự động)540px720px960px1140px
Tiền tố lớp.col-.col-sm-.col-md-.col-lg-.col-xl-
# cột12
Chiều rộng máng xối30px (15px trên mỗi bên của cột)
Có thể lồng vào nhauđúng
Thứ tự cộtđúng
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <style>
        .grey{
            color:white;
            background-color: gray;
        }
        .green{
            color:white;
            background-color: green;
        }
        .blue{
            color:white;
            background-color: blue;
        }
    </style>
  </head>
  <body>
    <div class="contaier">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 grey">
                Hello, world!
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 green">
                Hello, world!
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 blue">
                Hello, world!
            </div>
        </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  </body>
</html>



codersulution

Người đăng: codersulution

Chúa dùng những kẻ thất bại - vì chẳng còn loại người nào khác. Thành công không có dấu chân của kẻ lười biếng!! Đúng vậy! vi lười biếng thì chỉ muốn đi những phương tiện hiện đại. Học hành là không sợ hãi, không biết là hỏi. Chúng ta là người đi học kia mà. Mạnh mẽ và học cho tốt !!!

Đăng nhận xét

0 Nhận xét

myadcash