Bootstrap - je to nejoblíbenější CSS rámec, který poskytuje vývojářům pohodlné nástroje pro vytváření stylových a citlivých webových rozhraní. Jedním z nejčastějších úkolů je umístění obsahu do středu stránky. V tomto článku vám řekneme několik způsobů, jak to udělat div uprostřed pomocí Bootstrap.
Prvním způsobem je použití třídy text-center. Tato třída umožňuje zarovnání obsahu vodorovně uvnitř kontejneru. Stačí přidat tuto třídu do svého div a jeho obsah bude vycentrován.
Druhým způsobem je použití třídy mx-auto. Tato třída je přidána do div, který by měl být centrovaný. Tato třída automaticky nastaví blokovému prvku odsazení vlevo a vpravo na automaticky vygeneruje hodnotu, což vede k jeho horizontálnímu vycentrování.
Třetím způsobem je použití Flexibilní mřížky Bootstrap. Při použití mřížky Bootstrap můžete vytvořit rovnoměrně rozmístěné sloupce a zarovnat je do středu pomocí tříd justify-content-center a d-flex. Přidejte tyto třídy do nadřazeného kontejneru a jeho podřízené prvky budou vycentrovány vodorovně.
Instalace a konfigurace Bootstrap
Nejprve si musíte stáhnout nejnovější verzi Bootstrap z oficiálních stránek. Po stažení rozbalte archiv a zkopírujte soubory CSS a JavaScript do příslušných složek vašeho projektu.
V dokumentu HTML přidejte odkazy na soubory Bootstrap CSS a JavaScript. Chcete-li to provést, vložte do značky následující kód
Pokud chcete používat jednotlivé komponenty Bootstrap, zadejte cestu k příslušným souborům CSS a JavaScript. Pokud například potřebujete pouze tlačítko Bootstrap, vložte následující kód:
Ke stažení Bootstrap můžete také použít Content Delivery Network (CDN). Stačí zkopírovat následující kód uvnitř značky
Po připojení Bootstrap můžete ve svém projektu začít používat jeho Třídy stylů a komponenty. Věnujte pozornost dokumentaci Bootstrap pro podrobnější informace o jeho možnostech a použití.
| Soubor | Popis |
|---|---|
| bootstrap.min.css | Hlavní soubor stylů Bootstrap |
| bootstrap.min.js | Hlavní soubor Javascript Bootstrap |
| bootstrap-button.min.css | Soubor stylů pro tlačítka Bootstrap |
| bootstrap-button.min.js | Soubor JavaScript pro tlačítka Bootstrap |
Stahování a instalace Bootstrap
Chcete-li Bootstrap používat na svých webových stránkách, musíte si jej stáhnout a nainstalovat.
Existují dva hlavní způsoby načítání Bootstrap:
| 1. | Stáhněte si Bootstrap z oficiálních stránek. |
| 2. | Použít Bootstrap prostřednictvím Content Delivery Network (CDN). |
Pokud si chcete stáhnout Bootstrap z oficiálních stránek, přejděte na stránku https://getbootstrap.com / a klikněte na tlačítko"Download". Tím se stáhne archiv ZIP se soubory Bootstrap.
Pokud chcete používat Bootstrap přes CDN, vložte do značky následující kód
Možná budete muset také přidat odkaz na jQuery před souborem Bootstrap.js, pokud již není připojen na vašem webu.
Připojení Bootstrap k projektu
Prvním krokem k použití Bootstrap ve svém projektu je připojení jeho CSS a JS souborů.
Existuje několik způsobů připojení Bootstrap:
- Stáhněte si soubory z oficiálních stránek Bootstrap https://getbootstrap.com/.
- Použít odkazy na CDN (Content Delivery Network) verze Bootstrap. Například:
Po připojení souborů, můžete použít Bootstrap třídy a komponenty ve svém projektu pro rychlé a pohodlné vytváření citlivých webových stránek.
Vytvoření div a zarovnání uprostřed
Bootstrap poskytuje snadný způsob, jak vytvořit a zarovnat div prvek uprostřed. K tomu lze použít třídy "MX-auto"a" text-center".
Třída "MX-auto" pomáhá zarovnat div vodorovně. Automaticky nastaví vnitřní odsazení vlevo a vpravo na "auto", což vede k vycentrování položky.
Třída "text-center" přidává zarovnání ve středu vertikálně. Vodorovně zarovnává text a blokové prvky uvnitř div kontejneru.
Chcete-li tedy Vytvořit div a zarovnat jej doprostřed, stačí použít následující kód:
Tady místo." "musíte umístit obsah div prvku. Může to být text, obrázek nebo jiné prvky HTML.