Layout con Twitter Bootstrap - Parte 1

Sommario

Twitter Bootstrap è una raccolta di strumenti software gratuiti per la creazione di siti Web e applicazioni.
È un quadro per promuovere la coerenza attraverso strumenti interni. Prima di Bootstrap, per lo sviluppo dell'interfaccia utente venivano utilizzate varie librerie, che portavano a incongruenze ea un elevato carico di lavoro di manutenzione.
Bootstrap è modulare e consiste essenzialmente in una serie di fogli di stile che implementano la varietà di componenti dello strumento. Un foglio di stile chiamato bootstrap.less include i componenti del foglio di stile. Gli sviluppatori possono adattare lo stesso file Bootstrap, selezionando i componenti che desiderano utilizzare nel loro progetto.
Strumenti e classi disponibili in Bootstrap
Sistema Gang e design reattivo
Bootstrap viene fornito con un layout di griglia standard largo 940 pixel. In alternativa, lo sviluppatore può utilizzare un layout a larghezza variabile. Questo regola automaticamente la larghezza delle colonne.
Il foglio di stile CSS
Bootstrap fornisce una serie di fogli di stile che forniscono definizioni di stile di base per tutti i componenti HTML. Ciò conferisce uniformità al browser e al sistema di larghezza, conferisce un aspetto moderno per la formattazione di elementi di testo, tabelle e moduli.
Componenti riutilizzabili
Gli elementi HTML regolari, Bootstrap contiene un'altra interfaccia di elementi comunemente usata. Include pulsanti con funzionalità avanzate come gruppi di pulsanti o pulsanti con opzioni di menu a discesa, elenchi di navigazione, etichette orizzontali e verticali, breadcrumb, impaginazione, etichette, funzionalità avanzate di miniature tipografiche, formati di messaggi di avviso e barre di avanzamento. .
Plugin Javascript e jQuery
I componenti Javascript per Bootstrap sono basati sulla libreria Javascript jQuery. I plug-in si trovano nello strumento plug-in jQuery. Forniscono ulteriori elementi dell'interfaccia utente come finestre di dialogo, descrizioni comandi e caroselli.
Inoltre estendono la funzionalità di alcuni elementi dell'interfaccia esistenti, inclusa ad esempio una funzione di completamento automatico per i campi di input. La versione 2.0 supporta i seguenti plug-in Javascript: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel e Typeahead.
Per utilizzare Bootstrap in una pagina HTML, lo sviluppatore deve solo scaricare il foglio di stile CSS Bootstrap e collegarlo al file HTML.
Scarica il codice CSS e Javascript compilato, che è il modo più semplice per iniziare con Bootstrap. Lo svantaggio è che questa versione non include i file o la documentazione originali. Per scaricare questa versione, vai su getbootstrap.com e premi il pulsante Scarica Bootstrap.
Possiamo anche scegliere di collegarci ai file bootstrap da server esterni come segue:
Per utilizzare questi file, modifica i seguenti collegamenti sulle tue pagine
 

Dopo aver decompresso il file che hai scaricato con la versione compilata di Bootstrap, vedrai la seguente struttura di file e directory:
bootstrap /
css /
├── bootstrap.css
├── bootstrap.min.css
├── bootstrap-theme.css
└── bootstrap-theme.min.css
js /
├── bootstrap.js
bootstrap.min.js
caratteri /
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Questi file sono le librerie che compongono il bootstrap, in seguito vedremo i componenti e come vengono utilizzati.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo
wave wave wave wave wave