Bootstrap ile Responsive Web Tasarımı Eğitimi

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


☛Butonlar:.btn

➊<button type="button" ⭐class="btn btn-primary">HTML</button>
➋<button type="button" class="btn btn-secondary">CSS</button>
➌<button type="button" class="btn btn-success">JAVASCRIPT</button>
➍<button type="button" class="btn btn-danger">BOOTSTRAP</button>
➎<button type="button" class="btn btn-warning">SQL</button>
➏<button type="button" class="btn btn-info">PHP</button>
➐</div>

☛Outline Butonlar:.btn-outline

✎Outline butonlar üzerine geldiğinizde vurgulu şekilde görünen butonlardır.

Basic Card

Basic card
➌<button type="button" class="btn btn-outline-success">JAVASCRIPT</button>
➍<button type="button" class="btn btn-outline-danger">BOOTSTRAP</button>
➎<button type="button" class="btn btn-outline-warning">SQL</button>
➏<button type="button" class="btn btn-outline-info">PHP</button>
➐</div>

☛Buton Boyutları: btn-lg,btn-md,btn-sm

➊<button type="button" ⭐class="btn btn-primary btn-lg">btn-lg</button>
➋<button type="button" ⭐class="btn btn-primary btn-md">CSS<button>
➌<button type="button" ⭐class="btn btn-primary btn-sm">btn-sm</button>
➐</div>

☛Butonlar grupları:.btn-group

➊<div class="container-fluid text-center">
➋<div class="btn-group">
➌<button type="button" class="btn btn-danger" >ANA SAYFA</button>
➍<button type="button" class="btn btn-danger">HAKKIMIZDA<button>
➎<button type="button" class="btn btn-danger">İLETİŞİM</button>
➏</div>

☛Dikey Butonlar:.btn-group-vertical

➊<div class="container-fluid text-center">
➋<div class="btn-group-vertical">
➌<button type="button" class="btn btn-secondary" >ANA SAYFA</button>
➍<button type="button" class="btn btn-secondary">HAKKIMIZDA</button>
➎<button type="button" class="btn btn-secondary">İLETİŞİM</button>
➏</div>

☛Dropdown Menü

✎Açılır menüler oluşturmak için iç içe düğme grupları

➊<div class="btn-group" role="group">
➋<button id="btnGroupDrop1" type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Eğitimlerimiz </button>
➌<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
➍<li>a class="dropdown-item" href="#">HTML</a><li>
➎<li>a class="dropdown-item" href="#">CSS</a><li>
➏<li>a class="dropdown-item" href="#">JAVASCRIPT</a><li>
➐<li>a class="dropdown-item" href="#">BOOTSTRAP</a><li>
➑</ul>
➒</div>