Bootstrap 5 introduktion

Vad är Bootstrap?

  • Bootstrap är en gratis frontend-k框架, som gör webbutveckling snabbare och enklare
  • Bootstrap inkluderar designmallar baserade på HTML och CSS för layout, formulär, knappar, tabeller, navigering, modaler, bildspel och mer
  • Bootstrap erbjuder rika JavaScript-plugin
  • Bootstrap gör det enkelt att skapa responsiv design

Vad är responsiv webbdesign?

Responsiv webbdesign syftar till att skapa webbplatser som automatiskt anpassar sig till olika enheter, oavsett om det är en telefon eller en stor dator.

Bootstrap 5 exempel

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Min första Bootstrap-sida</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Spalte 1: Vår</h3>
      <p>En vacker dag letar jag efter dofter vid floden Si, alla landskap är nya.</p>
      <p>Att stilla känna östvindens ansikte, tusen färgglada blommor är alltid vår.</p>
    </div>
    <div class="col-sm-4">
      <h3>Spalte 2: Ett kort vers om tidigt sommar</h3>
      <p>De röda och blå blommorna har blivit damm, som våren kommer in i fågelsång.</p>
      <p>Att gå längs vägen med färska bomull och lönngren, jag inser att jag är en fredlig människa.</p>
    </div>
    <div class="col-sm-4">
      <h3>Spalte 3: Berget</h3>
      <p>Framför kalla bergen är stigen brant, där vita moln bildas finns det en by.</p>
      <p>Att sitta och älska på parkeringen vid kvällens färgglada granträd, färgen på isbladen är rödare än blommorna i februari.</p>
    </div>
  </div>
</div>

Prova själv

Bootstrap-version

Bootstrap 5 (utgiven 2021) är den senaste versionen av Bootstrap (utgiven 2013); med nya komponenter, snabbare stilark, och bättre responsivitet.

Bootstrap 5 stöder den nyaste stabila versionen av alla större webbläsare och plattformar. Men det stöder inte Internet Explorer 11 och äldre versioner.

Den främsta skillnaden mellan Bootstrap 5 och Bootstrap 3 & 4 är att Bootstrap 5 har bytt till Vanilla JavaScript istället för jQuery.

Kommentarer:Deras team fortsätter att stödja Bootstrap 3 och Bootstrap 4s viktiga felkorrigeringar och dokumentationsändringar, och det är helt säkert att fortsätta använda dem. Men inga nya funktioner kommer att läggas till.

Varför använda Bootstrap?

Bootstrap:s fördelar:

  • Lätt att använda:Alla som har grundläggande kunskaper i HTML och CSS kan omedelbart börja använda Bootstrap.
  • Responsiva egenskaper:Bootstrap:s responsiva CSS kan justeras för mobiltelefoner, surfplattor och datorer.
  • Mobilfrämjande metod:I Bootstrap är mobilfrämjande stil en del av dess kärnramverk.
  • Webbläsarkompatibilitet:Bootstrap 5 är kompatibel med alla moderna webbläsare (Chrome, Firefox, Edge, Safari och Opera).

Observera:Om du behöver stöd för IE11 och äldre versioner, måste du använda BS4 eller BS3.

Var kan du få Bootstrap 5?

Det finns två sätt att använda Bootstrap 5 på din egen webbplats.

Du kan:

  • 包含来自 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 亚当需要一个包含元素来包装站点内容。

Det finns två container-klasser att välja mellan:

  1. .container Klassen erbjuder en responsiv fast bredd container
  2. .container-fluid Klassen erbjuder en fullbredd container som sträcker sig över hela visningsfönstret

Två grundläggande Bootstrap 5-sidor

Container-exempel

Följande exempel visar koden för en grundläggande Bootstrap 5-sida (med responsiv fast bredd container):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap-exempel</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>Min första Bootstrap-sida</h1>
  <p>Detta är i .container-klassen.</p>
  <p>.container-klassen erbjuder en responsiv fast bredd container.</p>
</div>
</body>
</html>

Prova själv

Fluid Container-exempel

Följande exempel visar koden för en grundläggande Bootstrap 5-sida (med fullbredd container):

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap-exempel</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>Min första Bootstrap-sida</h1>
  <p>Detta är i .container-fluid-klassen.</p>
  <p>.container-fluid-klassen erbjuder en fullbredd container som sträcker sig över hela visningsfönstret.</p>
</div>
</body>
</html>

Prova själv