BOOTSTRAP
Bootsrap Nedir? Bootstrap mobil öncelikli web siteleri geliştirmek için kullanılan en popüler HTML, CSS ve JavaScript front-end çatısıdır. İndirilmesi ve kullanılması tamamen ücretsizdir. Bootstrap HTML, CSS ve JavaScript için hazır templateler içerir. Kolaylıkla responsive tasarımlar yapmamıza olanak sağlar. http://trbootstrap.com/components/
Responsive Web Tasarımı Nedir? Responsive web tasarımı çağırıldığı cihaza göre(pc, tablet, mobil) kendilerini otomatik olarak küçük telefonlardan tutun geniş masaüstü ekranlarına kadar bütün cihazlarda iyi görünecek şekilde ayarlayabilen sayfalar yaratmak demektir.
Neden Bootstrap? Kolay kullanım: Giriş seviyesinden HTML ve CSS bilen herkes Bootstrap kullanmaya başlayabilir. Responsive Özellikleri: Responsive CSS sayesinde farklı cihazlara uyumlu sayfalar ortaya çıkar. Mobil öncelikli yaklaşım: Çekirdek çatıda mobil öncelikli özellikler mevcuttur Tarayıcı uyumluluğu: Bootstrap modern bütün tarayıcılarlar uyumludur.
Nereden Elde Edebiliriz? http://www.getbootstrap.com adresinden indirilebilir. İndirmek istemiyorsanız bir CDN(Content Delivery Network) linki verilerek kullanılabilir.
Bootstrap Grid Sistemi Bootstrap Grid Sistemi sayfa boyunca 12 sütuna kadar izin verir. 12 sütunu ayrı ayrı kullanmak istenmiyorsa bu sütunlar daha geniş sütunlara çevirilmek üzere birleştirilerek kullanılabilir. Bootstrapin grid sistemi responsivedir ve sütunlar ekran boyutuna göre otomatik olarak yeniden konumlanır.
Grid Sınıfları xs (ekran genişliği < 768px telefonlar için) sm(ekran genişliği ≥ 768px olan tabletler için) md(ekran genişliği ≥ 992px olan küçük laptoplar için) lg(ekran genişliği ≥ 1200px olan laptop ve masaüstüler için) Yukarıda verilen sınıflar daha dinamik görünümler için birlikte kullanılabilir.
Basit Bootstrap Grid Yapısı Eşit genişlikte 3 sütunun bulunduğu bir satır Farklı genişliklerde 2 sütunun bulunduğu bir satır
Bootstrap Tipografisi Varsayılan font-size 14 px ve line-height(satır yüksekliği) 1.428 dir. Yukarıdaki özellikler <body> ve bütün <p> elemanlarına uygulanır. <h1>: 36px , <h2>: 30px , <h3>:24px , <h4>:18px , <h5>:14px , <h6>:12px <small> etiketi başlıklarda daha açık renkli text yaratmak için kulanılır. <h1>h1 heading <small>secondary text</small></h1>
… <mark> etiketi text içindeki bir kelimeyi ön plana çıkarmak için kullanılır. <p>Use the mark element to <mark>highlight</mark> text.</p> <dl>
… <pre>
Bağlamsal Renkler ve Arka Planlar
Diğer Tipografi Sınıfları .lead : Bir paragrafın ön plana çıkmasını sağlar .small : %85 daha küçük text olacağını belirtir .text-left : sola dayalı text .text-center : ortalanmış text .text-right : sağa dayalı text .text-lowercase : küçük harflerden oluşan text .text-uppercase : büyük harflerden oluşan text .text-capitalize : kelimelerin ilk harflerini büyük yapar
Bootstrap Tablo Sınıfları En temel sınıf .table sınıfı. Basit tablo sitili içeren bir sınıf. .table-stripped : zebra desenli satırlar içeren tablo oluşturur. .table-bordered : tabloya ve hücrelerine kenarlıklar ekler. .table-hover : satırlarının üstüne gelince arkaplanları gri olan tablolar oluşturur. .table-condensed : Hücrelerin padding değerini yarıya düşürerek daha sıkı/dar tablolar oluşturur. .table-responsive : responsive tablolar yaratır. Küçük cihazlarda sağa sola çekilebilir scroll ortaya çıkarken büyük cihazlara uygun şekilde boyutlanır. Bağlamsal sınıflar burada da var: .active , .success , .info , .warning , .danger Bağlamsal sınıflar <tr> , <td> , <th> elemanları içinde kullanılır.
Bootstrap Görüntü Sınıfları .img-rounded : Görüntüye oval köşeler ekler .img-thumbnail : görüntüyü küçük yapar .img-circle : görüntüyü daireleştirir .img-responsive : görüntüleri ekranın boyutuna göre ayarlar Görüntü galerisi yaratmak için bootstrap grid sistemi ile birlikte .thumbnail sınıfını kullanabilirsiniz.(Örnek1.html)
Responsive Yerleştirmeler Video veya sunumların da her cihazda ölçeklenebilir olmasına izin verir. Responsive yerleştirme sınıfları <iframe> , <embed> , <video> , <object> etiketlerine direkt olarak uygulanabilir. <div class="embed-responsive embed-responsive-16by9"> satırında yatay-dikey oranı 16/9 verilmiş. <div class="embed-responsive embed-responsive-4by3"> satırında yatay-dikey oranı 4/3 verilmiş.
Jumbotron Jumbotron web sayfasındaki bir içeriği ekstra dikkat toplayabilmek için kullanılan büyük bir kutuyu ifade etmek için kullanılır. Bir jumbotron gri ve oval köşelere sahip bir kutu olarak gözükür. Buna ek olarak içindeki textin boyutunu da genişletir. Jumbotron yaratmak için .jumbotron sınıflı bir <div> elemanı kullanmak gerekir. Jumbotronun ekrandan taşmasını istenmiyorsa bir üstte <div class="container"> olmalıdır.
Uyarı Sınıfları alert-success , alert-info , alert-warning , alert-danger , alert-link , alert-dismissable(kapanabilir uyarılar) Hareketli Uyarılar <div class="alert alert-danger fade in"> Fade in uyarı kapanırken solma efekti verir
Buton Uyarı Sınıfları Buton sınıfları <a> ve <input> elemanlarıyla da kullanılabilir.
Buton Boyut Sınıfları
Aktif / Pasif Butonlar
Buton Grupları Bootstrap’te tek satırda peşpeşe butonlar koymak <div> elemanıyla .btn-group sınıfını birlikte kullanarak mümkün. Ayrıca her butona ayrı ayrı boyut vermek yerine .btn-group-lg | sm | xs sınıfı kullanarak bu işi tek seferde yapmak mümkün.
Düşey Buton Grupları
Buton Gruplarını ve Aşağı Açılır Menüleri İçiçe Kullanmak
Ayrı Buton Aşağı Açılırı
Bootstrap Buton Sınıfları .btn , .btn-default , .btn-primary , .btn-success , .btn-info , .btn-warning , .btn-danger , .btn-link .btn-lg , .btn-sm , .btn-xs , .btn-block , .active , .disabled , .navbar-btn Grup Sınıfları .btn-group , .btn-group-justified , .btn-group-lg , .btn-group-sm , .btn-group-xs , .btn-group-vertical
Bootstrap Hazır Simgeleri Sınıfları Bunlar farklı şekillerde kullanılabilir.
Bootstrap Rozetleri ve Etiketleri Rozetler bir linkle kaç itemin ilişkili olduğunu belirtir. Etiketler bir şey hakkında ek bilgi vermek için kullanılır.
Bootstrap İlerleme Çubukları İlerleme çubuğu yaratmak için <div> elemanının içine .progress sınıfı eklemek gerekir. progress-bar-striped sınıfı eğik çizgilere sahip ilerleme çubuğu yaratır. .active sınıfı hareketli çizgilere sahip ilerleme çubuğu olmasını sağlar.
Sayfaları Numaralandırmak Birden fazla sayfalara sahip bir web sitesine sahip olunduğunda her sayfaya birer numara vererek onları sıralamak gerekebilir. Basit bir numaralandırma için <ul> elemanının içine .pagination sınıfı eklemek gerekir Sayfalar aktif veya engelli olarak tanımlanabilir. , <ul> içinde pagination pagination-lg ve pagination pagination-sm sınıfları sayfa numaralandırmalarını boyutlandırmak için kullanılabilir. Aktif Sayfa Engellenen Sayfa
Bootstrap Pager Bir önceki veya sonraki sayfayı çağırmak için kullanılır. Araştırma Konusu: Durgun olmayan dinamik bir pager nasıl yapılır? .previous ve .next sınıfları butonları sayfanın soluna ve sağına yaslar.
Bootstrap Liste Grupları
Bootstrap Panelleri İçeriğinin etrafında padding olan sınırlara sahip bir kutudur. Panelleri grup olarak kullanmak zorunda değiliz.
Bootstrap Açılır Menüleri
Bootstrap Collapse Büyük boyutlu içerikleri, liste gruplarını, panelleri saklamak ve göstermek için kullanılır. collapse ve collapse in farkına dikkat edin. Tıklayınca yazı gözükecek Tıklayınca yazı gizlenecek
Bootstrap Sekmeleri Sekmeler <ul class="nav nav-tabs"> ile yaratılır.
Bootstrap Hapları Aşağı uzanır haplar için – Haplar varsayılan olarak yana uzanırdır Hap yaratmak için kullanılan sınıf
Gezinti Çubuğu
Gezinti Çubuğu Butonları
Gezinti Çubuğu .navbar-text sınıfı gezinti çubuğuna yatay text eklemek için kullanılır. .navbar-fixed-top sınıfı gezinti çubuğunu üste sabitler. Sayfada aşağı gidildikçe gezinti çubuğu kaybolmaz. .navbar-fixed-bottom sınıfı gezinti çubuğunu alta sabitler. Sayfada yukarı gidildikçe gezinti çubuğu kaybolmaz. Örnek3.html sayfasını inceleyin.
Bootstrap Formları Bootstrap input, textarea, checkbox, radio, select form kontrollerini destekler. Bootstrap 2 tip form düzeni sağlar : Düşey formlar(varsayılan), sıralı formlar Yatay formlar etiketlerin geniş ve orta genişlikteki ekranlarda bir sonraki input elemanına kadar uzandığı formlardır. Yukarıda bahsedilen 2 form düzeni için de standart kurallar vardır. Etiketleri ve form kontrollerini <div class="form-group"> </div> içinde tutun.(optimum spacing) Bütün <input>, <textarea> ve <select> elemanlarına .form-control sınıfını ekleyin. NOT: forms.html örneğini inceleyin
Bootstrap Form Sınıfları .form-inline : input elemanlarını yanyana koymak için .form-horizontal : input elemanlarını düşey sıralamak için .form-control : input, textarea ve select elemanlarını sayfanın tüm genişliğine yaymak ve responsive yapabilmek için kullanılır. .form-control-feedback : form onaylama sınıfı .form-group : form giriş ve etiketleri için bir içerici, kapsayıcı sınıfı NOT: Input sınıflarını inceleyin.