Bootstrap 2.3.2: Příručka Začínáme

Logo Twitter Bootstrap

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

Obrázek struktury bootstrapu

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

Přeskočení rozpětí s třídou offsetu

Různá konstrukce pro každé zařízení

Obrázek s třídami exkluzivity pro zařízení Bootstrap

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

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


Komentář, nechte svůj

Zanechte svůj komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

*

*

  1. Odpovědný za údaje: Miguel Ángel Gatón
  2. Účel údajů: Ovládací SPAM, správa komentářů.
  3. Legitimace: Váš souhlas
  4. Sdělování údajů: Údaje nebudou sděleny třetím osobám, s výjimkou zákonných povinností.
  5. Úložiště dat: Databáze hostovaná společností Occentus Networks (EU)
  6. Práva: Vaše údaje můžete kdykoli omezit, obnovit a odstranit.

  1.   Alejandra řekl

    Na tomto rámci nemáte další výukové programy ???