Latest web development tutorials

bootstrap Profilo

Che cosa è Bootstrap?

Bootstrap è un framework front-end per lo sviluppo rapido di applicazioni Web e siti web. Bootstrap è basato su HTML, CSS, Javascript del.

storia

Bootstrap dallo sviluppoMark OttoeJacob Thorntondi Twitter. Bootstrap è agosto 2011 pubblicato su prodotti open source GitHub.

Perché Bootstrap?

  • Cellulare Primo: dal Bootstrap 3 in poi, il quadro include le librerie di tutto il priorità del dispositivo mobile in stile.
  • Supporto browser: Tutti i browser principali supportano Bootstrap.

    Internet ExplorerFirefoxOperaGoogle ChromeSafari

  • Facile da usare: finché si dispone di una conoscenza di base di HTML e CSS, è possibile iniziare ad imparare Bootstrap.
  • responsive design: Bootstrap Responsive CSS in grado di desktop adattivi, tablet e telefoni cellulari.Per ulteriori informazioni su responsive design, disponibile Bootstrap responsive design .

    responsive design

  • Esso gli sviluppatori a creare semplice interfaccia fornisce una soluzione unificata.
  • Esso include un potente componenti incorporati, facile da personalizzare.
  • Esso prevede inoltre la personalizzazione basata su Web.
  • E 'open source.

Contenuto della confezione Bootstrap

  • La struttura di base: Bootstrap fornisce la struttura di base del stile sfondo collegamento con un sistema a griglia.Questo verrà spiegato in dettaglioBootstrap porzione di base.
  • CSS: Bootstrap viene fornito con le seguenti caratteristiche: impostazioni globali CSS, definire gli stili di base di elementi HTML, classe scalabile, e di un sistema di rete avanzata.Questa sezione spiega in dettaglio ilBootstrap CSS.
  • Componenti: Bootstrap contiene una dozzina di componenti riutilizzabili per la creazione di immagini, menu a tendina,, navigazione, finestra pop-up finestra di avviso, e così via.Ciò verrà spiegato in dettagliola disposizione delle parti componenti.
  • widget di JavaScript: Bootstrap contiene un plugin jQuery decina personalizzato.È possibile includere tutti i plug-in, questi plug-in possono contenere anche singolarmente. Questo verrà spiegato in parte dettagliospina Bootstrap.

  • Personalizzazione: è possibile personalizzare componenti Bootstrap, variabili meno e jQuery plug-in per ottenere la propria versione.


Esempi online

sito di tutorial Bootstrap contiene centinaia di esempi.

È possibile utilizzare il nostro editor di codice online editor on-line, e fare clic sul pulsante Esegui per visualizzare i risultati.

Esempi di bootstrap

<div class = "contenitore"> <div class = "Jumbotron"> <H1> La mia prima pagina Bootstrap </ h1> <P> ripristina le dimensioni della finestra per visualizzare l'effetto reattivo! </ P> </ Div> <div class = "riga"> <div class = "col-sm-4 "> <H3> Colonna 1 </ h3 > <P> apprendimento non è solo tecnologia, ma anche un sogno! </ P> <P> sogni di nuovo Niubi, ma anche dare modo e ti piace bastone ventosa! </ P> </ Div> <div class = "col-sm-4 "> <H3> Colonna 2 </ h3 > <P> apprendimento non è solo tecnologia, ma anche un sogno! </ P> <P> sogni di nuovo Niubi, ma anche dare modo e ti piace bastone ventosa! </ P> </ Div> <div class = "col-sm-4 "> <H3> colonna 3 </ h3 > <P> apprendimento non è solo tecnologia, ma anche un sogno! </ P> <P> sogni di nuovo Niubi, ma anche dare modo e ti piace bastone ventosa! </ P> </ Div> </ Div> </ Div>

Prova »


Altri esempi

Bootstrap Esempio 2

<div class = "table-responsive"> <Tabella class = "tavolo tavolo da ping-strisce -bordered"> <Thead> <Tr> <Th> # </ th> <Th> Nome </ th> <Th> Via </ th> </ Tr> </ Thead> <Tbody> <Tr> <Td> 1 </ td> <Td> Anna Impressionante </ td > <Td> Broome Street </ td > </ Tr> <Tr> <Td> 2 </ td> <Td> Debbie Dallas </ td > <Td> Houston Street </ td > </ Tr> <Tr> <Td> 3 </ td> <Td> John Doe </ td > <Td> Madison Street </ td > </ Tr> </ Tbody> </ Table> </ Div>

Prova »

Fare clic sul pulsante "Prova" per vedere come funziona.