Cosa è bootstrap e a cosa serve

Una tecnologia come Bootstrap è consolidata grazie al suo funzionamento e ai risultati positivi che è in grado di offrire a coloro che la utilizzano. Ci sono molte caratteristiche e vantaggi eccezionali che hanno aiutato questa piattaforma a progredire con successo. La cosa più importante è che semplifica il lavoro e lo fa senza sacrificare risultati, stabilità, sicurezza o prestazioni. Gli standard sono unificati e tutto è più fluido dal primo momento. In questa guida sarà illustrato nel dettaglio cosa è boostrape a cosa serve.

Cosa è Bootstrap

In Bootstrap tutto è incluso ed è molto personalizzabile senza dover avere grandi conoscenze. Si integra anche con i sistemi di modifica e pubblicazione come Drupal o WordPress, mentre non è meno rilevante sottolineare che la comunità di professionisti che collaborano e lavorano attorno ad essa è enorme.

Vantaggi di Bootstrap

Bootstrap accelera la creazione di layout fornendo un gran numero di modelli e soluzioni già pronte. Cross-browser e adattabilità. I siti creati utilizzando Bootstrap vengono visualizzati in modo identico su dispositivi diversi e nei browser moderni,

A cosa serve Bootstrap

Lavorare con Bootstrap non è difficile; richiede solo competenze di base e avere alcune conoscenze di base lavorando con i layout.
E’ facile da imparare. Molti temi per i popolari sistemi di gestione dei contenuti (CMS) sono sviluppati utilizzando Bootstrap, il che dimostra il suo livello di qualità. In sostanza, si tratta di un framework contenente i componenti di CSS, HTML e JavaScript, nonché i propri stili e caratteri.
Siti adattativi contengono elementi classici (intestazione, piè di pagina, contenuto e colonna laterale) e pertanto è importante calcolare la larghezza di ciascuno di essi. Di solito, i calcoli vengono eseguiti in percentuale e se tutto è chiaro con l’intestazione e il basamento (la larghezza è solitamente del 100%), allora non ci sono difficoltà con gli altri blocchi. Sui desktop fissi, il rapporto tra contenuto e colonna laterale può essere compreso tra 75 e 25 o tra 80 e 20. Quando si riduce la finestra, questa opzione è inaccettabile, è necessario scendere al 100% e scorrere. In tali situazioni, è necessaria una griglia. Permette di definire classi di oggetti, specificando la loro larghezza e la natura del display su vari dispositivi.
La griglia Bootstrap è una tabella contenente righe e colonne. È possibile creare una griglia all’interno di una griglia esistente, eliminando così la necessità di inserire manualmente le query multimediali. Pertanto, semplifica e accelera notevolmente il processo di creazione di blocchi adattativi. Prima di scaricare Bootstrap, assicurati di avere un editor di codice (consigliamo Sublime Text 3 ) e una certa conoscenza di HTML e CSS. Concentreremo la nostra attenzione su come iniziare con i file Bootstrap compilati.

Forse ti può interessare: Cosa è Angular 2 e Angular JS Material

CSS compilato e JS

Scarica il codice compilato pronto per l’uso per Bootstrap v4.2.1 per inserirlo facilmente nel tuo progetto, che include:
Bundle CSS compilati e minimizzati (vedi confronto dei file CSS )
Plugin JavaScript compilati e minimizzati.
Ciò non include documentazione, file di origine o dipendenze JavaScript opzionali (jQuery e Popper.js).

File sorgenti

Compila Bootstrap con la tua pipeline di risorse scaricando i file sorgente Sass, JavaScript e documentazione. Questa opzione richiede alcuni strumenti aggiuntivi:

Compilatore Sass (è supportato Libsass o Ruby Sass) per la compilazione del CSS
Correzione automatica del prefisso del fornitore CSS.

Se hai bisogno di strumenti di costruzione, sono inclusi per lo sviluppo di Bootstrap e dei suoi documenti, ma probabilmente non sono adatti ai tuoi scopi.

Struttura del file

Nei file scaricati troverai la seguente struttura e contenuto, raggruppati logicamente per proprietà comuni e contenenti entrambe le versioni: minimizzata e compilata.

Dopo il download, decomprimere la cartella compressa per vedere la struttura (compilata) Bootstrap.
Bootstrap è dotato di HTML, CSS e JS per tutti i tipi di lavoro, sono tutti elencati in categorie che puoi trovare nella parte superiore della pagina della documentazione di Bootstrap.
Stili di corpo generali per ripristinare il tipo e lo sfondo, gli stili di collegamento, i motivi della griglia e due semplici elementi di markup.
Stili per elementi HTML comuni: design, codice, tabelle, moduli e pulsanti. Include anche Glyphicons, un magnifico set di icone.

Componenti

Gli stili principali per componenti di interfaccia semplici: schede e pulsanti, barre di navigazione, messaggi, intestazioni di pagina, ecc.

Plugin Javascript

Come i componenti, questi plugin Javascript sono componenti interattivi per tooltip, blocchi di informazioni, componenti modali, ecc.

Elenco dei componenti

Tutti insieme, componenti e plugin Javascript contengono i seguenti elementi di interfaccia:

Gruppi di pulsanti
Menu a discesa
Schede, pulsanti ed elenchi di navigazione
Barra di navigazione
Tasti di scelta rapida
Badge
Intestazioni di pagina ed elemento eroe
Miniature
Messaggi
Indicatori di processo
Elementi modali
Elenchi a discesa
Blocchi informativi
Elemento “Fisarmonica”
Elemento “Carosello”
Ingresso tastiera avanti
Impara dalla documentazione su come usarli e personalizzarli.

Modello HTML di base

Dopo una breve introduzione, ci concentreremo sull’uso di Bootstrap. Per fare ciò, applichiamo il modello HTML principale, che include tutti gli elementi elencati nella struttura del file.

Ecco come appare un tipico file HTML:

<! DOCTYPE html>
<html>
<head>
<title> Template Bootstrap 101 </title>
</head>
<body>
<h1> Ciao, mondo! </h1>
<script src = “codice http: //. jquery.com/jquery-latest.js “> </script>
</body>
</html>
Per creare un tale modello Bootstrap, è sufficiente allegare i file CSS e JS appropriati:

<! DOCTYPE html>
<html>
<head>
<title> Modello Bootstrap 101 </title>
<! – Bootstrap ->
<link href = “css / bootstrap.min.css” rel = “stylesheet”>
</head>
<body>
<h1> Ciao, mondo! </h1>
<script src = “http://code.jquery.com/jquery-latest.js”> </script>
<script src = “js / bootstrap.min .js “> </script>
</body>
</html>