Odak modu

Bootstrap

Bootstrap Nedir?

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:

Background Pattern
Birlikte öğrenelim

Sektörde en çok aranan yazılım becerilerini kazan

Yapay zeka desteği, birebir mentörlük saatleri, canlı dersler ve senin için özel hazırlanmış içeriklerle eksiklerini tamamla, düzenli geri bildirimler al ve öğrenme sürecini en verimli hale getir.

Yunus Emre Kabakcı

Patika+ mezunu

Patika+ Fullstack Web Development Bootcamp mezunumuz Yunus Emre,

3 ay içinde Katar’dan aldığı teklif ile, global bir şirket olan Pavo Group’da işe başladı!

“İçerik zenginliği, mentor desteği, ileriye dönük bir network sağlaması ve dünyada en çok tercih edilen frameworkler üzerinden bir eğitim veriyor olması Patika+’ı tercih etmemin temel sebepleri oldu!“

Yorumlar

Yorum yapabilmek için derse kayıt olmalısın!