Come installare Bootstrap
Bootstrap è un framework Web open source. Viene utilizzato principalmente per lo sviluppo front-end. È gratuito. Bootstrap è stato sviluppato dal Bootstrap Core Team. Bootstrap è stato originariamente creato da Mark Otto e Jacob Thornton. È stato inizialmente rilasciato nel 2011. È stato scritto in HTML, CSS e JavaScript.
Pacchetto Bootstrap
Questo pacchetto contiene i seguenti elementi:
- CSS : è indicato come foglio di stile a cascata che viene utilizzato per lo stile degli elementi HTML.
- Componenti : nel pacchetto Bootstrap ci sono molti componenti riutilizzabili per menu a discesa, iconografia, avvisi, navigazione, ecc.
- Personalizza : nel pacchetto Bootstrap, i componenti possono essere personalizzati, meno variabili e plugin Jquery per ottenere lo stile.
- Ponteggi : in un pacchetto bootstrap, fornisce la struttura di base con il sistema a griglia, lo stile di collegamento e lo sfondo.
- JavaScript : in un pacchetto bootstrap, ci saranno plug-in javascript.
I passaggi per installare Bootstrap
Discutiamo i passaggi necessari per installare Bootstrap.
Passaggio 1: utilizzare il collegamento seguente per scaricare il bootstrap. Fare clic su Download, il pacchetto bootstrap verrà scaricato in una cartella Zip. Questa cartella contiene le cartelle CSS e JS.
https://getbootstrap.com/docs/4.0/getting-started/download/
Il pacchetto bootstrap che è scaricato è pronto per l'uso del codice compilato e che può essere facilmente integrato nel progetto. È composto da bundle CSS compilati e minimizzati e plugin Javascript.
Passaggio 2: file di origine : Bootstrap può essere compilato con la propria pipeline di risorse con l'aiuto di file javascript, sass e documentazione.
Fai clic su Scarica sorgente per scaricare i file. Contiene js, CSS e altri file.
Passaggio 3: Gestori di pacchetti: Bootstrap può essere installato in file o applicazioni basati su Node.js.
$ npm install bootstrap
Passaggio 4: per le applicazioni Node.js, è possibile installare bootstrap anche con l'aiuto del pacchetto di filati.
$ yarn add bootstrap
Passaggio 5: se l'utente desidera installare il bootstrap per le applicazioni ruby gems
- Utilizzando bundler :
gem 'bootstrap', '~> 4.0.0' - Senza bundler :
$ gem install bootstrap –v 4.0.0
Passaggio 6: il compositore può essere utilizzato per installare e gestire bootstrap sass e javascript
$ Composer require twbs/bootstrap: 4.0.0
Passaggio 7: utilizzando NuGet, è possibile installare e gestire bootstrap CSS e applicazioni sass e javascript for.Net.
- Bootstrap del pacchetto di installazione
- Install-Package bootstrap.sass
Passaggio 8: Jquery viene utilizzato anche con i file bootstrap o la cartella di installazione. Jquery deve essere scaricato e posizionare il file Jquery nella cartella principale Bootstrap per sperimentare la migliore interfaccia utente e, soprattutto, Jquery migliora le funzionalità di bootstrap che offre un aspetto più attraente e reattivo.
Passaggio 9: Dopo aver eseguito i passaggi precedenti, lo sviluppatore può scrivere il codice HTML per collegare tutti i file per la pagina HTML e può aprire il file HTML per verificare la risposta.
Browser supportati
Bootstrap supporta principalmente l'ultima versione stabile di tutto il browser e la piattaforma. Il browser dei dispositivi mobili è supportato dalla piattaforma Android e IOS. Anche i browser desktop per diverse piattaforme come Mac e Windows sono supportati da bootstrap.
Struttura del file Bootstrap
- Bootstrap è stato precompilato, la versione compilata di bootstrap viene scaricata ed estrae il file Zip e vedrai la seguente struttura di file:
La figura sopra include anche i file delle cartelle dei caratteri se lo sviluppatore richiede caratteri aggiuntivi per rendere l'interfaccia utente in base ai requisiti può includere quei file disponibili nel pacchetto sorgente di bootstrap. Il codice sorgente di bootstrap avrà una struttura di file più dettagliata.
Bootstrap 4
Ci sono cambiamenti significativi che sono stati fatti in Bootstrap 4 come riscrivere il codice principalmente, supporto per dimensioni flessibili CSS, sono state aggiunte opzioni di personalizzazione della navigazione, spazio di risposta e utilità di dimensionamento, la dimensione globale del carattere è aumentata da 14px a 16px, numero di utility vengono aggiunte classi, vengono aggiunti il pulsante di stile, i menu a discesa, gli oggetti multimediali e le classi di immagini. Supporta anche l'ultima versione dei browser.
La caratteristica principale di Bootstrap è semplificare lo sviluppo di pagine Web. Il motivo principale per utilizzare bootstrap è la scelta del colore, dimensione, carattere e layout da proiettare. Fornisce definizioni di stile di base per gli elementi HTML. I plug-in Jquery e i componenti Javascript forniscono alcuni elementi aggiuntivi che possono essere utilizzati per l'interfaccia utente come finestre di dialogo e descrizioni comandi, ecc. I componenti bootstrap comprendono anche elementi di HTML, dichiarazioni CSS e codice Javascript. Ha anche una funzione di estensione degli elementi di interfaccia esistenti.
L'altro componente principale di bootstrap sono i suoi componenti di layout. Il componente di layout di base è chiamato contenitore in cui ogni elemento della pagina è inserito in esso. Il contenitore viene posizionato sulla pagina Web, quindi altri componenti di layout come il layout CSS possono essere definiti tramite righe e colonne. Dipende dallo sviluppatore scegliere quale contenitore ha fissato la larghezza o il contenitore della larghezza del fluido per la progettazione della pagina Web. Il primo utilizza le quattro larghezze predefinite, ma successivamente utilizza i riempimenti dipende dalle dimensioni dello schermo su cui viene visualizzata la pagina Web.
Utilizzo di bootstrap
Bootstrap è molto facile da usare e con l'aiuto di bootstrap, gli sviluppatori hanno usato per sviluppare siti Web responsive. Bootstrap viene anche utilizzato in quanto supporta molti browser come Google Chrome, Mozilla Firefox, Internet Explorer, Safari, Opera, ecc. Bootstrap è facile da avviare e creare un sistema di griglia reattivo. Ha raggruppato plug-in javascript e c'è un elenco di aziende da utilizzare. Ha una buona documentazione per iniziare e in grado di funzionare rapidamente. Bootstrap ha mostrato un design reattivo e un primo approccio mobile. È open source e gratuito. Risparmia molto sforzo e tempo. È personalizzabile. L'importante utilizzo di bootstrap è il web design reattivo, che aiuta a regolare il sito Web in base alle dimensioni dello schermo per tutti i dispositivi come laptop, desktop, telefono cellulare e tablet.
Conclusione - Come installare Bootstrap
Bootstrap utilizza ampiamente come framework Web front-end. Supporta anche molti linguaggi di programmazione e piattaforme indipendenti. Ha un ottimo supporto da parte della community online per i principianti e la documentazione è buona anche sul sito ufficiale dove tutti gli aggiornamenti riguardanti il rilascio di una nuova versione e le funzionalità avanzate sono stati correttamente pubblicati e documentati. È diventato il popolare framework Web per creare diversi strumenti e integrarsi con un altro linguaggio di scripting.
Articoli consigliati
Questa è stata una guida su come installare Bootstrap. Qui abbiamo discusso i passaggi per installare bootstrap e anche il concetto di base di Bootstrap 4 e l'utilizzo di Bootstrap. Puoi anche consultare i seguenti articoli per saperne di più -
- Come utilizzare i comandi Bootstrap
- Bootstrap Intervista Domande con risposte
- Confronti di Bootstrap e WordPress
- Installazione di WordPress