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

Bootstrap 4 Příklad

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

Bootstrap verze

Tento tutoriál navazuje na Bootstrap 4 , který byl vydán v roce 2018, jako upgrade na Bootstrap 3 , s novými komponentami, rychlejším stylemc, větší odezvou atd.

Bootstrap 5 (vydán v roce 2021) je nejnovější verzí Bootstrapu ; 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.

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 Bootstrapu jsou mobilní styly součástí základního rámce
  • Kompatibilita s prohlížeči: Bootstrap 4 je kompatibilní se všemi moderními prohlížeči (Chrome, Firefox, Internet Explorer 10+, Edge, Safari a Opera)

Kde získat Bootstrap 4?

Existují dva způsoby, jak začít používat Bootstrap 4 na svých vlastních webových stránkách.

Můžeš:

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

Bootstrap 4 CDN

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

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

jsDelivr:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Jedna výhoda používání Bootstrap 4 CDN:
Mnoho uživatelů si již stáhlo Bootstrap 4 z jsDelivr 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 a Popper?
Bootstrap 4 používá jQuery a Popper.js pro komponenty JavaScriptu (jako jsou modály, popisky, vyskakovací okna atd.). Pokud však používáte pouze CSS část Bootstrapu, nepotřebujete je.

  • Uzavíratelná upozornění
  • Tlačítka a zaškrtávací políčka/přepínače pro přepínání stavů
  • Karusel pro posuvné prvky, ovládací prvky a indikátory
  • Sbalit pro přepínání obsahu
  • Dropdowns (also requires Popper.js for perfect positioning)
  • Modals (open and close)
  • Navbar (for collapsible menus)
  • Tooltips and popovers (also requires Popper.js for perfect positioning)
  • Scrollspy for scroll behavior and navigation updates

Stažení Bootstrap 4

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

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

1. Přidejte dokument HTML5

Bootstrap 4 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 4 je především mobilní

Bootstrap 4 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 4 také vyžaduje obsahující prvek pro 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 po celé šířce, který pokrývá celou šířku výřezu
.kontejner
.nádoba-tekutina

Dvě základní 4 stránky bootstrapu

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

Příklad kontejneru

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.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 4 (s kontejnerem v plné šířce):

Příklad nádoby kapaliny

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.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ší ❯