HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap Inizia

❮ Precedente Prossimo ❯

Cos'è Bootstrap?

  • Bootstrap è un framework front-end gratuito per uno sviluppo web più semplice e veloce
  • Bootstrap include modelli di progettazione basati su HTML e CSS per tipografia, moduli, pulsanti, tabelle, navigazione, modali, caroselli di immagini e molti altri, oltre a plug-in JavaScript opzionali
  • Bootstrap ti dà anche la possibilità di creare facilmente design reattivi

Che cos'è il design web reattivo?

Il responsive web design consiste nella creazione di siti Web che si adattano automaticamente per avere un bell'aspetto su tutti i dispositivi, dai piccoli telefoni ai desktop di grandi dimensioni.

Esempio Bootstrap

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>

Storia di Bootstrap

Bootstrap è stato sviluppato da Mark Otto e Jacob Thornton su Twitter e rilasciato come prodotto open source nell'agosto 2011 su GitHub.

Nel giugno 2014 Bootstrap è stato il progetto numero 1 su GitHub!

Perché usare Bootstrap?

Vantaggi di Bootstrap:

  • Facile da usare: chiunque abbia solo una conoscenza di base di HTML e CSS può iniziare a utilizzare Bootstrap
  • Funzionalità reattive : il CSS reattivo di Bootstrap si adatta a telefoni, tablet e desktop
  • Approccio mobile first: in Bootstrap 3, gli stili mobile first fanno parte del framework principale
  • Compatibilità browser: Bootstrap è compatibile con tutti i browser moderni (Chrome, Firefox, Internet Explorer, Edge, Safari e Opera)

Versioni Bootstrap

Questo tutorial segue Bootstrap 3 , che è stato rilasciato nel 2013. Tuttavia, trattiamo anche le versioni più recenti; Bootstrap 4 (rilasciato nel 2018) e Bootstrap 5 (rilasciato nel 2021) .

Bootstrap 5 è la versione più recente di Bootstrap ; con nuovi componenti, fogli di stile più veloci, maggiore reattività, ecc. Supporta le ultime versioni stabili di tutti i principali browser e piattaforme. Tuttavia, Internet Explorer 11 e versioni precedenti non è supportato.

La principale differenza tra Bootstrap 5 e Bootstrap 3 e 4 è che Bootstrap 5 è ​​passato a JavaScript invece di jQuery .

Nota: Bootstrap 3 e Bootstrap 4 sono ancora supportati dal team per correzioni di bug critici e modifiche alla documentazione ed è perfettamente sicuro continuare a usarli. Tuttavia, non verranno aggiunte nuove funzionalità.

Dove trovare Bootstrap?

Ci sono due modi per iniziare a usare Bootstrap sul tuo sito web.

Puoi:

  • Scarica Bootstrap da getbootstrap.com
  • Includi Bootstrap da una CDN

Download Bootstrap

Se vuoi scaricare e ospitare Bootstrap tu stesso, vai su getbootstrap.com e segui le istruzioni lì.

CDN Bootstrap

Se non vuoi scaricare e ospitare Bootstrap da solo, puoi includerlo da una CDN (Content Delivery Network).

MaxCDN fornisce supporto CDN per CSS e JavaScript di Bootstrap. Devi includere anche jQuery:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Un vantaggio dell'utilizzo di Bootstrap CDN:
molti utenti hanno già scaricato Bootstrap da MaxCDN quando visitano un altro sito. Di conseguenza, verrà caricato dalla cache quando visitano il tuo sito, il che porta a tempi di caricamento più rapidi. Inoltre, la maggior parte dei CDN si assicurerà che una volta che un utente richiede un file da esso, verrà servito dal server più vicino, il che porta anche a tempi di caricamento più rapidi.

jQuery
Bootstrap utilizza jQuery per i plugin JavaScript (come modali, descrizioni comandi, ecc.). Tuttavia, se usi solo la parte CSS di Bootstrap, non hai bisogno di jQuery.

Crea la prima pagina web con Bootstrap

1. Aggiungi il doctype HTML5

Bootstrap utilizza elementi HTML e proprietà CSS che richiedono il doctype HTML5.

Includi sempre il doctype HTML5 all'inizio della pagina, insieme all'attributo lang e al set di caratteri corretto:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 è mobile-first

Bootstrap 3 è progettato per essere reattivo ai dispositivi mobili. Gli stili Mobile-first fanno parte del framework principale.

Per garantire un rendering e uno zoom al tocco corretti, aggiungi il seguente <meta>tag all'interno <head>dell'elemento:

<meta name="viewport" content="width=device-width, initial-scale=1">

La width=device-widthparte imposta la larghezza della pagina per seguire la larghezza dello schermo del dispositivo (che varierà a seconda del dispositivo).

La initial-scale=1parte imposta il livello di zoom iniziale quando la pagina viene caricata per la prima volta dal browser.

3. Contenitori

Bootstrap richiede anche un elemento contenitore per avvolgere i contenuti del sito.

Sono disponibili due classi di contenitori tra cui scegliere:

  1. La .containerclasse fornisce un contenitore reattivo a larghezza fissa
  2. La .container-fluidclasse fornisce un contenitore a larghezza intera , che copre l'intera larghezza della finestra
.contenitore
.contenitore-fluido

Due pagine Bootstrap di base

L'esempio seguente mostra il codice per una pagina Bootstrap di base (con un contenitore reattivo a larghezza fissa):

Esempio

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 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/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

L'esempio seguente mostra il codice per una pagina Bootstrap di base (con un contenitore a larghezza intera):

Esempio

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 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/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.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>

❮ Precedente Prossimo ❯