HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap Teması "Basitçe Ben"

❮ Öncesi Sonraki ❯

Bir Tema Oluşturun: "Basit Ben"

Bu sayfa size sıfırdan bir Bootstrap temasının nasıl oluşturulacağını gösterecektir.

Basit bir HTML sayfasıyla başlayacağız ve ardından tamamen işlevsel, kişisel ve duyarlı bir web sitesine sahip olana kadar daha fazla bileşen ekleyeceğiz.

Sonuç şöyle görünecek ve istediğiniz her şeyi değiştirmek, kaydetmek, paylaşmak, kullanmak veya yapmakta özgürsünüz:

Tam Sayfa Demosu

HTML Başlangıç ​​Sayfası

Aşağıdaki HTML sayfasıyla başlayacağız:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Theme Simply Me</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h3>Who Am I?</h3>
<img src="bird.jpg" alt="Bird">
<h3>I'm an adventurer</h3>

</body>
</html>

Bootstrap CDN Ekleme ve Öğeleri Kapsayıcıya Yerleştirme

Bootstrap CDN ve jQuery bağlantısını ekleyin ve HTML öğelerini bir kapsayıcıya koyun:

Örnek

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Theme Simply Me</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.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h3>Who Am I?</h3>
  <img src="bird.jpg" alt="Bird">
  <h3>I'm an adventurer</h3>
</div>

</body>
</html>

Sonuç:

Ben kimim?

Kuş

ben bir maceracıyım

Arka Plan Rengi ve Orta Metni Ekle

1. Bir arka plan rengi eklemek için kapsayıcıya özel bir sınıf (.bg-1) ekleyin.

2. .text-centerMetni kabın içinde ortalamak için sınıfı ekleyin:

Örnek

 <head>
  <style>
  .bg-1 {
    background-color: #1abc9c; /* Green */
    color: #ffffff;
  }
  </style>
</head>

<body>
  <div class="container-fluid bg-1 text-center">
    <h3>Who Am I?</h3>
    <img src="bird.jpg" alt="Bird">
    <h3>I'm an adventurer</h3>
  </div>
</body>

Sonuç:

Ben kimim?

Kuş

ben bir maceracıyım

Daire Resmi

.img-circleGörüntüyü sınıfla bir daire şeklinde şekillendirin :

Örnek

<img src="bird.jpg" class="img-circle" alt="Bird">

Sonuç:

Ben kimim?

Kuş

ben bir maceracıyım

Daha Fazla İçerik

Daha fazla içerik ekleyin ve yeni kapsayıcıların içine koyun:

Örnek

<head>
  <style>
  .bg-1 {
    background-color: #1abc9c; /* Green */
    color: #ffffff;
  }
  .bg-2 {
    background-color: #474e5d; /* Dark Blue */
    color: #ffffff;
  }
  .bg-3 {
    background-color: #ffffff; /* White */
    color: #555555;
  }
  </style>
</head>

<body>

<div class="container-fluid bg-1 text-center">
  <h3>Who Am I?</h3>
  <img src="bird.jpg" class="img-circle" alt="Bird">
  <h3>I'm an adventurer</h3>
</div>

<div class="container-fluid bg-2 text-center">
  <h3>What Am I?</h3>
  <p>Lorem ipsum..</p>
</div>

<div class="container-fluid bg-3 text-center">
  <h3>Where To Find Me?</h3>
  <p>Lorem ipsum..</p>
</div>

</body>

Sonuç:

Ben kimim?

Kuş

ben bir maceracıyım

Ben neyim?

Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı. Asgari düzeye gelmek amacıyla, sonuçlarından yararlanmak dışında hangimiz herhangi bir istihdam yapmalıdır.

Beni Nerede Bulacaksınız?

Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı. Asgari düzeye gelmek amacıyla, sonuçlarından yararlanmak dışında hangimiz herhangi bir istihdam yapmalıdır.

Dolgu Ekle

Biraz dolgu ekleyerek kapların güzel görünmesini sağlayalım:

Örnek

<style>
.container-fluid {
  padding-top: 70px;
  padding-bottom: 70px;
}
</style>

Sonuç:

Ben kimim?

Kuş

ben bir maceracıyım

Ben neyim?

Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı. Asgari düzeye gelmek amacıyla, sonuçlarından yararlanmak dışında hangimiz herhangi bir istihdam yapmalıdır.

Beni Nerede Bulacaksınız?

Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı. Asgari düzeye gelmek amacıyla, sonuçlarından yararlanmak dışında hangimiz herhangi bir istihdam yapmalıdır.

Düğme Ekle

Orta kapsayıcıya bir düğme ekleyin:

Örnek

<div class="container-fluid bg-2 text-center">
  <h3>What Am I?</h3>
  <p>Lorem ipsum..</p>
  <a href="#" class="btn btn-default btn-lg">Search</a>
</div>

Sonuç:

Ben neyim?

Acının kendisi, acının sevgisidir, başlıca ekolojik problemlerdir, ama ben bu tür zamanları yere düşmek için veriyorum, öyle ki, biraz büyük acı ve acı. Asgari düzeye gelmek amacıyla, sonuçlarından yararlanmak dışında hangimiz herhangi bir istihdam yapmalıdır.

Aramak

Simge Ekle

"Ara" düğmesine bir Arama simgesi ekleyin:

Örnek

<a href="#" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-search"></span> Search
</a>

Sonuç:

Aramak

Üçüncü Kapsayıcıyı Değiştirin (Izgara Ekle)

Üçüncü kapsayıcının ( ) içine eşit genişlikte üç sütun ekleyin .col-sm-4:

Örnek

<div class="container-fluid bg-3 text-center">
  <h3>Where To Find Me?</h3>
  <div class="row">
    <div class="col-sm-4">
      <p>Lorem ipsum..</p>
      <img src="birds1.jpg" alt="Image">
    </div>
    <div class="col-sm-4">
      <p>Lorem ipsum..</p>
      <img src="birds2.jpg" alt="Image">
    </div>
    <div class="col-sm-4">
      <p>Lorem ipsum..</p>
      <img src="birds3.jpg" alt="Image">
    </div>
  </div>
</div>

Sonuç:

Beni Nerede Bulacaksınız?

Ağrının kendisi önemlidir, ancak ağrı, yağlanma süreciyle artar, ancak onu kesmesi için zaman veriyorum, böylece harika işler ve acı çekeyim.

resim

Ağrının kendisi önemlidir, ancak ağrı, yağlanma süreciyle artar, ancak onu kesmesi için zaman veriyorum, böylece harika işler ve acı çekeyim.

resim

Ağrının kendisi önemlidir, ancak ağrı, yağlanma süreciyle artar, ancak onu kesmesi için zaman veriyorum, böylece harika işler ve acı çekeyim.

resim

Görüntüleri Duyarlı Hale Getirin

.img-responsiveSınıfı tüm resimlere ekleyin .

display:inlineOrtalanmaya zorlamak için ilk resme ekleyin ( .img-responsivesınıf display:block resme ekler, bu da onu ekranın soluna atlar).

Görüntünün yığınlanmaya başladığında ekranın tüm genişliğini kaplamasını istiyorsanız, görüntüye ekleyin width:100%.

Örneği açarken, duyarlı efekti görmek için ekranı yeniden boyutlandırmayı unutmayın:

Örnek

<!-- The circular bird -->
<img src="bird.jpg" class="img-responsive img-circle" style="display:inline" alt="Bird">

<!-- The birds in our grid: -->
<img src="birds1.jpg" class="img-responsive" style="width:100%" alt="Image">
<img src="birds2.jpg" class="img-responsive" style="width:100%" alt="Image">
<img src="birds3.jpg" class="img-responsive" style="width:100%" alt="Image">

Gezinme çubuğu ekleyin

Add a standard navigation bar at the top of the page with and make it collapsible on smaller screens:

Example

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Me</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">WHO</a></li>
        <li><a href="#">WHAT</a></li>
        <li><a href="#">WHERE</a></li>
      </ul>
    </div>
  </div>
</nav>

Result:

Style The Navbar

Use CSS to customize the navigation bar:

Example

.navbar {
  padding-top: 15px;
  padding-bottom: 15px;
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  font-size: 12px;
  letter-spacing: 5px;
}

.navbar-nav li a:hover {
  color: #1abc9c !important;
}

Result:

Add a Footer

Add a footer and use CSS to style it:

Example

<style>
.bg-4 {
  background-color: #2f2f2f;
  color: #ffffff;
}
</style>

<footer class="container-fluid bg-4 text-center">
  <p>Bootstrap Theme Made By <a href="https://www.w3schools.com">www.w3schools.com</a></p>
</footer>

Result:

Final Touch

Personalize your Theme by adding a font that you like. We have used "Montserrat" from Google's Font Library.

Link to the font in the <head> section:

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

Then you can use it in the page:

Example

body {
  font: 20px "Montserrat", sans-serif;
  line-height: 1.8;
  color: #f5f6f7;
}

p {font-size: 16px;}

We have also created a "helper" margin class to add extra space where we think it's needed; usually after each <h3> and <img> element.

Example

.margin {margin-bottom: 45px;}

Complete "Simply Me" Theme


Full Page Demo

❮ Previous Next ❯