Bootstrap 2.3.2: Guida introduttiva

Logo Bootstrap di Twitter

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

Immagine della struttura bootstrap

Bootstrap struttura fluida

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 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.

Saltare gli intervalli con la classe offset

Saltare gli intervalli con la classe offset

Design diverso per ogni dispositivo

Immagine con classi di esclusività per dispositivi Bootstrap

Classi CSS per differenziare 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

Pulsanti colorati

Elenco dei pulsanti offerti da Bootstrap

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


Il contenuto dell'articolo aderisce ai nostri principi di etica editoriale. Per segnalare un errore fare clic su qui.

Un commento, lascia il tuo

Lascia un tuo commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati con *

*

*

  1. Responsabile dei dati: Miguel Ángel Gatón
  2. Scopo dei dati: controllo SPAM, gestione commenti.
  3. Legittimazione: il tuo consenso
  4. Comunicazione dei dati: I dati non saranno oggetto di comunicazione a terzi se non per obbligo di legge.
  5. Archiviazione dati: database ospitato da Occentus Networks (UE)
  6. Diritti: in qualsiasi momento puoi limitare, recuperare ed eliminare le tue informazioni.

  1.   alejandra suddetto

    Non hai più tutorial su questo framework ???