Guida bootstrap

Guida bootstrap

Guida bootstrap per realizzare layout efficaci per siti web. Perchè dovresti usare bootstrap? perchè ti permette di realizzare interfacce grafiche in html accattivanti e in maniera semplice e in poco tempo.

Bootstrap si abbina perfettamente con JQuery, nodejs, wordpress, angular e qualsiasi altra tecnologia per lo sviluppo web.

Attenzione, in questa guida boostrap devo dirti di non abbinare bootstrap con altri framework grafici che potrebbero creare conflitto, come jquery-ui, ui-kit o similari.

Cos’è bootstrap?

Bootstrap è un framework per lo sviluppo di interfacce grafiche html, consente di creare layout ed elementi html quali pulsanti, barre di navigazione(navbar), accordion, slide e moltissimi altri elementi grafici in poco tempo. Bootstrap viene definito come framework lato client(front-end).

Il framework di bootstrap si divide in codice CSS e JavaScript. Il codice CSS viene usato per la definizione dell’interfaccia grafica e quindi dei suoi elementi, il codice JavaScript è responsabile dell’interazione e dei comportamenti degli elementi di boostrap come modal, dialog, form, button, table etc…..

Perchè usare bootstrap?

Una guida bootstrap deve chiarire per usarlo porta dei benefici, bootstrap come ogni framework grafico, consente di velocizzare la realizzazione di interfacce grafiche utente lato front-end, senza un framework come bootstrap, ci vorrebbero decine di ore per realizzare le interfacce la grafiche e la loro logica di interazione.

Come implementare bootstrap?

Non potevo scrivere questa guida bootstrap senza dirti come implementarlo all’interno dei tuoi progetti web.

Puoi implementare bootstrap inserendo dei tag html per javascript e css, per farlo devi andare nell’instestazione <head> del tuo codice html, se usi wordpress puoi usare un plugin, mentre su angular puoi usare npm per l’installazione dei pacchetti in modo automatico.

Puoi decidere di implementare bootstrap scaricando il framework oppure facendo riferimento al server che ospita il framework.

Bootstrap in locale su html

Puoi scaricare il framework bootstrap direttamente dal sito web ufficiale.

Guida Bootstrap
Download di bootstrap

Dopo che hai cliccato su download, verrà scaricato il file zip contenente i file css e javascript di bootstrap, dovrai copiare questi file nelle cartelle corrispondenti del tuo progetto per poi richiamarle nel codice html.

Guida bootstrap: download

Estrai file zip che hai scaricato, dopo l’estrazione entra nella cartella e troverai i file di boostrap, troverai la cartella css e js, dovrai copiare i file all’interno delle cartelle e portarli sul tuo progetto o applicazione html.

Guida Bootstrap: elenco file

Bootstrap da CDN

CDN significa content delivery network, sistemi di distribuzione del contenuto online, in questo caso usato per bootstrap.

Iin questa guida bootstrap devo dirti come implementare il framework usando pochi semplici tag da implementare all’interno del tuo sito html, in questo modo avrai a disposizione componenti come modal, button, table, grid, form, navbar etc… immediatamente

Questo è il tag css da includere nella sezione head della tua pagina web:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

Questo è il tag javascript da includere nella sezione head della pagina web, include anche jquery:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

Ecco una pagina web completa che include il framework bootstrap al suo interno.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v4.1.1">
    <title>Template example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>    
  </head>
  <body>


<main role="main" class="container">

  <div class="starter-template">
    <h1>Bootstrap starter template</h1>
    <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div>

</main><!-- /.container -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script>window.jQuery || document.write('<script src="../assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
</html>

Conclusione

In questa guida bootstrap hai capito che si tratta di un framework che definisce l’interfaccia grafica con un suo stile e comportamento per gli elementi html.

Puoi includere bootstrap scaricandolo e implementandolo nel tuo progetto, oppure puoi usare dei tag html che puntano ai cdn che ospitano bootstrap. Nei cms puoi utilizzare un plugin, mentre nelle applicazioni single page puoi avvalerti di programmi di installazione automatica come “npm” su node.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *