apakah rasterisasi bootstrap

Dalam bootstrap, rasterisasi merujuk kepada membahagikan satu baris penyemak imbas kepada 12 lajur, dan kemudian memperuntukkan lebar lajur yang diduduki oleh elemen yang sepadan mengikut keperluan halaman yang dibangunkan, iaitu, membahagikan mengikut saiz daripada Segmen peranti, setiap segmen mempunyai lebar tetap dan reka letak responsif dicapai melalui peratusan dan pertanyaan media.

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

Apakah itu rasterisasi bootstrap

Dalam bootstrap, prinsip rasterisasi adalah untuk membahagikan mengikut saiz peranti, dengan lebar tetap untuk setiap segmen, dan untuk melaksanakan reka letak responsif melalui peratusan dan pertanyaan media ini membolehkan set halaman yang sama menyesuaikan diri dengan peranti dengan resolusi yang berbeza.

Prinsip asas reka letak grid: Grid membahagikan halaman kepada nombor tertentu (diandaikan sebagai n) lajur lebar asas dalam arah mendatar

Kemudian pembangun boleh menambah kandungan pada halaman seperti yang diperlukan Elemen yang sepadan ditetapkan supaya ia harus menduduki m lajur lebar. (m

Pemahaman saya: Rasterisasi adalah untuk membahagikan satu baris penyemak imbas kepada 12 lajur dan memperuntukkan lajur itu sendiri.

Gambaran Keseluruhan Sistem Grid

Sistem Grid (Sistem Grid) ialah gaya reka bentuk yang jelas dan kemas yang menggunakan grid tetap. Sistem grid pertama kali digunakan dalam media cetak Susun atur percetakan dibahagikan kepada beberapa grid, yang sangat mudah untuk penataan huruf.

Kemudian, sistem grid digunakan pada reka letak halaman web Apabila menggunakan sistem grid responsif untuk reka letak halaman, halaman web boleh memaparkan struktur halaman yang berbeza mengikut terminal paparan yang berbeza. Sebagai contoh, beberapa modul akan disusun secara berbeza atau tersembunyi pada peranti skrin kecil.

Penggunaan asas sistem grid Bootstrap.

1. Sistem grid Bootstrap mentakrifkan kelas yang berbeza untuk lebar skrin yang berbeza. Hanya tambahkan nama kelas pada elemen secara langsung.

2. Baris mesti terkandung dalam bekas susun atur supaya ia boleh disusun dengan betul dan berlapik.

3. Sekumpulan lajur boleh dibuat dalam arah mendatar melalui baris dan hanya lajur boleh digunakan sebagai elemen anak langsung bagi baris.

4. Gunakan gaya .baris dan gaya .col-*-* untuk lajur. Apabila lajur lebih besar daripada 12, ia akan disusun dalam lajur lain barisan.

Kes borang maklumat pelajar

Idea pelaksanaan kes:
1. Pertama, anda perlu mencipta elemen p dengan baris nama kelas dalam reka letak bekas sebagai Baris;
2. Kemudian buat lajur di dalam bekas baris. Baris dan lajur dalam bekas susun atur membentuk sistem grid.
3. Baris dan lajur dalam sistem grid adalah serupa dengan baris dan lajur dalam jadual.

1. Tulis kod HTML

    <p>
        </p><p>
            </p><p>姓名</p>
            <p>年龄</p>
            <p>性别</p>
        
        <p>
            </p><p>张三</p>
            <p>25</p>
            <p>男</p>
        
    

2. Tulis gaya CSS

    .row {
        background-color: #eee;
        font-size: 30px;
    }
    .col-md-4 {
        border: 1px solid #fff;
        text-align: center;
    }

Apabila lebar paparan penyemak imbas lebih besar daripada 992px, kesannya adalah seperti berikut:

Apabila lebar penyemak imbas lebih besar daripada 768px, kesannya adalah seperti berikut:

Apabila lebar penyemak imbas kurang daripada 768px, kesannya adalah seperti berikut:

Cadangan berkaitan :tutorial bootstrap

Atas ialah kandungan terperinci apakah rasterisasi bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!