Sponsorlu

Bootstrap 3 cheat sheet nedir?

admin | 26 Ekim 2025 | Web

Kısaca: Bootstrap 3 cheat sheet, BS3’in en çok kullanılan sınıflarını ve kalıplarını tek sayfada özetleyen “mini başvuru kılavuzu”dur. Aşağıya pratik bir özet bıraktım—kopyala-yapıştırla iş görür.

Hızlı Grid

  • Kırılımlar: xs <768, sm ≥768, md ≥992, lg ≥1200
  • Sütun: .col-xs-6 .col-sm-4 .col-md-3 .col-lg-2
  • Kaydırma: .col-md-offset-2
  • Sırala: .col-md-push-3, .col-md-pull-3
<div class="container">
  <div class="row">
    <div class="col-sm-8">Left</div>
    <div class="col-sm-4">Right</div>
  </div>
</div>

Görünürlük (Responsive Utilities)

  • Gizle: .hidden-xs | .hidden-sm | .hidden-md | .hidden-lg
  • Göster: .visible-xs | .visible-sm | .visible-md | .visible-lg
    (Ayrıca -block, -inline, -inline-block varyantları var)

Tipografi & Yardımcılar

  • Hizalama: .text-left .text-center .text-right .text-justify
  • Dönüşüm: .text-lowercase .text-uppercase .text-capitalize
  • Float: .pull-left .pull-right, temizle: .clearfix
  • Renkler: .text-muted .text-primary .text-success .text-info .text-warning .text-danger
  • Arkaplan: .bg-primary .bg-success .bg-info .bg-warning .bg-danger

Butonlar

<button class="btn btn-default">Default</button>
<button class="btn btn-primary btn-lg">Primary</button>
<button class="btn btn-success btn-sm">Success</button>
<button class="btn btn-link btn-block">Link</button>
  • Renkler: default, primary, success, info, warning, danger, link
  • Boyut: .btn-lg .btn-sm .btn-xs, tam genişlik: .btn-block

Formlar

<form class="form-inline">
  <div class="form-group">
    <label for="e">Email</label>
    <input id="e" class="form-control" type="email" placeholder="ornek@site.com">
  </div>
  <button class="btn btn-primary">Gönder</button>
</form>
  • Temel: .form-group .form-control
  • Düzen: .form-inline veya .form-horizontal
  • Durum: .has-success | .has-warning | .has-error (+ .help-block)
  • Input grup: .input-group, ekler: .input-group-addon

Navigasyon & Navbar

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-toggle="collapse" data-target="#nav">
        <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Marka</a>
    </div>
    <div id="nav" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Ana</a></li>
        <li><a href="#">Link</a></li>
      </ul>
      <p class="navbar-text navbar-right">Merhaba!</p>
    </div>
  </div>
</nav>
  • Temalar: .navbar-default, .navbar-inverse
  • Sabitleme: .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top

Tablolar

<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed">
  ...
</table>
</div>

Görseller

<img class="img-responsive img-rounded"> 
<img class="img-circle">
<img class="img-thumbnail">

Bileşenler (Seçmece)

  • Jumbotron: .jumbotron
  • Panel: .panel .panel-default|primary|success|info|warning|danger
  • Alert: .alert .alert-success|info|warning|danger (+ .alert-dismissable ve kapatma butonu)
  • Label / Badge: .label .label-primary ..., .badge
  • List Group: .list-group → .list-group-item active
  • Media Object: .media .media-left .media-body
  • Well: .well .well-sm .well-lg
  • Progress: .progress → .progress-bar progress-bar-success
  • Modal:
<button class="btn btn-primary" data-toggle="modal" data-target="#m">Aç</button>
<div id="m" class="modal fade">
  <div class="modal-dialog"><div class="modal-content">...</div></div>
</div>
  • Dropdown: .dropdown-toggle + data-toggle="dropdown" → .dropdown-menu
  • Tabs/Pills: .nav nav-tabs / .nav nav-pills (+ .tab-content > .tab-pane)

İkonlar (Glyphicons)

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Not: BS3 ile birlikte gelir; BS4+’ta yoktur.

Kurulum Notu

  • BS3, jQuery (1.9+) ve bootstrap.min.js ister.
    Sıra: jquery.min.js → bootstrap.min.js.

Related Posts