Najnowsze tutoriale tworzenie stron internetowych
 

Bootstrap Theme "Simply Me"

❮ Poprzedni Następny Rozdział ❯

Tworzenie Skórka: "Simply Me"

Ta strona pokaże Ci, jak zbudować Bootstrap motyw od podstaw.

Zaczniemy od prostej strony HTML, a następnie dodać więcej i więcej składników, dopóki mamy w pełni funkcjonalny, osobiste i czułe internetowej.

Wynik będzie wyglądać, i jesteś swobodnie modyfikować, zapisywać, udostępniać lub wykorzystywać robić co chcesz z nim:

Pełna Demo Page Pełny kod źródłowy

HTML startowa

Zaczniemy poniższej stronie HTML:

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

Dodaj Bootstrap CDN i umieścić elementy w pojemniku

Dodaj Bootstrap CDN oraz link do jQuery i umieścić elementy HTML wewnątrz kontenera:

Przykład

<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/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>

Wynik:

Kim jestem?

Ptak

Jestem poszukiwaczem przygód

Spróbuj sam "

Dodaj kolor tła i tekstu Center

1. Dodaj niestandardowej klasy (.bg-1) do pojemnika, aby dodać kolor tła.

2. Dodaj .text-center klasę, aby wyśrodkować tekst wewnątrz pojemnika:

Przykład

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

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

Wynik:

Kim jestem?

Ptak

Jestem poszukiwaczem przygód

Spróbuj sam "

Koło Obraz

Kształt obrazu do kręgu z .img-circle klasy:

Przykład

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

Wynik:

Kim jestem?

Ptak

Jestem poszukiwaczem przygód

Spróbuj sam "

więcej treści

Dodaj więcej treści i umieścić go wewnątrz nowych pojemników:

Przykład

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

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

Wynik:

Kim jestem?

Ptak

Jestem poszukiwaczem przygód

Czym jestem?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed nie eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea Commodo consequat.

Gdzie mnie znaleźć?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed nie eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea Commodo consequat.

Spróbuj sam "

Dodaj wyściółką

Pozwala dokonać pojemniki dobrze wyglądać dodając trochę padding:

Przykład

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

Wynik:

Kim jestem?

Ptak

Jestem poszukiwaczem przygód

Czym jestem?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed nie eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea Commodo consequat.

Gdzie mnie znaleźć?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed nie eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea Commodo consequat.

Spróbuj sam "

Dodaj przycisk

Dodawanie przycisku do połowy pojemnika:

Przykład

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

Wynik:

Czym jestem?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed nie eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea Commodo consequat.

Szukanie
Spróbuj sam "

Dodaj ikonę

Dodaj ikonę Szukaj na przycisk "Szukaj":

Przykład

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

Wynik:

Spróbuj sam "

Zmodyfikować trzeci pojemnik (Dodaj Grid)

Dodać trzy kolumny o jednakowej szerokości wewnątrz trzeciego pojemnika ( .col-sm-4 ):

Przykład

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

Wynik:

Gdzie mnie znaleźć?

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed nie eiusmod tempor incididunt ut labore et dolore magna aliqua.

Obraz

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed nie eiusmod tempor incididunt ut labore et dolore magna aliqua.

Obraz

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed nie eiusmod tempor incididunt ut labore et dolore magna aliqua.

Obraz
Spróbuj sam "

Sprawiają, że obrazy Responsive

Dodać .img-responsive klasy do wszystkich obrazów.

Dodaj display:inline do pierwszego obrazu, aby zmusić go do koncentrować (the .img-responsive klasy dodaje display:block do obrazu, co sprawia, że skok do lewej strony ekranu).

Jeśli obraz ma obejmować całą szerokość ekranu, kiedy zaczyna się układać, dodać width:100% do obrazu.

Podczas otwierania przykład, należy pamiętać, aby zmienić rozmiar ekranu, aby zobaczyć efekt responsive:

Przykład

<!-- 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">
Spróbuj sam "

Dodaj NavBar

Dodaj standardowy pasek nawigacyjny na górze strony z i sprawiają, że składane na mniejszych ekranach:

Przykład

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

Wynik:

Spróbuj sam "

Styl pasek nawigacyjny

Za pomocą CSS, aby dostosować pasek nawigacji:

Przykład

.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;
}

Wynik:

Spróbuj sam "

Dodaj stopkę

Dodaj stopkę i używać go do CSS style:

Przykład

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

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

Wynik:

Spróbuj sam "

final Touch

Spersonalizuj swój temat, dodając czcionki, które lubisz. Użyliśmy "Montserrat" z biblioteki czcionek Google.

Link do czcionki w <head> sekcji:

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

Wtedy można go używać na stronie:

Przykład

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

p {font-size: 16px;}

Mamy również stworzył "pomocnika" klasy marginesu dodać dodatkową przestrzeń, w której naszym zdaniem jest to potrzebne; Zwykle po każdym <h3> i <img> elementu.

Przykład

.margin {margin-bottom: 45px;}
Spróbuj sam "

Kompletna "Simply Me" Theme


Pełna Demo Page Pełny kod źródłowy

❮ Poprzedni Następny Rozdział ❯