Bootstrap nedir ?

Merhaba, bu makalemiz de Bootstrap nedir sorusuna genel bilgiler verecek küçük örnekler yapacağız. Bootstrap, Twitter tarafından geliştirilen bir CSS paketidir. Responsive tasarımlar geliştirmek için harika bir araçtır. Kısacası bir CSS framework diyebiliriz.

Bootstrap nedir?

Bootstrap son yılların en çok kullanılan css frameworklerindendir. Kolay kullanımı ve kaynağının fazla olmasından dolayı ve tabiki Twitter’ın desteğinden oldukça popülerdir.

Bootstrap nasıl kurulur?

Öncelikle http://getbootstrap.com adresinden son sürümünü indiriyoruz. Ben bu yazıyı yazdığım sıralarda sürüm “3.3.6” versiyonundaydı. Siz yazıyı okurken hangi versiyonda olacağı bilinmez.

Dikkat! Bootstrap jQuery kütüphanesine ihtiyaç duyar!

Bootstrap Download
Bootstrap Download

İndirme işlemi tamamlandığında css, fonts ve js klasörlerinin olduğunu göreceksiniz. Tam olarak klasör yapısı şu şekilde;

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Bu dosyaları proje dizinimize atıyoruz. Sonrasında index.html isminde bir dosya oluşturalım ve Bootstrap ile ilk örneğimizi yapalım.

index.html dosyamızın içeriği aşağıda ki şekilde olmalıdır.

Ben örneklerimi codepen üzerinden yaptığım için cdn ile çağırıyorum dosyaları. Siz local dosyalarınızdan çağırabilirsiniz.

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap İlk Örnek</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>

  
  <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Gördüğünüz gibi bootstrap.min.css, jquery-2.2.1.min.js ve bootstrap.min.js dosyalarını çağırıyoruz. Evet artık Bootstrap kütüphanesini kullanabiliriz. Küçük bir örnek yapalım.

http://getbootstrap.com/css/ adresinden kullanabileceğiniz bütün css seçicilerini görebilirsiniz.

http://getbootstrap.com/javascript/ adresinden jQuery ile kullanabileceğiniz eklentileri görebilirsiniz.

İlk örneğimizde basit bir h1 başlığı ve yanına ondan daha küçük bir yazı yazdıralım. Bunu h1 ve small etiketleri ile yapabilirsiniz.

<h1>Bootstrap h1 başlığı <small>ikinci yazı bölümü</small></h1>

Bütün kod aşağıda ki gibi;

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap İlk Örnek</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <h1>Bootstrap h1 başlığı <small>ikinci yazı bölümü</small></h1>
  
  <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap birçok farklı tasarım yapabilirsiniz. İlerleyen zamanlarda daha gelişmiş örnekler ile makaleler yazacağım.

Codepen örneğine http://codepen.io/cihanaksoy/pen/aNBgdR bu adresten ulaşabilirsiniz.


Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.