Bootstrap Kullanarak Responsive HTML Tema Yapıyoruz

Merhaba bootstrap açık kaynak kodlu, web sayfaları veya uygulamaları geliştirmek için kullanılabilecek araçlar bütünü ve önyüz çatısıdır. Bootstrap, web sayfaları veya uygulamalarında kullanılabilecek, HTML ve CSS tabanlı tasarım şablonlarını içerir.

Bugün Örnek Olarak bir Tasarım yapacağız ilk olarak HTML taglarımızı açalım.

<!DOCTYPE html>
<html>
<head>
	<title>Benim Bootstrap Sayfam | www.umut.pw</title>
	<meta charset="utf-8">
</head>
<body>

</body>
</html>

Taglarımızı açtık şimdi bootstrap kütüphanemizi sayfamıza ekleyelim ister CDN hizmeti kullanarak istersenizde bootstrap kütüphanesini indirerek sayfanıza ekleyebilirsiniz ben CDN hizmetini kullanacağım.

<!DOCTYPE html>
<html>
<head>
	<title>Benim Bootstrap Sayfam | www.umut.pw</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>

</body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>

Kütüphanemizi sayfamıza ekledik hem css hemde javascript 🙂 devam edelim şimdi Dökümasyon sayfamıza girelim ve Yerleşim alanına bakalım. Ben Sayfamı 3 sütundan oluşturacağım kodumu yazıyorum.

<!DOCTYPE html>
<html>
<head>
	<title>Benim Bootstrap Sayfam | www.umut.pw</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>
</body>
</html>

Sayfamı 3 sütuna ayırdım şimdi sırada sayfama Navbar Ekleyeceğim bunun için bileşenler kısmına geliyorum ve Navbar’ı seçiyorum. sayfama ekliyorum.

<!DOCTYPE html>
<html>
<head>
	<title>Benim Bootstrap Sayfam | www.umut.pw</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>
<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>
</body>
</html>

Sayfama NavBar’ı ekledim şimdi Sayfa içine basit döşemeler yapacağım bundan sonraki kısımlar tamamen sizin zevkinize kaldı sayfa içi döşemeye başlıyorum.

<!DOCTYPE html>
<html>
<head>
	<title>Benim Bootstrap Sayfam | www.umut.pw</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>
<style type="text/css">
	.container
	{
		padding: 20px;
	}
</style>
<div class="container">
  <div class="row">
    <div class="col-sm">
      <div class="card" style="width: 18rem;">
  <img src="https://resmim.net/f/WM0nhi.jpg?nocache" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>
    </div>
    <div class="col-sm">
     <div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

    </div>
    <div class="col-sm">
      <ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

    </div>
  </div>
</div>

</body>
</html>

Sayfa içine 2 Adet Kart ve 1 Adet Listeleme Grubu ekledim Sayfamın Örnek Çıktısı.

benim bu sayfaya ekleyeceğim kod bu kadar tamamen çok basit ve bir satır bile kod yazılmadan responsive bir tasarım yaptık siz daha fazla uğraşak daha güzel tasarımlar elde edebilirsiniz Kolay gelsin.