Bootstrap Ile Web Sitesi Yapmak Bolum-3

Bootstrap grid (ızgara) sisteminde 4 sınıf vardır:

• Telefonlar için.......... xs
• Tabletler için............sm 
• Masaüstü için...........md 
• Büyük masaüstü için. lg

Üç Eşit Sütun

Tablet cihazımızda eşit genişlikte 3 sütunlu bir sayfa yapısı kodu ve tarayıcımızdaki görüntüsü aşağıdaki gibi olacaktır.

<div class="row">

  <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>

Bootstrapta buton etiketlerini aşağıdaki örnekte ki gibi (a, button veya input)

elemanlarıyla kullanabiliriz.

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Bootstrapta butonlar için 7 sınıf vardır:

• .btn-default
• .btn-primary
• .btn-success
• .btn-info
• .btn-warning
• .btn-danger
• .btn-link

Yukarıda ki buton stillerine ait kodlarımız aşağıdaki gibi olacaktır.

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</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-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Bootstrapta görüntüler .img-responsive sınıfının eklenmesiyle mobil uyumlu yapılabilir.

.img-rounded sınıfı köşeleri yuvarlatılmış görüntü ekler.

.img-circle sınıfı daire görüntü ekler.

.img-thumbnail sınıfı thumbnail (küçük) görüntü ekler 

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Daha fazlası için www.getbootstrap.com adresini ziyaret edebilirsiniz.

Aşağıdaki videoda veya youtube kanalımda Bootstrapla Web Sayfası Yapma görsel olarak anlatılmaktadır.

Kaynak Kodları İNDİR