Bootstrap 2.3.2: Vodnik za začetek

Bootstrap je Okvir CSS ki je postalo zelo priljubljeno v celotnem omrežju. Njihovi slogi odziven so vidni na družbenih omrežjih Tuenti y Twitter. Uporaba tega nam prihrani veliko časa pri razvoju spletne aplikacije, saj nam prihrani vso delo in napor pri ustvarjanju čistega sloga strani, primernega za vse naprave. Po posvetovanju s slogi, uporabljenimi v tem okviru, bomo ugotovili, da so nam znani, saj so ga danes uvedla številna spletna mesta.

Struktura

Da bo naše spletno mesto dostopno z mobilnih telefonov in tabličnih računalnikov, bomo morali uporabiti strukturo tekočine, ki nam jo ponuja Bootstrap. Uporaba te strukture je zelo preprosta, vse temelji na elementih span to nam bo pomagalo postavitev naše spletno oblikovanje. Kasneje, ko dostopamo do tega dizajna iz pametni telefon o tabletase bo samodejno prilagodil tej napravi in ​​znatno izboljšal kakovost navigacije. Uporabili bomo span z razredi v logičnih razdelkih znotraj strukture tekočine, to je:

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

Kjer številka 2 predstavlja velikost razpona. Vsaka vrstica vsebuje dovolj prostora za 12 razponov velikosti 1 ali 2 velikosti 6, ki jih lahko razdelite, kot želite. Ko je prostor vrstice presežen, se samodejno spusti v naslednjo, kar nam omogoča uporabo a span velikost 12, da ustvarite prelom vrstice. Če bi želeli nekaj preskočiti span pri ustvarjanju, torej začnite od 4 spanin uporabimo velikost 3, uporabili bi to kodo:

<div class="span2 offset4">Contenido</div>

To omogoča diviziji skok štiri razponi pred prikazom vsebine. To lahko uporabimo po svoji volji, preskočimo, kar želimo s svojo kodo.

Različna zasnova za vsako napravo

Če želite uporabiti drugačno zasnovo za vsak tip naprave, bomo vsaki logični razdelitvi, za katero napravo je namenjena, povedali naslednje razrede:

Na ta način lahko prikažemo popolnoma drugačen dizajn za vsako napravo z istim URL-jem.

Gumbi

Bootstrap nam ponuja čisti repertoar barvnih gumbov, njegova uporaba je zelo preprosta:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

kjer je btn btn-success se nanaša na barvo gumba, če jo želite spremeniti, jo bomo morali le nadomestiti z razredi, prikazanimi na prejšnji sliki.

Namestitev Bootstrapa

Za namestitev tega ogrodja CSS bomo zip prenesli s povezave, ki jo bom pustil na koncu prispevka, in napisali bomo naslednjo kodo v glavi naše datoteke 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>

Ko se prepričamo, da sta datoteki CSS in JS v isti mapi kot naša datoteka HTML, lahko začnemo oblikovati naše odzivno spletno mesto.

Več informacij - Preverjanje obrazca

Prenesi - Bootstrap: ogrodje CSS