Bootstrap nedir ve nasıl Kullanılır? Bootstrap 4.6 (Şu an 5.3 yayında) ile modern responsive web siteleri nasıl yapılır?
Bootstrap 4.6 Front-End Geliştiricilerin kullandığı ücretsiz ve son derece popüler bir Css ve Javascript Kütüphanesidir. Bootstrap sayesinde masaüstü, tablet, mobil cihaz ve tüm tarayıcılara uyumlu web sitelerini kolaylıkla geliştirebiliriz. Üstelik ayrı tasarımlar yapmamıza gerek kalmıyor.
Bootstrap içerisinde kullanabileceğimiz bir sürü hazır css class ‘ları vardır. Bu class’ lar sayesinde rutin işlerimiz için sürekli css kodları yazmamız gerekmiyor tek yapmamız gereken bootstrap içerisindeki hazır css class ismini bilmemiz ve ilgili etikete eklememizdir.
Bootstrap’ in resmi web sitesini ziyaret edip kullanımlara göz atmanızı tavsiye ederim.
Örneğin;
<div class="container mt-3">
<div class="alert alert-primary">
Alert Primary
</div>
</div>
Örnek 1 için tıklayınız.
** Yukarıdaki örneğimizde kullandığımız bazı css class’ ları mevcuttur.
.container : Bu class sayesinde sağdan ve soldan boşluk bırakılır. Normalde bu işlemi margin:0 auto; ile yapabilirdik ancak bu kullanım işlerimizi gayet basitleştirdi.
.mt-3 : Bu class sayesinde margin-top ile <div> içeriğini yukarıdan aşağıya almış oluyoruz.
.alert alert-primary : class’ ları sayesinde güzel görünümlü bir uyarı kutusu oluşturmuş oluyoruz.
Gördüğünüz gibi bootstrap ile işlerimizi çok kolaylaşıyor. Tabi ki bu gibi bootstrap class’ ları bootstrap kütüphanesindeki sadece bir kaç class, bunlar haricinde bir sürü class kullanımı mevcut.
Bootstrap Kurulumu Nasıl Yapılır?
Bootstrap 4.6 kütüphanesini nasıl kullanırım ? Bootstrap css ve javascript dosyalarını sayfama nasıl ekleyebilirim?
Boostrap 4.6 kütüphanesi mobile cihazları (mobile-first) hedef alan responsive bir yapıya sahiptir.
Responsive tasarımın etkin olabilmesi için aşağıdaki responsive meta etiketini <head> kısmına eklememiz gerekiyor.
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width özelliği cihazın ekran genişliğini algılayıp sayfanın genişliğini bu değere eşitlemesi ile alakalıdır.
initial-scale=1 ise sayfa ölçeklendirmesini (zoom) ayarlar.
Bootstrap Kurulumu için ilk olarak bootstrap css ve javascript dosyalarını sayfamıza eklememiz gerekiyor.
** Bootstrap css class‘ larını kullanabilmek için boostrap.min.css dosyasının cdn adresini html sayfamızın <head> kısmına eklememiz gerekiyor.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">** Bootstrap Javascript component‘ lerini kullanabilmek içinse aşağıdaki javascript kütüphanelerini </body> kapanış etiketinin hemen üstüne eklememiz gerekiyor.
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>** Boostrap css class’ ları ve javascipt component’ lerini kullabileceğimiz bir html iskeletini aşağıda olduğu gibi alıp kullanabilirsiniz ek bir ayarlama yapmanıza gerek yoktur.
Hazır Başlangıç Şablonu (Starter Template):
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
-->
</body>
</html>Bootstrap Notları:
Kaynak: https://sadikturan.com/bootstrap/bootstrap-nedir/1195