Bu yazıda bir Bootstrap sitesinin düzenini göreceğiz bu açık kaynak çerçevesinin inanılmaz yeteneklerini sergilemek için. İçinde önceki makaleler işimizi kolaylaştırmak için bir geliştirme ortamı ve gerekli eklentileri kurduk.
İçerik yöneticisi olarak şunu unutmayın: Linux Adictos GitHub'a yüklediğim örneklerin kodunu eklememe izin vermiyor. Bunları indirmek için Git paketini dağıtımınıza kurmanız ve ardından aşağıdaki komutları yazmanız gerekir:
cd Documentos
git clone https://github.com/dggonzalez1971/bootstrap.git
Yeni dosyaları indirmek için bu iki komutu periyodik olarak çalıştırmanız gerekecektir.
Kodu analiz etme
Şimdi dosya gezgininde example2.html'yi VSCodium ile açın. (Sağ tuşla aç) Aşağıdakileri görüyoruz:
- 1. satırda tarayıcıya belgenin türünü söyleriz, böylece nasıl oluşturulacağını bilir.
- Satır 2, tarayıcıya belirli karakterlerin nasıl temsil edileceğini ve içeriğin dilini arama motorlarına bildiren sitenin dilini gösterir, bu da konumlandırmayı kolaylaştırır. Kodumuzda es olarak tanımlanmış ancak İspanya'dan İspanyolca için es_ES veya Arjantin'den İspanyolca için es_AR gibi bölgesel değişkenler var.
- 3. satırdan itibaren, etiketler arasına yerleştirilmiş bir meta veri kapsayıcımız var. Y . Meta veriler, belge hakkında bilgi sağlar. Örneğimizde:
- Satır 4, karakter kodlaması için kullanılan standardı gösterir. Belki zaman zaman aksanlı karakterler veya özel semboller yerine bir elmasın içinde bir soru işaretinin görüntülendiğini görmüşsünüzdür. Bunun nedeni, tarayıcının uygunsuz kodlama kullanmasıdır. 8. satırdaki ifade, bunu açıkça bildirerek bundan kaçınır.
- 5. satırda tarayıcıya farklı ekran biçimlerine nasıl uyum sağlaması gerektiğini anlatıyoruz.
- 6. satırda belirlediğimiz başlık, tarayıcının üst çubuğunda ve arama motorlarında görüntülenecektir.
- 7. satırda, tarayıcıya stil ile ilgili Bootstrap çerçeve öğelerini nerede bulacağını söylüyoruz.
- 10. satırdan konteyner başlar. Body, web sayfasının içeriğini ve sitemize etkileşim sağlayacak Bootstrap betiklerinin bağlantısını içerir.
- 13. satır belgenin sonunu gösterir.
Bootstrap sitesinin düzeni
Bir Bootstrap sitesinin düzeni için temel kavramlar
Daha önceki yazılarımızda da söylediğimiz gibi, Bootstrap, mobil ilk yaklaşımı benimser. Bu yaklaşım uygulandığında, cihaz en küçük ekran boyutu düşünülerek tasarım yapılır ve ardından sonraki boyutlara uyarlamak için katmanlar eklenir.
Burada iki anahtar kavramı dikkate almalıyız:
- Kesme noktaları.
- Medya danışmanlığı.
Kesme noktaları, düzenin hangi ekran genişliğinden değiştirildiğini gösterir., Medya sorguları, belirli tarayıcı ve işletim sistemi özelliklerine göre stil parametreleri uygular. Başka bir deyişle, her kesme noktasının karşılık gelen bir stili olacaktır.
Bootstrap, daha gelişmiş programcılar tarafından değiştirilebilen önceden tanımlanmış altı kesme noktasıyla birlikte gelir. Varsayılan noktalar şunlardır:
- Ekstra Küçük: Ön ayar tanımlayıcısı yoktur ve 576 pikselden daha küçük ekranlar için geçerlidir.
- Küçük: sm ile tanımlanır ve 576 pikselden itibaren ekranlar için kullanılır.
- Medium: md ile tanımlanır ve 768 pikselden itibaren olan ekranlar için kullanılır.
- Uzunluk: lg olarak tanımlanan, 992 pikselden ekranlar için kullanılır.
- Ekstra uzun: lg tanımlayıcısına sahiptir ve stilleri 1200 pikselden itibaren ekranlara uygular.
- Ekstra ekstra uzun: xxl tanımlayıcısı ile işaretlenmiştir, tasarımı 1400 pikselden itibaren ekranlara uygulamak için kullanılır.
Bu boyutlar rastgele seçilmedi kesme noktalarının her biri, genişlikleri 12'nin katları olan kaplar içerebilir. Ayrıca belirli bir cihazı hedef almazlar, bunun yerine farklı cihaz kategorilerine ve ekran boyutlarına uyarlanırlar.
Farklı ekran boyutları içinde kapları buluyoruz. Bunlar, site içeriğinin belirli bir cihaz veya grafik penceresinde barındırılması, doldurulması ve hizalanmasından sorumludur.
;