fbpx

Bootstrap 4.0

Corsi di Formazione Informatica

bootstrap 4.0

Che cosa è Bootstrap 4.0 ?(sito ufficiale)

il framework, ideato da Twitter, oggi è uno dei più diffusi nella maggior parte dei siti web.

La sua caratteristica principale è lo Scaffolding (principio della scaffalatura) realizzata tramite codice HTML e CSS dove tutti i contenuti sono incasellati in una struttura a colonne. Il che rende responsivo il sito WEB visualizzabile su qualsiasi schermo a prescindere dalla dimensione.

Cit. Wikipedia:

Bootstrap è stato sviluppato da Mark Otto e Jacob Thornton presso Twitter come un framework che uniformasse i vari componenti che ne realizzavano l’interfaccia web, dato che la presenza di diverse librerie aveva portato ad incoerenze ed elevati oneri di manutenzione. Lo stesso Otto racconta:

«Io e un piccolissimo gruppo di sviluppatori ci riunimmo per progettare e implementare un nuovo componente interno e notammo l’opportunità di fare qualcosa in più. Durante il processo, infatti, ci ritrovammo a costruire qualcosa di ben più sostanzioso. Mesi dopo concludevamo la prima versione di Bootstrap nell’ottica di documentare e condividere comuni modelli di progettazione e attività all’interno della società”.»
([1])

È stato impiegato per la prima volta in condizioni reali durante la prima Hackweek di Twitter, quando Otto ha mostrato ad alcuni colleghi come lo sviluppo dei loro progetti potesse essere accelerato grazie al Bootstrap. Dopo quell’occasione decine di squadre di sviluppo di Twitter sono passate a questo strumento.

Nell’agosto 2011 Twitter ha rilasciato Bootstrap come open source, invitando tutti gli sviluppatori a partecipare al progetto e a dare il loro contributo alla piattaforma.

Sam Holt, su Flippin’ Awesome, ha di recente così sintetizzato:

«se siete puristi del codice e della semantica applicata al codice, se la flessibilità e la mantenibilità del codice stesso sono per voi priorità assolute, se il design del sito su cui lavorate deve avere i crismi dell’originalità, se deve essere alternativo e innovativo, allora non usate Bootstrap, oppure rivolgetevi ad altri framework più leggeri e flessibili. Se invece il design del vostro sito è più convenzionale, se siete alla ricerca di uno strumento che vi fornisca un punto di partenza solido nella strutturazione del progetto, allora Bootstrap fa al vostro caso.»

struttura tipica di una pagina bootstrap

Come si vede da questo screenshot, la pagina tipo di Bootstrap è perfettamente organizzata. Mobile, adattabile allo schermo separato per colonne come mostra  la seguente griglia:

griglia bootstrap

Carousel, slide, immagini ed altri elementi come le icone, i pulsanti sono possibili in maniera molto più semplice rispetto alla classica struttura.

da questo link potete vedere tutta la sintassi dei comandi voce per voce https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp

da questo invece tutto l’occorrente per partire con Bootstrap https://getbootstrap.com/

pagina di partenza per un container fluido:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap 4 Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
</head>
<body>

<div class=”container-fluid”>
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

</body>
</html>

pagina START based:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

 

Hits: 236

Lascia un commento

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