Bootstrap 5: Introduzione

Cos'è Bootstrap?

  • Bootstrap è un framework frontend gratuito per sviluppare Web più rapidamente e più facilmente
  • Bootstrap include template di design basati su HTML e CSS per la tipografia, i moduli, i pulsanti, le tabelle, la navigazione, i moduli, le immagini in rotazione, ecc.
  • Bootstrap offre una vasta gamma di plugin JavaScript
  • Bootstrap ti permette di creare facilmente design responsive

Cos'è il design responsive web?

Il design responsive web è progettato per creare siti web che si adattano automaticamente, migliorando l'esperienza utente su tutti i dispositivi, sia su telefoni che su grandi computer da scrivania.

Esempio Bootstrap 5

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>La mia prima pagina Bootstrap</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Colonna 1: Primavera</h3>
      <p>Il giorno felice di cercare il profumo degli fiori sulle rive del Sishui, la scena infinita è nuova in un istante.</p>
      <p>Facilmente riconosciuto il volto dell'orientale vento, milioni di fiori e foglie sono sempre primavera.</p>
    </div>
    <div class="col-sm-4">
      <h3>Colonna 2: Quadrilitana dell'estate</h3>
      <p>Le foglie rosse e viola sono diventate polvere, il cinguettio del cuculo annuncia la nuova stagione estiva.</p>
      <p>Non si può camminare con le canne di mogano,才知道自己是太平人。</p>
    </div>
    <div class="col-sm-4">
      <h3>Colonna 3: Montagna</h3>
      <p>Il sentiero steep di montagna è inclinato, e ci sono case dove il bianco nuvola si forma.</p>
      <p>Posteggia la macchina e ammira la sera autunnale del fango, le foglie gelate sono più rosse delle fiori di febbraio.</p>
    </div>
  </div>
</div>

Prova personalmente

Versioni di Bootstrap

Bootstrap 5 (pubblicato nel 2021) è la versione più recente di Bootstrap (pubblicata nel 2013); utilizza nuovi componenti, tabelle di stile più rapide, offrendo una risposta più veloce.

Bootstrap 5 supporta le versioni stabili più recenti di tutti i principali browser e piattaforme. Tuttavia, non supporta Internet Explorer 11 e versioni precedenti.

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

Note:Il team continua a supportare le correzioni di errori critiche e le modifiche dei documenti di Bootstrap 3 e Bootstrap 4, quindi è completamente sicuro continuare a utilizzarli. Ma non verranno aggiunte nuove funzionalità.

Perché utilizzare Bootstrap?

Vantaggi di Bootstrap:

  • Facilità d'uso:Chiunque abbia una conoscenza basilare di HTML e CSS può iniziare a utilizzare Bootstrap immediatamente
  • Caratteristiche responsive:Il CSS responsive di Bootstrap può essere adattato per cellulare, tablet e computer desktop
  • Metodo mobile-first:In Bootstrap, lo stile mobile-first fa parte del suo framework di base
  • Compatibilità del browser:Bootstrap 5 è compatibile con tutti i browser moderni (Chrome, Firefox, Edge, Safari e Opera).

Attenzione:Se hai bisogno di supportare IE11 e versioni precedenti, devi utilizzare BS4 o BS3.

Dove ottenere Bootstrap 5?

Ci sono due metodi per utilizzare Bootstrap 5 sul tuo sito web.

È possibile:

  • 包含来自 CDN 的 Bootstrap 5
  • 从 getbootstrap.com 下载 Bootstrap 5

Bootstrap 5 CDN

如果不想自己下载并托管 Bootstrap 5，则可以从 CDN（内容交付网络）中引用它。

CodeW3C.com 为 Bootstrap 的 CSS 和 JavaScript 提供了 CDN 支持：

MaxCDN:

<!-- 最新编译并压缩的 CSS -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- 最新编译的 JavaScript -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

使用 Bootstrap 5 CDN 的优势之一：

许多用户在访问另一个站点时已经从 jsDelivr 下载了 Bootstrap 5。因此，当他们访问您的网站时，它将从缓存中加载，从而缩短加载时间。此外，大多数 CDN 将确保一旦用户从中请求文件，它将从最接近他们的服务器提供服务，这也导致更快的加载时间。

JavaScript？

Bootstrap 5 将 JavaScript 用于不同的组件（如模态、工具提示、弹出框等）。但是，如果您只使用 Bootstrap 的 CSS 部分，那就不需要它们。

下载 Bootstrap 5

如果您想自己下载并托管 Bootstrap 5，请访问 https://getbootstrap.com/，然后按照那里的说明进行操作。

使用 Bootstrap 5 创建您的第一张网页

1. 添加 HTML5 文档类型

Bootstrap 5 使用的是需要 HTML5 doctype 的 HTML 元素和 CSS 属性。

请始终在页面开头包含 HTML5 doctype，以及 lang 属性和正确的标题、字符集：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 实例</title>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 5 移动优先

Bootstrap 5 的设计目标是响应移动设备。移动优先的样式是核心框架的一部分。

为确保正确的渲染和触摸缩放，请在 <head> 元素内添加以下 <meta> 标记：

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

width=device-width 设置了页面的宽度以跟随设备的 screen-width（将因设备而异）。

initial-scale=1 设置了浏览器首次加载页面时的初始缩放级别。

3. 容器

Bootstrap 5 还需要一个包含元素来包装站点内容。

Ci sono due classi di contenitore da scegliere:

  1. .container La classe offre un contenitore a larghezza fissa responsiveness
  2. .container-fluid La classe offre un contenitore a piena larghezza, che copre l'intera larghezza della finestra di visualizzazione

Due pagine di base Bootstrap 5

Esempio di contenitore

Esempio seguente mostra il codice di una pagina di base Bootstrap 5 (con contenitore a larghezza fissa responsiveness):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Esempio Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container">
  <h1>La mia prima pagina Bootstrap</h1>
  <p>Questo section si trova nella classe .container.</p>
  <p>.container fornisce un contenitore a larghezza fissa responsiveness.</p>
</div>
</body>
</html>

Prova personalmente

Esempio di contenitore fluido

Esempio seguente mostra il codice di una pagina di base Bootstrap 5 (con contenitore a piena larghezza):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Esempio Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
  <script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>La mia prima pagina Bootstrap</h1>
  <p>Questo section si trova nella classe .container-fluid.</p>
  <p>.container-fluid fornisce un contenitore a piena larghezza, che copre l'intera larghezza della finestra di visualizzazione.</p>
</div>
</body>
</html>

Prova personalmente