Bootstrap CSS Dosyalarını Sayfamıza Dahil Etmek
Bunu yapmak için 2 yöntem var:
- CDN (Content Delivery Network) serverlarından sayfamıza dahil etmek için <head> bölümü içine şu satırlar eklenir:
- İsterseniz bu dosyaları indirip HTML sayfanızla aynı klasöre koyarak kendi server'ınızda da paylaşabilirsiniz
Deneyip çalışmasını görmek istersek sayfa kodumuza basit bir başlık ekler ve tarayıcıda bakarsak farkı görürüz.
Eğer Bootstrap CSS dosyası yüklemeyi başaramamışsak başlık yazısı tarayıcımızın default font ayarlarında çıkacaktır:
Ama Bootstrap CSS dosyaları yüklenmişse daha yumuşak bir başlık görünümü olacaktır:
Container (içeren bölge)
- .container sınıfına sahip bir div elemanı içinde sayfamızın içeriği çevrelenir. Sabit genişlikli bir alan açar.
- .container-fluid sınıfında bir div elemanı ise bulunulan alanın tüm genişliğini kapsar.
Buna göre 2 değişik basit Bootstrap sayfa içeriği şöyle olur:
ya da
Bootstrap Grid Sistemi
Grid sistemi sayesinde sayfayı 12 kolona bölebilirsiniz. Bu 12 kolonu ayrı ayrı içeriklerle doldurabileceğiniz gibi birkaç kolonu birleştirip tek bir içerik ile de doldurabilirsiniz.
Grid Sınıfları
Bootstrap grid sistemi 4 başlıkta toplanır:
- xs (Telefonlar - 768 pikselden dar genişliği olan cihazlar)
- sm (Tabletler - 768 piksele eşit ya da daha geniş ekranlar)
- md (Küçük laptop - 992 pikselveya daha fazla genişlik olan)
- lg (Laptop ve masaüstü PC - 1200 pikselden geniş ekranlar)
Mesela yukarıda örnek verilen yerleşimler xs sınıf başlığında yapılırsa yani
benzeri col-xs- ve arkasına kaç kolon genişlik geleceği class adı olarak verilirse cep telefonu dahil hepsinde genişlik eşit parçalara bölünür. Bilgisayar ekranında yukarıdaki gibi görünürken cep telefonu ekranında şuna benzer:
sm sınıfı kullandığımızda ise, yani col-sm- ve arkasına kaç kolon genişlik geleceği class adı olarak verilirse genişliği 768 piksel ve fazlası olan tablet ve ekranlarda normal görünürken, daha dar ekranlar yani telefonlarda yan yana olan bölgeler alt alta sıralanır.
cep telefonunda şöyle görünür:
md başlığı ile col-md- şeklinde kolon sayılarını verirsek, 992 pikselden daha düşük genişlik olan ekranlarda yan yana olması gereken bölümler alt alta yerleşim alacaktır.
Bunları bu şekilde kullanarak değişik row bölgelerinde değişik grid sınıfları kullanarak sayfamızın telefon, tablet ve PC'de nasıl görüneceğini değişik şekillerde ayarlayabiliriz.
Devam etmeden önce yerleşimle ilgili bir noktadan daha bahsedelim. Sayfada yerleşim için .container içinde başka bir .container kullanmayın. Çünkü .container sınıfı sabit bir genişlik tanımlar ve bu genişliğini tüm sayfaya göre belirler, bu durumda diğer birinin içine de koysanız .container en dışardaki genişliğe göre yerleşim yapar. Birden fazla .container kullanılacaksa bunlar alt alta konulabilir. Mesela header ve footer yerleşimi gibi. Container içindeki yerleşim ise row ve col elemanlarını içiçe kullanarak yapılır.
Bootstrap Yazı Şekilleri
Bootstrap default yazı font'u 14px ve satır yüksekliği 1.428 dir. Bu <body> elemanı içeriğine ve tüm paragraflara uygulanır (<p>). Ek olarak tüm <p> elemanları hesaplanan satır yüksekliğinin yarısı kadar alt marjine sahiptir (default 10px).
Bootstrap ve Tarayıcı Defaultları
Bu bölümde tarayıcıya göre farklı default stilleri olan HTML elemanlarını göreceğiz.
<h1> - <h6>
Bootstrap default tarayıcı başlık yazılarını şu şekle dönüştürür:
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
<small>
Bootstrap'ta HTML elemanı <small>, başlığın hemen yanında daha küçük ve silik bir yardımcı yazı yazmak için kullanılır.
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
<mark>
Bootstrap HTML <mark> elemanı ile yazıyı işaretlenmiş yapar.
Yazıyı işaretlenmiş yapmak
mark elemanı kullanarak yazıyı işaretlenmiş yaparsınız.
Bunu bir elemanın class değerini mark olarak o elemanın tümüne de uygulayabilirsiniz.
Yazıyı işaretlenmiş yapmak
gibi.
<abbr>
Bootstrap <abbr> elemanını aşağıdaki gibi stillendirir.
WHO 1948 yılında kurulmuştur.
<blockquote>
Bootstrap <blockquote> elemanını şöyle şekillendirir.
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
Alıntı yazısını sağ tarafa dayalı göstermek isterseniz .blockquote-reverse sınıf adını kullanırsınız.
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
gibi.
<dl>
Bootstrap HTML <dl> elemanını şöyle stillendirir.
Description List
dl elemanı açıklamalı bir liste gösterir:
- Kahve
- - siyah sıcak içecek
- Süt
- - beyaz soğuk içecek
<code>
Bootstrap HTML <code> elemanını şöyle stillendirir.
Code Snippets
Satır içinde kodlar code elemanı içinde gösterilebilir:
HTML elemanları: span, section,
ve div dökümanda bir bölgeyi belirtir.
<kbd>
Bootstrap HTML <kbd> elemanını şöyle stillendirir.
Keyboard Girişleri
Tuştakımından girilen kısayolları göstermek için kbd elemanı kullanılır:
ctrl + p ile yazdırma diyaloğu açılır.
<pre>
Bootstrap HTML <pre> elemanını şöyle stillendirir.
Multiple Code Lines
Çok satırlı kodları göstermek için pre elemanı kullanın:
pre elemanı içindeki yazılar
sabit genişlikli font ile gösterilir,
boşluklar ve alt satıra
geçişleri kabul eder.
İçeriğe göre renkler ve arkaplanlar
Bootstrap bazı içeriklerin anlamına göre renklendirme yapabilir.
Yazı renkleri için sınıf adları: .text-muted, .text-primary, .text-success, .text-info, .text-warning, ve .text-danger:
İçeriğe göre renkler
İçeriğe göre renk sınıfları "renkler ile anlamlandırma" sağlar:
Bu yazı önemsiz.
Bu yazı önemli.
Bu yazı başarılı işlem ifade eder.
Bu yazı bir bilgi verir.
Bu yazı bir uyarı yapar.
Bu yazı tehlike bildirir.
Arkaplan renkleri için .bg-primary, .bg-success, .bg-info, .bg-warning, ve .bg-danger
İçeriğe göre arkaplan renkleri
İçeriğe göre renk sınıfları "renkler ile anlamlandırma" sağlar:
Bu yazı önemli.
Bu yazı başarılı işlem ifade eder.
Bu yazı bir bilgi verir.
Bu yazı bir uyarı yapar.
Bu yazı tehlike bildirir.
Diğer Yazım Sınıfları
HTML elemanlarını stillendirmek için bu bootstrap sınıfları da kullanılabilir:
- .lead : Paragraf içeriğini öne çıkarır.
Bu normal paragraf
Bu öne çıkan paragraf
- .small : İçinde bulunduğu elemandan daha küçük bir yazı (%85 boyutunda)
Bu normal paragraf
Bu small yazılı paragraf
Normal pre
Small yazılı pre
- .text-left : Sola dayanmış yazı sağlar.
- .text-center : İçnde bulunduğu elemanı ortalamış yazı.
- .text-right : Sağa dayanmış yazı sağlar.
- .text-justify : İki yana dayanmış yazı (alt satıra geçerken kelimeleri iki yana dayar)
- .text-nowrap : Otomatik alt satıra geçişi engeller, aynı satıra devam eder.
Bu yazı sola dayalı
Ortada başlık
Bu yazı sağa dayalı
İki yana dayalı olması istenen yazı. ALt satıra otomatik geçerken kelimeleri de otomatik iki yana yaslar. Yazı sonraki satırda devam eder.
Bu yazının çok uzun olmasına rağmen alt satıra otomatik geçişi engellenir. Yazı aynı satırda eleman dışına taşsa da devam eder.
- .text-lowercase : Yazının tüm harfleri küçük harf yapılır.
- .text-uppercase : Yazının tüm harfleri büyük harf yapılır.
- .text-capitalize : Yazı kelimelerinin ilk harfleri büyük harf yapılır.
bU yAZının Tüm haRFlerİ kÜçÜk OlaCaK.
bU yAZının Tüm haRFlerİ bÜyÜk OlaCaK.
bU kEliMeleRiN İlK haRFlerİ bÜyÜk OlaCaK.
- .initialism : Bir <abbr> elemanı içindeki yazının biraz daha küçük görünmesini sağlar.
- .list-unstyled : Liste elemanlarındaki solda kalan margini ve liste simge ya da numarasını yok eder (<ul> ve <ol> her iki list tipine de uygulanır). Direk olarak bir iç bloktaki <li> elemanlarına etki ettiği için iç içe listelerde içerdeki elemanlara da ayrıca uygulama yapmak gerekir.
- Coffee
- Tea
- Black tea
- Green tea
- Milk
- Cold milk
- Hot milk
- .list-inline : Tüm liste elemanlarını tek satırda yan yana sıralamak için kullanılır. Menülerde işe yarar.
- Coffee
- Tea
- Milk
- .dl-horizontal : Bir <dl> liste (data list) elemanını içindeki <dt> (data term) ve <dd> (data description) elemanlarını aynı satırda gösterir.
- Coffee
- - black hot drink
- Milk
- - white cold drink
- .pre-scrollable : Bir <pre> elemanına scrollbar ile kaydırılabilir yapar.
Eğer .pre-scrollable class adı eklerseniz pre elemanı max 350px yükseklikte olabilir ve daha fazla yükseklik olursa diye y-eksenine scrollbar eklenir:
pre elemanı içindeki yazıyı 350px 'den fazla yükseklik gerekecek kadar uzun yazarsanız dikey kaydırma çubuğu aktif olacaktır.
Bootstrap Tablolar
Basit Tablo
Basit bir bootstrap tablosunda az biraz padding ve sadece satırlar arasında belirtme çizgileri vardır. .table sınıfı tabloya temel tablo görünümünü verir.
| İsim | Soyisim | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Belirgin Satırlar
.table-striped sınıf adı tabloya zebra çizgileri gibi görünüm yapar.
| İsim | Soyisim | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Kenarları Çizgili Tablo
.table-bordered sınıf adı kulanırsak tablo kenarlarında kenar çizgileri olacaktır.
| İsim | Soyisim | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Hover Etkisi
.table-hover sınıf adını kullanırsak mouse'u tablo satırları üzerinden geçirirken hover etkisi olur. (hafif gri arkaplan rengi)
| İsim | Soyisim | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Sıkıştırılmış Tablo
.table-condensed sınıf adı kullanırsa tablo hücrelerindeki padding değeri yarıya düşürülerek daha küçük bir görünüm sağlanır.
| İsim | Soyisim | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
İçeriğe Göre Renklendirme
İçerik renk sınıfları kullanarak <tr> vey< <td> elemanlarının renklendirmesi sağlanabilir.
| İsim | Soyisim | |
|---|---|---|
| Default | Defaultson | default@example.com |
| Success | Doe | john@example.com |
| Danger | Moe | mary@example.com |
| Info | Dooley | july@example.com |
| Warning | Refs | bo@example.com |
| Active | Activeson | act@example.com |
Boyuta Duyarlı (Responsive) Tablolar
.table-responsive sınıfı bir div içine konan tabloların genişliği 768 pikseli geçerse küçük cihazlarda bir kaydırma çubuğu aktif olur. Büyük cihazlarda değişen bir şey olmaz.
gibi.
Resimlerle devam edeceğiz ama yeni bir sayfa açalım , yazı çok uzadı.
Sonraki sayfalar :
Hiç yorum yok:
Yorum Gönder