Selainohjelma

Bootstrap 5 kurssit

• Palvelinohjelma
• Aikataulu
• BS5 Opas
• BS5 Johdanto
• BS5 Kontti
• BS5 Verkkosilmukka Perus
• BS5 Teksti
• BS5 Taulukko
• BS5 Kuva
• BS5 Jumbotron
• BS5 Varoituskehys
• BS5 Nappula
• BS5 Nappularyhmä
• BS5 Edistyskehykset
• BS5 Latauslaite
• BS5 Sivut
• BS5 Luettelo-ryhmä
• BS5 Kortti
• BS5 Pudotusvalikko
• BS5 Kaatuminen
• BS5 Navigaatio
• BS5 Navigaatiopalkki
• BS5 Läpijuoksu
• BS5 Sivukansi
• BS5 Moduuli
• BS5 Työkaluvihko
• BS5 Ponnahdusikkuna
• BS5 Toast
• BS5 Scrollspy
• BS5-käytännön työkalut
• BS5 Offcanvas

Bootstrap 5 lomakkeet

• BS5-lomakkeet
• BS5 Flex
• BS5 Valitsinvalikko
• BS5 Valintatyökalut ja Valintapainikkeet
• BS5 Alue
• BS5 Syöttöryhmä
• BS5 Virtaus Etiketti

Bootstrap 5 ruudukko

• BS5 Lomakkeen Vahvistus
• BS5 Verkkosilmukkasysteemi
• BS5 Sijoittelu/ Horisontaalinen
• BS5 Verkkosilmukka XSmall
• BS5 Verkkosilmukka Small
• BS5 Verkkosilmukka Medium
• BS5 Verkkosilmukka Large
• BS5 Verkkosilmukka XLarge
• BS5 Verkkosilmukka XXL

BS5 Verkkosilmukka

• Bootstrap 5 Muut
• BS5 Perusmalli

BS5 Testi

Valinnainen kurssi

• CodeW3C.com varastot

Kurssivinkki:

Joustoruutu

Bootstrap 3 ja Bootstrap 4 & 5 välillä suurin ero on, että Bootstrap 5 käyttää nyt flexboxia sen sijaan, että käyttäisi virtauksia.

Joustava laatikkorakenne, jonka avulla voit suunnitella joustavia vastauksenvaihtoja helpommin ilman virtauksia tai sijoittelua. Jos et ole tutustunut flexiin, voit tutustua siihen CSS Flexbox-opas

Huomautus:Opit täältä.

Huomautus:IE9 ja aikaisemmat versiot eivät tue Flexboxia.

Esimerkki

Jos tarvitset tukea IE8-9:lle, käytä Bootstrap 3. Se on kaikkein vakaimmin Bootstrap-versio, ja tiimi tukee sitä edelleen kriittisten virheiden korjaamiseen ja dokumenttien muuttamiseen. Uusia ominaisuuksia ei kuitenkaan lisätä. d-flex Luokat:}}

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">joustava projekti 1</div>
  <div class="p-2 bg-warning">joustava projekti 2</div>
  <div class="p-2 bg-primary">joustava projekti 3</div>
</div>

Kokeile itse

Esimerkki

Jos haluat luoda rivejä sisältävän flexbox-kuoren, käytä d-inline-flex Luokat:}}

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">joustava projekti 1</div>
  <div class="p-2 bg-warning">joustava projekti 2</div>
  <div class="p-2 bg-primary">joustava projekti 3</div>
</div>

Kokeile itse

Horisontaalinen suunta

Käytä .flex-row Näytä joustavat elementit horisontaalisesti (rinnakkain). Tämä on oletusasetus.

vinkki:käytä .flex-row-reverse Voit oikealle tasata horisontaalisesti:

Esimerkki

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">joustava projekti 1</div>
  <div class="p-2 bg-warning">joustava projekti 2</div>
  <div class="p-2 bg-primary">joustava projekti 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">joustava projekti 1</div>
  <div class="p-2 bg-warning">joustava projekti 2</div>
  <div class="p-2 bg-primary">joustava projekti 3</div>
</div>

Kokeile itse

Pystysuunta

Käytä .flex-column Näytä flex-elementit pystysuunnassa (jatkoilevan yhteen), tai käytä .flex-column-reverse Käänteinen pystysuuntainen suunta:

Esimerkki

<div class="d-flex flex-column">
  <div class="p-2 bg-info">joustava projekti 1</div>
  <div class="p-2 bg-warning">joustava projekti 2</div>
  <div class="p-2 bg-primary">joustava projekti 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">joustava projekti 1</div>
  <div class="p-2 bg-warning">joustava projekti 2</div>
  <div class="p-2 bg-primary">joustava projekti 3</div>
</div>

Kokeile itse

Täsmää sisältöä

käytä .justify-content-* Luokat voivat muuttaa joustavien elementtien tasauksen tapaa. Voimassa olevat luokat ovat:：

• start（Oletusarvo）
• end
• center
• between
• around

Esimerkki

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Kokeile itse

Yhtä leveät

käytä flex-projektissa .flex-fill Voit pakottaa ne olemaan yhtä leveitä:

Esimerkki

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Joustava elementti 1</div>
  <div class="p-2 bg-warning flex-fill">Joustava elementti 2</div>
  <div class="p-2 bg-primary flex-fill">Joustava elementti 3</div>
</div>

Kokeile itse

Leviäminen

käytä flex-projektissa .flex-grow-1 Voit käyttää ylimääräistä tilaa. Esimerkissä ensimmäiset kaksi flex-elementtiä käyttävät tarvittavaa tilaa, ja viimeinen elementti käyttää jäljelle jäävää vapaata tilaa:

Esimerkki

<div class="d-flex">
  <div class="p-2 bg-info">joustava projekti 1</div>
  <div class="p-2 bg-warning">joustava projekti 2</div>
  <div class="p-2 bg-primary flex-grow-1">joustava projekti 3</div>
</div>

Kokeile itse

vinkki:käytä flex-projektissa joustava-kasvu-1 voi supistua tarvittaessa.

Järjestys

käytä order tyyli voi muuttaa tietyn joustavan projektin visuaalisen järjestyksen. Voimassa olevat tyylit ovat 0-5, joista pienin numero on korkein prioriteetti (order-1 näkyy ennen order-2:ta ja niin edelleen):

Esimerkki

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">joustava projekti 1</div>
  <div class="p-2 bg-warning order-2">joustava projekti 2</div>
  <div class="p-2 bg-primary order-1">joustava projekti 3</div>
</div>

Kokeile itse

automaattinen ulkoreunu

käytä ms-autotai käytä me-auto（siirtää projektin vasemmalle）lisätään helposti automaattinen reunus joustaville projekteille:

Esimerkki

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">joustava projekti 1</div>
  <div class="p-2 bg-warning">joustava projekti 2</div>
  <div class="p-2 bg-primary">joustava projekti 3</div>
</div>
<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">joustava projekti 1</div>
  <div class="p-2 bg-warning">joustava projekti 2</div>
  <div class="p-2 me-auto bg-primary">joustava projekti 3</div>
</div>

Kokeile itse

Rivitä

kautta joustava-sisältö-ei-käänteinen（oletusarvo）、joustava-sisältö tai joustava-sisältö-käänteinenvalitsee, miten joustavat projektit pakataan joustavuusastiin.

Esimerkki

<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>

Kokeile itse

Täsmää sisältöä

Käytä joustava-sisältö-* tyyli kontrolloi joustavien projektien pystysuuntaista tasapainottamista. Voimassa olevat tyylit ovat:

• aseta sisällön asettelu vasemmalle（Oletusarvo）
• aseta sisällön asettelu oikealle
• keskitä sisällön asettelu
• .align-content-between
• .align-content-around
• .align-content-stretch

Huomautus:Nämä luokat eivät vaikuta yksirivisiin joustaviin kohtiin.

Napsauta alla olevaa painiketta nähdäksesi viiden luokan välisen eron muuttamalla esimerkkiruudukon joustavien kohtien vakavuusasetusta:

Esimerkki

<div class="d-flex flex-wrap align-content-start">..</div>
<div class="d-flex flex-wrap align-content-end">..</div>
<div class="d-flex flex-wrap align-content-center">..</div>
<div class="d-flex flex-wrap align-content-around">..</div>
<div class="d-flex flex-wrap align-content-stretch">..</div>

Kokeile itse

Täsmää kohteita

Käytä .align-items-* Luokka hallintaYksirivinenJoustavien kohtien vakavuusasetus. Voimassa olevat luokat ovat:

• .align-items-start
• .align-items-end
• .align-items-center
• .align-items-baseline
• .align-items-stretch（Oletusarvo）

Napsauta alla olevaa painiketta nähdäksesi viiden luokan välisen eron:

Esimerkki

<div class="d-flex align-items-start">..</div>
<div class="d-flex align-items-end">..</div>
<div class="d-flex align-items-center">..</div>
<div class="d-flex align-items-baseline">..</div>
<div class="d-flex align-items-stretch">..</div>

Kokeile itse

Itseasento

Käytä .align-self-* Luokka hallintaMääritä joustava kohtaVakavuusasetus.

• .align-self-start
• .align-self-end
• .align-self-center
• .align-self-baseline
• .align-self-stretch（Oletusarvo）

Napsauta alla olevaa painiketta nähdäksesi viiden luokan väliset erot:

Esimerkki

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Flex kohta 1</div>
  <div class="p-2 border align-self-start">Flex kohta 2</div>
  <div class="p-2 border">Flex kohta 3</div>
</div>

Kokeile itse

Vastauskykyiset Flex-luokat

Kaikilla joustavilla luokilla on lisäherkistysluokat, mikä tekee tietyn näyttökoon mukautuvien joustavien luokkien asettamisesta helpompaa.

*-merkkiä voidaan korvata sm, md, lg, xl tai xxl, jotka edustavat pieniä, keskikokoisia, suuria, erittäin suuria ja valtavia näyttöjä.

Hae tiettyjä joustavia luokkia ..

Työkalupakka

JavaScript-testi

Sponsorointilinkit