Apakah bootstrap responsif

Dalam bootstrap, responsif bermakna halaman yang sama mempunyai reka letak yang berbeza di bawah saiz skrin yang berbeza dan boleh serasi dengan peranti dengan resolusi yang berbeza membolehkan pengguna menyemak imbas tapak web melalui peranti pelbagai saiz kesan boleh dicapai dengan menggunakan sistem grid dan membahagikan satu baris kepada 12 grid.

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

Apakah itu responsif bootstrap

Susun atur Gaya Responsif merujuk kepada halaman yang sama yang mempunyai susun atur berbeza di bawah saiz skrin yang berbeza, yang boleh serasi dengan peranti resolusi berbeza

Kaedah pembangunan tradisional adalah untuk membangunkan satu set untuk PC dan satu set lain untuk telefon bimbit, dan penggunaan Ia cukup untuk membangunkan susun atur responsif Kelemahannya ialah CSS agak berat.

Pelaksanaan: Bergantung pada sistem grid, satu baris dibahagikan sama rata kepada 12 grid dan anda boleh menentukan bilangan grid yang diduduki oleh elemen

Apakah itu reka bentuk web responsif

Reka bentuk Web Responsif ialah kaedah yang membolehkan pengguna memperoleh kesan visual yang baik apabila menyemak imbas tapak web pada peranti pelbagai saiz. Sebagai contoh, anda mula-mula melayari laman web pada monitor komputer dan kemudian pada telefon pintar Saiz skrin telefon pintar adalah jauh lebih kecil daripada monitor komputer, tetapi anda tidak merasakan apa-apa perbezaan pengalaman pengguna kedua-duanya . Ini menunjukkan bahawa tapak web berfungsi dengan baik pada reka bentuk responsif.

Kami telah melaksanakan responsif ke dalam contoh susun atur cecair kami dan menjemput anda menyemak imbasnya pada saiz skrin yang berbeza. Anda boleh mengubah saiz penyemak imbas anda dengan sambungan Ubah Saiz Tetingkap untuk Chrome atau FireFox.

Cara reka bentuk web responsif berfungsi

Untuk menggunakan reka bentuk web responsif, anda perlu mencipta CSS yang mengandungi gaya yang menyesuaikan diri dengan pelbagai saiz peranti. Setelah halaman dimuatkan pada peranti tertentu menggunakan pelbagai fon dan teknik pembangunan web seperti pertanyaan media, saiz port pandangan peranti mula-mula dikesan dan gaya khusus peranti dimuatkan.

Kaji secara mendalam CSS reka bentuk web responsif

Kami akan belajar cara melaksanakan "reka bentuk responsif" melalui kajian 'bootstrap-responsive.css' Different. Sebelum ini, anda mesti menambah baris kod berikut pada kawasan kepala halaman web:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Teg meta port pandangan mengatasi port pandangan lalai dan membantu memuatkan gaya berkaitan port pandangan.

atribut lebar menetapkan lebar skrin. Ia mengandungi nilai seperti 320 untuk 320 piksel, atau 'lebar peranti' untuk memberitahu penyemak imbas menggunakan resolusi asli.

Harta skala awal ialah skala awal port pandangan. Apabila ditetapkan kepada 1.0, lebar asli peranti akan dipaparkan.

Sudah tentu, anda perlu menambah CSS responsif Bootstrap, seperti ini:

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Sekarang, jika anda mencari fail CSS responsif, anda akan dapati itu, di sebalik beberapa pengisytiharan awam (dari baris nombor 10 hingga 22), terdapat pelbagai medan bermula dengan '@media'. Beginilah cara menulis gaya yang berfungsi merentas pelbagai peranti.

Kawasan pertama bermula dengan '@media (lebar maksimum: 480px)' dan digayakan untuk peranti dengan lebar maksimum 480px.

Kawasan kedua bermula dengan '@media (max-width: 767px)' dan menetapkan gaya untuk peranti dengan lebar maksimum 767px.

Kawasan ketiga bermula dengan '@media (lebar min: 768px) dan (lebar maksimum: 979px)' dan menetapkan gaya untuk peranti dengan lebar minimum 768 piksel dan lebar maksimum 979 piksel.

Kawasan seterusnya adalah penggayaan untuk peranti dengan lebar maksimum 979 piksel. Jadi ia bermula dengan '@media (max-width: 979px)'.

Dua kawasan terakhir bermula dengan '@media (lebar min: 980px)' dan '@media (lebar min: 1200px)' masing-masing adalah untuk menetapkan gaya untuk peranti dengan lebar minimum daripada 980 piksel , yang terakhir adalah untuk menetapkan gaya untuk peranti dengan lebar minimum 1200 piksel.

Jadi, fungsi asas helaian gaya ini adalah untuk menentukan gaya yang akan digunakan berdasarkan lebar maksimum dan minimum peranti dengan menggunakan atribut 'lebar min' dan 'lebar maksimum'.

Cadangan berkaitan: tutorial bootstrap

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