Bu yazımızda Bootstrap ile bir site yaparak başlayacağız., onu duyarlı hale getirmemizi ve ona biraz etkileşim sağlamamızı kolaylaştıran açık kaynak çerçevesi. Daha önce önerdiğimiz ve değiştirmek zorunda kalacağımız bir geliştirme ortamı eklentisi tarafından otomatik olarak oluşturulan temel bir şablondur.
In önceki haber VS Codium'u kurma, kullanıcı arayüzünü İspanyolca'ya çevirme ve Bootstrap eklentisini kurma talimatlarını bulacaksınız.
Akılda tutulması gereken iki şey:
- Kullandığımız komutlar klavye kısayollarıdır, bunları yazmanız gerekir. Kopyala/yapıştır çalışmıyor.
- İçerik yöneticimiz HTML kodunu görüntülememe izin vermiyor, bu yüzden ekran görüntülerini kullanmam gerekiyor. Yüklediğim örneklerin kodlarına erişebilmeniz için GitHub'a.
GitHub deposu nasıl klonlanır
Büyükleri geri kalanlarımızdan ayıran şey, sorunlara tepki verme biçimleridir. Richard Stallman yazıcı sürücüsünü beğenmedi ve değiştirmesine izin vermedikleri için özgür yazılım hareketini başlattı. Linus Torvalds herhangi bir kod paylaşım platformu tarafından ikna olmadı ve kendi platformunu yarattı. git.
İzin verilen tek kullanıcı etkileşiminin indirme olduğu geleneksel yazılım dağıtım sistemlerinden farklı olarak, Git ile projenin zaman içindeki gelişimini takip edebilirsiniz. Diğer insanlar depoyu klonlayabilir, değişiklikler yapabilir ve orijinal projenin geliştiricilerinin bunları dahil etmesini önerebilir. Kabul edilirse geliştiriciler, dosyaları indirip yeniden yüklemek zorunda kalmadan bunu kolayca yapabilir.
Git'e dayalı birkaç servis var, GitHub'ı seçtim sadece VS Codium ile entegre olduğu için.
Örnek dosyaları bilgisayarınıza indirmek için dağıtımınızın terminaldeki paketleri kurma talimatlarını izleyerek git paketini kurmanız yeterlidir.
Ardından aşağıdaki komutları yazıyorsunuz.
Dosyaları Belgeler klasörüne kaydetmeyi tercih ediyorum, bu yüzden dizini ile değiştiriyorum.
cd Documentos
Sonra dosyaları şununla klonlarım:
git clone https://github.com/dggonzalez1971/bootstrap.git
Kalan makalelerin her birinde size bu adımları hatırlatacağım, çünkü bu şekilde örnek dosyaları yüklendikçe güncellemiş olacaksınız.
Dosyaları görmek için dosya gezginini açmanız ve klasörü aramanız yeterlidir. önyükleme.
Bootstrap ile site yapmak
Kodu manuel olarak yazmayı tercih ederseniz, siteyi kaydedeceğimiz bir klasör oluşturarak başlıyoruz. İstediğiniz ismi koyabilirsiniz.
Ardından aşağıdaki adımları takip ediyoruz:
- Menüye gidelim Arşiv.
- Tıklamak Yeni Metin Dosyası.
- Tıklamak Kaydedin.
- Oluşturduğumuz klasörü arıyoruz ve dosyanın adını koyuyoruz örnek1.html.
- Tıklamak Kaydedin.
Bazen Dosya Gezgini penceresi VSCodium tarafından gizlenebilir.
Uzantının bizim için temel şablonu oluşturmasını sağlayalım. Bunun için yazıyoruz !b5-$
Bu, örnekler klasöründe bulacağınız kodu example1.html olarak üretecektir.
Aşağıdakileri göreceğiz:
Bu, Bootstrap uzantısı tarafından oluşturulan koddur.
Bu dosyada bazı değişiklikler yapacağız. Değişiklikleri example2.html adı altında bulacaksınız.
- 2. satırda eng'i es ile değiştirerek dili değiştiriyoruz. Bu, arama motorlarına sitenin dilinin İspanyolca olduğunu gösterir.
- 6. satırda etiketlerin altındaki metni değiştiriyoruz başlık. Koyduk İlk Bootstrap sitem.
- 12. satırda, etiketler arasındaki içeriği değiştiriyoruz h1 tarafından Bootstrap ile yapılmış bir sitedir.
Ardından, bazı önemli değişiklikler yapacağız. Bu değişiklikler şunlarla ilgilidir:
- Eklenti geliştiricisi Bootstrap sürümlerine ayak uyduramıyor ve daha güncel olanları var.
- Önyükleme bileşenleri için birçok seçenek var ve bir başkasıyla ilgileniyorum.
- Resmi belgelere göre, Javascript kitaplıklarına yapılan çağrılar gövde etiketlerinin içinde olmalıdır.
Örnek 2, numaralandırma uyumluluğunu korumak için 7. satırın içeriğini değiştirir, 8. ve 9. satırları siler ve kalan içeriği yükleriz. Daha sonra yeni bir satır 10 oluşturmak için 11. satırın sonuna tıklıyoruz ve bağlantıyı Javascript kitaplıklarına koyuyoruz.
Kodu anlamadıysanız endişelenmeyin. Bir sonraki makalede her satırın işlevini açıklayacağım.