Mari kita bincangkan tentang susun atur grid dalam Bootstrap dan lihat cara menjajarkan secara menegak dan mendatar-Tutorial Bootstrap-php.cn

Mari kita bincangkan tentang susun atur grid dalam Bootstrap dan lihat cara menjajarkan secara menegak dan mendatar

青灯夜游

Lepaskan： 2021-11-01 11:11:50

ke hadapan

2457 orang telah melayarinya

Artikel ini akan membawa anda melalui reka letak grid dalam Bootstrap dan lihat pada penjajaran menegak dan penjajaran mendatar saya harap ia akan membantu anda.

Mari kita bincangkan tentang susun atur grid dalam Bootstrap dan lihat cara menjajarkan secara menegak dan mendatar

1. Reka letak grid Bootstrap

Dalam bahagian sebelumnya kami memperkenalkan grid dalam Bootstrap, dan grid digunakan dalam web susun atur halaman adalah titik kunci dan sukar adalah titik permulaan dan asas reka bentuk web Anda mesti meluangkan masa untuk memahaminya . Sudah tentu, untuk pereka web dengan asas tertentu, saya percaya kandungan ini boleh difahami sepintas lalu Hari ini kita akan mempelajari lebih lanjut mengenai susun atur grid. [Cadangan berkaitan: "tutorial bootstrap"]

Bahagian ini melibatkan beberapa fungsi dalam kotak fleksibel tujuan umum (Flex).

2. Penjajaran menegak

2.1 Tetapkan penjajaran menegak dalam tag baris

dengan menetapkan baris Menambah align-items-start, align-items-center dan align-items-end pada teg boleh menukar penjajaran menegak baris dalam bekas Tiga teg di atas ialah penjajaran atas, penjajaran tengah dan penjajaran bawah. Berikut ialah kod demo dan pemaparan Kod css dalam kod menetapkan warna latar belakang dan jarak untuk melihat kesannya dengan mudah.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
      .row{background-color: rgba(0, 0, 255, 0.178);height: 260px;margin:30px;}
      .col{background-color: rgba(101, 101, 161, 0.842);height: 80px;padding: 30px;margin: 10px;}
    </style>
    <title>垂直对齐演示</title>
  </head>
  <body>
        <div>

          <div class="row align-items-start">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row align-items-center">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row align-items-end">
            <div> </div>
            <div></div>
            <div></div>
          </div>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Salin selepas log masuk

Mari kita bincangkan tentang susun atur grid dalam Bootstrap dan lihat cara menjajarkan secara menegak dan mendatar

2.2 Tetapkan penjajaran menegak dalam teg kol

Dengan menambah < dalam teg kol 🎜 >, align-self-start dan align-self-center boleh menukar penjajaran menegak lajur dalam baris Tiga label di atas ialah penjajaran atas, penjajaran tengah dan penjajaran bawah. Berikut ialah kod demo dan pemaparan Kod css dalam kod menetapkan warna latar belakang dan jarak untuk melihat kesannya dengan mudah. align-self-end

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
      .row{background-color: rgba(0, 0, 255, 0.178);height: 260px;margin:30px;}
      .col{background-color: rgba(101, 101, 161, 0.842);height: 80px;padding: 30px;margin: 10px;}
    </style>
    <title>垂直对齐演示</title>
  </head>
  <body>
        <div>

          <div class="row align-items-start">
            <div class="col  align-self-start"> </div>
            <div class="col align-self-center"></div>
            <div class="col align-self-end"></div>
          </div>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Salin selepas log masuk

Mari kita bincangkan tentang susun atur grid dalam Bootstrap dan lihat cara menjajarkan secara menegak dan mendatar

3. Penjajaran mendatar

3.1 Tetapkan penjajaran menegak dalam teg baris

Anda boleh menukar penjajaran mendatar lajur dalam satu baris dengan menambahkan

, justify-content-start, justify-content-center, justify-content-end, justify-content-around, justify-content-between pada teg baris. Berikut ialah kod demo dan pemaparan Kod css dalam kod menetapkan warna latar belakang dan jarak untuk melihat kesannya dengan mudah. justify-content-evenly

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
     .row{background-color: rgba(0, 0, 255, 0.178);height: 120px;margin:10px;}
      .col-4{background-color: rgba(101, 101, 161, 0.842);height: 30px;padding: 10px;margin: 10px;}
    </style>
    <title>垂直对齐演示</title>
  </head>
  <body>
        <div>

          <div class="row justify-content-start">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row justify-content-center">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row justify-content-end">
            <div> </div>
## <div></div>
            <div></div>
          </div>

          <div class="row justify-content-around">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row justify-content-between">
            <div> </div>
            <div></div>
            <div></div>
          </div>

          <div class="row justify-content-evenly">
            <div> </div>
            <div></div>
            <div></div>
          </div>

        </div>
    </body>
</html>

Salin selepas log masuk

Mari kita bincangkan tentang susun atur grid dalam Bootstrap dan lihat cara menjajarkan secara menegak dan mendatar

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati:

Video Pengaturcaraan! !

Atas ialah kandungan terperinci Mari kita bincangkan tentang susun atur grid dalam Bootstrap dan lihat cara menjajarkan secara menegak dan mendatar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!