Najnowsze tutoriale tworzenie stron internetowych
 

Bootstrap Get Started

❮ Poprzedni Następny Rozdział ❯

Czym jest Bootstrap ?

  • Bootstrap to framework front-end dla szybszego i łatwiejszego tworzenia stron WWW
  • Bootstrap zawiera HTML i CSS na podstawie szablonów projektowych dla typografii, formularzy, przyciski, tabele, nawigacji, czasowniki modalne, karuzele graficznych i wiele innych, jak również opcjonalnych wtyczek JavaScript
  • Bootstrap daje również możliwość łatwego tworzenia elastycznych wzorów

Czym jest Responsive Web Design?

Responsive web design polega na tworzeniu stron internetowych, które automatycznie dostosowują się wyglądać dobrze na wszystkich urządzeniach, od małych do dużych telefonów stacjonarnych.

Bootstrap Historia

Bootstrap został stworzony przez Marka Otto i Jacob Thornton na Twitterze i wydana jako produkt open source w sierpniu 2011 roku na GitHub.

W czerwcu 2014 r Bootstrap był projekt No.1 na GitHub!

Dlaczego warto skorzystać z Bootstrap ?

Zalety Bootstrap :

  • Łatwy w użyciu: Każdy z zaledwie podstawową wiedzę na temat HTML i CSS można rozpocząć korzystanie Bootstrap
  • Elastyczne funkcje: Bootstrap reaguje CSS 's dopasowuje się do telefonów, tabletów i komputerów stacjonarnych
  • Mobile Pierwsze podejście: W Bootstrap 3 style mobile-first są częścią struktury rdzeniowej
  • Zgodność z przeglądarkami: Bootstrap jest kompatybilny ze wszystkimi nowoczesnymi przeglądarkami (Chrome, Firefox, Internet Explorer, Safari i Opera)

Gdzie szukać Bootstrap ?

Istnieją dwa sposoby, aby zacząć korzystać Bootstrap na własnej stronie internetowej.

Możesz:

  • Pobierz Bootstrap od getbootstrap.com
  • Dołącz Bootstrap z CDN

pobieranie Bootstrap

Jeśli chcesz, aby pobrać i gospodarz Bootstrap siebie, idź do getbootstrap.com i postępuj zgodnie z podanymi tam instrukcjami.

Bootstrap CDN

Jeśli nie chcesz, aby pobrać i gospodarzem Bootstrap siebie, można dołączyć go z CDN (Content Delivery Network).

MaxCDN wsparcie CDN dla Bootstrap CSS 's i JavaScript. Także w jQuery:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Jedną z zalet korzystania z Bootstrap CDN :
Wielu użytkowników już pobrane Bootstrap od MaxCDN podczas wizyty w innym miejscu. W efekcie zostanie on załadowany z pamięci podręcznej, kiedy odwiedza witrynę, co prowadzi do szybszego czasu ładowania. Ponadto, większość CDN's będzie upewnić się, że gdy użytkownik zażąda plik z niego, to będzie podawane z serwera najbliżej nich, co również prowadzi do szybszego czasu ładowania.

Tworzenie Pierwsza strona internetowa z Bootstrap

1. Dodaj doctype HTML5

Bootstrap wykorzystuje elementy HTML i właściwości CSS, które wymagają doctype HTML5.

Zawsze zawierać doctype HTML5 na początku strony, wraz z atrybutem lang i prawidłowym zestawem znaków:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 mobile-first

Bootstrap 3 jest przeznaczony do reagowania na urządzeniach mobilnych. Mobile Pierwsze style są częścią struktury rdzeniowej.

Aby zapewnić poprawne renderowanie i dotknij powiększanie, dodaj następującą <meta> tag wewnątrz <head> element:

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width częścią ustawia szerokość strony śledzić szerokości ekranu urządzenia (które będą się różnić w zależności od urządzenia).

initial-scale=1 część ustawia początkowy poziom powiększenia, gdy strona jest najpierw ładowany przez przeglądarkę.

3. Kontenery

Bootstrap wymaga również element zawierający zawinąć zawartości witryny.

Istnieją dwa typy kontenerów do wyboru:

  1. .container Klasy zapewnia elastyczne stałą szerokość kontenera
  2. .container-fluid klasy zapewnia pełną szerokość kontenera, obejmujące całą szerokość rzutni

Uwaga: Pojemniki nie są przystosowane do gniazdowania (nie można umieścić pojemnik wewnątrz innego pojemnika).

Dwa podstawowe Bootstrap Strony

Poniższy przykład pokazuje kod podstawowy Bootstrap stronie (z elastycznej stałej szerokości pojemnika):

Przykład

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</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">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
Spróbuj sam "

Poniższy przykład pokazuje kod podstawowy Bootstrap stronie (przy pełnym zbiorniku szerokość):

Przykład

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap Example</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">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>
Spróbuj sam "

❮ Poprzedni Następny Rozdział ❯