TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda Bootstrap 5: n tiivistäminen?

1

Nimen tiivistäminen on yleisnimi, jota käytetään elementtien esittelyyn, jotka voidaan näyttää tai piilottaa hiiren napsautuksella. Harmonikka, spoileri ja vivut ovat hyviä esimerkkejä tiivistekomponentista. Se näyttää tai piilottaa sisällön JavaScriptin avulla, kun elementtiä napsautetaan. Tässä opetusohjelmassa kerromme lisää tiivistyskomponentin lisäämisestä Bootstrap -sivustoosi. Bootstrap 5 esitteli uuden harmonikkakomponentin, joten älä sekoita näiden kahden kanssa.

Bootstrap 5 Kutista opetusohjelma

  1. Johdatus Bootstrapin romahtamiseen
  2. Tiivistyksen luominen href -määritteellä
  3. Kutista data-tooglen avulla
  4. Useiden kohteiden kutistuminen
  5. Harmonikan romahdus
  6. Kokoontaitettava sisällön runko

1 Johdatus tiivistykseen

Tiivistyskomponentissa on kaksi osaa:

  • Pohjaelementti näyttää tai piilottaa tiivistyksen.
  • Todellinen sisältö tiivistetyn säiliön sisällä.

Se käyttää seuraavia kolmea CSS -luokkaa:

  • ".Collapse" käytetään sisällön piilottamiseen.
  • Siirtymätehosteen käyttöön käytetään ".collapsing".
  • ".Collapse.show" käytetään sisällön näyttämiseen.

Täällä keskustelemme kolmen tyyppisen romahtamisen luomisesta-käyttämällä href-attribuuttia, tietojen vaihtamista ja harmonikka-tyyliä.

2 Tiivistä Href -attribuutilla

Tässä tapauksessa ankkuritagia käytetään painikeluokkien kanssa liipaisimena. Siinä pitäisi olla "data-toggle" -attribuutti, jonka arvo on "tiivistä". Href -määritteellä tulee olla yksilöllinen tunnus. "Aaria-laajennettu" -attribuutiksi asetetaan "epätosi", jotta sisältö piilotetaan sivun ensimmäisellä latauksella.

Kutistusliipaisimen jälkeen varsinainen sisältö on lisättävä erillisellä

tunniste, joka on tunnistettu samalla href -määritteen tunnuksella. Sinun pitäisi myös lisätä ".collapse" -luokka div -tunnisteeseen. Voit lisätä mitä tahansa sisältöä div -tunnisteisiin. Tässä esimerkissä olemme käyttäneet korttilohkoa, jossa on tekstiä.

Koko tiivistyksen koodi href -määritteellä on esitetty alla:

<p> <a class="btn btn-primary" data-toggle="collapse" href="#linkcollapse" aria-expanded="false" aria-controls="Collapse"> Link with Href </a> </p> <div class="collapse" id="linkcollapse"> <div class="card card-block"> Here is the content for block which will be shown when the button is clicked. This uses the link with href attribute for collapsing. </div> </div>

Tuloksen pitäisi näyttää painikkeelta ja kokoontaitettavan sisällön pitäisi näkyä, kun napsautat painiketta.

Kuinka luoda Bootstrap 5: n tiivistäminen?

Käytä aina koodia Bootstrap -aloitusmallin runko -osassa, joka sisältää vaaditun CSS- ja JavaScript -kehyksen.

3 Tiivistä tietojen vaihdolla

Voit käyttää href-määritteen sijasta "data-toggle = collapse" painike-elementin kanssa liipaisimen luomiseksi alla olevan kuvan mukaisesti:

<p> <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#buttoncollapse" aria-expanded="false" aria-controls="Collapse"> Button with data-target </button> </p> <div class="collapse" id="buttoncollapse"> <div class="card card-block"> Here is the content for block which will be shown when the button. This uses button with data-target attribute for collapsing. </div> </div>

Yllä olevan koodin tulos näyttää alla olevan samanlainen kuin href -esimerkki.

Kuinka luoda Bootstrap 5: n tiivistäminen?

4 Useiden kielten kutistuminen

Yllä olevassa esimerkissä yksittäinen tiivistyskomponentti on vaihdettu painikkeella. Voit myös vaihtaa useita tiivistyskomponentteja yhdellä elementillä. Esimerkiksi alla olevassa koodissa on kolme painiketta. Ensimmäisellä ja toisella painikkeella vaihdetaan ensimmäinen ja toinen kutistuminen. Kolmannella painikkeella vaihdetaan sekä ensimmäinen että toinen kutistuminen yhteen.

<p> <a class="btn btn-primary" data-toggle="collapse" href="#multipleCollapse1" aria-expanded="false" aria-controls="multipleCollapse1">Toggle First Element</a> <button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#multipleCollapse2" aria-expanded="false" aria-controls="multipleCollapse2">Toggle Second Element</button> <button class="btn btn-success" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multipleCollapse1 multipleCollapse2">Toggle Both Elements</button> </p> <div class="row"> <div class="col"> <div class="collapse multi-collapse" id="multipleCollapse1"> <div class="card card-body"> Here is the content for block which will be shown when the first button is clicked. This uses button with data-target attribute for collapsing. </div> </div> </div> <div class="col"> <div class="collapse multi-collapse" id="multipleCollapse2"> <div class="card card-body"> Here is the content for block which will be shown when the second button is clicked. This uses button with data-target attribute for collapsing. </div> </div> </div> </div>

Se näyttää sivustollasi seuraavanlaiselta:

Kuinka luoda Bootstrap 5: n tiivistäminen?

Esimerkki käynnistysnauhan kutistumisesta

5 Harmonikan romahtaminen

Viimeinen ja suosituin muunnelma on harmonikan luominen käyttämällä tiivistekomponenttia. Alla on harmonikkakoodi, jossa on kolme liukusäädintä – ensimmäisessä on korttiryhmäasettelu ja kahdessa muussa on otsikko, jossa on jonkin verran tekstisisältöä.

<div id="accordion" role="tablist" aria-multiselectable="true"> <div class="card"> <div class="card-header" role="tab" id="Firstheading"> <h5 class="mb-0"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> Heading 1 </a> </h5> </div> <div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="Firstheading"> <div style="margin:20px;"> <div class="card-group"> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 1"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Flex Card Image 2"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">Here is a shorter description of the card.</p> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> </div> </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="secondheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Heading 2 </a> </h5> </div> <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading"> <div class="card-body"> Here is the content for the second section. </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Heading 3 </a> </h5> </div> <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-body"> Here is the content for the third section. </div> </div> </div> </div>

Se on pitkä koodilohko, joka johtuu pääasiassa ensimmäisen romahduksen korttiryhmäosasta. Käydään läpi kaikki koodin elementit:

5.1. Harmonikka

  • Harmonikka on kääritty sisällä div tunnisteet yksilöllinen tunnus (#accordion tässä esimerkissä). Ja roolimääritettä tulee käyttää välilehtiluettelona.
  • Käytetään yhteensä kolme kokoontaitettavaa osaa, ja jokaisen osan tulee alkaa omalla jaollaan. Olemme käyttäneet ".card" -luokkaa jokaisessa osassa.
  • Jokainen korttiosa koostuu otsikosta ja kokoontaitettavasta sisällöstä.

5.2. Otsikko

  • Luokkaa ".card-header" käytetään otsikkoon yhdessä yksilöllisen tunnuksen (Firstheading) ja roolimäärityksen kanssa, jonka arvo on välilehti.
  • Lisää otsikon sisälle otsikkotunnisteet, tässä tapauksessa olemme käyttäneet h5: tä.
  • Lisää otsikkotunnisteiden sisään jälleen ankkurilinkki, jossa on seuraava luokka/määritteet:

    • Lisää harmonikan "luhistunut" luokka.

    • Lisää data-toggle-attribuutti arvon kanssa kutistettuna.

    • Lisää data-vanhempi-määrite, jolla on sama tunnus kuin ensimmäisessä

      (#harmonikka tässä tapauksessa).

    • Href -määritteellä on oltava kokoontaitettavan sisällön tunnus, joka on "#collapse1".

    • Aseta aria-laajennettu arvoksi tosi, jotta osio avataan, kun sivu latautuu (aseta tämä arvoksi epätosi toisille ja muille osille, jotta ne suljetaan latauksen aikana).

    • Aseta aria-control-attribuutin arvo samaan Href-määritteen arvon tunnukseen (tiivistä1).

6 Kokoontaitettava sisällön runko

  • Avaa uusi

    otsikko otsikon jälkeen samalla tunnuksella, joka vastaa otsikon href -määritteen arvoa (collapse1).

  • Lisää luokka ".collapse show" näyttääksesi sisällön auki. Älä käytä ".show" -kohtaa muissa osioissa, koska ne on suljettava.

  • Lisää rooli välilehdeksi ja määritä aria-labeledby-attribuutti, jolla on sama arvo kuin kortin otsikkotunnuksella (Firstheading).

  • Nyt voit lisätä mitä tahansa sisältöä, jonka haluat lisätä. Tässä tapauksessa olemme avanneet toisen divin ja lisänneet korttiryhmän ensimmäiselle osalle ja korttilohkot kahdelle muulle osalle.

Noudata samaa prosessia muissa kahdessa osassa ja lopullisen harmonikan pitäisi näyttää seuraavanlaiselta:

Kuinka luoda Bootstrap 5: n tiivistäminen?


Opi Bootstrap 5 (hakemisto )


Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja