Dalam posting ini kita akan melihat tata letak situs Bootstrap untuk menampilkan kemampuan luar biasa dari kerangka kerja sumber terbuka ini. Di artikel sebelumnya kami telah menginstal lingkungan pengembangan dan plugin yang diperlukan untuk memfasilitasi pekerjaan kami.
Ingatlah bahwa sebagai pengelola konten Linux Adictos Itu tidak memungkinkan saya memasukkan kode contoh yang saya unggah ke GitHub. Untuk mendownloadnya Anda harus menginstal paket Git pada distribusi Anda dan kemudian menulis perintah berikut:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Anda perlu menjalankan kedua perintah ini secara berkala untuk mengunduh file baru.
Menganalisis kode
Sekarang di file explorer buka example2.html dengan VSCodium. (Buka dengan tombol kanan) Kami melihat yang berikut:
- Pada baris 1 kami memberi tahu browser jenis dokumen sehingga ia tahu cara merendernya.
- Baris 2 menunjukkan bahasa situs yang menunjukkan kepada browser cara merepresentasikan karakter tertentu dan ke mesin pencari bahasa konten yang memfasilitasi penentuan posisi. Dalam kode kami, ini didefinisikan sebagai es tetapi ada varian regional seperti es_ES untuk bahasa Spanyol dari Spanyol atau es_AR untuk bahasa Spanyol dari Argentina.
- Dari baris 3 kami memiliki wadah metadata yang terletak di antara tag kamu . Metadata memberikan informasi tentang dokumen. Dalam contoh kami:
- Baris 4 menunjukkan standar yang digunakan untuk pengkodean karakter. Mungkin Anda pernah melihat bahwa alih-alih karakter beraksen atau simbol khusus, tanda tanya di dalam berlian ditampilkan. Ini karena browser menggunakan penyandian yang tidak tepat. Pernyataan pada baris 8 menghindari hal ini dengan mendeklarasikannya secara eksplisit.
- Pada baris 5, kami memberi tahu browser bagaimana browser harus beradaptasi dengan format layar yang berbeda.
- Judul yang kami atur di baris 6 akan ditampilkan di bilah atas browser dan di mesin pencari.
- Pada baris 7 kami memberi tahu browser tempat menemukan elemen kerangka Bootstrap yang terkait dengan penataan gaya.
- Dari baris 10 kontainer dimulai. Body mencakup konten halaman web dan tautan ke skrip Bootstrap yang akan memberikan interaktivitas ke situs kami.
- Baris 13 menunjukkan akhir dokumen.
Tata letak situs Bootstrap
Konsep kunci untuk tata letak situs Bootstrap
Seperti yang kami katakan di artikel sebelumnya, Bootstrap mengambil pendekatan mobile pertama. Ketika pendekatan ini diterapkan, desain dilakukan dengan perangkat dengan ukuran layar terkecil dalam pikiran, dan kemudian lapisan ditambahkan untuk menyesuaikannya dengan ukuran berikutnya.
Di sini kita harus mempertimbangkan dua konsep kunci:
- Breakpoint.
- Konsultasi media.
Titik henti sementara menunjukkan dari lebar layar mana tata letak diubah., Kueri media menerapkan parameter gaya berdasarkan karakteristik browser dan sistem operasi tertentu. Dengan kata lain, setiap breakpoint akan memiliki gaya yang sesuai.
Bootstrap hadir dengan enam breakpoint yang telah ditentukan sebelumnya yang dapat dimodifikasi oleh programmer yang lebih mahir. Poin defaultnya adalah:
- Ekstra Kecil: Tidak memiliki pengenal prasetel dan berlaku untuk layar dengan lebar kurang dari 576 piksel.
- Kecil: Ini diidentifikasi dengan sm dan digunakan untuk layar dari 576 piksel.
- Medium: Ini diidentifikasi dengan md dan digunakan untuk layar dari 768 piksel.
- Panjang: Diidentifikasi sebagai lg digunakan untuk layar dari 992 piksel.
- Ekstra panjang: Ini memiliki pengidentifikasi lg dan menerapkan gaya ke layar dari 1200 piksel.
- Ekstra ekstra panjang: Ditandai dengan pengenal xxl, digunakan untuk menerapkan desain ke layar dari 1400 piksel.
Ukuran ini tidak dipilih begitu saja karena masing-masing breakpoint dapat berisi container yang lebarnya kelipatan 12. Mereka juga tidak ditargetkan ke perangkat tertentu, tetapi beradaptasi dengan berbagai kategori perangkat dan ukuran layar.
Dalam ukuran layar yang berbeda kami menemukan wadah. Ini bertanggung jawab untuk menghosting, mengisi, dan menyelaraskan konten situs di perangkat atau jendela grafik tertentu.
;