Bootstrap ile Responsive Web Tasarımı Eğitimi

İrem Ocaklı tarafından hazırlanmıştır...

☛Listeler:.list-group:

⭐➊<ul class="list-group">
➋<li> class="list-group-item">HTML</li>
➌<li> class="list-group-item">CSS</li>
➍<li> class="list-group-item">JAVASCRIPT</li>
➎<li> class="list-group-item">BOOTSTRAP</li>
➏<ul>
  • HTML
  • CSS
  • JavaScript
  • Bootstrap

☛.list-group-numbered:

⭐➊<ul class="list-group-numbered">
➋<li> class="list-group-item">HTML</li>
➌<li> class="list-group-item">CSS</li>
➍<li> class="list-group-item">JAVASCRIPT</li>
➎<li> class="list-group-item">BOOTSTRAP</li>
➏<ul>
  • HTML
  • CSS
  • JAVSCRIPT
  • BOOTSTRAP

☛Yatay Listeler:.list-group-horizontal:

⭐➊<ul class="list-group list-group-horizontal">
➋<li> class="list-group-item">HTML</li>
➌<li> class="list-group-item">CSS</li>
➍<li> class="list-group-item">JAVASCRIPT</li>
➎<li> class="list-group-item">BOOTSTRAP</li>
➏<ul>
  • HTML
  • CSS
  • JAVSCRIPT
  • BOOTSTRAP

☛Aktif Durum: .active

✎Hangi sayfada olunduğunun vurgulanması için .active kullanılır.

➊<ul class="list-group">
➋<li> ⭐class="list-group-item active">Aktif olan sayfa</li>
➌<li> class="list-group-item">Diğer Sayfa-2</li>
➍<li> class="list-group-item">Diğer Sayfa-3</li>
➏<ul>
  • Aktif olan sayfa
  • Diğer Sayfa-1
  • Diğer Sayfa-2
⇦
⇨