Nedir?
Bootstrap, web uygulamaları veya web siteleri için kullanılabilir, open source yani açık kaynak kodlu ve ücretsiz bir önyüz çatısıdır. Mobil uyumlu yani responsive sayfalar için biçilmiş kaftandır. Bootstrap içerisinde HTML ve CSS şablonlarını içerir ve bu sayede navigasyon, button, card, toast gibi nesneleri html formatında yazmak mümkündür.Bu öğelerin hepsinin nasıl web sayfasına ekleneceğini öğrenmek istiyorsanız bu adresi ziyaret edebilirsiniz. Şimdi isterseniz nasıl kullanabileceğinizi anlatayım.
Nasıl Kullanılır?
İlk önce Bootstrap adresini ziyaret ederek Css ve JavaScript dosyalarını indirip proje dizininize taşıyıp ve ardından html dosyasına tanımlayabilirsiniz. Ama bunlar ile uğraşmak istemiyorsanız aşağıda ki CDN kayıtlarını web sayfanızın 'head' kısmına ekleyebilirsiniz.<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
Bootstrap'i projenize eklerken dikkat etmeniz gereken bir ayrıntı var. Jquery'i de eklemeniz gerekmektedir. Bunun sebebi ise Bootstrap'in çalışırken Jquery'i kullanıyor olmasıdır. Eğer Jquery'i eklemezseniz consol ekranında size bir hata verecektir. Son olarak responsive yani mobil uyumlu bir web sayfası hazırlıyorsanız aşağıda ki kodu da head tagları eklemeniz gerekmektedir.
<meta name="viewport" content="width=device-width,initial-scale=1">
Bu kodları da ekledikten sonra web sayfanızın head tagleri aşağıda ki gibi olmalıdır.
<head>
<title>Bootstrap Sayfası</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<title>Bootstrap Sayfası</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
Artık bootstrap'i projemize dahil ettiğimize göre nesneleri nasıl oluşturabileceğinize bakalım. Daha önceden de dediğim gibi Bootstrap'in sayfasına gidebilir veya W3Schools adresinden istediğiniz nesnenin nasıl oluşturulduğuna bakabilirsiniz.
Şimdi, ilk önce kendi nesnenizi nasıl oluşturabileceğinizi anlatayım. İlk önce class'ı 'container' olan bir div oluşturalım. Ardından da içerisine class'ı 'row' olan bir div daha oluşturalım. Bu row div'ini satır olarak düşünebilirsiniz. Eğer alt alta iki tane nesne oluşturacaksanız aynı container'in içerisine iki tane class'ı row olan div oluşturabilirsiniz. Son olarak row divinin içerisine class'ı 'col' olan bir div oluşturmanız gerekiyor. Bu 'col' divini ise gruplar gibi düşünebilirsiniz. Yani yan yana iki tane nesne oluşturacaksanız aynı 'row' divinin içerisine iki tane 'col' divi oluşturmanız gerekmektedir.
Col divlerinin boyutlarını belirlemeniz için belirli class isimleri vardır. Bunlar col-lg-6 şeklinde kullanılırlar. Boyutlar aşağıda ki gibidir.
- -col = <576px
- -col-sm- = >= 576px
- -col-md- = >= 768px
- -col-lg- = >=992px
- -col-xl- = >= 1200px
<div class="container">
<div class="row" style="text-align:center;background:orange;color:#fff;">
<div class="col-sm-8">
Hello World;
</div>
</div>
</div>
<div class="row" style="text-align:center;background:orange;color:#fff;">
<div class="col-sm-8">
Hello World;
</div>
</div>
</div>
Bu div artık responsive bir şekilde çalışacaktır. Buraya örneğini bırakmak istedim ama sanırım blogger buna izin vermiyor. Ama CodePen adresimden bu div'in örneğine bakabilirsiniz. Bıraktığım Codepen adresini ziyaret ettiğinizde görebileceğiniz üzere bir de navbar bulunuyor. Bunu Bootstrap'in kendi web sitesinden aldığım örnek ile ekledim. Sizler de dediğim gibi Bootstrap'in kendi web sitesinden 'Component' kısmında tüm nesnelere ulaşabilirsiniz.
Eğer Codepen'de ki örneğimi ziyaret ederseniz göreceğiniz üzere Bootstrap web sayfaları hazırlarken geliştiricilere çok hız kazandırıyor. Zaten dünya genelinde bu kadar fazla kullanılmasının sebebi de bizlere hız kazandırmasıdır.
Evet arkadaşlar, bu yazımda sizler ile Bootstrap'in ne olduğunu gördük. Umarım işinize yaramıştır ve açık bir dil ile anlatabilmişimdir. İyi Günler!.
Hiç yorum yok:
Yorum Gönder