Web sayfalarıyla çalışmak, kullanmamız gereken dilleri bilmekten çok daha fazlasını gerektirir, istisnai bir sonuca sahip bir ürün geliştirmek için yerine getirmemiz gereken bir dizi dönüm noktası vardır. Bu kilometre taşlarından biri de ekranda görüntülenecek öğelerin tasarımı ve düzenlenmesidir.
Bir web sayfası tasarlamamız gerektiğini düşünelim, sıfırdan başlarsak menünün, tabloların, butonların neye benzemesi gerektiğini, bazı eylem butonlarına yerleştireceğimiz simgeler kadar basit şeyleri vs. hesaba katmalıyız.
Gördüğümüz gibi, bu zor bir iş, özellikle optimal görünmesini ve çekici olmasını istiyorsak, siteye kişisel bir dokunuş vermek için de detaylandırmalıyız, şimdi, ya tasarımcı değilsek? Bu büyük soru, iyi tat ve tasarım söz konusu olduğunda kör bir gözü olan geliştiriciler var ve bu tür profillerin kaliteli web görünümleri yapması engelleniyor. Ya da iyi bir zevkimiz varken tasarlamak için çok az zamanımız varsa?
Bu iki büyük gereksinimi çözmek için Önyükleme ki bir başka bir şey değil CSS çerçevesi Bu, tasarımla uğraşmadan sayfamızın temel özelliklerini bir kerede elde etmemizi sağlar, ancak bunun dışında temel efektler ve sunacağımız içeriği yapılandırmanın çok özel bir yolu ile bize yardımcı olur.
Önyükleme avantajlarıbunu zaten biliyoruz Önyükleme bu bir CSS çerçevesi ve bu, web sitemizin temel özelliklerini belirlememize yardımcı olur, ancak kullanım açısından belirli avantajlarının yanı sıra, bize getirdiği bazı olumlu şeyleri aşağıda göreceğiz. Önyükleme:
1. Yeniden kullanımİle birlikte Önyükleme Web sitemizin çeşitli bölümlerinde değişiklik yapmadan kullanabilmemiz için varsayılan olarak yapılmış birçok bileşenimiz var, böylece kullandığımız kod süresini ve miktarını azaltıyoruz. Bu aynı zamanda uygulamalarımızın modüler gelişimini de destekler.
2. TutarlılıkGenel bir şekilde yapılmış birçok bileşenimiz olduğu gerçeği sayesinde, kod tutarlıdır, yani çok benzer yapıları işler, bu yüzden onu okurken veya uygulamanın bakımını yaparken, nasıl çalıştığını çok daha basit hale getireceğiz.
3. Esnek tasarımMobil tasarım çok önemli ve Önyükleme Bunu baştan hesaba katarsak, sitemizin çeşitli çözünürlüklere ve ekran düzenlerine otomatik olarak uyum sağlama esnekliğine sahibiz, bu da bizi mobil görünümleri sıfırdan tasarlamak zorunda olmaktan kurtarıyor.
4. ToplulukDikkate alınması gereken bir diğer husus da belgelerdir, üçüncü taraf bir çerçeve kullandığımızda, şüphelerimiz olduğunda nereye başvuracağımız çok önemlidir ve bu anlamda Önyükleme Çok fazla çaba harcamadan şüphelerimize hemen hemen her türlü cevabı alabileceğimiz için hiçbir karşılaştırması yoktur.
Bootstrap'in DezavantajlarıHemen hemen her şey iyi olsa da, bunu kullandığımızda karşılaştığımız dezavantajlardan veya çok iyi olmayan yönlerden de bahsetmeliyiz. CSS çerçevesiAşağıda bazı zayıf yönlerini görelim.
1. Küçük orijinalTasarımımızı yapmak için biraz zaman almazsak, kullanırsak biraz orijinal kalabiliriz. Önyükleme daha fazlası olmadan, bu çerçeve bunun için tasarlanmış olsa da, sahip olduğu büyük benimsenme nedeniyle, kopyanın kopyası gibi görünmemek için biraz daha çalışmamız gerekiyor.
2. Öğrenme eğrisiHer şey gibi, bundan en iyi şekilde yararlanmak istiyorsak bir öğrenme eğrisinden geçmeliyiz, sorun şu ki, temel açıdan ileri düzeye geçmek istiyorsak, şok biraz güçlü.
3. Sürümler arasında zayıf uyumlulukBir sürüm değişikliği olduğunda önceki sürüm çok fazla geçerliliğini kaybeder ve güncellemek istersek, özellikle sitemizin farklı görünmesi için önemli değişiklikler yaptıysak bize pahalıya mal olur.
KurulumNe olduğunu bildiğimizde Önyüklemeve projelerimizde kullanmanın avantajları ve dezavantajları, öğreticinin pratik kısmına gelmeliyiz, şimdi bu çerçeveyi nereden alabileceğimizi ve projemize nasıl dahil edebileceğimizi öğreneceğiz.
Önyükleme AlmaYapmamız gereken ilk şey, dahil etmek için gerekli dosyaları elde etmektir. Önyükleme projemizde, bu yüzden getbootstrap.com web sitesini ziyaret etmeli ve gerekli dosyaları indirmeliyiz veya alternatif olarak bir CDN dosyaları sunucumuzda barındırmaktan kaçınmak ve bant genişliğimizin kullanımını azaltmak için.
Seçenek ne olursa olsun, çerçeve sayfasını ziyaret ederken ilk indirme düğmesine tıklarsak aşağıdakine benzer bir sayfada olmamız gerekir:
BÜYÜT
İşi kolaylaştırmak için, projeyi indirdiğimizi varsayalım, kullanabileceğimiz bir konuma çıkarmamız gereken sıkıştırılmış bir dosyada geliyor ve aşağıdakine benzer bir şey olmalı:
Gördüğümüz gibi, projemiz içinde, biri aşağıdakiler için olmak üzere üç klasör olmalıdır. CSS, bir diğeri kullanılan kaynaklar için ve son olarak da JS gerekli. Bununla zaten elimizde mevcut Önyükleme, projeyi kaynaklar klasörümüze kopyalamaktan başka bir şey değildir.
Bootstrap'i kullanmaya başlayınSahip olduğumuz tüm kaynaklara sahip olduğumuz için tasarımımıza dahil etmeliyiz, bunun için bir dosya oluşturabiliriz. HTML ve gerekli eklemeleri yapıyoruz, bunu aşağıdaki kodda daha ayrıntılı olarak görebiliriz:
Bootstrap KurulumuGördüğümüz gibi, yaptığımız tek şey üç dosya, özellikle iki dosya eklemek oldu. .css ve bir .js, tüm yapıyı kullanmaya başlamak için ihtiyacımız olan şey bu, şimdi dosyamızı bir tarayıcı ile açarsak harflerin yazı tipinin normalde bir etiketle gördüğümüzden nasıl farklı olduğunu göreceğiz. H1:
Önyükleme ızgarasıTasarımlarımızın organizasyonunu sağlamak, Önyükleme ızgara kullanın veya Kafes, bu 12 sütundan oluşur, bu yüzden ekranımızda gördüğümüz her şey bu şekilde düzenlenmelidir, bununla sayfanın bize sunulan araçlardan yararlanabileceğimiz şekilde yapılandırılması sağlanır. çok şeffaf bir şekilde.
Tabii ki bu bir adaptasyon süreci, ama önemli olan şu ki, tabloları ile çalışırken olduğu kadar, birkaç grup oluşturan sütunlar da yapabiliriz. HTML span özelliği ile birkaç birleşimli sütunlar oluşturabileceğimizi. Bu yapıyı kullanan bir web sitesi oluşturmak için yalnızca aşağıdakilere sahip olmamız gerekir:
sınıf ile bir div konteyner, bunun içinde sınıfla birlikte bir div sırave son olarak sınıfla birlikte bir veya daha fazla div içinde lahana, aşağıdaki kodda 3 sütunlu bir sayfa örneğini görelim, bunun için her sütunun toplam 12 eklemek için 4'ü gruplaması gerekir, bu bizim açıkladığımız varsayılan değerdir. Önyükleme.
Bootstrap'deki SütunlarBu, aşağıdaki resimde görebileceğimiz gibi, üç dahili div'in tek bir satırda üç eşit sütuna bölünmüş olduğu bir sayfayla sonuçlanır:Önyüklemede sütunların nasıl kullanılacağına ilişkin örnek
Lorem ipsum dolor sit amet, conectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam, in lorem pharetra, ut volutpat magna laoreet'imi kolaylaştırıyor. Yanlış anlama. Lorem ipsum dolor sit amet, conectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Tamsayı aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra kitle. Nam sadece ex, efficitur vel talebi, placerat sit amet purus. cras id semper felis. Ac hendrerit purus olun. Vestibulum congue dui vel maximus convallis. Tamsayı eu eleifend mauris.Lorem ipsum dolor sit amet, conectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam, in lorem pharetra, ut volutpat magna laoreet'imi kolaylaştırıyor. Yanlış anlama. Lorem ipsum dolor sit amet, conectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Tamsayı aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra kitle. Nam sadece ex, efficitur vel talebi, placerat sit amet purus. cras id semper felis. Ac hendrerit purus olun. Vestibulum congue dui vel maximus convallis. Tamsayı eu eleifend mauris.Lorem ipsum dolor sit amet, conectetur adipiscing elit. Morbi hendrerit augue et laoreet aliquam. Aliquam, in lorem pharetra, ut volutpat magna laoreet'imi kolaylaştırıyor. Yanlış anlama. Lorem ipsum dolor sit amet, conectetur adipiscing elit. Vestibulum eu sapien sit amet mauris aliquet elementum. Tamsayı aliquet metus eget orci egestas varius. Fusce suscipit id ex iaculis vulputate. Nullam rhoncus eu nibh vel dignissim. Ut euismod purus vitae elit feugiat imperdiet. Vivamus sed pharetra kitle. Nam sadece ex, efficitur vel talebi, placerat sit amet purus. cras id semper felis. Ac hendrerit purus olun. Vestibulum congue dui vel maximus convallis. Tamsayı eu eleifend mauris.
BÜYÜT
Bu yapı, biraz kare gibi görünse de çok esnektir, çünkü istediğimiz sonuçları elde etmek için yalnızca kaplar ve sütunlarıyla bir tür oyun yapmamız gerekir. Bununla bu öğreticiyi bitiriyoruz, ilk adımlarımızı etkili bir şekilde atmış oluyoruz. Önyükleme ve artık avantajlarından daha doğrudan projelerimizde veya web uygulamalarımızda yararlanmaya başlayabiliriz.
