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 téma „Jednoduše já“

❮ Předchozí Další ❯

Vytvořte téma: "Jednoduše já"

Tato stránka vám ukáže, jak vytvořit téma Bootstrap od začátku.

Začneme jednoduchou HTML stránkou a pak budeme přidávat další a další komponenty, dokud nebudeme mít plně funkční, osobní a responzivní web.

Výsledek bude vypadat takto a vy jej můžete volně upravovat, ukládat, sdílet, používat nebo s ním dělat, co chcete:

Ukázka celé stránky

Úvodní stránka HTML

Začneme s následující HTML stránkou:

<!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>

Přidejte Bootstrap CDN a vložte prvky do kontejneru

Přidejte Bootstrap CDN a odkaz na jQuery a vložte prvky HTML do kontejneru:

Příklad

<!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>

Výsledek:

Kdo jsem?

Pták

Jsem dobrodruh

Přidejte barvu pozadí a středový text

1. Přidejte do kontejneru vlastní třídu (.bg-1) a přidejte barvu pozadí.

2. Přidejte .text-centertřídu, abyste vycentrovali text uvnitř kontejneru:

Příklad

 <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>

Výsledek:

Kdo jsem?

Pták

Jsem dobrodruh

Kruhový obrázek

Vytvarujte obrázek do kruhu se .img-circletřídou:

Příklad

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

Výsledek:

Kdo jsem?

Pták

Jsem dobrodruh

Více obsahu

Přidejte další obsah a vložte jej do nových kontejnerů:

Příklad

<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>

Výsledek:

Kdo jsem?

Pták

Jsem dobrodruh

Co jsem?

Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest. Aby z větší části mohl kdokoli z nás vykonávat jakýkoli druh zaměstnání, kromě toho, aby využil cílů, které z toho plynou.

Kde mě najdete?

Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest. Aby z větší části mohl kdokoli z nás vykonávat jakýkoli druh zaměstnání, kromě toho, aby využil cílů, které z toho plynou.

Přidat výplň

Nechte nádoby vypadat dobře přidáním vycpávky:

Příklad

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

Výsledek:

Kdo jsem?

Pták

Jsem dobrodruh

Co jsem?

Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest. Aby z větší části mohl kdokoli z nás vykonávat jakýkoli druh zaměstnání, kromě toho, aby využil cílů, které z toho plynou.

Kde mě najdete?

Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest. Aby z větší části mohl kdokoli z nás vykonávat jakýkoli druh zaměstnání, kromě toho, aby využil cílů, které z toho plynou.

Přidat tlačítko

Přidejte tlačítko do středního kontejneru:

Příklad

<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>

Výsledek:

Co jsem?

Bolest sama o sobě je láska k bolesti, hlavním ekologickým problémům, ale dávám tomuto druhu času na to, aby padl, takže nějaká velká bolest a bolest. Aby z větší části mohl kdokoli z nás vykonávat jakýkoli druh zaměstnání, kromě toho, aby využil cílů, které z toho plynou.

Vyhledávání

Přidat ikonu

Přidejte ikonu Hledat na tlačítko "Hledat":

Příklad

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

Výsledek:

Vyhledávání

Upravit třetí kontejner (přidat mřížku)

Přidejte tři sloupce stejné šířky do třetího kontejneru ( .col-sm-4):

Příklad

<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>

Výsledek:

Kde mě najdete?

Samotná bolest je důležitá, ale bolest je zesílena procesem adipiscingu, ale dávám tomu čas, abych ji utlumil, abych odvedl skvělou práci a bolest.

obraz

Samotná bolest je důležitá, ale bolest je zesílena procesem adipiscingu, ale dávám tomu čas, abych ji utlumil, abych odvedl skvělou práci a bolest.

obraz

Samotná bolest je důležitá, ale bolest je zesílena procesem adipiscingu, ale dávám tomu čas, abych ji utlumil, abych odvedl skvělou práci a bolest.

obraz

Udělejte obrázky responzivní

Přidejte .img-responsivetřídu ke všem obrázkům.

Přidáním display:inlinek prvnímu obrázku vynutíte jeho vystředění ( .img-responsivetřída se přidá display:block k obrázku, takže přeskočí do levé části obrazovky).

Chcete-li, aby se obrázek, když se začne skládat, pokrýval celou šířku obrazovky, přidejte width:100%k obrázku.

Při otevírání příkladu nezapomeňte změnit velikost obrazovky, abyste viděli citlivý efekt:

Příklad

<!-- 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">

Přidejte navigační panel

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 ❯