Bootstrap 2.3.2: Príručka Začíname

Bootstrap je a Rámec CSS ktorá sa stala veľmi populárnou v celej sieti. Ich štýly citlivý sú viditeľné na sociálnych sieťach Tuenti y Twitter. Toto použitie nám ušetrí veľa času pri vývoji webovej aplikácie, pretože nám to ušetrí všetku prácu a úsilie spojené s vytvorením čistého štýlu stránky vhodného pre všetky zariadenia. Po konzultácii so štýlmi použitými v tomto rámci si uvedomíme, že sú nám známe, pretože dnes ich mnoho webových stránok implementovalo.

Štruktúra

Aby bol náš web prístupný z mobilných telefónov a tabletov, budeme musieť použiť plynulú štruktúru, ktorú nám ponúka Bootstrap. Použitie tejto štruktúry je veľmi jednoduché, všetko je založené na prvkoch rozpätie to nám pomôže rozloženie náš webdizajn. Neskôr, keď pristúpime k tomuto dizajnu z a smartphone o tableta, toto sa automaticky prispôsobí uvedenému zariadeniu, čím sa výrazne zlepší kvalita navigácie. Použijeme rozpätie s triedami v logických rozdeleniach v rámci fluidnej štruktúry, t.j.:

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

Kde číslo 2 predstavuje veľkosť rozpätia. Každý riadok obsahuje dostatok priestoru pre 12 rozpätí veľkosti 1 alebo 2 veľkosti 6, ktoré je možné distribuovať ľubovoľným spôsobom. Po prekročení medzery v riadku sa automaticky presunie nadol na ďalší, čo nám umožní použiť a rozpätie veľkosť 12 na vytvorenie zalomenia riadku. Keby sme chceli nejaké preskočiť rozpätie pri vytváraní jedného, ​​to znamená, začnite od 4 rozpätiea použijeme veľkosť 3, použijeme tento kód:

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

Toto umožňuje rozdeleniu skočiť štyri rozpätie pred zobrazením obsahu. Môžeme to použiť z vlastnej vôle a preskočiť, čo chceme, s našim kódom.

Pre každý prístroj iný dizajn

Ak chcete pre každý typ zariadenia použiť iný dizajn, povieme každému logickému rozdeleniu, pre ktoré je zariadenie orientované, pomocou nasledujúcich tried:

Týmto spôsobom môžeme ukázať úplne odlišný dizajn pre každé zariadenie s rovnakou adresou URL.

tlačidla

Bootstrap nám ponúka čistý repertoár farebných tlačidiel, jeho použitie je veľmi jednoduché:

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

kde btn btn-success odkazuje na farbu tlačidla, aby sme ho zmenili, budeme ho musieť nahradiť iba triedami zobrazenými na predchádzajúcom obrázku.

Inštaluje sa Bootstrap

Pre inštaláciu tohto CSS framework si stiahneme zip z odkazu, ktorý nechám na konci príspevku a napíšeme nasledujúci kód v hlave nášho súboru 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>

Keď sa ubezpečíme, že súbory CSS a JS sú v rovnakom priečinku ako náš súbor HTML, môžeme začať navrhovať našu responzívnu webovú stránku.

Viac informácií - Validácia formulára

Stiahnuť ▼ - Bootstrap: rámec CSS