Bootstrap Türkçe Kullanım

Bootstrap
Kullanımı
Bazı kodlama becerileri kazanmayı
planlıyorsanız, Bootstrap 4 sağlam bir
seçimdir!
Neden? .active
Ön uç geliştirmenin
altın standardıdır:
Bootstrap yerleşik Açık kaynaklıdır ve Ayrıca, süper çok
sınıflara sahiptir, büyük topluluk yönlüdür ve hemen
yani çoğu öğeyi desteğine sahiptir. her tür web sitesini
sıfırdan kodlamanız oluşturmak için
gerekmez. kullanılabilir.
Başlamaya hazırsanız, ücretsiz Bootstrap hile sayfamızı PDF formatında indirin.
Bootstrap nedir?
Bootstrap 4 popüler
ön uç web sitesi için çerçeve
gelişim.
Öncelikle, bu bir CSS mobil-

ilk tasarım ve her ikisini de içerir
CSS ve JavaScript şablonları
formlar gibi şeyler için,
düğmeler, gezinme, tipografi,
açılır menüler, popover'lar, modals,
ve atlıkarıncalar, diğerleriyle birlikte
arayüz elemanları. ama yapma
yanlış değerlendirin:
Bootstrap ayrıca şunları da sunar:
özelleştirme için bol alan
ve herhangi birini kodlamak
için kullanabilirsiniz
web sitesi türü.
Tam kontrol edebilirsiniz

resmi belge
İnternet sitesi.
2
İçindekiler
03 Temel Önyükleme Bileşenleri
04 Önyükleme kaynak kodu öğeleri
04 Önyükleme Anahtar Bileşenleri
05 Önyükleme Ekranı Boyutları
43 Bootstrap Stil Temelleri

3
Temel Önyükleme Bileşenleri

Bootstrap.css
Bu, indirmeniz gereken temel Bootstrap paketidir. CSS, statik bilgi için bir stil sayfası dilidir.
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/
bootstrap/4.4.1/css/bootstrap.min.css” integrity=”sha384-Vkoo8x4CGsO3+Hhxv8T/
Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh” crossorigin=”anonymous”>
Bootstrap.js
Animasyon, kaydırma ve etkileşim gibi Bootstrap'in belirli bileşenlerini güçlendiren bir JavaScript/
JQuery kitaplığı.
<script src=”https://code.jquery.com/jquery-3.4.1.slim.min.js” integrity=”sha384-

J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n”
crossorigin=”anonymous”></script>
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js”
integrity=”sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo”
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js”
integrity=”sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6”
Glifonlar
Glifler, İngiliz Sterlini sembolü (£) gibi tipografiye sahip temel sembollerdir. Bootstrap, ücretsiz olarak
sunulan çok sayıda gömülü glif simgelerine sahiptir.
4
Önyükleme kaynak kodu öğeleri

Bootstrap kaynak kodu indirmesi, kaynak Less, JavaScript ve belgelerle birlikte önceden derlenmiş
CSS, JavaScript ve yazı tipi varlıklarını içerir.
less/ - tekrarlayan kodlama görevlerini ortadan kaldıran CSS için bir önişlemci stil sayfası
sass/ - önişlemcinin daha popüler olan daha yeni bir sürümü
js/ - basitçe, Bootstrap bileşenlerinin çalışmasına izin veren JavaScript kaynak kodunu ifade eder
fonts/ - bunlar indirmeyle birlikte gelen simge yazı tipleridir
dist/ - web sitesi geliştirmede kullanım için önceden derlenmiş dosyaları içeren bir klasör
Not: Bootstrap ayrıca Bootstrap'in JavaScript eklentileri için jQuery kurulumu gerektirir. jQuery, JavaScript
kitaplığının zengin özelliklere sahip bir bileşenidir ve birçok JavaScript kodunu kısaltır ve bunları tek bir satırla
gerçekleştirebileceğiniz eylemlere dönüştürür.
<script src=”https://code.jquery.com/jquery.js”></script>
Eklentileri yüklemek için:
<script src=”js/bootstrap.min.js”></script>
Önyükleme Ekranı Boyutları

Bootstrap 4, mobil öncelikli duyarlı bir çerçevedir. Ancak yine de sayfa düzeni ızgaraları oluştururken ekran
boyutu talimatları sağlamanız gerekir. Aşağıda referans için standart ekran boyutları verilmiştir:
768 992 1200
XS SM MD LG
PHONE TABLET LAPTOP DESKTOP
Min:
@media (min-width: @screen-sm-min) // >= 768px (small tablet)
@media (min-width: @screen-md-min) // >= 992px (medium laptop)
@media (min-width: @screen-lg-min) // >= 1200px (large desktop)
Max:
@media (max-width: @screen-xs-max) { // < 768px (xsmall phone)
@media (max-width: @screen-sm-max) { // < 992px (small tablet)
@media (max-width: @screen-md-max) { // < 1200px (medium laptop)
5
Önyükleme Anahtar Bileşenleri
Alerts(Uyarılar)
Uyarılar, bir şeyler ters gittiğinde kullanıcılara gönderilen mesajlardır. Örneğin, bir kullanıcı yanlış bir e-posta
adresi veya kredi kartı numarası girerse, düzeltme yapmalarını isteyen bir hata uyarısı mesajı alır.
.alert-primary
Herhangi bir metin için renkli uyarılar oluşturabilirsiniz. Birincil uyarı (daha önemli mesaj) açık mavi renktedir.
<div class=”alert alert-primary” role=”alert”>Primary alert</div>
.alert-secondary
Açık gri renkte ikincil bir uyarı (daha az önemli mesaj) ekleyin.
<div class=”alert alert-secondary” role=”alert”>I’m a secondary alert</div>
.alert-success
Bu, bir kullanıcıyı işleminin başarılı olduğu konusunda uyaracaktır.
<div class=”alert alert-success” role=”alert”>Success alert!</div>
.alert-warning
Bu, yaklaşan bir eylemin mesajını gönderir.
<div class=”alert alert-warning” role=”alert”>Warning! Warning!</div>
.alert-danger
Tehlike uyarısı, uyarı uyarısına benzer, ancak daha olumsuz eylemler için (örneğin, çok fazla parola başarısız
olduktan sonra kilitlenmek)
<div class=”alert alert-danger” role=”alert”> You are in grave danger, my friend!</
div>
.alert-link
Yani orijinal uyarıda başka bir mesaj ve bu mesaja bir bağlantı eklemek mi istiyorsunuz? Bu mesajı aynı renkte
gömebilirsiniz.
<div class=”alert alert-success”> <strong>Success!</strong> You should <a href=”#”
class=”alert-link”>read this cool message</a>. </div>
.alert-dismissible
Okuduktan sonra uyarıyı kapatma seçeneği sunar.
<div class=”alert alert-success alert-dismissible”> <a href=”#” class=”close” data-
dismiss=”alert” aria-label=”close”>×</a><strong>Success! You did well</strong>
</div>
.alert-heading
Uyarınıza hızlı bir başlık ekleyin. (örneğin, "gönderim adresi" veya "fatura adresi"). Bir sayfanın tamamıyla veya o
sayfadaki yalnızca bir içerik parçasıyla ilgili olabilir.
<div class=”alert alert-info”>
<h4 class=”alert-heading”><i class=”fa fa-info”></i>
.alert-light and .alert-dark

Uyarı stilini açık veya koyu gri renk olarak değiştirir.
<div class=”alert alert-light” role=”alert”> I’m the light alert </div>
<div class=”alert alert-dark” role=”alert”>And I’m the dark (side) alert!</div>
6
İşaret
Bir kategorinin, düğmenin veya başka bir öğenin yanında ek bilgileri görüntülemek için rozetleri kullanın. Bunları diğer bağlam
öğeleriyle oluşturabilir ve biçimlendirebilirsiniz (örneğin, .badge-uyarı). Ayrıca rozetler, ana öğenin boyutuna (ör. başlıklar) uyacak şekilde
ölçeklenir. Son olarak, sayaç sağlamak için rozetleri düğmelerin veya bağlantıların bir parçası olarak kullanabilirsiniz.
Örnek: Başlıklar
Birkaç başlığınız olduğunu ve bir rozet eklediğinizi varsayalım. Bu rozetin boyutu başlıkla eşleşecek şekilde ayarlanır.
<h1>Example heading <span class=”badge badge-secondary”>New</span></h1>
<h2>Example heading <span class=”badge badge-secondary”>New</span></h2>
.badge-pill
Rozetlerinizin şeklini değiştirerek onları daha yuvarlak hale getirmek için bu komutu kullanın.
<span class=”badge badge-pill badge-light”>Light</span>
.badge-primary + .badge-secondary
Birincil (daha önemli) ve ikincil (daha az önemli) mesajlara bir rozet eklemek isteyebilirsiniz.
<span class=”badge badge-primary”>Primary</span>
<span class=”badge badge-badge-secondary”>Secondary</span>
.badge-transparent
Bir düğmeyi diğerlerinden farklı kılmak için şeffaf yapmak istediğinizi varsayalım. Bootcamp 4 ile hat içi stil kullanmak
zorunda değilsiniz. Bunun yerine aşağıdaki komutu kullanın:
<button class=”btn bg-transparent”></button>
.badge-warning, -success, -info, or -danger

Bir uyarı, başarı, bilgi veya tehlike uyarısına bir rozet ekler.
<span class=”badge badge-warning”>Warning</span>

<span class=”badge badge-success”>Success</span>
<span class=”badge badge-danger”>Danger</span>
<span class=”badge badge-info”>Info</span>
Vurgulu ve Odak Durumları ile İşlem Yapılabilir Rozetler Oluşturun

Kullanıcılar imleçlerini bir düğmeye getirdiğinde ancak henüz etkinleştirmediğinde, eylemi teşvik etmek için fareyle
üzerine gelme ve odak öğeleri sağlayabilirsiniz.
Bunu yapmak için, bir <a> öğesinde bağlamsal .badge-* sınıflarını kullanın. İşte birkaç örnek:
<a href=”#” class=”badge badge-primary”>Primary</a>
<a href=”#” class=”badge badge-secondary”>Secondary</a>
<a href=”#” class=”badge badge-success”>Success</a>
<a href=”#” class=”badge badge-danger”>Danger</a>
<a href=”#” class=”badge badge-warning”>Warning</a>
7
.Breadcrumbs
Breadcrumb'lar, kullanıcıların kaybolmadan bir sayfadan diğerine geçmelerine yardımcı olacak ve onlara bir önceki
sayfaya geri dönmelerini sağlayacak gezinme bileşenleridir.
<nav aria-label=”breadcrumb”>
<ol class=”breadcrumb”>
<li class=”breadcrumb-item active” aria-current=”page”>Home</li>
</ol>
</nav>
<li class=”breadcrumb-item”><a href=”#”>Home</a></li>
<li class=”breadcrumb-item active” aria-current=”page”>Library</li>
</ol>
</nav>
<li class=”breadcrumb-item”><a href=”#”>Home</a></li>
<li class=”breadcrumb-item active” aria-current=”page”>Library</li>
<li class=”breadcrumb-item active” aria-current=”page”>Data</li>
</ol>
</nav>
.buttons
Adından da anlaşılacağı gibi, .button komutu bir düğme… oluşturmanıza ve stil vermenize olanak tanır.
.button-primary + .button-secondary
Bir kullanıcı eylemi için yaygın olarak birincil düğme kullanılır; daha sonra kapatmak için ikincil bir düğme kullanılabilir.
<button type=”button” class=”btn btn-primary”>Primary</button>
<button type=”button” class=”btn btn-secondary”>Secondary</button>
.btn-light, -dark .btn-primary, -secondary, -transparent, -white,

-warning, -success, -info, -danger
Standart önceden tanımlanmış stil seçeneklerini kullanarak düğmelerinizi tasarlayın:

<button type=”button” class=”btn btn-light”>Light</button>
<button type=”button” class=”btn btn-dark”>Dark</button>
<button type=”button” class=”btn btn-success”>Success</button>
<button type=”button” class=”btn btn-info”>Info</button>
<button type=”button” class=”btn btn-danger”>Danger</button>
<button type=”button” class=”btn btn-warning”>Warning</button>
<button type=”button” class=“button-transparent”>Transparent</button>
<button type=”button” class=“button-white”>White</button>
.btn-outline
Bu snippet örneklerini izleyerek bir düğme anahattı seçin:
<button type=”button” class=”btn btn-outline-primary”>Primary</button>
.btn-lg + .btn-sm
Düğmelerinizin boyutunu değiştirin.
<button type=”button” class=”btn btn-primary btn-lg”>I’m the large button</button>
<button type=”button” class=”btn btn-primary btn-sm”>I’m a small button</button>
8
.btn-block
Düğmelerinizi bir blok halinde gruplayın. Gruplandırılmış tüm düğmeler, bir ebeveynin tam genişliğini kapsayacaktır.
<button type=”button” class=”btn btn-primary btn-lg btn-block”>Block level button</
button>
.active
Varsayılan olarak, tüm düğmeler, etkin olduklarında koyu kenarlık, daha koyu arka plan ve iç gölge ile basıldığı gibi
görüntülenecektir.
Sözde sınıf kullandıkları için <button>s öğesine bir sınıf eklemeniz gerekmez.
Ancak, herhangi bir nedenle aynı etkin görünümü zorlamanız gerekirse, aşağıdaki kod parçacığını kullanın:
<a href=”#!” class=”btn btn-primary btn-lg active” role=”button” aria-
pressed=”true”>Primary link</a>
Not: Ayrıca, devre dışı görünmesi için herhangi bir düğmeye devre dışı bırakılmış Boolean niteliğini ekleyebilirsiniz.
<button type=”button” class=”btn btn-lg btn-primary” disabled>Disabled button</
button>
Düğme Grubu
Her birini ayrı ayrı kodlamadan benzer boyutta bir düğme grubu oluşturmak için bu öğeyi kullanın.
.btn-group
<div class=”btn-group” role=”group” aria-label=”Basic example”>
<button type=”button” class=”btn btn-secondary”>Left</button>
<button type=”button” class=”btn btn-secondary”>Middle</button>
<button type=”button” class=”btn btn-secondary”>Right</button>
</div>
.btn-group-vertical
Dikey bir düğme grubuna stil verin:
<div class=”btn-group-vertical” role=”group” aria-label=”Basic example”>
<button type=”button” class=”btn btn-secondary”>Left</button>
<button type=”button” class=”btn btn-secondary”>Middle</button>
<button type=”button” class=”btn btn-secondary”>Right</button>
</div>
.btn-group (Nested)
Açılır menülerle iç içe düğmeler de oluşturabilirsiniz.
<div class=”btn-group” role=”group” aria-label=”Button group with nested dropdown”>
<button type=”button” class=”btn btn-secondary”>1</button>
<div class=”btn-group” role=”group”>

<button id=”btnGroupDrop1” type=”button”
class=”btn btn-secondary dropdown-toggle”
data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
Dropdown
</button>
<div class=”dropdown-menu” aria-labelledby=”btnGroupDrop1”>
<a class=”dropdown-item” href=”#!”>Dropdown link</a>
<a class=”dropdown-item” href=”#!”>Dropdown link</a>
</div>
</div>
</div>
9
.btn-toolbar
Daha karmaşık bileşenler oluşturmak için düğme gruplarını bir araç çubuğunda düzenleyin. Ek stil için farklı
yardımcı program sınıfları uygulayabilirsiniz.
<div class=”btn-toolbar” role=”toolbar” aria-label=”Toolbar with button groups”>
<div class=”btn-group” role=”group” aria-label=”First group”>
</div>
<div class=”btn-group” role=”group” aria-label=”Second group”>
</div>
<div class=”btn-group” role=”group” aria-label=”Third group”>
</div>
</div>
.btn-group-toggle
Onay kutularını geçişlere dönüştürmek için Bootstrap Toggle eklentisini yükleyin. Daha sonra JavaScrip aracılığıyla
geçiş davranışlarını etkinleştirmek için değiştirilmiş düğmelere sahip bir düğme grubuna data-toggle=”buttons”
ekleyebilirsiniz. Ardından, düğmelerinizdeki farklı girişlere stil vermek için .btn-group-toggle'ı kullanın.
<div class=”btn-group-toggle” data-toggle=”buttons”>
<label class=”btn btn-secondary active”>
<input type=”checkbox” checked autocomplete=”off”> Checked
</label>
</div>
Kartlar
Kartlar, üstbilgi/altbilgi seçenekleri, renkler ve görüntüleme seçenekleri ve daha fazlasını içeren esnek kaplardır.
Bootstrap 3'ten önceki birkaç bileşeni (paneller, kuyular ve küçük resimler) değiştirdiler.
.card-body
Kartın ana unsuru. Kartınıza dolgulu bir bölüm eklemek için kullanın.
<div class=”card”>
<div class=”card-body”>
Your awesome text
</div>
</div>
.card-title
Kartınız için bir başlık kodlayın. Bunu bir <h*> etiketine ekleyin.
<h4 class=”card-title”>Big title</h4>
.card-subtitle
Bazı ekstra fantezi için her karta altyazı da ekleyebilirsiniz.
<h6 class=”card-subtitle mb-2 text-muted”>Fancy card subtitle</h6>
.card-link
Kartınızın içine bir bağlantı yerleştirin. Bu sınıfı bir <a> etiketine ekleyin.
<a href=”#!” class=”card-link”>Link to something fun</a>
10
.card-text
Kartınıza bazı kelimeler ekleyin. İstediğiniz kadar çok veya az.
<p class=”card-text”>
Roses are red, violets are blue,
I’m learning Bootstrap,
What about you?
</p>
.card-img-top
Ayrıca kartınıza bir resim de ekleyebilirsiniz. Bu snippet, üstüne bir tane ekleyecektir.
<img class=”card-img-top” src=”/images/pathToYourImage.png” alt=”Card image cap”>
<div class=”card-body”> What an epic image!</div>
</div>
.card-img-bottom
Veya resmin kartın alt kısmında görüntülenmesini sağlayabilirsiniz. Senin araman.
<div class=”card-body”> Look at that pic!</div>
<img class=”card-img-bottom” src=”/images/pathToYourImage.png” alt=”Card image
cap”>
</div>
.card-img-overlay
Bir resmi arka plan olarak kullanın ve tüm metinleri kaplayın.
<img class=”card-img” src=”/images/pathToYourImage.png” alt=”Card image”>
<div class=”card-img-overlay”>
<p class=”card-text”>I’m text that has a background image!</p>
</div>
</div>
.card-header
Kartınızın üstüne özel bir başlık yerleştirin. Tüm başlıkların ve alt yazıların üzerinde görüntülenecektir.
<div class=”card-header”>
Some big header!
</div>
.card-footer
Ayrıca, bazı ekstra bilgileri iletmek için kartınız için bir alt bilgi kodlayabilirsiniz. .card-body'den hemen sonra gidecek.
<p class=”card-text”>Some more card content</p>
</div>
<div class=”card-footer”>
Updated 2 days ago
</div>
</div>
11
.card-group
Kart düzeniyle oynayın ve bir grup kart oluşturun. Bir grup, her kartın aynı genişlik ve yüksekliğe sahip olduğu tek bir
ekli eleman gibi davranacaktır. Ayrıca display: flex; boyutlandırmayı iyileştirmek için.
Not: Grup kartı düzenleri yanıt vermiyor!

<div class=”card-group”>
<h4 class=”card-title”>Card number one</h4>
<p class=”card-text”>I’m the first card in the group, displaying some cool
info.</p>
</div>
</div>
<h4 class=”card-title”>Card number two</h4>
<p class=”card-text”>I’m the middle card in the group and probably I offer the
best deal</p>
</div>
</div>
<h4 class=”card-title”>Card three</h4>
<p class=”card-text”>I’m the third card trying to be as cool as the first
one.</p>
</div>
</div>
</div>
.card-columns
Kartlarınızı Masonry benzeri sütunlar halinde düzenleyebilirsiniz. Bu, yalnızca CSS kullanarak bazı yaratıcı kalıplar oluşturmanıza olanak tanır.
Not: Kartlarınız sütunlar arasında bölünüyorsa, bunları görüntülenecek şekilde ayarlayın: satır içi blok.
<div class=”card-columns”>

</div>
</div>
<div class=”card p-3”>
</div>
</div>
</div>
<div class=”card bg-primary p-3 text-center”>
</div>
</div>
12
.card-deck
Eşit yükseklik ve genişliğe sahip bir dizi bağlı olmayan kart toplayın.
<div class=”card-deck”>
<h4 class=”card-title”>Some title</h4>
<p class=”card-text”>Your texts </p>
</div>
</div>
<h4 class=”card-title”>Another card</h4>
<p class=”card-text”>Even more texts that someone will need to write.</p>
</div>
</div>
<h4 class=”card-title”>I’m a card too!</h4>
<p class=”card-text”>Some words to add and arrange</p>
</div>
</div>
</div>
Carousel
Bir dizi slayt, metin veya resim arasında geçiş yapmak için bir slayt gösterisi ayarlayın. CSS 3D ve bazı JS ile oluşturulmuştur.
Resim, metin veya özel işaretleme ekleyebilir, önceki/sonraki kontrolleri ekleyebilir veya kaldırabilirsiniz.
Carousel Slide - creating a single slide

<div id=”carouselExampleIndicators” class=”carousel slide” data-ride=”carousel”>
<div class=”carousel-inner” role=”listbox”>
<div class=”carousel-item active”>
<img class=”d-block w-100” src=”#” data-src=”holder.js/900x400?theme=social”
alt=”First slide”>
</div>
<div class=”carousel-item”>
<img class=”d-block w-100” src=”#” data-src=”holder.
js/900x400?theme=industrial” alt=”Second slide”>
</div>
</div>
<a class=”carousel-control-prev” href=”#carouselExampleIndicators” role=”button”
data-slide=”prev”>
<span class=”carousel-control-prev-icon” aria-hidden=”true”></span>
<span class=”sr-only”>Previous</span>
</a>
<a class=”carousel-control-next” href=”#carouselExampleIndicators” role=”button”
data-slide=”next”>
<span class=”carousel-control-next-icon” aria-hidden=”true”></span>
<span class=”sr-only”>Next</span>
</a>
</div>
13
.carousel-fade
Bir sonraki slayttan önce bir slayt için bu serin solma efektini ekleyin.
<div id=”carouselFadeExampleIndicators” class=”carousel slide carousel-fade” data-
ride=”carousel”>
</div>
</div>
</div>
<a class=”carousel-control-prev” href=”#carouselFadeExampleIndicators”
role=”button” data-slide=”prev”>
</a>
<a class=”carousel-control-next” href=”#carouselFadeExampleIndicators”
role=”button” data-slide=”next”>
</a>
</div>
.carousel-indicators
Sonraki/önceki ve slayt numarası gibi göstergeler için kontrol ve destek ekleyin.
<div id=”carouselExampleIndicators” class=”carousel slide” data-ride=”carousel”>
<ol class=”carousel-indicators”>
<li data-target=”#carouselExampleIndicators” data-slide-to=”0” class=”active”></
li>
<li data-target=”#carouselExampleIndicators” data-slide-to=”1”></li>
</ol>
</div>
</div>
</div>
<a class=”carousel-control-prev” href=”#carouselExampleIndicators” role=”button”
</a>
<a class=”carousel-control-next” href=”#carouselExampleIndicators” role=”button”
</a>
</div>
.carousel-caption
Her veya birkaç slayta eğlenceli bir resim yazısı ekleyin.
<div class=”bd-example”>
<div id=”carouselExampleCaptions” class=”carousel slide” data-ride=”carousel”>
<ol class=”carousel-indicators”>
<li data-target=”#carouselExampleCaptions” data-slide-to=”0” class=”active”>
</li>
14
<li data-target=”#carouselExampleCaptions” data-slide-to=”1”></li>

</ol>
<img class=”d-block w-100” data-src=”holder.
js/900x300?auto=yes&bg=777&fg=555&text=First slide” alt=”First slide”>
<div class=”carousel-caption d-none d-md-block”>
<h3>Cool Slide Label</h3>
<p>I’m so proud of myself for coding this slide.</p>
</div>
</div>
<img class=”d-block w-100” data-src=”holder.
js/900x300?auto=yes&bg=666&fg=444&text=Second slide” alt=”Second slide”>
<div class=”carousel-caption d-none d-md-block”>
<h3>Even Cooler label</h3>
<p>Yep, totally rocking this whole coding thing.</p>
</div>
</div>
</div>
<a class=”carousel-control-prev” href=”#carouselExampleCaptions” role=”button”
</a>
<a class=”carousel-control-next” href=”#carouselExampleCaptions” role=”button”
</a>
</div>
</div>
Daralt ve Akordeon
Daralt, "daralt" menüsü altındaki içeriği gizlemek için kullanabileceğiniz bir JavaScript eklentisidir. Daraltılmış öğe,
tetiklendiğinde yüksekliğini 0'dan normal değerine ve tam tersi şekilde canlandıracaktır.
.collapse
İçeriğinizi gizleyin.
<div class=”collapse” id=”collapseExample”>
<div class=”card card-body”>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim
keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
.collapse show
Daraltılmış içeriği görüntüleyin.
<div id=”demo” class=”collapse show”> Some text you’ve decided to hide </div>
.collapse.options
İçeriği daraltılabilir öğe olarak etkinleştirin; isteğe bağlı nesneleri kabul eder
$(‘#myCollapsible’).collapse({
toggle: false
})
15
.accordion
Collabsaple davranışının kartlara bir uzantısı. Bir akordeon oluşturmak için bu özelliği kullanabilirsiniz.
Not: Bir sarmalayıcı olarak .accordion kullanmanız gerekir
2 grup öğesi içeren Akordeon Snippet Örneği
<div id=”accordion” role=”tablist”>
<div class=”card-header” role=”tab” id=”headingOne”>
<h5 class=”mb-0”>
<a data-toggle=”collapse” href=”#collapseOne” aria-expanded=”true” aria-
controls=”collapseOne”>
Collapsible Group Item #1
</a>
</h5>
</div>
<div id=”collapseOne” class=”collapse show” role=”tabpanel” aria-

labelledby=”headingOne”>
Here’s the first thing I want to hide in this card.
</div>
</div>
</div>
<div class=”card-header” role=”tab” id=”headingTwo”>
<h5 class=”mb-0”>
<a class=”collapsed” data-toggle=”collapse” href=”#collapseTwo” aria-
expanded=”false” aria-controls=”collapseTwo”>
Collapsible Group Item #2
</a>
</h5>
</div>
<div id=”collapseTwo” class=”collapse” role=”tabpanel” aria-
labelledby=”headingTwo”>
And here’s some other text I’m styling with accordion.
</div>
</div>
</div>
</div>
Özel Formlar
Bootstrap 4, tarayıcı varsayılanlarının yerini alan çeşitli özelleştirilmiş form öğelerine sahiptir.
.custom-checkbox
Adından da anlaşılacağı gibi, formunuz için özel bir onay kutusu oluşturabilirsiniz.
<div class=”custom-control custom-checkbox”>
<input type=”checkbox” class=”custom-control-input” id=”customCheck1”>
<label class=”custom-control-label” for=”customCheck1”>I have a cool custom
checkbox</label>
</div>
16
.custom-radio
…ve özel bir radyoya da stil verebilirsiniz!
<div class=”custom-control custom-radio”>
<input type=”radio” id=”customRadio1” name=”customRadio” class=”custom-control-
input”>
<label class=”custom-control-label” for=”customRadio1”>Give this custom radio a
toggle</label>
</div>
.custom-switch
Son olarak, şık bir özel anahtar da oluşturabilirsiniz.
<div class=”custom-control custom-switch”>
<input type=”checkbox” class=”custom-control-input” id=”customSwitch1”>
<label class=”custom-control-label” for=”customSwitch1”>Toggle this switch
element</label>
</div>
.custom-select
Özel bir seçim menüsü eklemek için bu komutu kullanın.
<select class=”custom-select”>
<option selected>Open this select menu</option>
<option value=”1”>One</option>
<option value=”2”>Two</option>
<option value=”3”>Three</option>
</select>
.custom-file
Kullanıcı dosyası yüklemesini özelleştirin. Bunu yapmak için, girdinin etrafına type=”file” ile .custom-file sınıfı ekleyin.
Ardından buna .custom-file-input'u ekleyin.
<div class=”custom-file”>
<input type=”file” class=”custom-file-input” id=”customFile”>
<label class=”custom-file-label” for=”customFile”>Choose file</label>
</div>
.custom-range
Özel bir aralık menüsü tasarlayın.
<label for=”customRange1”>Basic range</label>
<input type=”range” class=”custom-range” id=”customRange1”>
<label class=”mt-3” for=”customRange3”>Range with steps</label>
<input type=”range” class=”custom-range” min=”0” max=”5” step=”0.5”
id=”customRange3”>
17
Açılır Menüler
Kullanıcı bağlantılarının listelerini görüntülemek için bağlamsal bindirmeler oluşturmak için bu eklentiyi kullanın. Menüler
oluşturmak için kullanışlı bir seçenektir. Açılır listeler, bir üçüncü taraf kitaplığının parçası olan Popper.js aracılığıyla
oluşturulur. Bu nedenle, Bootstrap'in kendi JavaScript'inden önce popper.min.js'yi eklediğinizden emin olun. Veya
bootstrap.bundle.min.js/boottrap.bundle.js'yi kullanabilirsiniz. Her ikisi de Popper.js içerir.
Hızlı stil ipucu: Bootstrap'teki tüm açılır menüler, fareyle üzerine gelinmeden tıklanarak değiştirilir.
.dropdown
Düğmelerle basit bir açılır menü ekleyin.
<div class=”dropdown”>
<button class=”btn btn-secondary dropdown-toggle”
type=”button” id=”dropdownMenu1” data-toggle=”dropdown”
aria-haspopup=”true” aria-expanded=”false”>
Dropdown
</button>
<div class=”dropdown-menu” aria-labelledby=”dropdownMenu1”>
<a class=”dropdown-item” href=”#!”>Action</a>
<a class=”dropdown-item” href=”#!”>Another action</a>
</div>
</div>
.dropdown-toggle-split
Açılan düzeltme işaretinin etrafında uygun boşluk bırakılarak bölünmüş düğme açılır listeleri oluşturun.
<div class=”btn-group”>
<button type=”button” class=”btn btn-secondary”>Dropdown</button>
<button type=”button” class=”btn btn-secondary dropdown-toggle dropdown-toggle-
split” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
<span class=”sr-only”>Toggle Dropdown</span>
</button>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#!”>Action</a>
<a class=”dropdown-item” href=”#!”>Another action</a>
</div>
</div>
.dropup
Bir menüyü aşağı değil yukarı doğru stillendirebileceğinizi biliyor muydunuz? Şimdi yapabilirsin!

<div class=”btn-group dropup”>
<button type=”button” class=”btn btn-secondary dropdown-toggle” data-
toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
Dropup
</button>

</div>
</div>
.dropright
Düğmenin sağındaki menüyü sağlayın.

<div class=”btn-group dropright”>
Dropright
</button>
18
</div>
</div>
.dropleft
…Ayrıca soldaki menüyü de görüntüleyebilirsiniz.

<div class=”btn-group dropleft”>
Dropleft
</button>
</div>
</div>
.dropdown-item-text
Menünüze etkileşimli olmayan açılır öğeler ekleyin.
<span class=”dropdown-item-text”>Plain text</span>
<a class=”dropdown-item” href=”#”>Clickable action</a>
<a class=”dropdown-item” href=”#”>Another action</a>
<a class=”dropdown-item” href=”#”>Whatever else you need</a>
</div>
.dropdown-item disabled
Ayrıca herhangi bir menü öğesini/öğelerini devre dışı bırakmayı da seçebilirsiniz.
<a class=”dropdown-item” href=”#”>Active link</a>
<a class=”dropdown-item disabled” href=”#”>Disabled link</a>
<a class=”dropdown-item” href=”#”>One more link</a>
</div>
.dropdown-divider
Ekstra dikkat çekmek için menü öğeleri arasına basit bir ayırıcı ekleyin.
<div class=”dropdown-divider”></div>
.dropdown-menu-right
Tüm menüyü sağa hizalayın
<div class=”btn-group”>
Bu açılır menü sağa hizalanmış
</button>
<div class=”dropdown-menu dropdown-menu-right”>
<button class=”dropdown-item” type=”button”>Action</button>
<button class=”dropdown-item” type=”button”>Another action</button>
<button class=”dropdown-item” type=”button”>Something else here</button>
</div>
</div>
19
Formlar
Kolayca çekici formlar oluşturabilir ve özel stiller, düzenler ve ek öğeler kodlayabilirsiniz. Bootstrap 4'te formlar ayrıca bir
dizi yeni duyarlı sınıfla birlikte sayı seçimi, e-posta doğrulama ve diğerleri gibi bazı yeni giriş kontrolleri aldı.
Example of .form-group
<form>
<div class=”form-group”>
<label for=”exampleInputEmail1”>Email address</label>
<input type=”email” class=”form-control” id=”exampleInputEmail1” aria-
describedby=”emailHelp” placeholder=”Provide email”>
</div>
<label for=”exampleInputPassword1”>Your password</label>
<input type=”password” class=”form-control” id=”exampleInputPassword1”
placeholder=”Password”>
</div>
<div class=”form-group form-check”>
<input type=”checkbox” class=”form-check-input” id=”exampleCheck1”>
<label class=”form-check-label” for=”exampleCheck1”>Remember me</label>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>
.form-control
Kullanıcı girişi, başlıklar vb. gibi tüm metinsel form denetimlerini stilize etmek için bu sınıfı kullanın.
<form>
<label for=”exampleFormControlInput1”>Email address</label>
<input type=”email” class=”form-control” id=”exampleFormControlInput1”
placeholder=”name@example.com”>
</div>
.form-control-file
Kullanıcıya forma dosya yükleme seçeneği sağlamanız gerektiğinde bu sınıfı ekleyin.
<input type=”file” class=”form-control-file” id=”exampleFormControlFile1”>
.form-control-lg and .form-control-sm.

Daha büyük girdi alanları yapmak için .form-control-lg ve daha küçük alanlar oluşturmak için .form-control-sm
ekleyerek formunuzda görsel bir hiyerarşi oluşturun.
<input class=”form-control form-control-lg” type=”text” placeholder=”.form-control-

lg”>
<input class=”form-control form-control-sm” type=”text” placeholder=”.form-control-
sm”>
20
.form-control-plaintext
Formunuzda <input readonly> öğelerini doğru şekilde görüntülemek için bu sınıfı kullanın. Doğru kenar boşluğunu ve
dolguyu korurken, varsayılan form alanı stilini düz metinle değiştirecektir.
<form>
<div class=”form-group row”>
<label for=”staticEmail” class=”col-sm-2 col-form-label”>Email</label>
<div class=”col-sm-10”>
<input type=”text” readonly class=”form-control-plaintext” id=”staticEmail”
value=”email@example.com”>
</div>
</div>
<div class=”form-group row”>
<label for=”inputPassword” class=”col-sm-2 col-form-label”>Pass</label>
<div class=”col-sm-10”>
<input type=”password” class=”form-control” id=”inputPassword”
placeholder=”Password”>
</div>
</div>
</form>
.form-control-range
Formunuz için yatay olarak kaydırılabilir aralık girişleri ayarlayın.
<form>
<label for=”formControlRange”>Some range input</label>
<input type=”range” class=”form-control-range” id=”formControlRange”>
</div>
</form>
.form-check
Formunuza onay kutuları ekleyin.
<div class=”form-check”>
<input class=”form-check-input” type=”checkbox” value=”” id=”defaultCheck1”>
<label class=”form-check-label” for=”defaultCheck1”>
My first checkbox
</label>
</div>
Not: Form-check-input kullanarak onay kutuları yerine radyo düğmeleri de ekleyebilirsiniz”
type=”radio”.
.form-check-inline
Yatay bir onay kutuları listesi oluşturun.
<div class=”form-check form-check-inline”>
<input class=”form-check-input” type=”checkbox” id=”inlineCheckbox1”
value=”option1”>
<label class=”form-check-label” for=”inlineCheckbox1”>1</label>
</div>
<div class=”form-check form-check-inline”>
<input class=”form-check-input” type=”checkbox” id=”inlineCheckbox2”
value=”option2”>
<label class=”form-check-label” for=”inlineCheckbox2”>2</label>
</div>
.readonly boolean attribute

Belirli form girişinin salt okunur olduğunu belirtin. Bu, giriş değerinin değiştirilmesini önleyecektir.
<input class=”form-control” type=”text” placeholder=”Readonly input here…” readonly>
21
Giriş Grubu
Giriş grubu öğesi, daha etkileşimli ve çekici form denetimleri oluşturmanıza olanak tanır. Giriş alanının her iki tarafına
metinler, simgeler veya düğmeler eklemek için kullanın.
.input.group - Basic Example

<div class=”input-group”>
<div class=”input-group-prepend”>
<span class=”input-group-text”>First and last name</span>
</div>
<input type=”text” aria-label=”First name” class=”form-control”>
<input type=”text” aria-label=”Last name” class=”form-control”>
</div>
.input-group-prepend
Girişin önüne ek metinler sağlayın.
<form>
<div class=”input-group mb-3”>
<div class=”input-group-prepend”>
<span class=”input-group-text”>@</span>
</div>
<input type=”text” class=”form-control” placeholder=”Name”>
</div>
.input-group-append
…Veya bunları girdinin arkasında listeleyin.
<input type=”text” class=”form-control” placeholder=”Password”>
<div class=”input-group-append”>
<span class=”input-group-text”>@example.com</span>
</div>
</div>
</form>
.input-group-text
Belirtilen metinlere stil vermek için bu sınıfı kullanın.
<input type=”text” class=”form-control” placeholder=”1000” aria-label=”Amount
(rounded to the nearest dollar)” aria-describedby=”basic-addon”>
<div class=”input-group-append”>
<span class=”input-group-text” id=”basic-addon”>.00</span>
</div>
</div>
Bootstrap Cheat Sheet 22
Jumbotron
Öne çıkan içeriğe veya mesaja daha fazla dikkat çekmek için büyük kutular oluşturmanıza yardımcı olacak esnek bir
bileşen. Bootstrap'ta jumbotron, içindeki tüm yazı tipi boyutlarını ve metinleri otomatik olarak büyüten köşeleri
yuvarlatılmış gri bir kutuya benziyor.
Bir jumbotronun içine herhangi bir HTML ve diğer Bootstrap sınıfları ekleyebilirsiniz.
.jumbotron
<div class=”jumbotron”>
<h1 class=”display-3”>Hey, awesome you!</h1>
<p class=”lead”>This is a simple hero unit, showing that anyone can be a real
hero!.</p>
<hr class=”my-2”>
<p>Use utility classes for typography and spacing</p>
<p class=”lead”>
<a class=”btn btn-primary btn-lg” href=”#!” role=”button”>Ready for action</a>
</p>
</div>
.jumbotron-fluid
Jumbotronun görünümünü biraz değiştirir ve yuvarlatılmış köşeler olmadan tam sayfa genişliğinde yapar.
<div class=”jumbotron jumbotron-fluid”>
<div class=”container”>
<h1 class=”display-3”>Fluid jumbotron</h1>
<p class=”lead”>I’m taking up the entire horizontal space on the page.</p>
</div>
</div>
Liste Grubu
Stil ve mizanpaj için birçok seçenek içeren bir dizi içeriği görüntülemek için liste gruplarını kullanın.
.list-group - Example
Birkaç öğe içeren temel bir liste grubu oluşturun.
<ul class=”list-group”>
<li class=”list-group-item”>Milk</li>
<li class=”list-group-item”>Tea</li>
<li class=”list-group-item”>Toffees</li>
</ul>
.list-group-item active
Listedeki mevcut aktif seçimi vurgulamak için .active sınıfını ekleyin.
<li class=”list-group-item active”>I want this</li>
<li class=”list-group-item”>Not this</li>
<li class=”list-group-item”>Or this</li>
</ul>
.list-group-item disabled
Liste öğelerinden birinin kullanılamadığını/devre dışı bırakıldığını gösterin. Bazı etkin öğeler (ör. bağlantılar) tamamen
devre dışı olmak için .disable öğesinin üzerine özel JavaScript gerektirir.
<li class=”list-group-item disabled”>This product is out of stock</li>
<li class=”list-group-item”>But we have this!</li>
<li class=”list-group-item”>And also this cool thing</li>
</ul>
23
.list-group-item-action
Tek tek öğelere stil efektleri (disabeled, hover, active, etc.) ekleyerek listenize daha fazla etkileşim ekleyin.
<div class=”list-group”>
<a href=”#” class=”list-group-item list-group-item-action active”>
Sizin için ana seçimimiz!
</a>
<a href=”#” class=”list-group-item list-group-item-action”>Some good offer</a>
<a href=”#” class=”list-group-item list-group-item-action”>Also an option</a>
<a href=”#” class=”list-group-item list-group-item-action”>Something else on the
list</a>
<a href=”#” class=”list-group-item list-group-item-action disabled” tabindex=”-1”
aria-disabled=”true”>And this one’s not available</a>
</div>
.list-group-flush
Kenarlıkları ve yuvarlatılmış köşeleri kaldırarak listemizin görünümünü değiştirin. Tüm öğeler uçtan uca yerleştirilecektir.
<ul class=”list-group list-group-flush”>
<li class=”list-group-item”>Chai Latte</li>
<li class=”list-group-item”>Matcha Latte</li>
<li class=”list-group-item”>Earl Grey Tea</li>
<li class=”list-group-item”>Vanilla Rooibos</li>
<li class=”list-group-item”>Mate</li>
</ul>
.list-group-horizontal
Listenizi dikey yerine yatay olarak da ayarlayabilirsiniz. Ayrıca, .list-group-horizontal-{sm|md|lg|xl} kullanarak liste
grubunu belirli bir kesme noktasının minimum genişliğinden başlayarak yatay olacak şekilde kodlayabilirsiniz.
Not: Yatay liste gruplarını aynı anda gömme liste gruplarıyla kullanamazsınız.
<ul class=”list-group list-group-horizontal”>
<li class=”list-group-item”>Trains</li>
<li class=”list-group-item”>Planes</li>
<li class=”list-group-item”>Rockets</li>
</ul>
.list-group-item
(light, dark primary, secondary, transparent, white, warning, success, info, danger)
Tek tek liste öğelerine standart stiller uygulayın.
<li class=”list-group-item”>All the colors that I have </li>
<li class=”list-group-item list-group-item-primary”>Light blue</li>
<li class=”list-group-item list-group-item-secondary”>Light gray</li>
<li class=”list-group-item list-group-item-success”>Green</li>
<li class=”list-group-item list-group-item-danger”>Red</li>
<li class=”list-group-item list-group-item-warning”>Yellow</li>
<li class=”list-group-item list-group-item-info”>Teal</li>
<li class=”list-group-item list-group-item-light”>White</li>
<li class=”list-group-item list-group-item-dark”>Gray</li>
</ul>
24
Medya Nesnesi
Bootstrap 4, metinler ve bazı ortamlar içeren karmaşık, tekrarlayan bileşenler oluşturmanıza olanak tanır. Medya nesneleri, tweet benzeri
öğeler ve öne çıkan kutular oluşturmak için harika bir araçtır. Ayrıca, sadece iki sınıfa ihtiyaç duydukları için kullanımı gülünç derecede kolaydır.
.media
Tek bir medya nesnesi oluşturmak için içeriğin etrafında .media sarma ve .media-body kullanın. İşte bir başlık için bir örnek.
<div class=”media”>
<img class=”d-flex mr-3” data-src=”holder.js/64x64?theme=sky” alt=”Some nice
placeholder image”>
<div class=”media-body”>
<h5 class=”mt-0”>Your heading</h5>
A key message you want to share with the world!
</div>
</div>
.media-body
Nesnenizin içinde ne olacağını belirten bir sınıf. İçeriğiniz için farklı hizalamalar kodlayabilirsiniz. Varsayılan üsttür,
ancak ortada veya sonda hizalayabilirsiniz.
<img src=”...” class=”align-self-start mr-3” alt=”...”>
<h5 class=”mt-0”>Top-aligned media</h5>
<p>Read the texts describing the picture above</p>
</div>
İç İçe Ortam
Ayrıca birden fazla medya nesnesi ekleme seçeneğiniz de vardır. Nesneler, sol kenar boşluğundan başlayarak ve
her yeni nesnenin sekmesi içe doğru kaydırılarak iç içe yerleştirilir.
İşte yuvalama için bir pasaj

<img class=”d-flex mr-3” src=”/images/pathToYourImage.png” alt=”Generic
placeholder image”>
<h5 class=”mt-0”>Media heading</h5>
İşte bazı metinler.
<div class=”media mt-3”>
<a class=”d-flex pr-3” href=”#!”>
<img src=”/images/pathToYourImage.png” alt=”Generic placeholder image”>
</a>
<h5 class=”mt-0”>Another Media heading</h5>
Burada neler olduğunu açıklayan birkaç metin daha.
</div>
</div>
</div>
</div>
25
Nav
.nav, stil geçersiz kılmalarda bile her türlü gezinme bileşenini oluşturmanıza yardımcı olan bir temel sınıftır.
Özelleştirme için birçok seçeneğiniz var.
.nav example
<ul class=”nav”>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#”>You can’t click this disabled link</a>
</li>
<a class=”nav-link” href=”#”>Click this instead</a>
</li>
</ul>
.nav-items
Gezinme menüsünde yeni bir öğe belirtmek için bir sınıf.
</li>
<a class=”nav-link” href=”#”>Some item</a>
</li>
.nav justify-content-center
Navigasyonunuzu merkezde yatay olarak hizalayın.
<ul class=”nav justify-content-center”>
<a class=”nav-link active” href=”#”>Active</a>
</li>
<a class=”nav-link” href=”#”>Link</a>
</li>
</ul>
.nav justify-content-end
Veya içeriğinizi sağa doğru gerekçelendirin.
<ul class=”nav justify-content-end”>
<a class=”nav-link active” href=”#”>Active</a>
</li>
</li>
</ul>
.nav-tabs
Gezinme menünüze bazı harika sekmeler ekleyin.
Not: Yüklü sekme JavaScript eklentisine ihtiyacınız olacak.

<ul class=”nav nav-tabs”>
<a class=”nav-link active” href=”#!”>Active</a>
</li>
26
<a class=”nav-link” href=”#!”>Link</a>

</li>
</li>
</ul>
.nav-pills
Alternatif olarak, menü bileşenlerini hap olarak biçimlendirebilirsiniz.
<ul class=”nav nav-pills”>

</li>
</li>
<a class=”nav-link disabled” href=”#!”>Disabled</a>
</li>
</ul>
.Nav-justified
.nav-justified to .nav, .nav-tabs, or .nav, .nav-pills. ekleyerek tüm sekmelerin/hapların genişliklerini eşitleyin.
Yaslanmış Gezinme Öğeleri Örneği
<ul class=“nav nav-pills nav-justified”>
<li class=“active”><a href=“#”>Home</a></li>
<li><a href=“#”>HTML</a></li>
<li><a href=“#”>CSS</a></li>
<li><a href=“#”>PHP</a></li>
<li><a href=“#”>Java</a></li>
</ul>
.nav-fill
Yaslamak yerine, bu komutu kullanarak menü öğelerinizi mevcut tüm alanı doldurmaya da zorlayabilirsiniz. Ancak, tüm
öğeler aynı genişliğe sahip olmayacaktır.
<ul class=”nav nav-pills nav-fill”>
</li>
<a class=”nav-link” href=”#!”>This link is looooong</a>
</li>
<a class=”nav-link” href=”#!”>Short Link</a>
</li>
</ul>
27
Navbar
Navbar, marka bilinci oluşturma, formlar, bağlantılar ve daha fazlası için çok sayıda esnekliğe ve desteğe sahip, duyarlı bir gezinme
başlığıdır.
NavBar - sayfanın üst kısmındaki temel gezinme başlıkları

<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<a class=”navbar-brand” href=”#”>My first navbar</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#
navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false”
aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>
<ul class=”navbar-nav mr-auto”>
<li class=”nav-item active”>
<a class=”nav-link” href=”#”>Home <span class=”sr-only”>(current)</span></a>
</li>
<a class=”nav-link” href=”#”>Link 1</a>
</li>
<a class=”nav-link disabled” href=”#”>Link Disabled</a>
</li>
</ul>
<form class=”form-inline my-2 my-lg-0”>
<input class=”form-control mr-sm-2” type=”text” placeholder=”Search” aria-
label=”Search”>
<button class=”btn btn-outline-success my-2 my-sm-0” type=”submit”>Find
Stuff</button>
</form>
</div>
</nav>
.navbar-brand
Gezinme çubukları, bazı alt bileşenler için destekle önceden döşenmiş olarak gelir. Bu öğe, metninizi daha fazla öne
çıkaracaktır. Bir ürün veya şirket adını barındırmak için önceden tasarlanmıştır.
<nav class=”navbar navbar-light bg-light”>
<a class=”navbar-brand” href=”#!”>Your Company Name</a>
</nav>
.navbar-text
Dikey ve yatay aralıklı ortalanmış metin dizeleri eklemek için bu sınıfı kullanın
<span class=”navbar-text”>
I’m a navbar text with an inline element
</span>
</nav>
.navbar-expand (-sml -mdl -lgl -xl)

Duyarlı daraltmayı etkinleştirin.
<button class=”navbar-toggler navbar-toggler-right” type=”button”
data-toggle=”collapse” data-target=”#navbarTogglerDemo02” aria-
controls=”navbarTogglerDemo02” aria-expanded=”false” aria-label=”Toggle navigation”>
</button>
<a class=”navbar-brand” href=”#!”>Navbar</a>
<div class=”collapse navbar-collapse” id=”navbarTogglerDemo02”>
<ul class=”navbar-nav mr-auto mt-2 mt-md-0”>
28

<a class=”nav-link” href=”#!”>Home <span class=”sr-only”>(current)</span></a>
</li>
</li>
</ul>
</div>
</nav>
.navbar-toggler
Farklı gezinme geçiş davranışlarını programlayın (örneğin, öğeleri aktif tutun veya daraltın).
<button class=”navbar-toggler navbar-toggler-right” type=”button” data-
toggle=”collapse” data-target=”#navbarTogglerDemo02” aria-controls=”navbarTogglerDemo02”
aria-expanded=”false” aria-label=”Toggle navigation”>
</button>
<a class=”navbar-brand” href=”#!”>Navbar</a>
<div class=”collapse navbar-collapse” id=”navbarTogglerDemo02”>

<ul class=”navbar-nav mr-auto mt-2 mt-md-0”>
<a class=”nav-link” href=”#!”>Home <span class=”sr-only”>(current)</span></a>
</li>
</li>
</ul>
</div>
</nav>
.form-inline
Gezinme başlığına bir form (ör. arama çubuğu) yerleştirin.

<form class=”form-inline”>
<input class=”form-control mr-sm-2” type=”text” placeholder=”Search”>
<button class=”btn btn-outline-success my-2 my-sm-0” type=”submit”>Search</button>
</form>
</nav>
29
.collapse.navbar-collapse
Gezinme çubuğu içeriğini bir üst kesme noktasına göre gruplandırın ve daraltın.
<a class=”navbar-brand” href=”#”>Navbar</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#
navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false”
aria-label=”Toggle navigation”>
</button>
<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>

<ul class=”navbar-nav mr-auto”>
<a class=”nav-link” href=”#”>Home <span class=”sr-only”>(current)</span></a>
</li>
</li>
</div>
</nav>
.navbar fixed-top
Sabit bir gezinme çubuğunu birincil ve koyu renk olarak ayarlayın
<nav class=”navbar fixed-top navbar-dark bg-primary”>
<a class=”navbar-brand” href=”#!”>Fixed top</a>
</nav>
30
Bootstrap Modal (Eklenti)

Bu, bir siteye kullanıcı bildirimleri, özel içerik ve ışık kutusu açılır pencereleri gibi iletişim kutuları eklemek için kullanılan bir JavaScript
eklentisidir.
Kipler HTML, CSS ve JavaScript'ten oluşur. Bootstrap yaratıcıları iç içe modelleri zayıf bir UX uygulaması olarak
kabul ettiğinden, aynı anda yalnızca bir kalıcı pencere görüntüleyebilirsiniz.
Modal Example
<div class=”modal” tabindex=”-1” role=”dialog”>
<div class=”modal-dialog” role=”document”>
<div class=”modal-content”>
<div class=”modal-header”>
<h5 class=”modal-title”>Give it a title</h5>
<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”>
<span aria-hidden=”true”>×</span>
</button>
</div>
<div class=”modal-body”>
<p>Add some modal body text here.</p>
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-primary”>Agree</button>
<button type=”button” class=”btn btn-secondary” data-
dismiss=”modal”>Disagree</button>
</div>
</div>
</div>
</div>
.modal-dialog-centered
Tüm içeriği dikey olarak ortalamayı seçebilirsiniz.
<div class=”modal” tabindex=”-1” role=”dialog”>
<div class=”modal-dialog modal-dialog-centered” role=”document”>
<h5 class=”modal-title” id=”exampleModalCenterTitle”>Modal title</h5>
</button>
</div>
Bazı metinleri listeleyin.

</div>
<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</
button>
<button type=”button” class=”btn btn-primary”>Save changes</button>
</div>
</div>
</div>
</div>
31
.modal-dialog-scrollable
Bir modalın içine daha fazla içerik yerleştirmeniz gerektiğinde (örneğin, uzun bir gizlilik politikası), sayfadan bağımsız
olarak kaydırmasını sağlamak için bu sınıfı ekleyebilirsiniz.
<div class=”modal” id=”exampleModalScrollable” tabindex=”-1” role=”dialog” aria-labe
lledby=”exampleModalScrollableLabel” aria-hidden=”true”>
<div class=”modal-dialog modal-dialog-scrollable” role=”document”>
<h5 class=”modal-title” id=”exampleModalCenteredLabel”>Modal title</h5>
</button>
</div>
Bu, gerçekten okumadan kabul edeceğiniz çok uzun bir şartlar ve koşullar sözleşmesidir.
</div>
button>
</div>
</div>
</div>
</div>
.modal fade
İçerik için solma etkinleştirildi.
<div class=”modal fade” id=”exampleModal3” tabindex=”-1” role=”dialog” aria-
labelledby=”exampleModal3Label” aria-hidden=”true”>
<div class=”modal-dialog” role=”document”>
<h5 class=”modal-title” id=”exampleModal3Label”>Modal title</h5>
</button>
</div>
En azından burada bir şeyleri düzeltmeliyim.
</div>
button>
</div>
</div>
</div>
</div>
.modal-lg, -sm, -xl

Modellerinizin boyutlarını da ayarlayabilirsiniz.

<button class=”btn btn-primary” data-toggle=”modal” data-target=”.bd-example-modal-
lg”>
Büyük mod
</button>
<div class=”modal fade bd-example-modal-lg” tabindex=”-1” role=”dialog”
aria-labelledby=”myLargeModalLabel” aria-hidden=”true”>
<div class=”modal-dialog modal-lg”>
Ben büyük bir modelim!
</div>
32
</div>
</div>

<button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”.bd-
example-modal-sm”>
Küçük mod
</button>
<div class=”modal fade bd-example-modal-sm” tabindex=”-1” role=”dialog”

aria-labelledby=”mySmallModalLabel” aria-hidden=”true”>
<div class=”modal-dialog modal-sm”>
Ben küçük ve şirin bir modelim.
</div>
</div>
</div>

<button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”.bd-
example-modal-xl”>
Huge modal
</button>
<div class=”modal fade bd-example-modal-xl” tabindex=”-1” role=”dialog”

aria-labelledby=”myHugeModalLabel” aria-hidden=”true”>
<div class=”modal-dialog modal-xl”>
I’m a jumbo-sized modal!
</div>
</div>
</div>
NOT: Bootstrap, Modal sayfasında tüm bu bileşenlerin bir demosunu sunar. Bir göz atmaya değer.
Sayfalayıcılar
HTML biliyorsanız, sayfalayıcılar sizin için yeni bir şey değil. Bootstrap ile bunları şekillendirmek için birkaç seçeneğiniz var.
.pagination - basic pagination example

<nav aria-label=”Page navigation example”>
<ul class=”pagination”>
<li class=”page-item”>
<a class=”page-link” href=”#!” aria-label=”Previous”>
<span aria-hidden=”true”>«</span>
</a>
</li>
<li class=”page-item”><a class=”page-link” href=”#!”>1</a></li>
<a class=”page-link” href=”#!” aria-label=”Next”>
<span aria-hidden=”true”>»</span>
</a>
</li>
</ul>
</nav>
33
.page-item disabled
Sayfalandırma öğelerinden birini veya birkaçını devre dışı bırakmayı seçebilirsiniz.
<nav aria-label=”...”>
<li class=”page-item disabled”>
<a class=”page-link” href=”#” tabindex=”-1” aria-disabled=”true”>Previous</a>
</li>
<li class=”page-item”><a class=”page-link” href=”#”>1</a></li>
<li class=”page-item active” aria-current=”page”>
<a class=”page-link” href=”#”>2 <span class=”sr-only”>(current)</span></a>
</li>
<li class=”page-item”><a class=”page-link” href=”#”>3</a></li>
<a class=”page-link” href=”#”>Next</a>
</li>
</ul>
</nav>
.page-item active
aktif, geçerli aşamayı mavi ile vurgulayarak gösterir.
<a class=”page-link” href=”#!” tabindex=”-1”>Previous</a>
</li>
<li class=”page-item active”>
<a class=”page-link” href=”#!”>2 <span class=”sr-only”>(current)</span></a>
</li>
<a class=”page-link” href=”#!”>Next</a>
</li>
</ul>
</nav>
.pagination-lg
Sayfalandırmanızı daha büyük ve daha cesur hale getirin.
<ul class=”pagination pagination-lg”>
</li>
</li>
</ul>
</nav>
34
.pagination-sm
Veya daha küçük ve daha az görünür hale getirin.
<ul class=”pagination pagination-sm”>
</li>
</li>
</ul>
</nav>
Popovers
Popover eklentisi, bir kullanıcı öğeye tıkladığında etkinleştirilen, içerik ve diğer öğeler içeren bir açılır kutu oluşturmanıza
olanak tanır. Popover'lar araç ipuçlarına benzer, ancak daha fazla içeriğe sığar.
Başlamadan Önce Bilmeniz Gerekenler:
• Özelliği eklemelisiniz, data-toggle=“popover” bir popover oluşturmak için bir öğeye.
• Başlık metnini belirtmek için başlık özelliğini kullanmalısınız.
• Popover'ın gövdesinde hangi içeriğin görüntüleneceğini belirtmek için data-content özniteliğini kullanın.
<a href=”#” data-toggle=”popover” title=”Popover Header” data-content=”Some content
inside the popover”>Toggle popover</a>
Popover'ları başlatmak için jQuery kullanmanız gerekir - popover()
Popover
Sayfanızda açılır pencereleri etkinleştirecek kod:
<script>
$(document).ready(function(){
$(‘[data-toggle=”popover”]’).popover();
});
</script>
Popover'larınızı Konumlandırma - üst, alt, sol veya sağ

Popover'ınız için dört konumdan birini belirtin.
üstte popover
<button type=”button” class=”btn btn-secondary” data-container=”body” data-
toggle=”popover” data-placement=”top” data-content=”Vivamus sagittis lacus vel augue
laoreet rutrum faucibus.”>
Üstte popover
</button>
Sağdaki popover
toggle=”popover” data-placement=”right” data-content=”Vivamus sagittis lacus vel
augue laoreet rutrum faucibus.”>
Sağdaki popover
</button>
35
Altta popover
toggle=”popover” data-placement=”bottom” data-content=”Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.”>
Altta popover
</button>
Soldaki popover
toggle=”popover” data-placement=”left” data-content=”Vivamus sagittis lacus vel
augue laoreet rutrum faucibus.”>
Soldaki popover
</button>
Kapsayıcı Popover Oluşturma

Bir üst öğedeki bazı stillerin görünümünü bozabileceğini düşündüğünüzde özel bir kapsayıcı kodlayın. Bir kap
özelliği eklemek, açılır öğenin HTML'sini üst öğenin içine "saracaktır".
$(function () {
$(‘.example-popover’).popover({
container: ‘body’
})
})
.popover-dismiss
Kullanıcılara, öğeye ikinci kez tıkladıklarında bir açılır pencereyi kapatma seçeneği sunun. Kullanıcı öğenin dışına
tıkladığında da açılır pencerenin kapanmasını ayarlayabilirsiniz: data-trigger="focus" niteliğini kullanın.
Varsayılan olarak, öğeye tekrar tıkladığınızda açılır pencere kapanır. Ancak, öğenin dışına tıklandığında açılır pencereyi
kapatacak olan data-trigger=”focus” niteliğini kullanabilirsiniz:
<a href=”#” title=”Dismissible popover” data-toggle=”popover” data-trigger=”focus”
data-content=”Click anywhere in the document to close this popover”>Click me</a>
İlerlemek
Özel bir ilerleme çubuğu geliştirin ve isterseniz animasyon ve metin etiketleri gibi ek stil öğeleri ekleyin.
.progress
Temel bir ilerleme çubuğu ayarlama sınıfı. İlerleme çubuğunuzun maksimum değerini gösteren bir sarmalayıcı görevi görür.
<div class=”progress”>
<div class=”progress-bar” role=”progressbar” style=”width: 41%” aria-valuenow=”41”
aria-valuemin=”0” aria-valuemax=”100”></div>
</div>
.progress-bar
Mevcut ilerlemeyi belirtmek için bu komutu kullanın.
</div>
36
.progress-bar-striped
İlerleme çubuğu bölümüne bazı şeritler ekleyin.
<div class=”progress-bar progress-bar-striped” role=”progressbar” style=”width:
10%” aria-valuenow=”10” aria-valuemin=”0” aria-valuemax=”100”></div>
</div>
.progress-bar-animated
Hayır, bu çizgileri hareket ettirme, berber direği stili.
<div class=”progress-bar progress-bar-striped progress-bar-animated”
role=”progressbar” aria-valuenow=”75” aria-valuemin=”0” aria-valuemax=”100”
style=”width: 75%”></div>
</div>
Add Multiple Progress Bars

Farklı öğeler için ilerlemeyi belirtmek için aynı anda birkaç çubuk ekleyebilirsiniz. Her biri için tahsisi beğeninize göre
ayarlayın.
<div class=”progress-bar bg-success” role=”progressbar” style=”width: 30%” aria-
valuenow=”30” aria-valuemin=”0” aria-valuemax=”100”></div>
<div class=”progress-bar bg-info” role=”progressbar” style=”width: 20%” aria-
valuenow=”20” aria-valuemin=”0” aria-valuemax=”100”></div>
</div>
37
Döndürücü
Bu animasyonlu döndürücüyü eklemek için bu eklentiyi kullanın. Döndürücüler, herhangi bir JS olmadan yalnızca HTML ve CSS ile oluşturulmuştur. Ancak…
bazı stil seçenekleri için JavaScript'e ihtiyacınız olabilir, ör. görünürlüklerini değiştirmek için. Ayrıca, aralarından seçim yapabileceğiniz çok sayıda güzel
seçeneğiniz var.
.spinner-border
Siyah beyaz bir yükleme göstergesi oluşturun.
<div class=”spinner-border” role=”status”>
<span class=”sr-only”>Loading...</span>
</div>
.spinner-border-primary (-secondary, -light, -dark, -warning, -success, -info, -danger)
Veya standart Bootstrap stil özelliklerini kullanarak renkli bir kenarlık ekleyin.
<div class=”spinner-border text-primary” role=”status”> <span class=”sr-
only”>Loading...</span> </div>
<div class=”spinner-border text-secondary” role=”status”> <span class=”sr-
<div class=”spinner-border text-success” role=”status”> <span class=”sr-
<div class=”spinner-border text-danger” role=”status”><span class=”sr-
<div class=”spinner-border text-warning” role=”status”> <span class=”sr-
<div class=”spinner-border text-info” role=”status”><span class=”sr-
<div class=”spinner-border text-light” role=”status”><span class=”sr-
only”>Loading...</span></div>
<div class=”spinner-border text-dark” role=”status”><span class=”sr-
Growing Spinner
Boyutu artan ve azalan titreşimli bir döndürücü oluşturun. Eğirme makinesine korkak bir alternatif :). Yine, birkaç renkte
tasarlanabilir.
<div class=”spinner-grow text-primary” role=”status”> <span class=”sr-
Tablo
Bootstrap, tablolar oluşturmak için kolay ve kolay bir yol sunar. Bir <table> öğesine temel sınıf .table ekleyin ve ekstra
özel stiller ekleyin.
Not: Tüm tablo stilleri Bootstrap 4'te miras alınır. İç içe geçmiş her tablo, tıpkı üst öğe gibi stillendirilir.
.table - example
<table class=”table”>
<thead>
<tr>
<th scope=”col”>#</th>
<th scope=”col”>First</th>
<th scope=”col”>Last</th>
<th scope=”col”>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope=”row”>1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
38
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
.table-dark
Koyu arka plana ve açık renkli metinlere sahip bir tablo oluşturun.
<table class=”table table-dark”>
<thead>
<tr>
<th scope=”col”>Nickname</th>
<th scope=”col”>Followers</th>
<th scope=”col”>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>Minimark</td>
<td>5,000</td>
<td>@minik</td>
</tr>
<tr>
<td>Gigi_B</td>
<td>24K</td>
<td>@gig</td>
</tr>
<tr>
<td>Birdie</td>
<td>50K</td>
<td>@bi)rdi</td>
</tr>
</tbody>
</table>
.thead-light and .thread-dark

Ayrıca koyu/açık özniteliğini kullanarak tablo girişlerinden yalnızca birini vurgulamayı da seçebilirsiniz.
<thead class=”thead-dark”>
<tr>
<th scope=”col”>Episode</th>
<th scope=”col”>Name</th>
<th scope=”col”>Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td>#4</td>
<td>New Hope</td>
<td>10/10</td>
</tr>
39
<tr>
<td>#6</td>
<td>Return of the Jedi</td>
<td>9/10</td>
</tr>
<tr>
<td>#9</td>
<td>Rise of the Skywalker</td>
<td>6/10</td>
</tr>
</tbody>
</table>
<thead class=”thead-light”>
<tr>
<th scope=”col”>Episode</th>
<th scope=”col”>Title</th>
<th scope=”col”>Raiting</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>#2</td>
<td>Revenge of the Sith</td>
<td>7/10</td>
</tr>
<tr>
<td>#5</td>
<td>The Empire Strikes Back</td>
<td>10/10</td>
</tr>
</tbody>
</table>
.table-striped
Tablonuzu zebra çizgili yapmak için bu sınıfı <tbody> içine ekleyin.
<table class=”table table-striped”>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Darth</td>
<td>Vader</td>
</tr>
<tr>
40
<td>Ray</td>
<td>Just Ray</td>
</tr>
</tbody>
</table>
.table-bordered
Tüm hücreler ve tablo kenarları için stil kenarlıkları.
<table class=”table table-bordered”>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lil</td>
<td>Kim</td>
</tr>
<tr>
<td>Kanye</td>
<td>West</td>
</tr>
</tbody>
</table>
.table-borderless
Masanıza minimalist bir hava katmak için sınırları ortadan kaldırın.
<table class=”table table-borderless”>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Indiana</td>
<td>Jones</td>
</tr>
<tr>
<td>Han</td>
<td>Solo</td>
</tr>
</tbody>
</table>
.table-hover
Tablo satırlarına fareyle üzerine gelme durumu ekleyin.
<table class=”table table-hover”>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
41
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Twain</td>
</tr>
<tr>
<td>Henry</td>
<td>James</td>
</tr>
</tbody>
</table>
.table-sm
Masanızı küçültün. Bu sınıf, hücre dolgusunu yarıya indirecektir.
<table class=”table table-sm”>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amy</td>
<td>Winehouse</td>
</tr>
<tr>
<td>Kurt</td>
<td>Cobain</td>
</tr>
</tbody>
</table>
.table-active (-primary, -default, -secondary, -success, -danger,

-warning, -info, -light, -dark).
Tek tek tablo satırlarını farklı renklerde boyayın.
<tr class=”table-active”>...</tr>
<tr class=”table-primary”>...</tr>
<tr class=”table-secondary”>...</tr>
<tr class=”table-success”>...</tr>
<tr class=”table-danger”>...</tr>
<tr class=”table-warning”>...</tr>
<tr class=”table-info”>...</tr>
<tr class=”table-light”>...</tr>
<tr class=”table-dark”>...</tr>
42
Toasts
Flexbox ile "anında iletme bildirimleri" eklemenizi sağlayan bir eklenti - konumlandırması ve hizalaması çok
kolay. bunları uyarılara alternatif olarak kullanın.
.toast - example
<div class=”toast” role=”alert” aria-live=”assertive” aria-atomic=”true”>
<div class=”toast-header”>
<img src=”...” class=”rounded mr-2” alt=”...”>
<strong class=”mr-auto”>Bootstrap</strong>
<small>11 mins ago</small>
<button type=”button” class=”ml-2 mb-1 close” data-dismiss=”toast” aria-
label=”Close”>
</button>
</div>
<div class=”toast-body”>
Kudos, ben bir tost mesajıyım!
</div>
</div>
Araç ipuçları
Araç ipuçları, kullanıcılara düğme veya başka bir web sitesi öğesi hakkında ek bağlam sağlayan küçük metin açılır pencereleridir.
Bootstrap 4'te araç ipuçları, konumlandırma için Popper.js kitaplığını kullanır. Bu yüzden onları kullanmak için popper eklemelisiniz.
bootstrap.js'den önce min.js veya bootstrap.bundle.min.js / bootstrap.bundle.js kullanın.
Araç İpuçlarını Etkinleştir

$(function () {$(‘[data-toggle=”tooltip”]’).tooltip()})
Hizalama Aracı İpuçları

Araç ipucu üstte
<button type=”button” class=”btn btn-secondary” data-toggle=”tooltip” data-
placement=”top” title=”Tooltip on top”> </button>
Sağdaki araç ipucu

placement=”right” title=”Tooltip on right”></button>
Alttaki araç ipucu

placement=”bottom” title=”Tooltip on bottom”></button>
Soldaki araç ipucu

placement=”left” title=”Tooltip on left”>
Daha gelişmiş özelleştirmeler ve JavaScript yöntemleri için resmi Araç İpucu belgelerine bakın.
43
Bootstrap Stil Temelleri

Kesme Noktaları
Çoğu bileşen, düzen ve ızgara sistemi için Bootstrap aşağıdaki kesme noktası değerlerini kullanır:
Extra small < 544px
Small ≥ 544px
Medium ≥ 768px
Lare ≥ 992px
Extra large ≥ 1200px
Izgaralar ve Sütunlar
Flexbox aracılığıyla içeriği düzenlemek ve hizalamak kolaydır; tamamen duyarlı. 12 sütunlu bir sistem, varsayılan
olarak 5 katman, önceden tanımlanmış sınıflar ve birçok değişken elde edersiniz.
Izgara Boyutlandırma Seçenekleri

.col-xs-: container width - auto/none; column width - auto.
.col-sm-: container width - 750px; column width - ~62px
.col-md-: container width - 970px ; column width - ~81px
.col-lg-: container width - 1170px; column width - ~97px
Temel .container üst ızgarası

Önceden tanımlanmış ızgara sınıflarıyla 3 eşit sütun oluşturun
<div class=”row”>
<div class=”col-sm”>
One of three columns
</div>
</div>
</div>
</div>
</div>
.container-fluid
Kapsayıcınızı tüm bakış açısına yayılacak şekilde ölçeklendirin.
<div class=”container-fluid”>

</div>
Sütun Boyutları
xs, sm, md, lg arasından seçim yapın. Yine, sütun eklediğinizde, tüm cihazların ekran boyutlarına uymaları gerekir veya
kullanıcılar hüsrana uğrayacaktır.
İşte kod parçacığı - sadece size öğesini değiştirin
<div class=”row”>
<div class=”col-xl-2”>

44
</div>

</div>

</div>
</div>
</div>
.no-gutters
Sütunlar arasındaki standart boşluk her iki tarafta 15 pikseldir. Ama kaldırabilirsiniz.
<div class=”row no-gutters”>
<div class=”col-12 col-sm-6 col-md-8”>.col-12 .col-sm-6 .col-md-8</div>
<div class=”col-6 col-md-4”>.col-6 .col-md-4</div>
</div>
</div>
Tipografi: Başlıklar, gövde metni, listeler ve çok

daha fazlası için ihtiyacınız olan her şey.
Metin Hizalama - sola, sağa, ortalanmış, iki yana yaslanmış
<div> <p class=”text-left”>dotnetfunda is an online tutorial</p>

<p class=”text-center”>dotnetfunda is an online tutorial</p>
<p class=”text-right”>dotnetfunda is an online tutorial</p> </div>
Satır içi listele - bir satırda bir liste görüntüleyin

<ul class=”list-inline”>
<li>Tea</li>
<li>Sugar</li>
<li>Milk</li>
</ul>
Stilsiz liste - varsayılan liste stilini kaldırın.

<ul class=”list-unstyled”>
<li>Coffee</li>
<li>
Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
.text-lowercase
<p class=”text-lowercase”>lowercased text.</p>
.text-uppercase
<p class=”text-uppercase”>uppercased text.</p>
45
.text-capitalize
<p class=”text-capitalize”>capitalized text.</p>
.text-truncate
<p class=”text-truncate”>truncated text.</p>
.text-nowrap
<p class=”text-nowrap”>No Wrap Text.</p>
.text-monoscape
<p class=”text-monospace”>This is in monospace</p>
.text-hide
<h1 class=”text-hide”>Custom heading</h1>
.text-decoration-none
<p class=”text-decoration-none”>this text is not decorated</p>
.initialism
Kısaltmalara stil vermek için daha küçük bir yazı tipi boyutu ekleyin.
Lead
Belirli bir içerik paragrafına vurgu eklemek istediğinizde, paragrafın görsel olarak öne çıkması için yazı tipini biraz daha
büyük ve hatta daha ince yapabilirsiniz.
<p class=”lead”>This is the info you should really pay attention to!</p>
Blockquote
Biraz uzun bir alıntı ekliyorsanız, bu sınıf, onu metnin geri kalanından ayırmanıza olanak tanır.
<blockquote class=”blockquote”>
<p class=”mb-0”>Some cool quote that you’ve found</p>
</blockquote>
Blockquote Footer
Altbilgi öğesini ekleyerek bir teklifin kaynağını ekleyin.
<blockquote class=”blockquote”>
<p class=”mb-0”>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<footer class=”blockquote-footer”>Someone famous in
<cite title=”Source Title”>Source Title</cite>
</footer>
</blockquote>
.text-break
Bu, süper uzun metinlerin diğer tasarım öğelerinizin görünümünü bozmasını önler.
<p class=”text-break”>mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
46
Floats
.float-left - floats item left - all sizes
<div class=”float-left”>Float left on all viewport sizes</div>
<div class=”float-sm-left”>Float left on viewports sized SM (small) or wider</div>
<div class=”float-md-left”>Float left on viewports sized MD (medium) or wider</div>
<div class=”float-lg-left”>Float left on viewports sized LG (large) or wider</div>
<div class=”float-xl-left”>Float left on viewports sized XL (extra-large) or wider</
div>
.float-right - Floats item right - all sizes
<div class=”float-right”>Float right on all viewport sizes</div>

<div class=”float-sm-right”>Float right on viewports sized SM (small) or wider</div>
<div class=”float-md-right”>Float right on viewports sized MD (medium) or wider</
div>
<div class=”float-lg-right”>Float right on viewports sized LG (large) or wider</div>
<div class=”float-xl-right”>Float right on viewports sized XL (extra-large) or
wider</div>
.float-none - Removes float - all sizes
<div class=”float-none”>Don’t float on all viewport sizes</div>

<div class=”float-sm-none”>Don’t float on viewports sized SM (small) or wider</div>
<div class=”float-md-none”>Don’t float on viewports sized MD (medium) or wider</div>
<div class=”float-lg-none”>Don’t float on viewports sized LG (large) or wider</div>
<div class=”float-xl-none”>Don’t float on viewports sized XL (extra-large) or
wider</div>
.clearfix - Üst öğeden kayan noktayı kaldırır

<div class=”clearfix”>...</div>
Flex
Bu tek Bootstrap yardımcı programı aracıyla düzenlerinizi, hizalamalarınızı, boyutlandırmalarınızı, gezinmelerinizi,
ekranlarınızı, renklerinizi, hizalamanızı ve çok daha fazlasını kolayca ve hızlı bir şekilde yönetebilirsiniz.
Flex - sm-lg-md-xl
Tüm öğelerinizi önceden belirlenmiş boyutları kullanarak boyutlandırın ve tamamen duyarlı olun.
<div class=”d-flex flex-sm-column”>...</div>

<div class=”d-flex flex-md-column”>...</div>
<div class=”d-flex flex-lg-column”>...</div>
<div class=”d-flex flex-xl-column”>...</div>
.flex-row and .flex-row-reverse

Yatay yönü ayarlayın veya karşı taraftan başlamak için ters çevirin.
<div class=”d-flex flex-row”>

<div class=”p-2”>Flex item 1</div>
</div>
47
<div class=”d-flex flex-row-reverse”>

</div>
.flex-column and .flex-column-reverse

Sütunların yönünü ayarlayın veya ters yönden ayarlamak için ters çevirin.
<div class=”d-flex flex-column”>

</div>
<div class=”d-flex flex-column-reverse”>

</div>
.Flex-fill
Bu yardımcı program, tüm öğeleri mevcut tüm yatay alanı kaplarken eşit bir genişlikte kalmaya zorlar.
<div class=”d-flex text-white”>
<div class=”p-2 flex-fill bg-primary”>Flex item</div>
<div class=”p-2 flex-fill bg-success”>Flex item</div>
<div class=”p-2 flex-fill bg-primary”>Flex item</div>
</div>
.Flex-grow-*
Esnek öğelerden biri mevcut tüm alanı doldururken diğerlerinin de minimum düzeyde yeterli alana sahip olmasını sağlar.
<div class=”p-2 flex-grow-1 bg-primary”>Flex item</div>
<div class=”p-2 bg-success”>Flex item</div>
<div class=”p-2 bg-primary”>Third flex item</div>
</div>
.Flex-shrink-*
Mevcut alanı doldurmak için öğenin en küçük boyuta küçültme özelliğini etkinleştirin.

<div class=”p-2 w-100 bg-primary”>Flex item</div>
<div class=”p-2 flex-shrink-1 bg-success”>Flex item</div>
</div>
.flex-nowrap, .flex-wrap-reverse and .flex-wrap,

Öğelerin bir sonraki satıra kaydırılmasını veya tek bir satıra (nowrap) sığmasını veya ters sarma işlemini yapmasını
istediğinizde bu sınıfları kullanın. (wrap-reverse).
<div class=”d-flex flex-nowrap”> ... </div>

<div class=”d-flex flex-wrap”> ... </div>
<div class=”d-flex flex-wrap-reverse”> ... </div>
48
.flex justify-content
Metni sağda veya solda yaslamak istediğinizde ve bu yaslamanın başlayıp bitmesini istediğinizde bu sınıfı
ekleyin.
<div class=”d-flex justify-content-start”>
</div>
<div class=”d-flex justify-content-end”>

</div>
.flex align-items
Bir öğe listesi için hizalamanın ne zaman başladığını ve ne zaman
biteceğini belirtin.
<div class=”d-flex align-items-start”>
</div>
<div class=”d-flex align-items-end”>

</div>
.flex align-self-start
Ayrıca, o kap içinde seçili bir öğe için kap hizalamasını geçersiz kılabilirsiniz.
<div class=”align-self-start”>Aligned flex item</div>

49
Hizalama
İçeriğinizi, düğmelerinizi vb. nasıl ve nerede hizalamak istiyorsunuz - sa ğa, sola, ortaya?
.align-baseline
<div class=”align-self-baseline”>Aligned flex item</div>
.align-top -middle - bottom: place buttons where you want.

<span class=”align-baseline”>baseline</span>
<span class=”align-top”>top</span>
<span class=”align-middle”>middle</span>
<span class=”align-bottom”>bottom</span>
.align-text-top -bottom: place text where you want

<span class=”align-text-top”>text-top</span>
<span class=”align-text-bottom”>text-bottom</span>
Kenarlar
Kenarlıklar bir siteye zarafet katar. Vurgu veya estetik için kullanın
.border
<span class=”border border-dark”>Hello World</span>
.border-light, -dark -primary, -secondary, -warning, -success,

-danger, -info. -white)
<span class=”border border-light”></span>
<span class=”border border-dark”></span>
<span class=”border border-primary”></span>
<span class=”border border-secondary”></span>
<span class=”border border-warning”></span>
<span class=”border border-success”></span>
<span class=”border border-danger”></span>
<span class=”border border-info”></span>
<span class=”border border-white”></span>
Border- (top, right, bottom, left,)

<span class=”p-1 border border-primary border-0”>Hello World</span>
<span class=”p-1 border border-primary border-top-0”>Hello World</span>
<span class=”p-1 border border-primary border-right-0”>Hello World</span>
<span class=”p-1 border border-primary border-bottom-0”>Hello World</span>
<span class=”p-1 border border-primary border-left-0”>Hello World</span>
Border Corner Styling Options
<img src=”...” alt=”...” class=”rounded”>

<img src=”...” alt=”...” class=”rounded-top”>
<img src=”...” alt=”...” class=”rounded-right”>
<img src=”...” alt=”...” class=”rounded-bottom”>
<img src=”...” alt=”...” class=”rounded-left”>
<img src=”...” alt=”...” class=”rounded-circle”>
<img src=”...” alt=”...” class=”rounded-0”>
50
Konum- öğelerin konumunu yapılandırın

.sticky-top
Bir öğeyi, kenardan kenara giderek görünümün üst kısmına konumlandırın.
<div class=”sticky-top bg-primary”>Sticky top</div>
.fixed-top, .fixed-bottom
Bir öğeyi, kenardan kenara, görünümün üstüne veya altına yerleştirin.
<div class=”fixed-top”>Something atop</div>

<div class=”fixed-bottom”>Something at the bottom</div>
Gölgeler - ekstra çekicilik için dekoratif kontrastlar ekleyin.
.shadow
<div class=”shadow p-3 mb-5 bg-light rounded”>Regular shadow</div>
.shadow-none
<div class=”shadow-none p-3 mb-5 bg-light rounded”>No shadow</div>
.shadow-sm
<div class=”shadow-sm p-3 mb-5 bg-light rounded”>Small Shadow shadow</div>
.shadow-lg
<div class=”shadow-lg p-3 mb-5 bg-white rounded”>Larger shadow</div>
Görünürlük - herhangi bir öğenin görünürlüğünü ayarlayın

Visible
<div class=”visible”>...</div>
Invisible
<div class=”invisible”>...</div>

Bootstrap Türkçe Kullanım

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Bootstrap Türkçe Kullanım

Uploaded by

Copyright:

Available Formats

Bootstrap

Başlamaya hazırsanız, ücretsiz Bootstrap hile sayfamızı PDF formatında indirin.

Öncelikle, bu bir CSS mobil-

Tam kontrol edebilirsiniz

03 Temel Önyükleme Bileşenleri

04 Önyükleme kaynak kodu öğeleri

04 Önyükleme Anahtar Bileşenleri

05 Önyükleme Ekranı Boyutları

43 Bootstrap Stil Temelleri

Temel Önyükleme Bileşenleri

<script src=”https://code.jquery.com/jquery-3.4.1.slim.min.js” integrity=”sha384-

Önyükleme kaynak kodu öğeleri

Eklentileri yüklemek için:

Önyükleme Ekranı Boyutları

768 992 1200

Önyükleme Anahtar Bileşenleri

.alert-light and .alert-dark

.badge-warning, -success, -info, or -danger

<span class=”badge badge-warning”>Warning</span>

Vurgulu ve Odak Durumları ile İşlem Yapılabilir Rozetler Oluşturun

.btn-light, -dark .btn-primary, -secondary, -transparent, -white,

Standart önceden tanımlanmış stil seçeneklerini kullanarak düğmelerinizi tasarlayın:

<div class=”btn-group” role=”group”>

Not: Grup kartı düzenleri yanıt vermiyor!

Carousel Slide - creating a single slide

<li data-target=”#carouselExampleCaptions” data-slide-to=”1”></li>

<div id=”collapseOne” class=”collapse show” role=”tabpanel” aria-

.form-control-lg and .form-control-sm.

<input class=”form-control form-control-lg” type=”text” placeholder=”.form-control-

.readonly boolean attribute

.input.group - Basic Example

İşte yuvalama için bir pasaj

Not: Yüklü sekme JavaScript eklentisine ihtiyacınız olacak.

<a class=”nav-link” href=”#!”>Link</a>

<ul class=”nav nav-pills”>

NavBar - sayfanın üst kısmındaki temel gezinme başlıkları

.navbar-expand (-sml -mdl -lgl -xl)

<li class=”nav-item active”>

<div class=”collapse navbar-collapse” id=”navbarTogglerDemo02”>

<nav class=”navbar navbar-light bg-light”>

<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>

Bootstrap Modal (Eklenti)

Bazı metinleri listeleyin.

.modal-lg, -sm, -xl

<div class=”modal fade bd-example-modal-sm” tabindex=”-1” role=”dialog”

<div class=”modal fade bd-example-modal-xl” tabindex=”-1” role=”dialog”

.pagination - basic pagination example

Popover'ları başlatmak için jQuery kullanmanız gerekir - popover()

Popover'larınızı Konumlandırma - üst, alt, sol veya sağ

Kapsayıcı Popover Oluşturma

Add Multiple Progress Bars

.thead-light and .thread-dark

.table-active (-primary, -default, -secondary, -success, -danger,

Araç İpuçlarını Etkinleştir

Hizalama Aracı İpuçları

Sağdaki araç ipucu

Alttaki araç ipucu

Soldaki araç ipucu

Bootstrap Stil Temelleri

Izgara Boyutlandırma Seçenekleri

Temel .container üst ızgarası

Tipografi: Başlıklar, gövde metni, listeler ve çok

<div> <p class=”text-left”>dotnetfunda is an online tutorial</p>

Satır içi listele - bir satırda bir liste görüntüleyin