Bootstrap nedir ve nasıl Kullanılır? Bootstrap 4 ile modern responsive web siteleri nasıl yapılır?

Bootstrap 4 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>

** 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

Bootstrap 4 kütüphanesini nasıl kullanırım ? Bootstrap css ve javascript

dosyalarını sayfama nasıl ekleyebilirim?

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 49

Boostrap 4 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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/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://code.jquery.com/jquery-3.3.1.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><scri pt src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

** Boostrap css class' ları ve javascipt component' lerini kullabileceğimiz bir html iskeletini aşağıdan olduğu gibi alıp kullanabilirsiniz ek bir ayarlama yapmanıza gerek yoktur.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<title></title>

</head>

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 50

<body>

<h1>Hello, world!</h1>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script

src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js">

</script> <script

src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></s cript>

</body>

</html>

____________________________________________________________

Bootstrap Grids

Bootstrap 4 Grid Sistem nedir ve nasıl kullanılır?

Bootsrap 4 ile içeriklerimizi .container ya da .container-fluid sınıfları içine almamız gerekiyor.

** .container ile responsive olarak yani tarayıcı genişliğine göre .container class' i sayfamızın alacağı sabit genişliği belirler.

<div class="container">

</div>

.container{

height:100px;

background-color:blue;

}

** .container-fluid ile tarayıcının genişliğini hesaba katmadan tam ekran genişliğinde bir sayfamız olur.

<div class="container-fluid">

</div>

.container-fluid{

height:100px;

background-color:blue;

}

Boostrap 4 grid sistem ile;

• her satır .row sınıfı,

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 51

• her kolon .col-* sınıfı ile belirtilir.

Her .row yani her satır içerisinde toplam 12 kolon bulunmaktadır. Toplamdaki 12 kolonu farklı oranlarda birleştirip kullanabiliriz.

Aşağıdaki örneklerde her bir satırı sırasıyla 3, 2, 4 eşit parçaya bölmüş oluruz.

HTML

</div>

</div>

</div> kullanılmadığından dolayı .col sınıfı ile satırlar tarayıcının her genişliğinde yan yana olacaktır.

** Grid sistemin en büyük avantajı responsive bir yapıya sahip olmasıdır yani tarayıcı genişliğine göre her bir kolonu yan yana ya da alt alta alabiliriz.

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 52

@media query' ler ile tarayıcının o anki genişliğini alabiliyoruz ve aldığımız bu değerlere göre <div> etiketlerini yani bootstrap açısından baktığımızda oluşturduğumuz her kolonu alt alta ya da yan yana alabiliriz.

Eğer ki satırda yer varsa yan yana eğer satırda yer kalmadıysa alt satıra alabiliyoruz ki; masaüstü bilgisayarda açılan bir sitenin görünümü yatayda yer kaplarken mobile bir cihazda açılan site tasarımındaki her kolonun alt alta gelmesi daha bir görünüm sağlayacaktır.

Boostrap 4 aşağıdaki media query değerlerini kullanmaktadır.

// Small devices (landscape phones, 576px ve yukarısı)

@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px ve yukarısı)

@media (min-width: 768px) { ... }

// Large devices (desktops, 992px ve yukarısı)

@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px ve yukarısı)

@media (min-width: 1200px) { ... }

Yani tarayıcı genişliği;

• 576px ve aşağısında mı (.xs)

• minimum 576px ve 768px aralığında mı (.sm)

• minimum 768px ve 992px aralığında mı (md)

• minimum 992px ve 1200px aralığında mı (lg)

• ya da 1200px ve üstünde mi (xl)

** .xs sınıfı bootstrap 4 'de kullanılmamaktadır.

media query kullanarak sayısal değerlerle uğraşmak yerine bootstrap 4 ile belirlenen ve her bir sayısal değere karşılık gelen class isimlerini kullanmak çok daha kolaydır. Bu class isimleri .xs (ekstra small), .sm (small), .md (medium), .lg(large) ve .xl (eksra large) sınıflarıdır.

<div class="row">

<div class="col-sm-3">.col-sm-3</div>

W e b v e İ n t e r n e t T e k n o l o j i l e r i | 53

</div>

** col-sm-3 sınıfları ile 12 kolonluk satırı 4 eşit parçaya bölmüş oluruz. Ancak sm sınıfı eklediğimizden dolayı small cihazların altındaki çözünürlükte (576px) kolonlar alt alta gelecektir. Örnekte tarayıcı genişliğini azaltıp 575px 'de her bir div' in alt alta geldiğini görebilirsiniz.

<div class="container"> 768px' in altına indiği anda kolonlar alt alta gelecektir.

_____________________________________________________________

Bootstrap Typography

Bootstrap typography nedir ve nasıl kullanılır? Bootstrap text etiketlerini

Belgede WEB VE İNTERNET TEKNOLOJİLERİ (sayfa 49-54)