Bootstrap 2.3.2: Ghid introductiv

Bootstrap este un Cadrul CSS care a devenit foarte popular în întreaga rețea. Stilurile lor sensibil sunt văzute pe rețelele de socializare Tuenti y Twitter. Utilizarea acestui lucru ne economisește mult timp atunci când dezvoltăm o aplicație web, deoarece ne economisește toată munca și efortul implicat în crearea unui stil de pagină curat, potrivit pentru toate dispozitivele. Consultând stilurile utilizate în acest cadru, vom realiza că ne sunt familiare, deoarece astăzi multe site-uri web au implementat-o.

Structura

Pentru ca site-ul nostru web să fie accesibil de pe telefoane mobile și tablete, va trebui să folosim structura fluidă pe care o oferă Bootstrap. Utilizarea acestei structuri este foarte simplă, totul se bazează pe elemente deschidere asta ne va ajuta aspect designul nostru web. Mai târziu, când accesăm acest design dintr-un smartphone o tabletă, acest lucru se va adapta automat la dispozitivul menționat îmbunătățind considerabil calitatea navigării. Vom folosi deschidere cu clase în diviziuni logice în cadrul structurii fluide, adică:

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

Unde numărul 2 reprezintă mărimea intervalului. Fiecare rând conține suficient spațiu pentru 12 întinderi de mărimea 1 sau 2 de mărimea 6, acesta poate fi distribuit după cum doriți. Odată ce spațiul unui rând este depășit, acesta va coborî automat la următorul, permițându-ne să folosim un deschidere mărimea 12 pentru a crea o întrerupere de linie. Dacă am vrea să omitem câteva deschidere atunci când creați unul, adică începeți de la 4 deschidereși aplicăm o dimensiune de 3, vom folosi acest cod:

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

Acest lucru permite diviziunii să sară patru se întinde înainte de a afișa conținutul. Putem folosi acest lucru cu voia noastră liberă, omitând ceea ce dorim cu codul nostru.

Design diferit pentru fiecare dispozitiv

Pentru a aplica un design diferit pentru fiecare tip de dispozitiv, vom spune fiecărei diviziuni logice pentru ce dispozitiv este orientat, folosind următoarele clase:

În acest fel, putem afișa un design total diferit pentru fiecare dispozitiv cu aceeași adresă URL.

butoane

Bootstrap ne oferă un repertoriu curat de butoane colorate, utilizarea sa este foarte simplă:

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

unde btn btn-success se referă la culoarea butonului, pentru a-l modifica, va trebui doar să îl înlocuim cu clasele afișate în imaginea anterioară.

Instalarea Bootstrap

Pentru instalarea acestui framework CSS, vom descărca fișierul zip de pe linkul pe care îl voi lăsa la sfârșitul postării și vom scrie următorul cod în capul fișierului nostru 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>

Odată ce ne-am asigurat că fișierele CSS și JS se află în același folder cu fișierul nostru HTML, putem începe să proiectăm site-ul nostru receptiv.

Mai multe informatii - Validarea formularului

Descarca - Bootstrap: CSS Framework