Painikeryhmät

Käytä painikeryhmiä yhdistääksesi useita painikkeita yhdeksi yhdistelmäkomponentiksi. Rakenna ne sarjalla <a>tai <button>elementeillä.

Parhaat käytännöt

Suosittelemme seuraavia ohjeita painikeryhmien ja työkalurivien käyttöön:

• Käytä aina samaa elementtiä yhdessä painikeryhmässä <a>tai <button>.
• Älä sekoita erivärisiä painikkeita samassa painikeryhmässä.
• Käytä kuvakkeita tekstin lisäksi tai sen sijaan, mutta muista sisällyttää alt- ja otsikkoteksti tarvittaessa.

Aiheeseen liittyvät painikeryhmät, joissa on pudotusvalikot (katso alla), tulee kutsua erikseen, ja niissä tulee aina olla pudotusvalikko, joka ilmaisee aiotun toiminnan.

Oletusesimerkki

Näin HTML etsii tavallista painikeryhmää, joka on rakennettu ankkuritunnistepainikkeilla:

<div class = "btn-ryhmä" > 
  <a class = "btn" href = "#" > 1 </a>  
  <a class = "btn" href = "#" > 2 </a>  
  <a class = "btn" href = "#" > 3 </a>  
</div>

Esimerkki työkalupalkista

Yhdistä sarjat <div class="btn-group">osaksi <div class="btn-toolbar">monimutkaisempia komponentteja.

<div class = "btn-työkalupalkki" > 
  <div class = "btn-ryhmä" > 
    ...
  </div>
</div>

Valintaruutu ja radio makuja

Painikeryhmät voivat toimia myös radioina, joissa vain yksi painike voi olla aktiivinen, tai valintaruutuina, joissa voi olla aktiivinen mikä tahansa määrä painikkeita. Katso Javascript-dokumentit sitä varten.

Hanki javascript »

Varoitus

CSS painikeryhmille on erillisessä tiedostossa, button-groups.less.

Painikkeiden pudotusvalikot

Käytä mitä tahansa painiketta avataksesi pudotusvalikon sijoittamalla sen a- .btn-groupkohtaan ja antamalla oikeat valikkomerkinnät.

Varoitus! Painikkeiden avattavat valikot edellyttävät Bootstrap-pudotusvalikon toimiakseen.

Esimerkki merkinnästä

Kuten painikeryhmässä, merkintämme käyttää tavallista painikemerkintää, mutta kourallinen lisäyksiä tyylin tarkentamiseksi ja Bootstrapin jQuery-laajennuksen tukemiseksi.

<div class = "btn-ryhmä" > 
  <a class = "btn dropdown-toggle" data-toggle = "pudotusvalikko" href = "#" >   
    Toiminta
    <span class = "caret" ></span> 
  </a>
  <ul class = "pudotusvalikko" > 
    <!-- pudotusvalikon linkit -->
  </ul>
</div>

Jakopainikkeen pudotusvalikot

Painikeryhmien tyylien ja merkintöjen pohjalta voimme helposti luoda jaetun painikkeen. Split-painikkeissa on vakiotoiminto vasemmalla ja pudotusvalikon vaihtokytkin oikealla kontekstuaalisilla linkeillä.

Esimerkki merkinnästä

Laajennamme tavallisia painikkeiden avattavia valikoita tarjotaksemme toisen painiketoiminnon, joka toimii erillisenä avattavan valikon laukaisimena.

<div class = "btn-ryhmä" > 
  <a class = "btn" href = "#" > Toimi </a>  
  <a class = "btn dropdown-toggle" data-toggle = "pudotusvalikko" href = "#" >   
    <span class = "caret" ></span> 
  </a>
  <ul class = "pudotusvalikko" > 
    <!-- pudotusvalikon linkit -->
  </ul>
</div>

Tehokas perusluokka

Kaikilla täällä olevilla navigointikomponenteilla - välilehdillä, pillereillä ja luetteloilla - on sama.nav perusmerkintä ja -tyyli luokassa.

Milloin käyttää

Välilehdet ja pillerit sopivat erinomaisesti sisällön osioihin tai navigointiin liittyvän sisällön sivujen välillä.

Komponenttien kohdistus

Kohdista navigointilinkit käyttämällä apuluokkia .pull-lefttai .pull-right. Molemmat luokat lisäävät CSS-kellukkeen määritettyyn suuntaan.

Perusvälilehdet

Ota säännöllisesti <ul>linkkejä ja lisää .nav-tabs:

• Koti
• Profiili
• Viestit

<ul class = "nav nav-tabs" > 
  <li class = "aktiivinen" > 
    <a href = "#" > Etusivu </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Perus pillerit

Ota sama HTML, mutta käytä .nav-pillssen sijaan:

• Koti
• Profiili
• Viestit

<ul class = "nav nav-pills" > 
  <li class = "aktiivinen" > 
    <a href = "#" > Etusivu </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Kuinka pinota ne

Koska välilehdet ja pillerit ovat oletuksena vaakasuuntaisia, lisää vain toinen luokka, .nav-stackedjotta ne näyttävät pystysuunnassa pinottuilta.

Pinotut välilehdet

• Koti
• Profiili
• Viestit

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Pinottu pillereitä

• Koti
• Profiili
• Viestit

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Monipuoliset menut on tehty helpoksi

Bootstrap-välilehtien ja pillerien avattavat valikot ovat erittäin helppoja ja vaativat vain vähän ylimääräistä HTML-koodia ja kevyen jQuery-laajennuksen.

Siirry Javascript-sivulle lukeaksesi dokumentit Bootstrapin alustuspudotusvalikoista .

Välilehdet avattavilla valikoilla

• Koti
• Profiili
• Pudota alas
  • Toiminta
  • Toinen toimenpide
  • Jotain muuta tässä
  • Erillinen linkki

<ul class = "nav nav-tabs" > 
  <li class = "pudotusvalikko" > 
    <a class = "pudotusvalikko-vaihto" 
       data-toggle = "pudotusvalikko"
       href = "#" >
        Pudota alas
        <b class = "caret" ></b> 
      </a>
    <ul class = "pudotusvalikko" > 
      <!-- linkit -->
    </ul>
  </li>
</ul>

Pillerit pudotusvalikoilla

• Koti
• Profiili
• Pudota alas
  • Toiminta
  • Toinen toimenpide
  • Jotain muuta tässä
  • Erillinen linkki

<ul class = "nav nav-pills" > 
  <li class = "pudotusvalikko" > 
    <a class = "pudotusvalikko-vaihto" 
       data-toggle = "pudotusvalikko"
       href = "#" >
        Pudota alas
        <b class = "caret" ></b> 
      </a>
    <ul class = "pudotusvalikko" > 
      <!-- linkit -->
    </ul>
  </li>
</ul>

Sovellustyylinen navigointi

Navigointiluettelot tarjoavat yksinkertaisen ja helpon tavan luoda navigointilinkkien ryhmiä valinnaisilla otsikoilla. Niitä käytetään parhaiten sivupalkeissa, kuten Finderissa OS X:ssä.

Rakenteellisesti ne on rakennettu samoihin perusnavigointityyleihin kuin välilehdet ja pillerit, joten käyttö ja mukauttaminen ovat yksinkertaisia.

Ikonien kanssa

Navigointiluettelot on myös helppo varustaa kuvakkeilla. Lisää oikea <i>tunniste luokkaan ja olet valmis.

Esimerkki navigointiluettelosta

Ota luettelo linkeistä ja lisää class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Luettelon otsikko
  </li>
  <li class = "aktiivinen" > 
    <a href = "#" > Etusivu </a> 
  </li>
  <li>
    <a href = "#" > Kirjasto </a> 
  </li>
  ...
</ul>

Esimerkki kuvakkeilla

Sama esimerkki, mutta <i>kuvakkeiden tunnisteilla.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i luokka = "kuvakekirja" ></i> 
      Kirjasto
    </a>
  </li>
  ...
</ul>

Mitä sisältyy

Herätä välilehdet henkiin yksinkertaisella laajennuksella, jolla voit vaihtaa sisällön välillä välilehtien kautta. Bootstrap yhdistää välilehdet neljään tyyliin: ylhäällä (oletus), oikealle, alapuolelle ja vasemmalle.

Niiden välillä vaihtaminen on helppoa ja vaatii vain hyvin vähän merkintöjä.

Tabuloitu esimerkki

Jos haluat tehdä välilehdistä välilehtiä, kääri se .nav-tabstoiseen div -osaan luokkalla .tabbable.

Mukautettu jQuery-laajennus

Kaikki välilehdet saavat virtansa kevyestä jQuery-laajennuksestamme. Lue lisää välilehtien herättämisestä henkiin JavaScript-dokumenttien sivulta.

Hanki javascript →

Pohjassa välilehdet

Käännä HTML-koodin järjestystä ja lisää luokka välilehtien sijoittamiseksi alareunaan.

<div class = "välilehdet-alla" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Välilehdet vasemmalla

Vaihda luokkaa lisäämään välilehdet vasemmalle.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Välilehdet oikealla

Vaihda luokkaa niin, että välilehdet laitetaan oikealle.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Navbar-telineet

Navigointipalkki vaatii vain muutaman div:n rakentaakseen sen hyvin staattista tai kiinteää näyttöä varten.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "säilö" > 
      ...
    </div>
  </div>
</div>

Korjattu navigointipalkki

Jos haluat kiinnittää navigointipalkin näkymäportin yläosaan, lisää .navbar-fixed-topuloimpaan divaan .navbar.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

CSS:ssäsi sinun on myös otettava huomioon sen aiheuttama päällekkäisyys lisäämällä 40 pikseliä tai enemmän täyttöä <body>. Muista lisätä tämä Bootstrap-ydinCSS:n jälkeen ja ennen valinnaista reagoivaa CSS:ää.

Tuotenimi

Yksinkertainen linkki brändisi tai projektisi nimen näyttämiseen vaatii vain ankkuritunnisteen.

<a class = "brändi" href = "#" >  
  Projektin nimi
</a>

Hakulomake

Hakulomakkeet saavat mukautettuja tyylejä .navbar-searchluokan navigointipalkissa. Sisällytä .pull-lefttai .pull-rightkohdistaaksesi formsen.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Haku" >   
</form>

Valinnainen responsiivinen muunnelma

Riippuen yläpalkin sisällön määrästä, saatat haluta ottaa käyttöön reagoivat vaihtoehdot. Tee niin käärimällä navigointisisältösi div .nav-collapse.collapse-elementtiin ja lisäämällä navigointipalkin vaihtopainike .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "säilö" > 
 
      <!-- .btn-navbar käytetään tiivistetyn navigointipalkin sisällön vaihtokytkimenä -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "kuvakepalkki" ></span> 
        <span class = "kuvakepalkki" ></span> 
        <span class = "kuvakepalkki" ></span> 
      </a>
 
      <!-- Muista jättää brändi ulos, jos haluat sen näkyvän -->
      <a class = "brand" href = "#" > Projektin nimi </a>  
 
      <!-- Kaikki mitä haluat piilottaa enintään 940 pikseliä, sijoita tähän -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form jne -->
      </div>
 
    </div>
  </div>
</div>

Nav linkit

Nav-kohteet on helppo lisätä järjestämättömien luetteloiden kautta.

<ul class = "nav" > 
  <li class = "aktiivinen" > 
    <a href = "#" > Etusivu </a> 
  </li>
  <li><a href = "#" > Linkki </a></li> 
  <li><a href = "#" > Linkki </a></li> 
</ul>

Voit helposti lisätä jakajia navigointilinkkeihisi tyhjällä luettelokohdalla ja yksinkertaisella luokalla. Lisää tämä linkkien väliin:

<ul class = "nav" > 
  ...
  <li class = "jakaja-vertical" ></li> 
  ...
</ul>

Komponenttien kohdistus

Tasaa navigointi, hakulomake tai teksti käyttämällä apuluokkia .pull-lefttai . .pull-rightMolemmat luokat lisäävät CSS-kellukkeen määritettyyn suuntaan.

Pudotusvalikoiden lisääminen

Avattavien valikoiden lisääminen navigointiin on erittäin yksinkertaista, mutta vaatii Javascript-laajennuksen käyttöä .

<ul class = "nav" > 
  <li class = "pudotusvalikko" > 
    <a href = "#" 
          luokka = "pudotusvalikko-vaihto"
          data-toggle = "pudotusvalikko" >
          Tili
          <b class = "caret" ></b> 
    </a>
    <ul class = "pudotusvalikko" > 
      ...
    </ul>
  </li>
</ul>

Hanki javascript →

Miksi käyttää niitä

Navigointia käytetään tapana näyttää käyttäjille, missä he ovat sovelluksessa tai sivustolla, mutta ei ensisijaisena navigointina. Pidä niiden käyttö harvakseltaan ja ytimekkäänä, jotta ne ovat tehokkainta.

Esimerkkejä

Yksi esimerkki näytetään, koska se voidaan näyttää useilla sivuilla.

• Koti

• Etusivu /
• Kirjasto

• Etusivu /
• Kirjasto /
• Data

Merkintä

HTML on tavallinen järjestämätön luettelosi linkeillä.

<ul class = "leivänmuru" > 
  <li>
    <a href = "#" > Etusivu </a> <span class = "jakaja" > / </span>   
  </li>
  <li>
    <a href = "#" > Kirjasto </a> <span class = "jakaja" > / </span>   
  </li>
  <li class = "aktiivinen" > 
    <a href = "#" > Tiedot </a> 
  </li>
</ul>

Milloin käyttää

Erittäin yksinkertainen ja minimalistinen sivutus Rdion inspiroimana, sopii erinomaisesti sovelluksiin ja hakutuloksiin. Suuri lohko on vaikea ohittaa, helposti skaalautuva ja tarjoaa suuria napsautusalueita.

Selkeät sivulinkit

Linkit ovat muokattavissa ja toimivat useissa olosuhteissa oikean luokan kanssa. .disablednapsauttamattomille linkeille ja .activenykyiselle sivulle.

Joustava kohdistus

Lisää jompikumpi kahdesta valinnaisesta luokasta muuttaaksesi sivutuslinkkien kohdistusta: .pagination-centeredja .pagination-right.

Esimerkkejä

Oletussivutuskomponentti on joustava ja toimii useissa muunnelmissa.

Merkintä

Käärittynä <div>sivunumerointi on vain <ul>.

<div class = "sivutus" > 
  <ul>
    <li><a href = "#" > Edellinen </a></li> 
    <li class = "aktiivinen" > 
      <a href = "#" > 1 </a> 
    </li>
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 ​​</a></li> 
    <li><a href = "#" > Seuraava </a></li> 
  </ul>
</div>

Tietoja hakulaitteesta

Hakulaite on joukko linkkejä yksinkertaisiin sivutustoteutuksiin kevyellä merkinnällä ja vielä kevyemmillä tyyleillä. Se sopii erinomaisesti yksinkertaisille sivustoille, kuten blogeille tai aikakauslehdille.

Oletusesimerkki

Oletusarvoisesti hakulaite keskittää linkit.

• Edellinen
• Seuraava

<ul class = "hakulaite" > 
  <li>
    <a href = "#" > Edellinen </a> 
  </li>
  <li>
    <a href = "#" > Seuraava </a> 
  </li>
</ul>

Tasaiset linkit

Vaihtoehtoisesti voit kohdistaa jokaisen linkin sivuille:

• ← Vanhempi
• Uudempi →

<ul class = "hakulaite" > 
  <li class = "edellinen" > 
    <a href = "#" > ← Vanhempi </a> 
  </li>
  <li class = "seuraava" > 
    <a href = "#" > Uudempi → </a> 
  </li>
</ul>

Bootstrap tarjoaa kevyen, joustavan osan, jota kutsutaan sankariyksiköksi, joka esittelee sivustosi sisältöä. Se toimii hyvin markkinoinnissa ja paljon sisältöä sisältävillä sivustoilla.

Merkintä

Kääri sisältösi divesimerkiksi näin:

<div class = "sankariyksikkö" > 
  <h1> Otsikko </h1>
  <p> Tunnuslause </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Lue lisää
    </a>
  </p>
</div>

Yksinkertainen komentotulkki h1sivun sisällön osioiden välitykseen ja segmentointiin. Se voi käyttää h1oletuselementtiä smallsekä useimpia muita komponentteja (lisätyyleillä).

<div class = "page-haeder" > 
  <h1> Esimerkkisivun otsikko </h1>
</div>

Oletuspikkukuvat

Oletuksena Bootstrapin pikkukuvat on suunniteltu esittelemään linkitettyjä kuvia minimaalisella vaaditulla merkinnällä.

Erittäin muokattavissa

Pienellä ylimääräisellä merkinnällä on mahdollista lisätä pikkukuviin kaikenlaista HTML-sisältöä, kuten otsikoita, kappaleita tai painikkeita.

• 

  Pikkukuvatarra

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Toiminta Toiminta

• 

  Pikkukuvatarra

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

  Toiminta Toiminta

Miksi käyttää pikkukuvia

Pikkukuvat (aiemmin .media-gridversioon 1.4 asti) sopivat erinomaisesti valokuvien tai videoiden ruudukoille, kuvahakutuloksille, vähittäismyyntituotteille, portfolioille ja monelle muulle. Ne voivat olla linkkejä tai staattista sisältöä.

Yksinkertainen, joustava merkintä

Pikkukuvien merkintä on yksinkertaista – ulkaikki tarvittava määrä lielementtejä on a. Se on myös erittäin joustava, ja se mahdollistaa kaiken tyyppisen sisällön ja vain hieman enemmän merkintöjä sisällön käärimiseen.

Käyttää ruudukon sarakkeiden kokoja

Lopuksi pikkukuvakomponentti käyttää olemassa olevia ruudukon järjestelmäluokkia, kuten .span2tai .span3- pikkukuvien mittojen ohjaamiseen.

Merkintä

Kuten aiemmin mainittiin, pikkukuvien vaadittava merkintä on kevyt ja yksinkertainen. Tässä on katsaus linkitettyjen kuvien oletusasetuksiin :

<ul class = "pikkukuvat" > 
  <li class = "span3" > 
    <a href = "#" class = "pikkukuva" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

Pikkukuvien mukautetun HTML-sisällön merkintä muuttuu hieman. Jotta estotason sisältö voidaan sallia missä tahansa, vaihdamme <a>sen <div>vastaavaan:

<ul class = "pikkukuvat" > 
  <li class = "span3" > 
    <div class = "pikkukuva" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Pikkukuvan tunniste </h5>
      <p> Pikkukuvan kuvateksti tässä... </p>
    </div>
  </li>
  ...
</ul>

Lisää esimerkkejä

Tutustu kaikkiin vaihtoehtoihin käytettävissäsi olevien erilaisten ruudukkoluokkien avulla. Voit myös yhdistellä eri kokoja.

Uudelleen kirjoitettu perusluokka

Bootstrap 2:lla olemme yksinkertaistaneet perusluokkaa .alert: .alert-message. Olemme myös vähentäneet vaadittua vähimmäismerkintää – <p>oletuksena ei vaadita, vain ulompi <div>.

Yksittäinen hälytysviesti

Kestävämmän ja vähemmän koodia sisältävän komponentin saamiseksi olemme poistaneet erottuvan ulkoasun estohälytyksiltä, ​​viesteiltä, ​​joissa on enemmän täyttöä ja yleensä enemmän tekstiä. Myös luokka on vaihtunut muotoon .alert-block.

Toimii hyvin javascriptin kanssa

Bootstrapissa on upea jQuery-laajennus, joka tukee hälytysviestejä, mikä tekee niiden hylkäämisestä nopeaa ja helppoa.

Hanki laajennus »

Esimerkki hälytyksistä

Kääri viestisi ja valinnainen sulkemiskuvake diviksi yksinkertaisella luokalla.

<div class = "hälytys" > 
  <a class = "close" data-dismiss = "hälytys" > × </a>  
  <strong> Varoitus! </strong> Tarkista itsesi, et näytä liian hyvältä.
</div>

Laajenna vakiovaroitusviestiä helposti kahdella valinnaisella luokalla: .alert-blocklisää täyte- ja tekstiohjausobjekteja sekä .alert-headingvastaava otsikko.

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "hälytys" > × </a>  
  <h4 class = "alert-heading" > Varoitus! </h4> 
  Parasta tarkistaa itsesi, et ole...
</div>

Virhe tai vaara

<div class = "alert alert-error" > 
  ...
</div>

Menestys

<div class = "alert alert-success" > 
  ...
</div>

Tiedot

<div class = "alert alert-info" > 
  ...
</div>

Perus

Oletus etenemispalkki, jossa on pystysuora kaltevuus.

<div class = "edistyminen" > 
  <div class = "baari" 
       style = " leveys : 60 %; " ></div> 
</div>

Raidallinen

Käyttää gradienttia luodakseen raidallisen tehosteen.

<div class = "edistymisen edistymistiedot 
     etenemisraidallinen" >
  <div class = "baari" 
       style = " leveys : 20 %; " ></div> 
</div>

Animoitu

Ottaa raidallisen esimerkin ja animoi sen.

<div luokka = "edistyminen - vaara 
     edistymisraita aktiivinen" >
  <div class = "baari" 
       style = " leveys : 40 %; " ></div> 
</div>

Lisävärit

Edistymispalkit käyttävät joitakin samoja luokkanimiä painikkeina ja varoituksia samanlaisesta tyylistä.

• .progress-info
• .progress-success
• .progress-danger

Vaihtoehtoisesti voit mukauttaa VÄHEMMÄN tiedostoja ja rullata omia värejäsi ja kokosi.

Käyttäytyminen

Etenemispalkit käyttävät CSS3-siirtymiä, joten jos säädät leveyttä dynaamisesti javascriptin avulla, sen koko muuttuu sujuvasti.

Jos käytät .activeluokkaa, .progress-stripededistymispalkit animoivat raidat vasemmalta oikealle.

Selaimen tuki

Edistymispalkit käyttävät CSS3-gradientteja, siirtymiä ja animaatioita saavuttaakseen kaikki tehonsa. Näitä ominaisuuksia ei tueta Firefoxin IE7-8:ssa tai vanhemmissa versioissa.

Opera ei tue animaatioita tällä hetkellä.

Wells

Käytä kaivoa yksinkertaisena tehosteena elementissä antaaksesi sille upotetun vaikutelman.

<div class = "hyvin" > 
  ...
</div>

Tunnusmerkit

Käytä elementissä olevaa merkkiä lukemattomien lukujen määrään tai yksinkertaisena ilmaisimena.

<span class = "merkki" > 3 </div> 

Sulje kuvake

Käytä yleistä sulkemiskuvaketta sulkeaksesi sisällön, kuten modaalit ja hälytykset.

×

<a class = "sulje" > × </a>