Öncelikle Bootstrap Nedir ? Hemen Açıklayalım..
Kendisi GNU Yani Açık Kaynak Kodlu Olarak Geliştirilen CSS Kütüphanesidir. Piyasaya çıkmasının amacı web sitelerin tüm mobil cihazlara uyum sağlamasını kolayca yerine getirmek içindir. İçerisinde hazır halde bulunan birçok element vardır örnek vermek gerekirse bunlar: (butonlar, formlar, etiketler, tablolar, baloncuklar ve bilgi yazıları) İşler Böyle Olunca herhangi bir proje tasarlıyorken bu hali hazırda bulunan öğeleri kullanarak tüm cihazlara uygun halde tasarımlar yaratmanıza yarar. Bu sistem sayesinde içinde barındırdığı pratik kodları kullanarak tasarımlarınızı hızlı bir şekilde gerçekleştirmenize olanak verir. Ayrıca kullanılan tüm popüler tarayıcılar ile uyumlu olarak çalışmaktadır.
Bootstrap kullanarak yaptığımız sütunlardan oluşan basit mobil uyumlu sayfadır.
<!DOCTYPE html>
<html lang=”tr”>
<head>
<title>Bootstrap Örnek Sayfa Oluşturma</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.3.6/css/bootstrap.min.css”>
</head>
<body>
<div class=”jumbotron text-center”>
<h1>Anasayfa</h1>
<p>Tarayıcınızı Tekrardan Boyutlandırın Ve Etkiyi Görün…</p>
</div>
<div class=”container”>
<div class=”row”>
<div class=”col-sm-4″>
<h3>1.Sütun</h3>
<p>Yaratıcı Ofis</p>
<p>Manisa Web Tasarım, Manisa Tasarım, Manisa Seo, Yaratıcı Ofisler, Yaratıcı, Yaratıcı Dekorasyonlar, Yaratıcı Ofis Dekorasyonları, Yaratıcı Renkler</p>
</div>
<div class=”col-sm-4″>
<h3>2.Sütun</h3>
<p>Yaratıcı Ofis Blog Sayfası</p>
<p>En İyi Seo Taktikleri, Backlink Hizmeti, Google Optimizasyon</p>
</div>
<div class=”col-sm-4″>
<h3>3.Sütun</h3>
<p>Seo, Web Tasarım, Yaratıcı Tasarımlar, Yaratıcı Ofis Tasarımları, Arama Motoru Optimizasyonu</p>
<p></p>
</div>
</div>
</div>
</body>
</html>
Demo: https://www.w3schools.com/code/tryit.asp?filename=FXQH090F1MSR