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 4 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.

Bootstrap 4 Esempio

<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>

Versioni Bootstrap

Questo tutorial segue Bootstrap 4 , che è stato rilasciato nel 2018, come aggiornamento a Bootstrap 3 , con nuovi componenti, fogli di stile più veloci, maggiore reattività, ecc.

Bootstrap 5 (rilasciato nel 2021) è la versione più recente di Bootstrap ; 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à.

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, gli stili mobile first fanno parte del framework principale
  • Compatibilità browser: Bootstrap 4 è compatibile con tutti i browser moderni (Chrome, Firefox, Internet Explorer 10+, Edge, Safari e Opera)

Dove trovare Bootstrap 4?

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

Puoi:

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

Bootstrap 4 CDN

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

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

jsDelivr:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Un vantaggio dell'utilizzo del CDN Bootstrap 4:
molti utenti hanno già scaricato Bootstrap 4 da jsDelivr 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 e Popper?
Bootstrap 4 usa jQuery e Popper.js per i componenti JavaScript (come modali, descrizioni comandi, popover ecc.). Tuttavia, se usi solo la parte CSS di Bootstrap, non ne hai bisogno.

  • Avvisi chiudibili
  • Pulsanti e caselle di controllo/pulsanti di opzione per la commutazione degli stati
  • Carosello per diapositive, controlli e indicatori
  • Comprimi per attivare/disattivare il contenuto
  • Dropdowns (also requires Popper.js for perfect positioning)
  • Modals (open and close)
  • Navbar (for collapsible menus)
  • Tooltips and popovers (also requires Popper.js for perfect positioning)
  • Scrollspy for scroll behavior and navigation updates

Download di Bootstrap 4

Se desideri scaricare e ospitare Bootstrap 4 da solo, vai su https://getbootstrap.com/ e segui le istruzioni lì.

Crea la prima pagina web con Bootstrap 4

1. Aggiungi il doctype HTML5

Bootstrap 4 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 4 è mobile-first

Bootstrap 4 è 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 4 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 4

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

Esempio di contenitore

<!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://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.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 4 di base (con un contenitore a larghezza intera):

Esempio di fluido contenitore

<!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://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.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 ❯