Bootstrap Nedir?
Bootstrap dünyanın en popüler, açık kaynak kodlu, ücretsiz, farklı cihazlar için responsive tasarıma duyarlı bir CSS Framework(kütüphane)'üdür.
İçerisinde mevcut olan sayısız tablo, grafik, ikon, carousel, navigasyon gibi pek çok hazır tasarım sayesinde sitenizi kolayca tasarlayabilirsiniz.
Ayrıca Bootstrap‘in kullandığı Grid (Izgara) sistemi ile sitenizi istediğiniz bölümde konumlandırabilirsiniz. Bu özellik, ekranı dilediğiniz ölçüde bölüp, ayırdığınız bu kısımlara kolayca müdahale etmenizi sağlamaktadır.
Basit bir hazır Bootstrap örneği:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 5 Example</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="jumbotron text-center bg-light p-5 mb-4">
<h1 class="display-4">My First Bootstrap 5 Page</h1>
<p class="lead">Resize this page to see the responsive effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h2>London</h2>
<p>London is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="col-sm-4">
<h2>Paris</h2>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="col-sm-4">
<h2>Tokyo</h2>
<p>Tokyo is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.min.js"></script>
</body>
</html>
Çıktı: 
Faydalı linkler:
Lesson discussion
Swap insights and ask questions about “Bootstrap”.