Adakah terdapat susun atur grid dalam bootstrap?-Tutorial Bootstrap-php.cn

Adakah terdapat susun atur grid dalam bootstrap?

WBOY

Lepaskan： 2022-06-16 11:10:13

asal

2949 orang telah melayarinya

Terdapat susun atur grid dalam bootstrap susun atur grid merujuk kepada membahagikan baris kepada 12 grid dan menetapkan 12 grid kepada elemen div yang berbeza untuk susun atur Anda boleh menetapkan lajur yang diduduki oleh Bilangan grid digunakan untuk menetapkan lebar lajur, dan bilangan lajur digunakan untuk menentukan susun atur halaman modular.

Adakah terdapat susun atur grid dalam bootstrap?

Persekitaran pengendalian tutorial ini: sistem Windows 10, bootstrap versi 5, komputer DELL G3

Adakah terdapat susun atur grid dalam bootstrap

Terdapat susun atur grid dalam bootstrap

Reka letak halaman web sebelum ini menggunakan reka letak jadual, yang membahagikan halaman web kepada jadual besar dan kecil, dan kemudian mengisi elemen daripada jadual. Kemudian ia berkembang menjadi susun atur css div. terapung melalui div css. susun atur float:right dan float:left.

Kini bootstrap menggunakan reka letak grid. Ringkasnya, satu baris dibahagikan kepada 12 grid. Berikan 12 grid kepada elemen DIV yang berbeza untuk susun atur.

Memperkenalkan reka letak grid dalam Bootstrap, membahagikan halaman kepada reka letak seperti jadual
Setiap baris terdiri daripada 12 lajur, anda boleh Tetapkan lebar lajur dengan menetapkan bilangan lajur yang diduduki oleh lajur
Menyokong reka letak responsif, dengan 5 saiz responsif sepadan dengan lebar peranti yang berbeza
Gunakan susun atur aliran flexbox untuk merealisasikan susun atur halaman
Gunakan div untuk merealisasikan susun atur bekas, baris dan lajur

2. Bagaimana untuk melaksanakan reka letak grid?

Pertama sekali, terdapat banyak cara untuk menggunakan bootstrap, memuatkan webpack atau menggunakan rujukan CND, dsb. Saya memuat turun versi 3.37 terus dari CDN ke komputer tempatan saya. Kemudian rujuknya melalui tag pautan. Ini serupa dengan merujuk Jquery.

Kedua, tetapkan grid mengikut reka letak. Sebagai contoh, katakan anda ingin melaksanakan reka letak mendatar yang besar dengan tiga lajur. Kemudian peruntukkan 12/3=4 grid untuk setiap DIV

Jika tiga lajur tidak sama, akan ada kira-kira 3 grid di sebelah kiri, 5 di tengah dan 4 di sebelah kanan

Operasi khusus:

Mula-mula susun div bekas untuk menyimpan grid, tambah kelas kontena pada div untuk melaksanakan bekas
Tambah kelas baris ke sub-elemen untuk melaksanakan susun atur baris, dan gunakan col-* untuk melaksanakan susun atur lajur
Apabila nama kelas ialah bendalir bekas, lebar lalai yang diduduki ialah 100%, menduduki Keseluruhan halaman
Apabila menggunakan col-, jika saiz tidak ditetapkan, lebar akan dibahagikan secara bijak kepada bahagian yang sama secara lalai jika saiz * ditetapkan , ruang halaman akan dibahagikan secara berkadar
Tetapi saiz * dalam baris yang sama tidak boleh melebihi 12, boleh kurang daripada 12, dan akan ada ruang kosong apabila melebihi 12, bahagian lebihan akan diletakkan dalam baris seterusnya

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>栅格布局</title>
  <!--  移动端优先-->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!--  引入bootstrap.css文件-->
  <link rel="stylesheet" href="css/bootstrap.css">
  <style>
    .row {
      border: 1px dashed #000;
      margin-top: 20px;
    }
    .col {
      border: 1px solid #0069d9;
      background: #f1b0b7;
    }
  </style>
</head>
<body>
<!--  不设置*的大小，默认平分列的宽度-->
<div>
  <div>
    <div class="col col-sm">第一列</div>
    <div class="col col-sm">第二列</div>
    <div class="col col-sm">第三列</div>
  </div>
</div>
<!--设置container-fluid默认占满宽度-->
<div>
  <div>
    <div class="col col-sm">第一列</div>
    <div class="col col-sm">第二列</div>
    <div class="col col-sm">第三列</div>
  </div>
</div>
<!--当设置*的大小时，默认按照比例分割宽度-->
<div>
  <div>
    <div class="col col-sm-5">第一列</div>
    <div class="col col-sm-2">第二列</div>
    <div class="col col-sm-5">第三列</div>
  </div>
</div>
<!--小于12时，会出现空白区域-->
<div>
  <div>
    <div class="col col-sm-3">第一列</div>
    <div class="col col-sm-2">第二列</div>
    <div class="col col-sm-3">第三列</div>
  </div>
</div>
<!--当超出12时，会自动换行-->
<div>
  <div>
    <div class="col col-sm-5">第一列</div>
    <div class="col col-sm-5">第二列</div>
    <div class="col col-sm-7">第三列</div>
  </div>
</div>
<!--首先引入jQuery文件，再引入poper文件，最后引入bootstrap文件-->
<script src="js/jquery.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

Salin selepas log masuk

3 Apakah maksud parameter kelas susun atur grid?

Kelas grid mempunyai empat col-lg-1, col-md-1, col-sm-1, col- xs-1 sepadan dengan skrin besar (besar), skrin sederhana (middl), skrin kecil (smll) dan sangat skrin kecil (xs). Antaranya, col bermaksud lajur, tengah ialah singkatan saiz, dan yang terakhir ialah saiz grid yang diperuntukkan oleh div (contohnya ialah ia menduduki 1/12)

Cadangan berkaitan:

tutorial bootstrap

Atas ialah kandungan terperinci Adakah terdapat susun atur grid dalam bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!