2011'de Twitter, Bootstrap çerçevesini tanıttı. O zamandan beri, bu CSS çerçevesi iki büyük yeniden yazma gördü ve en sonuncusu (Bootstrap 3) 2013'te yayınlandı. Bootstrap 3, çerçeveyi tamamen duyarlı bırakan mobil öncelikli bir yaklaşım uygulayarak CSS kitaplığını dönüştürdü.
2022 itibariyle, Bootstrap beşinci sürümdedir ve en popüler ön uç çerçevelerinden biridir. Kapsamlı bir önceden oluşturulmuş bileşen listesine ve etkileyici bir JavaScript eklentileri koleksiyonuna sahiptir. Bu makalede, Bootstrap'i nasıl kullanacağınızı ve özelliklerinden en iyi şekilde nasıl yararlanacağınızı öğreneceksiniz.
Projenize Bootstrap Kurmak
üç yolu var projenizde Bootstrap kullanın. CSS ve JavaScript dosyalarını indirip barındırabilir, npm kullanarak projenize kurabilir veya uygun cdn bağlantılarını projenize kopyalayıp yapıştırabilirsiniz.
cdn yaklaşımıyla, HTML dosyanızın head etiketinde Bootstrap bağlantısını diğer herhangi bir CSS bağlantısından önce yerleştirmeyi hatırlamanız gerekir.
Bazı Bootstrap bileşenleri, JavaScript ve Popper komut dosyasının içe aktarılmasını gerektiren düğme değiştirme ve konumlandırma gibi işlevsel etkinliklere sahiptir. Bu nedenle, herhangi bir işlevsel bileşen kullanmayı düşünüyorsanız, HTML dosyanıza komut dosyası etiketini de eklemeniz gerekir.
Bootstrap kullanmaya başlamak için ihtiyacınız olan son şey, görüş alanı etiket.
Bootstrap mobil öncelikli bir teknoloji olduğundan, görüş alanı etiket duyarlı tasarıma yardımcı olacaktır. Projenizde bootstrap kullanmanın basit bir yolu, sadece kopyalamaktır. Bootstrap'in başlangıç şablonu.
Bootstrap ile Web Sitesi Oluşturma
Yeni bir web sitesi oluştururken, göz önünde bulundurmanız gereken ilk şeylerden biri düzendir. Bundan sonra, düğmeler ve tipografi gibi diğer bileşenlere geçebilirsiniz.
Bootstrap, bir web sayfasındaki öğeleri düzenlemek için kullanabileceğiniz bir yapısal bileşenler koleksiyonuna sahiptir. Bu yerleşim yapıları şunları içerir:
- Konteynerler
- Kafes
- sütunlar
- oluklar
- kesme noktaları
Bootstrap başlangıç şablonunun biraz değiştirilmiş bir sürümünü kullanarak, web sayfanızın yapısının ana hatlarını çizmeye başlayabilir ve yeni bileşenler ekleyebilirsiniz.
index.html Dosyası
Gerekli meta etiketlerÖnyükleme CSS'si
Önyükleme
Ayrı Popper ve Bootstrap JS
Önyükleme Kapsayıcı Sınıfı
Önyükleme konteyner sınıf pedleri, web sayfanızdaki öğeleri içerir ve hizalar. Bootstrap kullanmayı planlıyorsanız varsayılan ızgara, o zaman Bootstrap's'ı da kullanmanız gerekecek konteyner sınıf. üç türü vardır konteyner sınıflar; konteyner, kap-sıvı, ve kapsayıcı-{kesme noktası}. Kapsayıcı sınıfı, varsayılan kapsayıcıdır; duyarlıdır ve Bootstraps altı kesme noktasının her birinde bir sabit genişliğe sahiptir.
Bootstrap'in altı varsayılan kesme noktası şunları içerir:
- Çok küçük: 576 pikselden az.
- Küçük: 576 pikselden büyük veya eşittir.
- Orta: 768 pikselden büyük veya eşittir.
- Büyük: 992 pikselden büyük veya eşittir.
- X-Large: 1200 piksele eşit veya daha büyük.
- XX-Büyük: 1400 piksele eşit veya daha büyük.
Bootstrap kullanmak için konteyner projenizde, istediğiniz konteyner sınıfını harici sınıfa ekleyebilirsiniz. div web sayfanızda.
Bootstrap Kapsayıcısını Kullanma
web sitesi öğelerini buraya yerleştirin Yukarıdaki kodu mevcut HTML dosyanızın gövdesine eklemek, web sayfanızı duyarlı hale getirecek ve ayrıca web sayfanızın her iki tarafında dolgu oluşturacaktır.
Önyükleme Izgara Sistemi
Bootstrap'in ızgarası, on iki sütunlu bir sistem kullanır. sıra ve sütun grid sınıflarının yanı sıra kapsayıcı sınıfı. Her satırın on iki sütunu vardır ve herhangi bir öğe bu sütunlardan bir veya daha fazlasına yayılabilir. Sütun sınıfı, bir elemanın kaç sütun işgal etmesi gerektiğini gösterir. Örneğin, kullanan bir öğe sütun-2 sınıf, iki sütuna yayılacaktır; sütun-3 sınıf üç sütuna yayılacak ve bu böyle devam edecektir.
Bootstrap ızgara sistemi, flexbox modülünü temel alır. Bir satırı yalnızca iki sütun kaplarsa, alanı kendi aralarında eşit olarak bölerler. bu oluk class, Bootstrap'in yapısal öğelerinden biridir ve içindeki her sütun arasındaki boşluğu kontrol eder. ızgara sistemi. Her biri Kafes sütunun her iki tarafında 12 piksel dolgu vardır.
Bootstrap'in Izgara Sistemini Kullanma
bir web sayfasındaki ana içerik
Madde
Lorem ipsum, dolor sit amet conectetur adipisicing elit. Dolorem porro olmayan quae
obcaecati illo Laboriosam a, voluptate molestias eum velit, ayırt edici impedit
rasgele yüz numquam, optio eligendi delectus cumque quos.
Yukarıdaki kodu div kabına eklemek, üç satır ve iki sütundan oluşan bir Bootstrap ızgara sistemi oluşturacaktır. En üstteki ilk satır gezinme çubuğunu, alttaki üçüncü satır web sitesinin alt bilgisini ve ortadaki ikinci satır web sayfasının içeriğini tutacaktır. İkinci satırda iki sütun vardır - ana makale ve bir kenar.
Yerel bir CSS dosyası oluşturmak ve ızgaranın her bölümüne bir kenarlık eklemek, onu daha net görmenizi sağlayacaktır.
style.css Dosyası
.sıra{
kenarlık: 2px mavi düz;
}
.col, .col-sm-4{
kenarlık: 2px kırmızı düz;
}
Yukarıdaki CSS dosyasına bağlanmak, tarayıcınızda aşağıdaki çıktıyı oluşturacaktır:
Yukarıdaki resimdeki bariz bir fark, sütunların boyutudur. Genellikle, aksini açıkça belirtmediğiniz sürece, arka arkaya iki (veya daha fazla) sütun aynı miktarda yer kaplar. bu col-sm-4 Yukarıdaki HTML kodundaki class, ikinci sütunun satırdaki on iki sütundan yalnızca dördünü kapsamasını sağlar. bu sm içinde col-sm-4 class küçük kesme noktasını temsil eder, bu nedenle kenar bölümü, küçük kesme noktasından ve yukarısından yalnızca dört sütunu kaplar.
Önyükleme Bileşenleri
Web sayfanızın düzenine karar verdikten sonraki adım, Bootstrap'in bileşen dediği web sitesi oluşturma öğelerini eklemektir. Bootstrap'in bileşen listesi şunları içerir:
- gezinme çubuğu
- Düğmeler
- Düğme grubu
- Liste grubu
- kartlar
- Çöküş
- açılır menüler
Bootstrap Navbar Sınıfı
Her Bootstrap gezinme çubuğu şunları gerektirir: gezinme çubuğu sınıf. Ayrıca kullanımını gerektirirler. veya Bootstrap'a "gezinme" anahtar sözcüğünü atamak rol gezinme çubuğunun ebeveynindeki nitelik div. Gezinme çubuğunu duyarlı hale getirmek için kullanmanız gerekir. JavaScript eklentisini daralt.
Önyükleme gezinme çubuğu sınıf kullanır arya akımı geçerli sayfayı belirtmek için "sayfa" değerini veya bir web sayfasının geçerli bölümünü belirtmek için "true" değerini alan özellik. Atadığınız değer, web sitenizin yapısına (tek sayfa veya birden çok sayfa) bağlı olacaktır. Şunu da kullanmalısınız: aktif sınıf Geçerli sayfayı veya bölümü belirtmek için
Bootstrap Navbar'ını Kullanma
Navigasyonu değiştirme sıra Bootstrap'ın Kafes yukarıdaki kod ile tarayıcınızda aşağıdaki çıktıyı oluşturacaktır:
Yukarıdaki kodda, aşağıdakiler gibi birkaç önemli sınıf ve Bootstrap özniteliği vardır. navbar-marka logo bölümünü hedefleyen sınıf gezinme çubuğu. bu gezinme çubuğu sayesinde tamamen duyarlıdır. JavaScript eklentisini daralt.
Duyarlı Gezinme Çubuğu
Bootstrap'in altı varsayılanı olduğunu hatırlayabilirsiniz. kesme noktaları ve bu kesme noktalarından biri büyüktür (lg). bu gezinme çubuğu-genişlet-lg sınıfta yukarıdaki, büyük kesme noktasındaki ve üstündeki yatay gezinme öğeleri listesine genişler ve bu liste, büyük kesme noktasındaki herhangi bir kesme noktasında bir düğmeye döner.
Duyarlı web siteleri oluşturma hakkında daha fazla bilgi edinmek istiyorsanız, özetleyen bir parçayı bir araya getirdik. bunun HTML ve CSS'deki medya sorgularıyla nasıl yapılacağı.
Önyükleme Düğmesi Bileşeni
Önyükleme buton bileşen kullanır ve ayarlamanızı gerektirir tip "düğme" özelliği.
Bootstrap'in çeşitli düğmeleri vardır. Daha geleneksel düğmeyi oluşturmak için btn sınıf, ancak yukarıdaki koddaki gibi bir hamburger düğmesi oluşturmak için gezinme çubuğu sınıf.
Bootstrap'ı Ne Zaman Kullanmalısınız?
Bootstrap, öncü olduğu için daha popüler CSS çerçevelerinden biri olarak bilinir. Duyarlı tasarım, yazılım geliştirmede çok yaygın hale gelmeden çok önce, Bootstrap kendisini tamamen duyarlı bir çerçeveye dönüştürdü.
Yıllar içinde, Bootstrap ilerlemeye ve gelişmeye devam etti ve onu Twitter ve Spotify gibi en iyi şirketler için bir numaralı tercih haline getirdi. Ancak, yazılım geliştirme ihtiyaçlarınız için her zaman en iyi seçenek olmayacaktır. Örneğin, bir React uygulaması oluşturuyorsanız, React uygulamaları için özelleştirilmiş MUI adlı bir tasarım sistemi vardır.
Material-UI yeni bir isme sahip ve Material Design'a alternatif yeni bir tasarım sistemi oluşturmayı hedefliyor. MUI'yi ReactJS projelerinde nasıl kullanabileceğiniz aşağıda açıklanmıştır.
Sonrakini Oku
- Programlama
- heyecan
- Kodlama İpuçları
- Programlama
- Programlama Araçları
Kadeisha Kean, Full-Stack Yazılım Geliştirici ve Teknik/Teknoloji Yazarıdır. En karmaşık teknolojik kavramların bazılarını basitleştirme konusunda belirgin bir yeteneğe sahiptir; herhangi bir teknoloji acemi tarafından kolayca anlaşılabilecek malzeme üretmek. Yazmak, ilginç yazılımlar geliştirmek ve dünyayı gezmek (belgeseller aracılığıyla) konusunda tutkulu.
Haber bültenimize abone ol
Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!
Abone olmak için buraya tıklayın