Bootstrap Bileşenleri
Başlangıçta Twitter Blueprint olarak adlandırılan bu, Twitter’da Mark Otto ve Jacob Thronton tarafından geliştirildi. Bootstrap , web sayfalarına duyarlılık kazandıran ücretsiz bir CSS çerçevesidir. Duyarlılık, farklı DOM öğelerinin, geleneksel olarak piksel veya yüzde boyutlandırma CSS yöntemlerinde olacağı gibi, web sayfasının şıklığından ödün vermeden ekran boyutundaki değişikliğe göre kendilerini yeniden boyutlandırması anlamına gelir.
Satırları ve sütunları tanımlayarak bir CSS Izgarası düzenine sahip olacak şekilde tasarlandığı için buna “mobil öncelikli CSS çerçevesi” de denir. Bu çerçeve ayrıca CSS sınıfları ile birlikte JavaScript bileşenlerine de sahiptir. Bu çerçeveyi kullanmak için, diğer Bootstrap CSS dosyalarıyla birlikte jQuery ve JavaScript Framework for Bootstrap’ı zorunlu olarak bağlamanız gerekir . Bu CSS dosyaları, CDN’ler (İçerik Dağıtım Ağı) biçiminde olduğu gibi indirilebilir.
Farklı Önyükleme Bileşenleri
Bootstrap, bir web sayfasında gezinme çubukları, açılır pencereler, açılır menüler, simgeler, düğmeler, önceden tasarlanmış formlar ve ayrıca farklı DOM öğeleri için boyutlandırma seçenekleri gibi iyi bir kullanıcı deneyimi ve kullanıcı etkileşimleri sağlamak için yeniden kullanılabilen onlarca bileşenle birlikte gelir. .
1) Glyphicons – Bunlar, Bootstrap’ta bulunan yazı tipi biçimli simgelerdir. Sayıları yaklaşık 200’dür. Bu glifonlar https://glyphicons.com adresinde bulunabilir.
Bu nasıl kullanılır?
Yakınlaştırma, düzenleme, uyarı, dosya, silme vb. gibi hemen hemen tüm eylemleri gösteren glifler vardır ve bunlar ayrı bir sınıfta tanımlanır. Bu nedenle, ideal olarak bir yayılma öğesinde temel sınıfı ve bireysel sınıfı kullanmanız ve bu glifonları kullanmanız gerekir.
Sözdizimi:
<p><span class = “glyphicons glyphicon-pencil”></span></p>
2) Açılır Menüler – Bunlar, bir bağlantı listesini listeleyen geçiş tabanlı menülerdir. Bunlar JS eklentisi tarafından daha dinamik hale getirilmiştir ve http://getbootstrap/javascript/#dropdowns adresinde bulunabilir.
Bu nasıl kullanılır?
Öğenin sınıfı, altında .dropdown-menü sınıfıyla birlikte liste öğelerine sahip olduğundan .dropdown sınıfını kullanmanız gerekir.
Sözdizimi:
<div class= “dropdown”><!-- have your list in this with the class .dropdown-menu --></div>
3) Düğme grupları – Bu Bootstrap bileşeniyle, bir dizi düğmeyi birbirine bitişik olarak gruplayabilirsiniz.
Bu nasıl kullanılır?
Bölme öğelerini .btn-group sınıfıyla tanımlayın ve bu öğeleri .btn sınıfıyla bir düğmeyle yuvalayın.
<div class=“btn-group”><button class= “btn”>Correct</button></div>
<div class=“btn-group”><button class= “btn”>Wrong</button></div>
4) Düğme açılır listeleri – Bu bileşen, bir açılır listeyi tetiklemek için bir düğme öğesi kullanmak için kullanılır.
Sözdizimi: <button class = “btn-default dropdown-toggle”><!—Write the dropdown component here --></button>
5) Giriş grupları – Bu, form-kontrol sınıfını genişletir ve bir giriş öğesinin giriş alanının her iki tarafına metin veya düğmeler ekler. Bu girdi gruplarını kullanmak için bir .input-group-addon sınıfı ile bir .input-group-addon sınıfı kullanmanız gerekir.
Sözdizimi: <div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
6) Navbar – Bu bileşenler, web siteniz için gezinme başlıkları görevi görür. Daha küçük ekran boyutlarına sahip cihazlarda bir geçişli hamburger menüsü ile dikey olarak genişletilmek üzere daraltılırlar ve ekran genişliği arttıkça yatay hale gelirler.
Sözdizimi: <nav class = “navbar”><!—Code your navigation DOM elements --></nav>
7) Jumbotron – Bu, bazı önemli içeriği göstermek için tam ekrana (veya görünüm alanına ) yayılabilen bir önyükleme bileşenidir.
Sözdizimi: <div class = “jumbotron”><!—Write your content within DOM elements here --></div>
8) Uyarılar – Bu, kullanıcı eylemine bağlı olarak bağlamsal geri bildirim mesajları sağlayan jQuery eklentisine sahip bir Bootstrap bileşenidir. Bu temelde uyarı mesajlarını görüntülemek için kullanılır.
Sözdizimi: <div class="alert alert-success" role="alert">...</div>
9) İlerleme çubukları – Bu bileşen, bir ilerleme çubuğu ile işin veya eylemin ilerleyişi hakkında geri bildirim hakkında görseller sağlamak için kullanılır.
sözdizimi: <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
Örnek:
10) Rozetler – Bu, DOM öğesine .badge sınıfını, tercihen bir yayılma alanını ekleyerek okunmamış öğeler gibi bir şeyi vurgulayan bir bileşendir.
Sözdizimi: <button class="btn btn-primary" type="button">
Messages <span class="badge">3</span>
</button>
11) Sayfalandırma – Bu bileşen, içeriğin
birden çok sayfaya bölünebilir ve kolaylıkla gezinilebilir. Genellikle, sırasız listeler için DOM öğesi bu sınıf .pagination ile tanımlanır.
Sözdizimi: <ul class = “pagination”><!—List elements goes here --></ul>
Bu, kariyerinize nasıl yardımcı olacak?
Tüm işletmeler artık Kullanıcı Etkileşimi ve Kullanıcı Deneyimine (UI/UX) odaklanıyor. Nüfusun büyük çoğunluğu tabletler ve akıllı telefonlar gibi piksel çözünürlükleri ve ekran boyutları açısından büyük farklılıklar gösteren el cihazları kullandığından, kendini ayarlayabilecek kadar duyarlı bir ön uç tasarımına sahip olmak gerçekten önemlidir. Web sayfasının şıklığından ödün vermeden her türlü ekrana.
Bu nedenle, Bootstrap’te yetenekli olmak, teknik kariyerde size değer katacaktır ve şirketler, sizi iyi bir maaş çeki ile işe almak için sabırsızlanacaktır. Ve ücretsiz ve açık kaynaklı olduğu için, geliştirici olarak katkıda bulunmanız ve onu bugün olduğundan daha iyi hale getirmeniz için birçok kapsam var.