Dalam siaran ini kita akan melihat susun atur tapak Bootstrap untuk mempamerkan keupayaan menakjubkan rangka kerja sumber terbuka ini. Dalam artikel sebelumnya kami telah memasang persekitaran pembangunan dan pemalam yang diperlukan untuk memudahkan kerja kami.
Ingat bahawa sebagai pengurus kandungan Linux Adictos Ia tidak membenarkan saya memasukkan kod contoh yang saya muat naik ke GitHub. Untuk memuat turunnya, anda mesti memasang pakej Git pada pengedaran anda dan kemudian tulis arahan berikut:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Anda perlu menjalankan dua arahan ini secara berkala untuk memuat turun fail baharu.
Menganalisis kod
Sekarang dalam fail explorer buka example2.html dengan VSCodium. (Buka dengan butang kanan) Kami melihat perkara berikut:
- Dalam baris 1 kami memberitahu penyemak imbas jenis dokumen supaya ia tahu cara untuk memaparkannya.
- Baris 2 menunjukkan bahasa tapak yang menunjukkan kepada penyemak imbas cara untuk mewakili aksara tertentu dan kepada enjin carian bahasa kandungan yang memudahkan kedudukan. Dalam kod kami ia ditakrifkan sebagai es tetapi terdapat varian serantau seperti es_ES untuk bahasa Sepanyol dari Sepanyol atau es_AR untuk bahasa Sepanyol dari Argentina.
- Dari baris 3 kami mempunyai bekas metadata yang terletak di antara teg Y . Metadata menyediakan maklumat tentang dokumen. Dalam contoh kami:
- Baris 4 menunjukkan standard yang digunakan untuk pengekodan aksara. Mungkin anda pernah melihat bahawa bukannya aksara beraksen atau simbol khas, tanda tanya di dalam berlian dipaparkan. Ini kerana penyemak imbas menggunakan pengekodan yang tidak betul. Pernyataan pada baris 8 mengelakkan ini dengan mengisytiharkannya secara eksplisit.
- Dalam baris 5 kami memberitahu pelayar bagaimana ia harus menyesuaikan diri dengan format skrin yang berbeza.
- Tajuk yang kami tetapkan dalam baris 6 akan dipaparkan di bar atas pelayar dan dalam enjin carian.
- Pada baris 7 kami memberitahu pelayar di mana untuk mencari elemen rangka kerja Bootstrap yang berkaitan dengan penggayaan.
- Dari baris 10 kontena bermula. Badan termasuk kandungan halaman web dan pautan ke skrip Bootstrap yang akan memberikan interaktiviti kepada tapak kami.
- Baris 13 menunjukkan penghujung dokumen.
Susun atur tapak Bootstrap
Konsep utama untuk susun atur tapak Bootstrap
Seperti yang kami katakan dalam artikel sebelum ini, Bootstrap mengambil pendekatan pertama mudah alih. Apabila pendekatan ini digunakan, reka bentuk dilakukan dengan peranti dengan mengambil kira saiz skrin terkecil, dan kemudian lapisan ditambahkan untuk menyesuaikannya dengan saiz yang berikutnya.
Di sini kita mesti mengambil kira dua konsep utama:
- Titik putus.
- Perundingan media.
Titik putus menunjukkan dari mana lebar skrin susun atur diubah suai., Pertanyaan media menggunakan parameter gaya berdasarkan ciri penyemak imbas dan sistem pengendalian tertentu. Dalam erti kata lain, setiap titik putus akan mempunyai gaya yang sepadan.
Bootstrap dilengkapi dengan enam titik putus yang telah ditetapkan yang boleh diubah suai oleh pengaturcara yang lebih maju. Titik lalai ialah:
- Kecil Tambahan: Tidak mempunyai pengecam pratetap dan digunakan pada skrin kurang daripada 576 piksel lebar.
- Kecil: Ia dikenal pasti dengan sm dan digunakan untuk skrin daripada 576 piksel.
- Sederhana: Ia dikenal pasti dengan md dan digunakan untuk skrin daripada 768 piksel.
- Panjang: Dikenal pasti sebagai lg digunakan untuk skrin daripada 992 piksel.
- Lebih panjang: Ia mempunyai pengecam lg dan menggunakan gaya pada skrin daripada 1200 piksel.
- Lebih panjang: Ditandakan dengan pengecam xxl, ia digunakan untuk menggunakan reka bentuk pada skrin daripada 1400 piksel.
Saiz ini tidak dipilih secara sembarangan sebagai setiap titik putus boleh mengandungi bekas yang lebarnya adalah gandaan 12. Ia juga tidak disasarkan kepada peranti tertentu, sebaliknya menyesuaikan diri dengan kategori peranti dan saiz skrin yang berbeza.
Dalam saiz skrin yang berbeza kami dapati bekas. Mereka bertanggungjawab untuk mengehos, mengisi dan menjajarkan kandungan tapak dalam peranti atau tetingkap grafik tertentu.
;