Bootstrap 5: Aloita

Sisällysluettelo

Mikä on Bootstrap?

Bootstrap on ilmainen etupään kehys nopeampaan ja helpompaan verkkokehitykseen
Bootstrap sisältää HTML- ja CSS-pohjaisia suunnittelumalleja typografiaa, lomakkeita, painikkeita, taulukoita, navigointia, modaaleja, kuvakaruselleja ja monia muita varten sekä valinnaisia JavaScript-laajennuksia
Bootstrap antaa sinulle myös mahdollisuuden luoda helposti reagoivia malleja

Mitä responsiivinen verkkosuunnittelu on?

Responsiivinen web-suunnittelu tarkoittaa automaattisesti mukautuvien web-sivustojen luomista näyttämään hyvältä kaikilla laitteilla pienistä puhelimista suuriin pöytäkoneisiin.

Bootstrap 5 Esimerkki

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

Kokeile itse →

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p> 
</div>
  
<div class="container mt-5">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

</body>
</html>

Bootstrap-versiot

Bootstrap 5 (julkaistu 2021) on Bootstrapin uusin versio (julkaistu 2013); uusilla komponenteilla, nopeammalla tyylisivulla ja paremmalla reagointikyvyllä.

Bootstrap 5 tukee uusimpia, vakaita julkaisuja kaikista tärkeimmistä selaimista ja alustat. Internet Explorer 11:tä ja sitä vanhempia versioita ei kuitenkaan tueta.

Suurin ero Bootstrap 5:n ja Bootstrap 3:n ja 4:n välillä on se Bootstrap 5 on vaihtanut vanilja JavaScriptiin jQueryn sijaan.

Huomaa: tiimi tukee edelleen Bootstrap 3:a ja Bootstrap 4:ää kriittisten virheenkorjausten ja dokumentaatiomuutosten osalta, ja on täysin turvallista jatkaa niiden käyttöä. Uusia ominaisuuksia EI kuitenkaan lisätä niitä.

Miksi käyttää Bootstrapia?

Bootstrapin edut:

Helppokäyttöinen: Kuka tahansa, jolla on vain perustiedot HTML:stä ja CSS:stä, voi aloittaa Bootstrapin käytön
Responsiiviset ominaisuudet: Bootstrapin responsiivinen CSS mukautuu puhelimiin, tabletteihin ja pöytätietokoneisiin
Mobile-first lähestymistapa: Bootstrapissa mobile-first -tyylit ovat osa ydinkehystä
Selainyhteensopivuus: Bootstrap 5 on yhteensopiva kaikkien nykyaikaisten selainten (Chrome, Firefox, Edge, Safari ja Opera) kanssa. Huomaa, että jos tarvitset tukea IE11:lle ja sitä vanhemmille, sinun on käytettävä joko BS4 tai BS3.

Mistä saa Bootstrap 5:n?

On kaksi tapaa aloittaa Bootstrap 5:n käyttö omalla verkkosivustollasi.

Sinä pystyt:

Sisällytä Bootstrap 5 CDN:stä
Lataa Bootstrap 5 osoitteesta getbootstrap.com

Bootstrap 5 CDN

Jos et halua ladata ja isännöidä Bootstrap 5:tä itse, voit sisällyttää sen CDN:stä (Content Delivery Network).

jsDelivr tarjoaa CDN-tuen Bootstrapin CSS:lle ja JavaScriptille:

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
 
<!-- Latest compiled JavaScript -->
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

Yksi Bootstrap 5:n CDN:n käytön etu:
Monet käyttäjät ovat jo ladanneet Bootstrap 5 jsDelivriltä vieraillessasi toinen sivusto. Tämän seurauksena se ladataan välimuistista, kun he vierailevat sivustollasi, mikä nopeuttaa latausaikaa. Useimmat CDN:t varmistavat myös, että kun käyttäjä pyytää siltä tiedostoa, se toimitetaan lähimmältä palvelimelta, mikä myös nopeuttaa latausaikaa.

JavaScript?
Bootstrap 5 käyttää JavaScriptiä eri tarkoituksiin komponentit (kuten modaalit, työkaluvihjeet, ponnahdusikkunat jne.). Kuitenkin, jos käytät vain CSS on osa Bootstrapia, et tarvitse niitä.

Lataa Bootstrap 5

Jos haluat ladata ja isännöidä Bootstrap 5:n itse, siirry osoitteeseen https://getbootstrap.com/, ja noudata siellä olevia ohjeita.

Luo ensimmäinen Web-sivusi Bootstrap 5:n avulla

1. Lisää HTML5-dokumenttityyppi

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

Sisällytä aina HTML5-dokumenttityyppi alkuun sivu, lang-attribuutti sekä oikea otsikko ja merkistö:

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

2. Bootstrap 5 on mobiiliensimmäinen

Bootstrap 5 on suunniteltu reagoimaan mobiililaitteisiin. Mobiili-ensisijaiset tyylit ovat osa ydinkehystä.

Varmistaaksesi oikean hahmontamisen ja kosketuszoomauksen lisäämällä seuraavan -tunnisteen <head>-elementti:

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

width=device-width-osa määrittää sivun leveyden seuraamaan näytön leveyttä laitteesta (joka vaihtelee laitteesta riippuen).

initial-scale=1-osa määrittää alkuperäisen zoomaustason, kun sivu ladataan ensimmäisen kerran selaimen toimesta.

3. Säiliöt

Bootstrap 5 vaatii myös sisältävän elementin sivuston sisällön käärimiseen.

Valittavana on kaksi konttiluokkaa:

Luokka .container tarjoaa responsiivisen kiinteän levyisen säilön
Luokka .container-fluid tarjoaa täysleveän säiliön, joka kattaa koko näkymän leveyden

.container

.container-fluid

Kaksi Basic Bootstrap 5 -sivua

Seuraava esimerkki näyttää koodin Bootstrap 5 -perussivulle (jossa on reagoiva kiinteän levyinen säilö):

Esimerkki säiliöstä

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>

Kokeile itse →

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container class.</p>
  <p>The .container class provides a responsive fixed width container.</p>
  <p>Resize the browser window to see that the container width will change at different breakpoints.</p>
</div>

</body>
</html>

Seuraava esimerkki näyttää koodin Bootstrap 5 -perussivulle (täysleveällä säilöllä):

Esimerkki nestesäiliöstä

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>

Kokeile itse →

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This part is inside a .container-fluid class.</p>
  <p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>     
</div>

</body>
</html>