Bootstrap je Rámec CSS která se stala velmi populární v celé síti. Jejich styly citlivý jsou vidět na sociálních sítích Tuenti y X. Toto použití nám ušetří spoustu času při vývoji webové aplikace, protože nám ušetří veškerou práci a úsilí spojené s vytvořením čistého stylu stránky vhodného pro všechna zařízení. Po konzultaci se styly používanými v tomto rámci si uvědomíme, že jsou nám známé, protože dnes je implementovalo mnoho webových stránek.
Struktura
Struktura kapaliny bootstrapu
Aby byl náš web přístupný z mobilních telefonů a tabletů, budeme muset použít tekutou strukturu, kterou nám Bootstrap nabízí. Použití této struktury je velmi jednoduché, vše je založeno na prvcích rozpětí to nám pomůže rozložení náš webový design. Později, když přistoupíme k tomuto designu z a smartphone o tableta, toto se automaticky přizpůsobí uvedenému zařízení a výrazně tak zlepší kvalitu navigace. Budeme používat rozpětí s třídami v logických děleních uvnitř fluidní struktury, tj .:
<div class="row-fluid"> <div class="span2">Contenido</div> </div>
Kde číslo 2 představuje velikost rozpětí. Každý řádek obsahuje dostatek místa pro 12 polí o velikosti 1 nebo 2 o velikosti 6, které lze libovolně distribuovat. Jakmile je prostor řádku překročen, automaticky přejde na další, což nám umožní použít a rozpětí velikost 12 pro vytvoření zalomení řádku. Pokud bychom chtěli nějaké přeskočit rozpětí při vytváření jednoho, to znamená, začněte od 4 rozpětía použijeme velikost 3, použijeme tento kód:
<div class="span2 offset4">Contenido</div>
To umožňuje divizi skočit čtyři rozpětí před zobrazením obsahu. Můžeme to použít na naši svobodnou vůli a přeskočit to, co chceme s naším kódem.
Přeskočení rozpětí s třídou offsetu
Různá konstrukce pro každé zařízení
Třídy CSS pro odlišení každého zařízení
Chcete-li použít jiný design pro každý typ zařízení, řekneme každému logickému dělení, pro které zařízení je orientováno, pomocí následujících tříd:
Tímto způsobem můžeme ukázat úplně odlišný design pro každé zařízení se stejnou adresou URL.
tlačítka
Seznam tlačítek nabízených Bootstrapem
Bootstrap nám nabízí čistý repertoár barevných tlačítek, jeho použití je velmi jednoduché:
<a class="btn btn-success" href="URL"> Nombre del Botón </a>
kde btn btn-success
odkazuje na barvu tlačítka, abychom jej mohli změnit, budeme jej muset nahradit pouze třídami zobrazenými na předchozím obrázku.
Instalace Bootstrap
Pro instalaci tohoto rámce CSS stáhneme zip z odkazu, který nechám na konci příspěvku, a napíšeme následující kód v hlavě našeho souboru HTML.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="./css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="./js/bootstrap.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script>
Jakmile se ujistíme, že soubory CSS a JS jsou ve stejné složce jako náš soubor HTML, můžeme začít navrhovat náš responzivní web.
Více informací - Ověření formuláře
Stažení - Bootstrap: CSS Framework
Na tomto rámci nemáte další výukové programy ???