Rumah >hujung hadapan web >Tutorial Bootstrap >Apakah prinsip rasterisasi bootstrap?
Dalam bootstrap, prinsip rasterisasi adalah untuk membahagikan mengikut saiz peranti, dengan lebar tetap untuk setiap segmen, dan reka letak responsif melalui peratusan dan pertanyaan media ini membolehkan set halaman yang sama; menyesuaikan diri dengan peralatan kadar resolusi yang berbeza.
Persekitaran pengendalian tutorial ini: sistem Windows 10, bootstrap versi 3.3.7, komputer DELL G3
Bootstrap menggunakan sistem grid 12 lajur, yang dibahagikan mengikut saiz peranti arus perdana Lebar setiap segmen adalah tetap, dan reka letak responsif dilaksanakan melalui peratusan dan pertanyaan media.
Jika ini kali pertama anda bersentuhan dengan bootstrap, anda pasti akan kagum dengan reka letak gridnya. Ia memberikan kami satu set penyelesaian reka letak responsif.
Ringkasnya:
1. Bootstrap mempunyai set terbina dalam grid cecair responsif yang mengutamakan mudah alih . Sistem grid, apabila saiz peranti skrin atau viewport (port pandang) meningkat, sistem akan terbahagi kepada sehingga 12 lajur secara automatik.
2. Prinsip pelaksanaan sistem grid adalah sangat mudah, hanya dengan menentukan saiz bekas, bahagikannya kepada 12 bahagian yang sama (ia juga boleh dibahagikan kepada 24 atau 32 bahagian, tetapi 12 bahagian adalah yang paling biasa), dan kemudian Laraskan jidar dalam dan luar, dan akhirnya menggabungkannya dengan 媒体查询 untuk mencipta 强大的响应式网格系统. Sistem grid dalam rangka kerja Bootstrap membahagikan bekas kepada 12 bahagian yang sama.
Dalam sistem raster, kami menggunakan pertanyaan media berikut dalam fail Kurang untuk mencipta ambang titik putus utama.
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }
Kami juga kadangkala memasukkan lebar maksimum dalam kod pertanyaan media untuk mengehadkan kesan CSS kepada julat saiz skrin yang lebih kecil.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
Cadangan berkaitan: tutorial bootstrap
Atas ialah kandungan terperinci Apakah prinsip rasterisasi bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!