Bootstrap

Accuminciari

Panoramica di u prugettu, u so cuntenutu, è cumu principià cù un mudellu simplice.

1. Scaricate

Prima di scaricà, assicuratevi di avè un editore di codice (recumandemu Sublime Text 2 ) è qualchì cunniscenza di travagliu HTML è CSS. Ùn andemu micca attraversu i fugliali fonte quì, ma sò dispunibuli per scaricà. Ci concentreremu nantu à inizià cù i nostri schedarii Bootstrap compilati.

Scaricate cumpilatu

U modu più veloce per cumincià: uttene e versioni compilate è minificate di i nostri CSS, JS è imagine. Nisun documentu o fugliali fonte originale.

Scaricate Bootstrap

Scaricate a fonte

Ottene i fugliali originali per tutti i CSS è Javasript, cù una copia lucale di i documenti scarichendu l'ultima versione direttamente da GitHub.

Scaricate a fonte Bootstrap

2. Struttura di u schedariu

In u scaricamentu truverete a seguente struttura di fugliale è cuntenutu, raggruppendu logicamente l'assi cumuni è furnisce variazioni cumpilate è minificate.

Una volta scaricatu, scumpressate u cartulare cumpressu per vede a struttura di (u compilatu) Bootstrap. Vi vede qualcosa cum'è questu:

  bootstrap / ├── css / │ ├── bootstrap . css
   │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . js
   │ ├── bootstrap . min . js
   ├── img / │ ├── glificoni - halflings . png
   │ ├── glificoni - halflings - bianchi . png
  
  
        
        
        └── LEGGIMI . md

Questa hè a forma più basica di Bootstrap: i fugliali compilati per un usu di drop-in rapidu in quasi ogni prughjettu web. Furnemu CSS è JS compilati ( bootstrap.*), è ancu CSS è JS ( bootstrap.min.*) compilati è minificati. I schedarii di l'imaghjini sò cumpressi cù ImageOptim , una app Mac per cumpressione PNG.

3. Ciò chì hè inclusu

Bootstrap vene equipatu cù HTML, CSS è JS per ogni tipu di cose, ma ponu esse riassunti cù un pocu di categurie visibili in cima di a documentazione Bootstrap .

Sezioni di documenti

Scaffolding

Stili glubale per u corpu per resettate u tipu è u fondu, i stili di ligame, u sistema di griglia, è dui layout simplici.

CSS di basa

Stili per elementi HTML cumuni cum'è tipografia, codice, tavule, forme è buttone. Include ancu Glyphicons , un grande set di icone.

Cumpunenti

Stili basi per cumpunenti di l'interfaccia cumuni cum'è tabulazioni è pillole, navbar, alerti, intestazioni di pagina, è più.

Plugins Javascript

Simile à Componenti, questi plugins Javascript sò cumpunenti interattivi per cose cum'è tooltips, popovers, modali, è più.

Lista di cumpunenti

Inseme, e sezioni di Componenti è plugins Javascript furnisce i seguenti elementi di l'interfaccia:

  • Gruppi di buttone
  • Button dropdowns
  • Tabulazioni di navigazione, pillole è liste
  • Navbar
  • Etichette
  • Badges
  • Intestazioni di pagina è unità di eroe
  • Miniatures
  • Alerts
  • Barra di prugressu
  • Modali
  • Dropdowns
  • Tooltips
  • Popovers
  • fisarmonica
  • Carrusel
  • Typeahead

In i guidi futuri, pudemu passà per questi cumpunenti individualmente in più detail. Finu à quì, cercate ognuna di queste in a documentazione per infurmazione nantu à cumu utilizà è persunalizà.

4. U mudellu HTML basicu

Cù una breve introduzione in u cuntenutu fora di u modu, pudemu fucalizza mette Bootstrap à aduprà. Per fà quessa, useremu un mudellu HTML basicu chì include tuttu ciò chì avemu citatu in a struttura di u File .

Avà, eccu un ochju à un schedariu HTML tipicu :

  1. <html>
  2.   <capu>
  3.     <title> Bootstrap 101 Template </title>
  4.   </head>
  5.   <corpu>
  6.     <h1> Salute, mondu ! </h1>
  7.   </corpu>
  8. </html>

Per fà questu un mudellu Bootstrapped , basta include i schedari CSS è JS appropritatu:

  1. <html>
  2.   <capu>
  3.     <title> Bootstrap 101 Template </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "css/bootstrap.min.css" rel = "stilesheet" >  
  6.   </head>
  7.   <corpu>
  8.     <h1> Salute, mondu ! </h1>
  9.     <script src = "js/bootstrap.min.js" ></script> 
  10.   </corpu>
  11. </html>

È site pronta ! Cù questi dui fugliali aghjuntu, pudete cumincià à sviluppà qualsiasi situ o applicazione cù Bootstrap.

5. Esempii

Sposta fora di u mudellu di basa cù uni pochi esempi di layout. Incuragemu a ghjente à iterà nantu à questi esempi è micca solu aduprà cum'è un risultatu finali.

  • Situ di marketing basicu

    Dotatu di una unità eroe per un missaghju primariu è trè elementi di sustegnu.

  • Disposizione fluida

    Aduprà u nostru novu sistema di griglia fluida, responsiva per creà un layout liquidu senza saldatura.

  • U mudellu di partenza

    Un documentu HTML barebones cù tutti i Bootstrap CSS è javascript inclusi.

Chì dopu?

Testa à i documenti per infurmazioni, esempi è frammenti di codice, o pigliate u prossimu salto è persunalizà Bootstrap per qualsiasi prughjettu imminente.

Visita i documenti di Bootstrap Personalizà Bootstrap