Nedir bu Bootstrap? Neden ve Nasıl kullanılır?

Kasım 25, 2015

Bootstrap nedir?

Son yıllar da, arayüz tasarımın da Bootstrap giderek popülerleşen, Html, css ve javascript elementlerini bizlere hazır olarak sunan bir açık kaynak kodlu framework. Geçtiğimiz yıllar da twitter ekibinin ortaya çıkardığı bu framework ile daha hızlı, pratik, html5&css3 uyumlu responsive tasarımlar çıkarabilmekteyiz. En önemli özelliği de sanırım projeleri daha hızlı bitirmeye olanak sağlamasıdır.

 

Bir kaç örnekle bootstrap nasıl kullanılır sorusuna cevap vermeden önce tasarımda bootstrap bileşenlerini hazır olarak alıp kendi projemizde kullanabileceğimiz bileşenler sayfasının linkini paylaşalım; http://getbootstrap.com/components/

 

Bootstrap nasıl kullanılır?

http://getbootstrap.com/ sitesinden gerekli bootstrap dosyalarını indiriyoruz. İndirdiğimiz dosyadan css, js ve font klasörleri çıkacaktır. Bunlardan bootstrap.min.css ve bootstrap.min.js dosyalarını css ve js klasörlerimize kopyalıyoruz, dilerseniz bootstrap fontlarınıda kullanabilirsiniz. bu dosyaları çağırarak bootstrap ı kullanmaya başlayabilirsiniz.


<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

 

 

yada bootstrap cdn kullanabilirsiniz.


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Bundan sonra sayfamızda kullanacağımız her bootstrap bileşeni için getbootstrap.com sitesinden Gettin started menüsünden gerekli kodları kopyalayıp projemizde kullanacağız.
Kısaca size,nasıl responsive bir sablon oluşturulur göstermek için en çok kullanılan ve temel divleri tanıtacağız.

 

Gettin started menüsünden kopyaladığımız aşağıdaki div’i kullanarak hiç bir css yazmadan ekranı tamamen kaplayan bir şablon oluştururuz. Div’ i özelleştirmek için bi css seçici ekleyebiliriz.


<div class="container-fluid" id="ozel-css"></div>

aşağıdaki div ile 1170 px genişiliğinde bir çerçeve oluştururuz. (bootstrap genel maksimum çerçeve genişliğidir)


<div class="container">

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"></div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12"></div>

Geniş ekran da yani large (lg) yan yana 4 esit parçaya ayrılmış bir div oluşturduk.
Normal ekranda yani (md) yan yana 4 esit parçaya ayrılmış bir div oluşturduk.
Küçük ekranda yani (sm) yan yana 2 esit parçaya ayrılmış bir div oluşturduk.
Ekstra küçük ekranda yani (xs) tek bir div i alt alta sıraladık.
hemen ekran görüntüsüyle bir örnek gösterelim.

 


<div class="section">
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
</div>

bootstrap wordpres temalar

 

 

 

 

 

 

 

 

 

<div class="section">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png"
class="img-responsive">
<h2>A Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit,
<br>sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
<br>Ut enim ad minim veniam, quis nostrud</p>
</div>
<div class="col-md-4">
<img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png"
class="img-responsive">
<h2>A title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit,
<br>sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
<br>Ut enim ad minim veniam, quis nostrud</p>
</div>
<div class="col-md-4">
<img src="http://pingendo.github.io/pingendo-bootstrap/assets/placeholder.png"
class="img-responsive">
<h2>A title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisici elit,
<br>sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
<br>Ut enim ad minim veniam, quis nostrud</p>
</div>
</div>
</div>
</div>

botstrap2

0
Connecting
Please wait...
Mesaj Gönder

Canlı destek şuan aktif değil bize mesaj atabilirsiniz. Ortalama 60 DK içerisinde dönüş sağlanacaktır

Adınız Soyadınız
* E-Posta
* Mesajınız
Sohbet

Merhaba, size nasıl yardımcı olabilirim?

Adınız Soyadınız
* E-Posta
* Sorunuz
Sohbet
Geri Dönüş

Destekle ilgili geri dönüşlerinizi bekliyoruz.

Sorunuzu Çözmeden Yardımcı Oldu mu?