Bootstrap 2.3.2: Guida introduttiva

Bootstrap è un file Framework CSS che è diventato molto popolare in tutta la rete. I loro stili di risposta si vedono sui social network Tuenti y Twitter. L'uso di questo ci fa risparmiare molto tempo durante lo sviluppo di un'applicazione web poiché ci fa risparmiare tutto il lavoro e gli sforzi necessari per creare uno stile di pagina pulito adatto a tutti i dispositivi. Consultando gli stili utilizzati in questo framework, ci accorgeremo che ci sono familiari, poiché oggi molti siti lo hanno implementato.

La struttura

Affinché il nostro sito web sia accessibile da cellulari e tablet dovremo utilizzare la struttura fluida che Bootstrap ci offre. L'utilizzo di questa struttura è molto semplice, tutto si basa su elementi campata questo ci aiuterà disposizione il nostro web design. Successivamente, quando accediamo a questo progetto da un file smartphone o di tablet, questo si adatterà automaticamente a detto dispositivo migliorando notevolmente la qualità della navigazione. Useremo il file campata con classi in divisioni logiche all'interno della struttura fluida, ovvero:

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

Dove il numero 2 rappresenta la dimensione dello span. Ogni riga contiene spazio sufficiente per 12 campate di dimensione 1 o 2 di dimensione 6, che possono essere distribuite a piacere. Una volta superato lo spazio di una riga, si passerà automaticamente alla successiva, consentendoci di utilizzare un file campata dimensione 12 per creare un'interruzione di riga. Se volessimo saltarne alcuni campata quando ne crei uno, cioè, inizia da 4 campatae applichiamo una dimensione di 3, utilizzeremo questo codice:

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

Ciò consente alla divisione di saltare quattro campate prima di visualizzare il contenuto. Possiamo usarlo a nostra libera volontà, saltando ciò che vogliamo con il nostro codice.

Design diverso per ogni dispositivo

Per applicare un design diverso per ogni tipo di dispositivo, diremo a ciascuna divisione logica per quale dispositivo è orientato, utilizzando le seguenti classi:

In questo modo, possiamo mostrare un design completamente diverso per ogni dispositivo con lo stesso URL.

pulsanti

Bootstrap ci offre un repertorio pulito di bottoni colorati, il suo utilizzo è molto semplice:

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

dove btn btn-success si riferisce al colore del pulsante, per cambiarlo dovremo solo sostituirlo con le classi mostrate nell'immagine precedente.

Installazione di Bootstrap

Per l'installazione di questo framework CSS, scaricheremo lo zip dal link che lascerò alla fine del post, e scriveremo il seguente codice nella testa del nostro file 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>

Dopo esserci assicurati che i file CSS e JS siano nella stessa cartella del nostro file HTML, possiamo iniziare a progettare il nostro sito Web reattivo.

Maggiori informazioni - Convalida del modulo

Scarica - Bootstrap: CSS Framework