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-group"> luokka = "btn-ryhmä" >
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Esimerkki työkalupalkista

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

<div class="btn-toolbar"> 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 »

Avattavat valikot painikeryhmissä

Varoitus! Pudotusvalikoilla varustetut painikkeet on käärittävä yksitellen omiin osiinsa .btn-group, .btn-toolbarjotta ne hahmontuvat oikein.

Yleiskatsaus ja esimerkkejä

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

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-group"> luokka = "btn-ryhmä" >
  <a class = "btn dropdown-toggle" data-toggle = "pudotusvalikko" href = "#" >   
    Toiminta
    <span class = "caret" ></span> 
  </a>
  <ul class = "pudotusvalikko" > 
    <!-- pudotusvalikon linkit -->
  </ul>
</div>

Toimii kaikkien painikkeiden kokojen kanssa

Painikkeiden pudotusvalikot toimivat missä tahansa koossa. painikkeiden koot ovat .btn-large, .btn-smalltai .btn-mini.

Vaatii javascriptin

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

Joissakin tapauksissa, kuten mobiililaitteissa, avattavat valikot ulottuvat näkymän ulkopuolelle. Sinun on ratkaistava kohdistus manuaalisesti tai mukautetulla javascriptillä.

Yleiskatsaus ja esimerkkejä

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

Koot

Käytä ylimääräisiä painikeluokkia .btn-mini, .btn-smalltai .btn-largekoon mitoittamiseen.

<div class="btn-group"> luokka = "btn-ryhmä" >
  ...
  <ul class = "pudotusvalikko vedä oikealle" > 
    <!-- pudotusvalikon linkit -->
  </ul>
</div>

Esimerkki merkinnästä

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

<div class="btn-group"> luokka = "btn-ryhmä" >
  <button class = "btn" > Toiminto </button> 
  <button class = "btn dropdown-toggle" data-toggle = "pudotusvalikko" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "pudotusvalikko" > 
    <!-- pudotusvalikon linkit -->
  </ul>
</div>

Pudotusvalikot

Avattavat valikot voidaan myös vaihtaa alhaalta ylöspäin lisäämällä yksi luokka :n välittömään yläpäähän .dropdown-menu. Se kääntää suunnan .caretja siirtää itse valikon siirtymään alhaalta ylös ylhäältä alaspäin.

<div class="btn-group dropup"> class = "btn-ryhmän pudotus" >
  <button class = "btn" > Pudota </button> 
  <button class = "btn dropdown-toggle" data-toggle = "pudotusvalikko" >  
    <span class = "caret" ></span> 
  </button>
  <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"> 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"> 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"> class = "nav nav-tabs nav-stacked" >
  ...
</ul>

Pinottu pillereitä

• Koti
• Profiili
• Viestit

<ul class="nav nav-pills nav-stacked"> 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
• auta
• Pudota alas
  • Toiminta
  • Toinen toimenpide
  • Jotain muuta tässä
  • Erillinen linkki

<ul class="nav nav-tabs"> 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
• auta
• Pudota alas
  • Toiminta
  • Toinen toimenpide
  • Jotain muuta tässä
  • Erillinen linkki

<ul class="nav nav-pills"> 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.

Vaakasuuntaiset jakajat

Lisää vaakasuuntainen jakaja luomalla tyhjä luettelokohde luokassa .divider, kuten näin:

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

Esimerkki navigointiluettelosta

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

<ul class="nav nav-list"> 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"> 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ä.

Häivyttää välilehdissä

Voit saada välilehdet hämärtymään lisäämällä .fadekuhunkin .tab-pane.

Vaatii jQuery-laajennuksen

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

Hanki javascript →

Tabuloitu esimerkki

Voit tehdä välilehdistä välilehtiä luomalla .tab-panejokaiselle välilehdelle yksilöllisen tunnuksen ja käärimällä ne .tab-content.

Oikealle tai vasemmalle tasattujen välilehtien kohdalla kääri .nav-tabsja .tab-content-merkit .tabbable.

Suoraviivainen merkintä

Välilehtien käyttäminen vaatii rivitysdiv:n, joukon välilehtiä ja joukon välilehtiä sisältäviä ruutuja.

<div class="tabbable"> <!-- Vaaditaan vain vasemmalle/oikealle välilehdelle --> class = "välilehti" > <!-- Vaaditaan vain vasemmalle/oikealle välilehdelle --> 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "välilehti" > Osa 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "välilehti" > Osa 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Olen osiossa 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Hei, olen osiossa 2. </p>
    </div>
  </div>
</div>

Pohjassa välilehdet

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

<div class="tabbable tabs-below"> 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="tabbable tabs-left"> 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"> class = "välilehdet oikealle" >
  <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"> class = "navbar" >
  <div class = "navbar-inner" > 
    <div class = "säilö" > 
      ...
    </div>
  </div>
</div>

Korjattu navigointipalkki

Kiinnitä navigointipalkki näkymän ylä- tai alaosaan lisäluokalla uloimpaan divaan .navbar.

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

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

Kun kiinnität navigointipalkin, muista ottaa huomioon sen alla oleva piilotettu alue. Lisää 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="brand" href="#"> class = "brändi" href = "#" > 
  Projektin nimi
</a>

Lomakkeet navigointipalkissa

Voit muotoilla ja sijoittaa lomakkeen oikein navigointipalkkiin lisäämällä sopivat luokat alla olevan kuvan mukaisesti. Oletuslomakkeelle sisällytä .navbar-formja joko .pull-lefttai .pull-righttasataksesi sen oikein.

<form class="navbar-form pull-left"> class = "navbar-form pull-left" >
  <syöttötyyppi = " teksti" class = "span2" >  
</form>

Saat mukautetun hakulomakkeen lisäämällä navigointipalkin erikoistyylejä .navbar-searchkoskeviin syötteisiin ja form..search-query

<form class="navbar-search pull-left"> 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"> 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"> 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"> 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 ja pudotusikkunoiden lisääminen navigointiin on erittäin yksinkertaista, mutta vaatii JavaScript-laajennuksen käyttöä .

<ul class="nav"> 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 →

Teksti navigointipalkissa

Kääri tekstijonot -merkkiin <.navbar-text>, yleensä <p>tunnisteeseen oikean johdon ja värin takaamiseksi.

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="breadcrumb"> luokka = "korppumuru" >
  <li>
    <a href = "#" > Etusivu </a> <span class = "jakaja" > / </span>   
  </li>
  <li>
    <a href = "#" > Kirjasto </a> <span class = "jakaja" > / </span>   
  </li>
  <li class = "aktiivinen" > Tiedot </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="pagination"> luokka = "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.

Valinnainen pois käytöstä tila

Hakulinkit käyttävät myös yleistä .disabledluokkaa sivutuksesta.

Oletusesimerkki

Oletusarvoisesti hakulaite keskittää linkit.

• Edellinen
• Seuraava

<ul class="pager"> luokka = "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="pager"> luokka = "hakulaite" >
  <li class = "edellinen" > 
    <a href = "#" > ← Vanhempi </a> 
  </li>
  <li class = "seuraava" > 
    <a href = "#" > Uudempi → </a> 
  </li>
</ul>

Noin

Tunnusmerkit ovat pieniä, yksinkertaisia ​​komponentteja jonkinlaisen indikaattorin tai luvun näyttämiseen. Niitä löytyy yleensä sähköpostiohjelmista, kuten Mail.app, tai mobiilisovelluksista push-ilmoituksia varten.

Saatavilla olevat luokat

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="hero-unit"> luokka = "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älittämistä ja segmentointia varten. Se voi käyttää h1oletuselementtiä smallsekä useimpia muita komponentteja (lisätyyleillä).

<div class="page-header"> class = "sivun otsikko" >
  <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="thumbnails"> 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="thumbnails"> 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="alert"> luokka = "hälytys" >
  <button class = "sulje" data-dismiss = "hälytys" > × </button>  
  <strong> Varoitus! </strong> Tarkista itsesi, et näytä liian hyvältä.
</div>

Varoitus! iOS-laitteet vaativat href="#"hälytysten poistamisen. Muista sisällyttää se ja ankkurin sulkemiskuvakkeiden data-attribuutti. Vaihtoehtoisesti voit käyttää <button>elementtiä data-attribuutilla, jonka olemme valinneet asiakirjoissamme. Kun käytät <button>, sinun on sisällytettävä type="button"lomakkeitasi tai niitä ei saa lähettää.

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

<div class="alert alert-block"> class = "alert alert-block" >
  <a class = "sulje" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Varoitus! </h4> 
  Parasta tarkistaa itsesi, et ole...
</div>

Virhe tai vaara

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

Menestys

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

Tiedot

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

Perus

Oletus etenemispalkki, jossa on pystysuora kaltevuus.

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

Raidallinen

Käyttää liukuväriä luodakseen raidallisen tehosteen (ei IE:tä).

<div class="progress progress-striped"> class = "edistyminen etenemisraidallinen" >
  <div class = "baari" 
       style = " leveys : 20 %; " ></div> 
</div>

Animoitu

Ottaa raidallisen esimerkin ja animoi sen (ei IE:tä).

<div class="progress progress-striped luokka = "edistyminen edistynyt raidallinen
     aktiivinen" >
  <div class = "baari" 
       style = " leveys : 40 %; " ></div> 
</div>

Lisävärit

Edistymispalkit käyttävät joitain samoja painike- ja hälytysluokkia yhtenäisten tyylien aikaansaamiseksi.

Raidalliset tangot

Kuten yhtenäiset värit, meillä on erilaisia ​​raidallisia edistymispalkkeja.

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-9:ssä tai vanhemmissa versioissa.

Opera ja IE eivät tue animaatioita tällä hetkellä.

Wells

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

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

Sulje kuvake

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

×

<button class="close">×</button> class = "sulje" > × </button>

iOS-laitteet vaativat href="#"-merkin klikkaustapahtumille, jos käytät mieluummin ankkuria.

<a class="close" href="#">×</a> class = "sulje" href = "#" > × </a>