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 Začínáme

❮ Předchozí Další ❯

Co je Bootstrap?

  • Bootstrap je bezplatný front-end framework pro rychlejší a snadnější vývoj webu
  • Bootstrap obsahuje šablony návrhu založené na HTML a CSS pro typografii, formuláře, tlačítka, tabulky, navigaci, modály, karusely obrázků a mnoho dalších, stejně jako volitelné pluginy JavaScript
  • Bootstrap vám také dává možnost snadno vytvářet responzivní návrhy

Co je responzivní web design?

Responzivní web design je o vytváření webových stránek, které se automaticky upravují tak, aby vypadaly dobře na všech zařízeních, od malých telefonů po velké stolní počítače.

Příklad bootstrapu

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>

Historie bootstrapu

Bootstrap vyvinuli Mark Otto a Jacob Thornton na Twitteru a jako open source produkt byl vydán v srpnu 2011 na GitHubu.

V červnu 2014 byl Bootstrap projekt č. 1 na GitHubu!

Proč používat Bootstrap?

Výhody Bootstrapu:

  • Snadné použití: Bootstrap může začít používat kdokoli, kdo má jen základní znalosti HTML a CSS
  • Responzivní funkce: Responzivní CSS Bootstrapu se přizpůsobí telefonům, tabletům a stolním počítačům
  • Mobile-first přístup: V Bootstrap 3 jsou mobile-first styly součástí základního rámce
  • Kompatibilita s prohlížeči: Bootstrap je kompatibilní se všemi moderními prohlížeči (Chrome, Firefox, Internet Explorer, Edge, Safari a Opera)

Bootstrap verze

Tento tutoriál navazuje na Bootstrap 3 , který byl vydán v roce 2013. Pokrýváme však i novější verze; Bootstrap 4 (vydáno v roce 2018) a Bootstrap 5 (vydáno v roce 2021) .

Bootstrap 5 je nejnovější verze Bootstrapu ; s novými komponentami, rychlejšími styly, větší odezvou atd. Podporuje nejnovější stabilní verze všech hlavních prohlížečů a platforem. Internet Explorer 11 a nižší však nejsou podporovány.

Hlavní rozdíly mezi Bootstrap 5 a Bootstrap 3 & 4 jsou v tom, že Bootstrap 5 přešel na JavaScript místo jQuery .

Poznámka: Bootstrap 3 a Bootstrap 4 je stále podporován týmem pro kritické opravy chyb a změny dokumentace a je naprosto bezpečné je nadále používat. Nové funkce k nim však NEBUDOU přidány.

Kde získat Bootstrap?

Existují dva způsoby, jak začít používat Bootstrap na svém vlastním webu.

Můžeš:

  • Stáhněte si Bootstrap z getbootstrap.com
  • Zahrnout Bootstrap z CDN

Stahování Bootstrap

Pokud si chcete Bootstrap stáhnout a hostovat sami, přejděte na getbootstrap.com a postupujte podle pokynů tam.

Bootstrap CDN

Pokud si sami nechcete stahovat a hostovat Bootstrap, můžete jej zahrnout z CDN (Content Delivery Network).

MaxCDN poskytuje podporu CDN pro CSS a JavaScript Bootstrapu. Musíte také zahrnout jQuery:

MaxCDN:

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

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

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

Jedna výhoda používání Bootstrap CDN:
Mnoho uživatelů si již stáhlo Bootstrap z MaxCDN při návštěvě jiného webu. V důsledku toho bude načten z mezipaměti, když navštíví váš web, což vede k rychlejšímu načítání. Většina CDN také zajistí, že jakmile si od něj uživatel vyžádá soubor, bude mu doručen ze serveru, který je mu nejblíže, což také vede k rychlejšímu načítání.

jQuery
Bootstrap používá jQuery pro pluginy JavaScriptu (jako jsou modály, popisky atd.). Pokud však používáte pouze CSS část Bootstrapu, nepotřebujete jQuery.

Vytvořte první webovou stránku pomocí Bootstrapu

1. Přidejte dokument HTML5

Bootstrap používá prvky HTML a vlastnosti CSS, které vyžadují doctype HTML5.

Na začátku stránky vždy uveďte HTML5 doctype spolu s atributem lang a správnou znakovou sadou:

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

2. Bootstrap 3 je především mobilní

Bootstrap 3 je navržen tak, aby reagoval na mobilní zařízení. Mobilní styly jsou součástí základního rámce.

Chcete-li zajistit správné vykreslení a přiblížení dotykem, přidejte do prvku následující <meta>značku :<head>

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

Část width=device-widthnastavuje šířku stránky tak, aby odpovídala šířce obrazovky zařízení (která se bude lišit v závislosti na zařízení).

Část initial-scale=1nastavuje počáteční úroveň přiblížení při prvním načtení stránky prohlížečem.

3. Kontejnery

Bootstrap také vyžaduje obsahující prvek k zabalení obsahu webu.

Na výběr jsou dvě třídy kontejnerů:

  1. Třída .containerposkytuje responzivní kontejner s pevnou šířkou
  2. Třída .container-fluidposkytuje kontejner plné šířky , který pokrývá celou šířku zobrazované oblasti
.kontejner
.nádoba-tekutina

Dvě základní bootstrapové stránky

Následující příklad ukazuje kód pro základní stránku Bootstrap (s responzivním kontejnerem s pevnou šířkou):

Příklad

<!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="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">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

Následující příklad ukazuje kód pro základní stránku Bootstrap (s kontejnerem plné šířky):

Příklad

<!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="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">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

❮ Předchozí Další ❯