cari

Rumah  >  Artikel  >  hujung hadapan web  >  Mari kita bincangkan tentang susun atur grid dalam Bootstrap dan lihat cara menjajarkan secara menegak dan mendatar

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

青灯夜游
青灯夜游ke hadapan
2021-11-01 11:11:502410semak imbas

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>

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 , 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>

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>

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!

Kenyataan：
Artikel ini dikembalikan pada:juejin.cn. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Apakah fail yang perlu dirujuk oleh bootstrap?Artikel seterusnya：Apakah fail yang perlu dirujuk oleh bootstrap?

Artikel berkaitan

Lihat lagi