Bootstrap 5 peruskurssi

Mikä on Bootstrap?

  • Mikä on Bootstrap?
  • Bootstrap sisältää HTML- ja CSS-pohjaisia suunnittelumalleja, jotka ovat käytössä typografian, lomakkeiden, painikkeiden, taulukoiden, navigoinnin, modaalien, kuvien pyörityksen jne. järjestämisessä
  • Bootstrap tarjoaa rikkaita JavaScript-lisäosia
  • Bootstrap mahdollistaa vastausvaihtelevan suunnittelun helposti

Mikä on vastausvaihteleva verkkosivun suunnittelu?

Vastausvaihteleva verkkosivun suunnittelu pyrkii luomaan automaattisesti mukautuvia sivustoja, jotka parantavat käyttökokemusta kaikilla laitteilla, olipa kyseessä puhelin tai suuri työpöytäkone.

Bootstrap 5 esimerkki

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>Ensimmäinen Bootstrap-sivuni</h1>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>列 1：春日</h3>
      <p>胜日寻芳泗水滨，无边光景一时新。</p>
      <p>等闲识得东风面，万紫千红总是春。</p>
    </div>
    <div class="col-sm-4">
      <h3>列 2：初夏绝句</h3>
      <p>纷纷红紫已成尘，布谷声中夏令新。</p>
      <p>夹路桑麻行不尽，始知身是太平人。</p>
    </div>
    <div class="col-sm-4">
      <h3>列 3：山行</h3>
      <p>远上寒山石径斜，白云生处有人家。</p>
      <p>停车坐爱枫林晚，霜叶红于二月花。</p>
    </div>
  </div>
</div>

Kokeile itse

Bootstrap-versiot

Bootstrap 5 (julkaistu 2021) on Bootstrapin uusin versio (julkaistu 2013); se tarjoaa uusia komponentteja, nopeampia tyylejä ja nopeamman vastauksen.

Bootstrap 5 tukee kaikkien tärkeimpien selainten ja alustojen uusimpia vakaita versioita. Mutta se ei tue Internet Explorer 11 ja aikaisempia versioita.

Bootstrap 5 ja Bootstrap 3 & 4 keskeinen ero on, että Bootstrap 5 on siirtynyt Vanilla JavaScriptiin jQueryn sijaan.

Huomautus:Bootstrapin tiimi tukee edelleen Bootstrap 3 ja Bootstrap 4:n keskeisiä virhekorjauksia ja dokumentaatiomuutoksia, ja niiden käyttö on täysin turvallista. Mutta ei lisätä uusia ominaisuuksia niihin.

Miksi käyttää Bootstrapia?

Bootstrapin edut:

  • Käyttöä helppo:Kaikki, jotka ymmärtävät HTML:ää ja CSS:ää perustavasti, voivat aloittaa Bootstrapin käytön heti.
  • Responsiiviset ominaisuudet:Bootstrapin responsiivinen CSS voidaan mukauttaa puhelimille, tabletteille ja tietokoneille.
  • Liikkuvuus ensisijainen menetelmä:Bootstrapissa liikkuvuus on osa perusrakennetta.
  • Selaimen yhteensopivuus:Bootstrap 5 on yhteensopiva kaikkien nykyaikaisten selaimien kanssa (Chrome, Firefox, Edge, Safari ja Opera).

Huomioitavaa:Jos tarvitset tukea IE11 ja aikaisemmille versioille, sinun täytyy käyttää BS4 tai BS3.

Mistä saat Bootstrap 5?

On kaksi tapaa käyttää Bootstrap 5 omalla verkkosivullasi.

Voit:

  • Sisältää CDN:stä ladatun Bootstrap 5:n
  • Lataa Bootstrap 5 getbootstrap.com:sta

Bootstrap 5 CDN

Jos et halua ladata ja palvella Bootstrap 5 itse, voit viitata siihen CDN:stä (sisällön toimitusverkosta).

CodeW3C.com tarjoaa CDN-tuen Bootstrapin CSS:lle ja JavaScriptille:

MaxCDN:

<!-- Uusimmin käännetyt ja puristetut CSS:t -->
<link href="https://www.codew3c.com/lib/bs/bootstrap.css" rel="stylesheet">
<!-- Uusimmin käännetyt JavaScriptit -->
<script src="https://www.codew3c.com/lib/bs/bootstrap.js"></script>

Bootstrap 5 CDN:n etuja yhdestä:

Monet käyttäjät ovat jo ladanneet Bootstrap 5 jsDelivr:stä, kun he vierailevat toisella sivustolla. Siksi, kun he vierailevat sivustollasi, se ladataan välimuistista, mikä lyhentää latausaikaa. Lisäksi suurin osa CDN:sta varmistaa, että kun käyttäjä pyytää tiedostoa, se palvellaan lähimmästä palvelimesta, mikä johtaa nopeampaan latausaikaan.

JavaScript?

Bootstrap 5 käyttää JavaScriptiä eri komponenttien (kuten modaalien, työkaluvihjeiden, ponnahdusikkunoiden jne.) osalta. Mutta jos käytät vain Bootstrapin CSS-puolta, sinun ei tarvitse niitä.

Lataa Bootstrap 5

Jos haluat ladata ja palvella Bootstrap 5 itse, vieraile https://getbootstrap.com/ja siirry sitten siellä oleviin ohjeisiin.

Luo ensimmäinen sivusi Bootstrap 5:n avulla

1. Lisää HTML5 dokumentityyppi

Bootstrap 5 käyttää HTML5 doctypea vaativia HTML-elementtejä ja CSS-ominaisuuksia.

Aseta aina HTML5 doctype sivun alkuun, sekä lang-ominaisuus ja oikea otsikko, merkistö:

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

2. Bootstrap 5 mobiilipääpaino

Bootstrap 5:n suunnittelutavoite on vastausliikkeellisyys mobiililaitteille. Mobiilipääpaino on osa ydinfrekvenssia.

Varmista oikea esitys ja kosketus skaalaus lisäämällä <head> Lisää seuraavat elementtiin <meta> Tunniste:

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

width=device-width Asettaa sivun leveyden seuraamaan laitteiston screen-widthä (se vaihtelee laitteesta toiseen).

initial-scale=1 Asettaa selaimen ensimmäisen sivun latauksen aikana alkuperäisen skaalauksen.

3. Konteineri

Bootstrap 5 tarvitsee elementin, joka sisältää sivuston sisällön.

On olemassa kaksi konteeriluokkaa valittavaksi:

  1. .container Luokka tarjoaa vastauskykyisen kiinteän leveyden konteinereita
  2. .container-fluid Luokka tarjoaa täyden leveyden konteinereita, jotka kattavat koko näyttöalueen

Kaksi perus Bootstrap 5-sivua

Container -esimerkki

Seuraavassa esimerkissä näytetään perus Bootstrap 5-sivun (vastauskykyisen kiinteän leveyden konteinereiden kanssa) koodi:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap-esimerkki</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>Ensimmäinen Bootstrap-sivuni</h1>
  <p>Tämä osa on .container-luokassa.</p>
  <p>.container-luokka tarjoaa vastauskykyisen kiinteän leveyden konteinereita.</p>
</div>
</body>
</html>

Kokeile itse

Container Fluid -esimerkki

Seuraavassa esimerkissä näytetään perus Bootstrap 5-sivun (täyden leveyden konteinereiden kanssa) koodi:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap-esimerkki</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>Ensimmäinen Bootstrap-sivuni</h1>
  <p>Tämä osa on .container-fluid-luokassa.</p>
  <p>.container-fluid-luokka tarjoaa täyden leveyden konteinereita, jotka kattavat koko näyttöalueen.</p>
</div>
</body>
</html>

Kokeile itse