Bootstrap 3 ile Birden Çok Duyarlı Sütun Nasıl Oluşturulur
Yayınlanan: 2022-02-16
Bootstrap ile web sitenizin yanıt verme hızını artırmak ister misiniz? Bootstrap'in en önemli yönü, 12 sütunlu mobil ilk ızgara sistemidir. Duyarlı bir düzen oluşturmak için kullandığınız şey budur.
Bu video eğitiminde, Bootstrap kullanarak temel bir web sitesi oluşturacak ve birden çok sütunlu duyarlı bir düzen oluşturmak için Bootstrap ızgara sistemini nasıl kullanacağınızı öğreneceksiniz.
Eğitimi İzlemeden Önce
Aşağıdaki eğitim videosunu izlemeden ve kendi duyarlı sütunlarınızı nasıl oluşturacağınızı öğrenmeden önce şunlara ihtiyacınız olacak:
- Bootstrap'in ne olduğuna dair temel anlayış
- Bootstrap ızgara sisteminin ne olduğuna dair temel anlayış
- Bootstrap'i sabit sürücünüze indirin
- Üzerine inşa edilecek temel bir Bootstrap index.html dosyası oluşturun
Önyükleme Nedir?
- Bootstrap, web sitesi duyarlılığı üzerinde çalışan HTML, CSS ve JavaScript geliştiricileri için bir çerçevedir.
- Sütunlar, listeler, gezinme, web formları ve diğer birçok web öğesi için önceden oluşturulmuş duyarlı CSS stilinden oluşur.
Önyükleme Izgara Sistemini Anlama
- Önyükleme ızgara sistemi, ekran boyutlarını dört türe ayırır: Çok küçük, Küçük, Orta ve Büyük.
- Ekstra küçük cep telefonları içindir. Küçük, I-Pad gibi tabletler içindir. Orta, masaüstü monitörler içindir. Ve Büyük, yalnızca daha büyük masaüstü monitörleri içindir.
- Bootstrap, bu dört ekran türü için yanıt hızında ince ayar yapmanıza yardımcı olmak için web görüntüleme cihazlarının genişliğini 12 sütunlu ızgara sistemine böler.
- Bu dört Bootstrap Grid türünden her biri, yalnızca ona kendi CSS sınıfını atarsanız duyarlı hale gelir.
- Örneğin, bir div'i ekstra küçük cihazlara duyarlı hale getirmek için, div'in <div class="col-xs-6"> gibi kendi Bootstrap .col-xs-<number_of_columns_to_take> sınıfı olması gerekir.
Bootstrap'i İndirme
- getboostrap.com'a gidin ve "Bootstrap İndir" düğmesini tıklayın:
- "Başlarken" sayfasını göreceksiniz. "Önyükleme İndir" düğmesine tıklayın:
- Bu dosyayı bilgisayarınızın sabit diskine istediğiniz yere kaydedin. Bir web sunucusuna kaydedilmesi gerekmez.
- Bu dosyayı açın ve çıkarılan klasörü "bootstrap" olarak yeniden adlandırın.
Temel Bootstrap index.html Sayfanızı Hazırlama
Aşama 1. Bootstrap index.html Dosyanızı Oluşturun
- "Başlarken" (http://getbootstrap.com/getting-started/#download) sayfasına geri dönün ve sağ kenar çubuğundaki "Temel Şablon" bağlantısını tıklayın:
- "Temel şablon" kodunu göreceksiniz. Kodu kopyalamak için "Kopyala" düğmesine tıklayın:
- "Temel Şablon" kodunu metin düzenleyicinize yapıştırın ve index.html olarak "bootstrap" klasörünü kaydettiğiniz klasöre kaydedin. Artık Bootstrap sitenizin ön sayfanız olacak.
- Yeni oluşturulan index.html dosyasını açın ve temel Bootstrap web sitenize bir göz atın:
- index.html dosyasını metin düzenleyicinizde açın ve <body> ve <h1> açılış etiketleri arasına <div class="container"> (1) ekleyin. Kapanış </h1> etiketinden (2) sonra bu yeni div'i kapatın ve dosyayı kaydedin:
- Sayfanın ön ucunu kontrol edin ve "Merhaba Dünya!" artık sayfanın kenarına yapışmıyor ve biraz daha düzenli görünmesi için biraz sağa kaydırıldı. Bootstrap'in bu div'e atadığınız "container" sınıfı, bu metne bir miktar kenar boşluğu ekledi:
- index.html dosyanıza geri dönün. <h1> ve </h1> etiketleri arasında "Merhaba Dünya!" "Trusthub" a. Dosyayı kaydedin ve sitenizin ön ucunu kontrol edin.
Adım 2. Biraz İçerik ve Kenar Çubuğu Ekleyin
- index.html dosyanıza geri dönün ve <h1>Trustub</h1> kodunun altına aşağıdaki kodu kopyalayın:
<div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> </div>- Sitenizin ön ucuna geri dönün. Yenileyin. Artık içeriğinizi ve "Ekibimiz" kenar çubuğunu henüz sütunlu duyarlı düzen olmadan görmelisiniz:
- getbootstrap.com web sitesine geri dönün ve üst menüde "CSS" düğmesini tıklayın:
- Kenar çubuğunda "Izgara Sistemi" düğmesine tıklayın:
- Sayfayı "Izgara seçenekleri" bölümüne (1) kaydırın ve dört ekran boyutu türü, genişliği ve belirlenmiş CSS sınıfı önekleri (2) ile Bootstrap 12 sütunlu ızgara sistemini not edin:
- Bootstrap ızgara sistemi seçenekleri henüz sizin için bir anlam ifade etmiyorsa endişelenmeyin. Sitenizde bunların etrafında oynamaya başladığınızda hepsi bir saniyede sizin için bir araya gelecek.
- index.html dosyanızı bir kez daha açın ve <div class="row"> altında, mevcut <div> için "col-md-9" sınıfını girin. Yeni div'iniz şimdi "div class="col-md-9"> şeklinde görünmelidir:
- Şimdi <h2> "Out Team" başlığının hemen üzerinde bulunan div'inize gidin ve ona "col-md-3" Bootstrap grid CSS sınıfını verin. Dosya 'yı kaydet:
- Bu değişikliği çalışırken görmek için sitenize geri dönün. Web sitenizi yenilemek için klavyenizdeki F5 tuşuna basın. Artık içerik alanınızın ve kenar çubuğunun yan yana oturduğunu göreceksiniz.
- İçerik div'iniz şimdi Bootstrap ızgarasındaki 12 sütunun 9'unu kaplıyor (tüm masaüstü ekran genişliğinin %75'i). Ve kenar çubuğunuz, Bootstrap ızgarasının 12 sütununun 3'ünü alır (tüm masaüstü ekran genişliğinin %25'i):
Muhteşem! Artık aşağıdaki eğitim videosunu takip etmeye hazırsınız. Başlayalım.
Tebrikler! Bootstrap kullanarak birden çok sütunlu duyarlı web sayfası düzeni oluşturmayı öğrendiniz. Bootstrap hakkında daha fazla bilgi edinmek ister misiniz? Cevabınız evet ise, lütfen OSTraining YouTube kanalımızı ziyaret edin ve "Bootstrap Framework Eğitimlerini" izleyin.