Bootstrap

Iniziare

Panoramica del progetto, dei suoi contenuti e di come iniziare con un semplice modello.

1. Scarica

Prima di scaricare, assicurati di avere un editor di codice (consigliamo Sublime Text 2 ) e una conoscenza pratica di HTML e CSS. Non esamineremo i file sorgente qui, ma sono disponibili per il download. Ci concentreremo su come iniziare con i nostri file Bootstrap compilati.

Scarica compilato

Il modo più rapido per iniziare: ottieni le versioni compilate e ridotte dei nostri CSS, JS e immagini. Nessun documento o file di origine originale.

Scarica Bootstrap

Scarica sorgente

Ottieni i file originali per tutti i CSS e Javasript, insieme a una copia locale dei documenti scaricando l'ultima versione direttamente da GitHub.

Scarica fonte Bootstrap

2. Struttura dei file

All'interno del download troverai la struttura e il contenuto dei file seguenti, raggruppando logicamente le risorse comuni e fornendo variazioni sia compilate che ridotte.

Una volta scaricato, decomprimi la cartella compressa per vedere la struttura di Bootstrap (compilato). Vedrai qualcosa del genere:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   ├── img / │ ├── glyphicons - halfling . png
   │ ├── glificons - halfling - bianco . png
  
  
        
        
        └── LEGGIMI . md

Questa è la forma più semplice di Bootstrap: file compilati per un rapido utilizzo in quasi tutti i progetti web. Forniamo CSS e JS ( bootstrap.*) compilati, nonché CSS e JS ( bootstrap.min.*) compilati e minimizzati. I file di immagine vengono compressi utilizzando ImageOptim , un'app per Mac per la compressione di PNG.

3. Cosa è incluso

Bootstrap è dotato di HTML, CSS e JS per tutti i tipi di cose, ma possono essere riassunti con una manciata di categorie visibili nella parte superiore della documentazione di Bootstrap .

Sezioni di documenti

Impalcatura

Stili globali per il corpo per reimpostare tipo e sfondo, stili di collegamento, sistema di griglia e due semplici layout.

CSS di base

Stili per elementi HTML comuni come tipografia, codice, tabelle, moduli e pulsanti. Include anche Glyphicons , un piccolo fantastico set di icone.

Componenti

Stili di base per componenti di interfaccia comuni come schede e pillole, barra di navigazione, avvisi, intestazioni di pagina e altro.

Plugin Javascript

Simili ai componenti, questi plugin Javascript sono componenti interattivi per cose come descrizioni comandi, popover, modali e altro.

Elenco dei componenti

Insieme, le sezioni Componenti e plugin Javascript forniscono i seguenti elementi di interfaccia:

  • Gruppi di pulsanti
  • Menu a discesa dei pulsanti
  • Schede di navigazione, pillole ed elenchi
  • barra di navigazione
  • Etichette
  • Distintivi
  • Intestazioni di pagina e unità eroe
  • Miniature
  • Avvisi
  • Barre di avanzamento
  • Modali
  • Dropdown
  • Suggerimenti
  • Popover
  • Fisarmonica
  • Giostra
  • Digitare in anticipo

Nelle guide future, potremmo esaminare questi componenti individualmente in modo più dettagliato. Fino ad allora, cerca ognuno di questi nella documentazione per informazioni su come utilizzarli e personalizzarli.

4. Modello HTML di base

Con una breve introduzione ai contenuti fuori mano, possiamo concentrarci sull'uso di Bootstrap. Per fare ciò, utilizzeremo un modello HTML di base che include tutto ciò che abbiamo menzionato nella Struttura del file .

Ora, ecco uno sguardo a un tipico file HTML :

  1. <html>
  2.   <testa>
  3.     <title> Modello Bootstrap 101 </title>
  4.   </testa>
  5.   <corpo>
  6.     <h1> Ciao, mondo! </h1>
  7.   </corpo>
  8. </html>

Per renderlo un modello Bootstrapped , includi semplicemente i file CSS e JS appropriati:

  1. <html>
  2.   <testa>
  3.     <title> Modello Bootstrap 101 </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "css/bootstrap.min.css" rel = "foglio di stile" >  
  6.   </testa>
  7.   <corpo>
  8.     <h1> Ciao, mondo! </h1>
  9.     <script src = "js/bootstrap.min.js" ></script> 
  10.   </corpo>
  11. </html>

E sei a posto! Con questi due file aggiunti, puoi iniziare a sviluppare qualsiasi sito o applicazione con Bootstrap.

5. Esempi

Vai oltre il modello di base con alcuni layout di esempio. Incoraggiamo le persone a ripetere questi esempi e non a usarli semplicemente come risultato finale.

  • Sito di marketing di base

    Dotato di un'unità eroe per un messaggio principale e tre elementi di supporto.

  • Disposizione fluida

    Utilizza il nostro nuovo sistema a griglia fluido e reattivo per creare un layout fluido senza soluzione di continuità.

  • Modello iniziale

    Un semplice documento HTML con tutti i CSS Bootstrap e javascript inclusi.

E dopo?

Vai alla documentazione per informazioni, esempi e frammenti di codice, oppure fai il salto successivo e personalizza Bootstrap per qualsiasi progetto in arrivo.

Visita i documenti Bootstrap Personalizza Bootstrap