Piemērs

Pārslēdzama, kontekstuāla izvēlne saišu sarakstu parādīšanai. Padarīts interaktīvs ar nolaižamo JavaScript spraudni .

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Darbība</a></li>
  <li><a tabindex="-1" href="#">Cita darbība</a></li>
  <li><a tabindex="-1" href="#">Šeit ir vēl kaut kas</a></li>
  <li class="dalītājs"></li>
  <li><a tabindex="-1" href="#">Atsevišķa saite</a></li>
</ul>

Atzīmes

Aplūkojot tikai nolaižamo izvēlni, šeit ir nepieciešamais HTML. Nolaižamās izvēlnes aktivizētājs un nolaižamā izvēlne ir jāiekļauj .dropdown, vai citā elementā, kas deklarē position: relative;. Pēc tam vienkārši izveidojiet izvēlni.

<div class="dropdown">
  <!-- Saite vai poga, lai pārslēgtu nolaižamo izvēlni -->
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Darbība</a></li>
    <li><a tabindex="-1" href="#">Cita darbība</a></li>
    <li><a tabindex="-1" href="#">Šeit ir vēl kaut kas</a></li>
    <li class="dalītājs"></li>
    <li><a tabindex="-1" href="#">Atsevišķa saite</a></li>
  </ul>
</div>

Iespējas

Izlīdziniet izvēlnes pa labi un pievienojiet papildu nolaižamo izvēlņu līmeņus.

Izvēlņu saskaņošana

Pievienot nolaižamajā izvēlnē .pull-rightlīdzi pa labi..dropdown-menu

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

Atspējotas izvēlnes opcijas

Pievienojiet nolaižamajā izvēlnē .disableda <li>, lai atspējotu saiti.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Parastā saite</a></li>
  <li class="disabled"><a tabindex="-1" href="#">Atspējota saite</a></li>
  <li><a tabindex="-1" href="#">Vēl viena saite</a></li>
</ul>

Apakšizvēlnes nolaižamajos izvēlnēs

Pievienojiet papildu līmeni nolaižamajām izvēlnēm, kas tiek rādītas, novietojot kursoru tāpat kā OS X, ar dažiem vienkāršiem iezīmēšanas papildinājumiem. Pievienojiet .dropdown-submenujebkurai liesošajai nolaižamajai izvēlnei, lai nodrošinātu automātisku stilu.

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
  ...
  <li class="dropdown-submenu">
    <a tabindex="-1" href="#">Citas opcijas</a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

Piemēri

Divas pamata iespējas, kā arī divas specifiskākas variācijas.

Viena pogu grupa

Aptiniet vairākas pogas .btnar .btn-group.

<div class="btn-group">
  <button class="btn">Pa kreisi</button>
  <button class="btn">Vidējā</button>
  <button class="btn">Pa labi</button>
</div>

Vairākas pogu grupas

Apvienojiet komplektus <div class="btn-group">a <div class="btn-toolbar">, lai iegūtu sarežģītākus komponentus.

<div class="btn-toolbar">
  <div class="btn-group">
    ...
  </div>
</div>

Vertikālās pogu grupas

Padariet pogu komplektu vertikāli, nevis horizontāli.

<div class="btn-group btn-group-vertical">
  ...
</div>

Izvēles rūtiņas un radio garšas

Pogu grupas var darboties arī kā radio, kur var būt aktīva tikai viena poga, vai izvēles rūtiņas, kurās var būt aktīvs jebkurš pogu skaits. Šim nolūkam skatiet JavaScript dokumentus .

Nolaižamās izvēlnes pogu grupās

Uzmanību! Pogām ar nolaižamajām izvēlnēm ir jābūt atsevišķi iesaiņotām, lai tās .btn-grouptiktu .btn-toolbarpareizi atveidotas.

Pārskats un piemēri

Izmantojiet jebkuru pogu, lai aktivizētu nolaižamo izvēlni, ievietojot to a .btn-groupun nodrošinot atbilstošu izvēlnes atzīmi.

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Darbība
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- nolaižamās izvēlnes saites -->
  </ul>
</div>

Darbojas ar visiem pogas izmēriem

Pogu nolaižamās izvēlnes darbojas jebkurā izmērā: .btn-large, .btn-small, vai .btn-mini.

Nepieciešams JavaScript

Pogu nolaižamajām izvēlnēm ir nepieciešams Bootstrap nolaižamā spraudnis , lai darbotos.

Dažos gadījumos, piemēram, mobilajās ierīcēs, nolaižamās izvēlnes būs ārpus skata loga. Jums ir jāatrisina līdzinājums manuāli vai ar pielāgotu JavaScript.

Sadalīšanas pogas nolaižamās izvēlnes

Balstoties uz pogu grupu stiliem un iezīmēšanu, mēs varam viegli izveidot sadalītu pogu. Sadalītajām pogām ir standarta darbība kreisajā pusē un nolaižamā izvēlne labajā pusē ar konteksta saitēm.

<div class="btn-group">
  <button class="btn">Darbība</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- nolaižamās izvēlnes saites -->
  </ul>
</div>

Izmēri

Izmantojiet papildu pogu klases .btn-mini, .btn-smallvai .btn-largeizmēra noteikšanai.

<div class="btn-group">
  <button class="btn btn-mini">Darbība</button>
  <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- nolaižamās izvēlnes saites -->
  </ul>
</div>

Nolaižamās izvēlnes

Nolaižamās izvēlnes var arī pārslēgt no apakšas uz augšu, pievienojot vienu klasi tiešajam vecākam .dropdown-menu. Tas pavērsīs virzienu un mainīs .caretpašas izvēlnes pozīciju, lai pārvietotos no apakšas uz augšu, nevis no augšas uz leju.

<div class="btn-group dropup">
  <button class="btn">Nolaižot</button>
  <button class="btn dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <!-- nolaižamās izvēlnes saites -->
  </ul>
</div>

Vieglie noklusējuma iestatījumi Tas pats marķējums, dažādas klases

Visiem šeit esošajiem navigācijas komponentiem — cilnēm, tabletēm un sarakstiem — klasē ir vienāds pamata marķējums un stili ..nav

Pamata cilnes

Paņemiet regulāras <ul>saites un pievienojiet .nav-tabs:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Sākums</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Pamata tabletes

Izmantojiet to pašu HTML, bet .nav-pillstā vietā izmantojiet:

<ul class="nav nav-pills">
  <li class="active">
    <a href="#">Sākums</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Atspējots stāvoklis

Jebkuram navigācijas komponentam (cilnēm, tabletēm vai sarakstam) pievienojiet .disabledpelēkas saites un bez kursora novietošanas efektiem . Tomēr saites joprojām būs noklikšķināmas, ja vien nenoņemsit hrefatribūtu. Varat arī ieviest pielāgotu JavaScript, lai novērstu šos klikšķus.

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">Sākums</a></li>
  ...
</ul>

Komponentu izlīdzināšana

Lai līdzinātu navigācijas saites, izmantojiet .pull-leftvai .pull-rightutilītu klases. Abas klases pievienos CSS pludiņu norādītajā virzienā.

Saliekams viens uz otra

Tā kā cilnes un tabletes pēc noklusējuma ir horizontālas, vienkārši pievienojiet otro klasi , .nav-stackedlai tās izskatītos vertikāli saliktas.

Sakrautas cilnes

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

Sakrautas tabletes

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

Nolaižamās izvēlnes

Pievienojiet nolaižamās izvēlnes ar nelielu papildu HTML un nolaižamo JavaScript spraudni .

Cilnes ar nolaižamajām izvēlnēm

<ul class="nav nav-tabs">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="nolaižamā izvēlne"
       href="#">
        Nomest lejā
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- saites -->
    </ul>
  </li>
</ul>

Tabletes ar nolaižamām izvēlnēm

<ul class="nav nav-pills">
  <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="nolaižamā izvēlne"
       href="#">
        Nomest lejā
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- saites -->
    </ul>
  </li>
</ul>

Nav saraksti

Vienkāršs un vienkāršs veids, kā izveidot navigācijas saišu grupas ar papildu galvenēm. Tos vislabāk var izmantot sānjoslās, piemēram, Finder operētājsistēmā OS X.

Nav saraksta piemērs

Izveidojiet saišu sarakstu un pievienojiet class="nav nav-list":

<ul class="nav nav-list">
  <li class="nav-header">Saraksta galvene</li>
  <li class="active"><a href="#">Sākums</a></li>
  <li><a href="#">Bibliotēka</a></li>
  ...
</ul>

Piezīme . Lai ligzdotu navigācijas sarakstā, iekļaujiet class="nav nav-list"jebkurā ligzdotajā <ul>.

Horizontālie sadalītāji

Pievienojiet horizontālo dalītāju, izveidojot tukšu saraksta vienumu ar klasi .divider, piemēram:

<ul class="nav nav-list">
  ...
  <li class="dalītājs"></li>
  ...
</ul>

Tabbable nav

Atdzīviniet savas cilnes, izmantojot vienkāršu spraudni, lai pārslēgtos starp saturu, izmantojot cilnes. Bootstrap integrē cilnes cilnes četros stilos: augšējā (noklusējuma), labā, apakšējā un kreisā.

Tabulējams piemērs

Lai cilnes padarītu cilnes, izveidojiet .tab-panekatrai cilnei unikālu ID un ietiniet tās .tab-content.

Esmu 1. sadaļā.

Labdien, esmu 2. sadaļā.

Ko darīt, meitene, šī ir 3. sadaļa.

<div class="tabbable"> <!-- Nepieciešams tikai kreisajām/labajām cilnēm -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">1. sadaļa</a></li>
    <li><a href="#tab2" data-toggle="tab">2. sadaļa</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>Es esmu 1. sadaļā.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Labdien, esmu 2. sadaļā.</p>
    </div>
  </div>
</div>

Izbalināt cilnēs

Lai cilnes izzustu, pievienojiet .fadekatrai .tab-pane.

Nepieciešams jQuery spraudnis

Visas cilnes cilnes nodrošina mūsu vieglais jQuery spraudnis. Lasiet vairāk par to, kā atdzīvināt ciļņu cilnes JavaScript dokumentu lapā .

Tabulējams jebkurā virzienā

Cilnes apakšā

Apgrieziet HTML secību un pievienojiet klasi, lai apakšā ievietotu cilnes.

Es esmu A sadaļā.

Labdien, es esmu B sadaļā.

Ko darīt, meitene, šī ir C sadaļa.

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

Cilnes kreisajā pusē

Mainiet klasi, lai cilnes ievietotu kreisajā pusē.

Es esmu A sadaļā.

Labdien, es esmu B sadaļā.

Ko darīt, meitene, šī ir C sadaļa.

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

Cilnes labajā pusē

Mainiet klasi, lai labajā pusē ievietotu cilnes.

Es esmu A sadaļā.

Labdien, es esmu B sadaļā.

Ko darīt, meitene, šī ir C sadaļa.

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

Pamata navigācijas josla

Lai sāktu, navigācijas joslas ir statiskas (nav fiksētas augšpusē), un tajās ir ietverts atbalsts projekta nosaukumam un pamata navigācijai. Novietojiet to jebkurā vietā .container, kas nosaka jūsu vietnes un satura platumu.

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Nosaukums</a>
    <ul class="nav">
      <li class="active"><a href="#">Sākums</a></li>
      <li><a href="#">Saite</a></li>
      <li><a href="#">Saite</a></li>
    </ul>
  </div>
</div>

Navigbar komponenti

Zīmols

Vienkāršai saitei, lai parādītu jūsu zīmola vai projekta nosaukumu, ir nepieciešams tikai enkura tags.

<a class="brand" href="#">Projekta nosaukums</a>

Nav saites

Nav vienumus ir vienkārši pievienot, izmantojot nesakārtotus sarakstus.

<ul class="nav">
  <li class="active">
    <a href="#">Sākums</a>
  </li>
  <li><a href="#">Saite</a></li>
  <li><a href="#">Saite</a></li>
</ul>

Varat viegli pievienot dalītājus savām navigācijas saitēm, izmantojot tukšu saraksta vienumu un vienkāršu klasi. Vienkārši pievienojiet šo starp saitēm:

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

Veidlapas

Lai pareizi veidotu un novietotu veidlapu navigācijas joslā, pievienojiet atbilstošās klases, kā parādīts tālāk. Noklusējuma veidlapai iekļaujiet .navbar-formun vai nu .pull-leftvai .pull-right, lai to pareizi līdzinātu.

<form class="navbar-form pull-left">
  <input type="text" class="span2">
  <button type="submit" class="btn">Iesniegt</button>
</form>

Meklēšanas forma

Lai iegūtu pielāgotāku meklēšanas formu, navigācijas joslā pievienojiet .navbar-searchspecializēto stilu ievadei un form..search-query

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

Komponentu izlīdzināšana

Izlīdziniet navigācijas saites, meklēšanas formu vai tekstu, izmantojiet .pull-leftvai .pull-rightutilītu klases. Abas klases pievienos CSS pludiņu norādītajā virzienā.

Izmantojot nolaižamās izvēlnes

Pievienojiet navigācijai nolaižamās un nolaižamās izvēlnes, izmantojot nelielu marķējumu un nolaižamās izvēlnes JavaScript spraudni .

<ul class="nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      Konts
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
</ul>

Apmeklējiet JavaScript nolaižamo izvēlņu dokumentāciju , lai iegūtu papildinformāciju par izsaukšanas nolaižamajām izvēlnēm.

Teksts

Aptiniet teksta virknes elementā ar .navbar-text, parasti uz <p>taga, lai nodrošinātu pareizu ievadu un krāsu.

Izvēles displeja varianti

Piestipriniet navigācijas joslu skata loga augšpusē vai apakšā, izmantojot papildu klasi visattālākajā divdaļā .navbar.

Fiksēts augšpusē

Pievienojiet un atcerieties ņemt vērā slēpto laukumu zem tā, pievienojot .navbar-fixed-topvismaz 40 pikseļus . Noteikti pievienojiet to pēc Bootstrap CSS pamata un pirms izvēles adaptīvā CSS.padding<body>

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

Fiksēts apakšā

Tā vietā pievienojiet .navbar-fixed-bottom.

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

Statiska augšējā navigācijas josla

Izveidojiet pilna platuma navigācijas joslu, kas ritinās kopā ar lapu, pievienojot .navbar-static-top. Atšķirībā no .navbar-fixed-topklases, jums nav jāmaina neviens polsterējums body.

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

Adaptīva navigācijas josla

Lai ieviestu sakļaujošu adaptīvu navigācijas joslu, ietiniet navigācijas joslas saturu div, .nav-collapse.collapseun pievienojiet navigācijas joslas pārslēgšanas pogu .btn-navbar.

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

      <!-- .btn-navbar tiek izmantots kā pārslēgs sakļautam navigācijas joslas saturam -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Noteikti atstājiet zīmolu, ja vēlaties to rādīt -->
      <a class="brand" href="#">Projekta nosaukums</a>

      <!-- Viss, ko vēlaties paslēpt 940 pikseļu vai mazākā izšķirtspējā, ievietojiet šeit -->
      <div class="nav-collapse collapse">
        <!-- .nav, .navbar-search, .navbar-form utt -->
      </div>

    </div>
  </div>
</div>

Uzmanību! Adaptīvai navigācijas joslai ir nepieciešams sakukšanas spraudnis un adaptīvais Bootstrap CSS fails .

Apgriezta variācija

Mainiet navigācijas joslas izskatu, pievienojot .navbar-inverse.

<div class="navbar navbar-inverse">
  ...
</div>

Piemēri

Parādīts viens piemērs, kā tas varētu tikt attēlots vairākās lapās.

<ul class="breadcrumb">
  <li><a href="#">Sākums</a> <span class="divider">/</span></li>
  <li><a href="#">Bibliotēka</a> <span class="divider">/</span></li>
  <li class="active">Dati</li>
</ul>

Standarta lappušu šķirošana

Vienkārša lapošana, ko iedvesmojis Rdio, lieliski piemērota lietotnēm un meklēšanas rezultātiem. Lielo bloku ir grūti nepamanīt, tas ir viegli mērogojams un nodrošina lielus klikšķu apgabalus.

<div class="pagination">
  <ul>
    <li><a href="#">Iepriekšējā</a></li>
    <li><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="#">5</a></li>
    <li><a href="#">Nākamais</a></li>
  </ul>
</div>

Iespējas

Atspējoti un aktīvi stāvokļi

Saites var pielāgot dažādiem apstākļiem. Izmantojiet .disabledneklikšķināmām saitēm un .activepašreizējās lapas norādīšanai.

<div class="pagination">
  <ul>
    <li class="disabled"><a href="#">«</a></li>
    <li class="active"><a href="#">1</a></li>
    ...
  </ul>
</div>

Varat pēc izvēles nomainīt aktīvos vai atspējotos enkurus pret laidumiem, lai noņemtu klikšķu funkcionalitāti, vienlaikus saglabājot paredzētos stilus.

<div class="pagination">
  <ul>
    <li class="disabled"><span>«</span></li>
    <li class="active"><span>1</span></li>
    ...
  </ul>
</div>

Izmēri

Vai vēlaties lielāku vai mazāku lappušu skaitu? Pievienojiet .pagination-large, .pagination-small, vai .pagination-minipapildu izmēriem.

<div class="pagination pagination-large">
  <ul>
    ...
  </ul>
</div>
<div class="pagination">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-small">
  <ul>
    ...
  </ul>
</div>
<div class="pagination pagination-mini">
  <ul>
    ...
  </ul>
</div>

Izlīdzināšana

Pievienojiet vienu no divām izvēles klasēm, lai mainītu lappušu saišu izlīdzināšanu: .pagination-centeredun .pagination-right.

<div class="pagination pagination-centered">
  ...
</div>

<div class="pagination pagination-right">
  ...
</div>

Peidžeris

Ātras iepriekšējās un nākamās saites vienkāršai lappušu ievietošanai ar vieglu marķējumu un stiliem. Tas ir lieliski piemērots vienkāršām vietnēm, piemēram, emuāriem vai žurnāliem.

Noklusējuma piemērs

Pēc noklusējuma peidžeris centrē saites.

<ul class="pager">
  <li><a href="#">Iepriekšējais</a></li>
  <li><a href="#">Nākamais</a></li>
</ul>

Izlīdzinātas saites

Varat arī izlīdzināt katru saiti sānos:

<ul class="pager">
  <li class="iepriekšējais">
    <a href="#">← Vecāks</a>
  </li>
  <li class="next">
    <a href="#">Jaunāka →</a>
  </li>
</ul>

Izvēles atspējošanas stāvoklis

Peidžera saitēs tiek izmantota arī vispārējā .disabledlietderības klase no lappušu klāšanas.

<ul class="pager">
  <li class="iepriekšējais atspējots">
    <a href="#">← Vecāks</a>
  </li>
  ...
</ul>

Etiķetes

Etiķetes	Atzīmes
Noklusējums	`<span class="label">Default</span>`
Panākumi	`<span class="label label-success">Success</span>`
Brīdinājums	`<span class="label label-warning">Warning</span>`
Svarīgs	`<span class="label label-important">Important</span>`
Informācija	`<span class="label label-info">Info</span>`
Apgriezti	`<span class="label label-inverse">Inverse</span>`

Nozīmītes

Vārds	Piemērs	Atzīmes
Noklusējums	1	`<span class="badge">1</span>`
Panākumi	2	`<span class="badge badge-success">2</span>`
Brīdinājums	4	`<span class="badge badge-warning">4</span>`
Svarīgs	6	`<span class="badge badge-important">6</span>`
Informācija	8	`<span class="badge badge-info">8</span>`
Apgriezti	10	`<span class="badge badge-inverse">10</span>`

Viegli saliekams

Lai atvieglotu ieviešanu, etiķetes un emblēmas vienkārši sakļaujas (izmantojot CSS :emptyatlasītāju), ja tajā nav satura.

Varoņu vienība

Viegls, elastīgs komponents jūsu vietnes galvenā satura demonstrēšanai. Tas labi darbojas mārketinga un satura vietnēs.

Sveika pasaule!

Šī ir vienkārša varoņa vienība, vienkārša jumbotron stila sastāvdaļa, lai pievērstu papildu uzmanību piedāvātajam saturam vai informācijai.

Uzzināt vairāk

<div class="hero-unit">
  <h1>Virsraksts</h1>
  <p>Paziņojums</p>
  <p>
    <a class="btn btn-primary btn-large">
      Uzzināt vairāk
    </a>
  </p>
</div>

Lapas galvene

Vienkāršs apvalks, h1lai lapas satura sadaļas atbilstoši atdalītu un segmentētu. Tas var izmantot h1noklusējuma smallelementu, kā arī lielāko daļu citu komponentu (ar papildu stiliem).

<div class="page-header">
  <h1>Lapas galvenes piemērs <small>Galvenes apakšteksts</small></h1>
</div>

Noklusējuma sīktēli

Pēc noklusējuma Bootstrap sīktēli ir paredzēti, lai parādītu saistītos attēlus ar minimālu nepieciešamo marķējumu.

Ļoti pielāgojama

Izmantojot nelielu papildu marķējumu, ir iespējams sīktēliem pievienot jebkāda veida HTML saturu, piemēram, virsrakstus, rindkopas vai pogas.

Sīktēla etiķete

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

Darbība Darbība
Sīktēla etiķete

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

Darbība Darbība
Sīktēla etiķete

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

Darbība Darbība

Kāpēc izmantot sīktēlus

Sīktēli (iepriekš .media-gridlīdz versijai 1.4) ir lieliski piemēroti fotoattēlu vai videoklipu režģiem, attēlu meklēšanas rezultātiem, mazumtirdzniecības produktiem, portfeļiem un daudz kam citam. Tās var būt saites vai statisks saturs.

Vienkāršs, elastīgs marķējums

Sīktēlu iezīmēšana ir vienkārša — viss, kas nepieciešams, ular jebkuru lielementu skaitu. Tas ir arī īpaši elastīgs, ļaujot izmantot jebkura veida saturu, tikai nedaudz vairāk iezīmējot saturu.

Izmanto režģa kolonnu izmērus

Visbeidzot sīktēlu komponents izmanto esošās režģa sistēmas klases, piemēram, .span2vai , lai .span3kontrolētu sīktēlu izmērus.

Atzīmes

Kā minēts iepriekš, sīktēliem nepieciešamais marķējums ir viegls un vienkāršs. Tālāk ir norādīts saistīto attēlu noklusējuma iestatījums .

<ul class="thumbnails">
  <li class="span4">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
    </a>
  </li>
  ...
</ul>

Pielāgotam HTML saturam sīktēlos marķējums nedaudz mainās. Lai atļautu bloķēšanas līmeņa saturu jebkurā vietā, mēs nomainām to <a>pret <div>līdzīgu:

<ul class="thumbnails">
  <li class="span4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="">
      <h3>Sīktēla etiķete</h3>
      <p>Sīktēla paraksts...</p>
    </div>
  </li>
  ...
</ul>

Vairāk piemēru

Izpētiet visas savas iespējas, izmantojot dažādas jums pieejamās režģa klases. Varat arī sajaukt un saskaņot dažādus izmērus.

Noklusējuma brīdinājums

Aptiniet jebkuru tekstu un izvēles atcelšanas pogu, .alertlai saņemtu pamata brīdinājuma brīdinājuma ziņojumu.

Brīdinājums! Labāk pārbaudiet sevi, jūs neizskatāties pārāk labi.

<div class="alert">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <strong>Brīdinājums!</strong> Labāk pārbaudiet sevi, jūs neizskatāties pārāk labi.
</div>

Noraidīt pogas

Mobilajām pārlūkprogrammām Safari un Mobile Opera papildus data-dismiss="alert"atribūtam ir nepieciešama href="#"brīdinājumu noraidīšana, lietojot <a>tagu.

<a href="#" class="close" data-dismiss="alert">×</a>

Varat arī izmantot <button>elementu ar datu atribūtu, ko esam izvēlējušies darīt saviem dokumentiem. Izmantojot <button>, jums ir jāiekļauj, type="button"pretējā gadījumā jūsu veidlapas nedrīkst iesniegt.

<button type="button" class="close" data-dismiss="alert">×</button>

Noraidīt brīdinājumus, izmantojot JavaScript

Izmantojiet brīdinājumu spraudni jQuery , lai ātri un viegli noņemtu brīdinājumus.

Iespējas

Garākiem ziņojumiem palieliniet polsterējumu brīdinājuma aptinuma augšdaļā un apakšā, pievienojot .alert-block.

Brīdinājums!

Labāk pārbaudiet sevi, jūs neizskatāties pārāk labi. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class="alert alert-block">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <h4>Brīdinājums!</h4>
  Labāk pārbaudiet sevi, jūs neesat...
</div>

Kontekstuālās alternatīvas

Pievienojiet izvēles klases, lai mainītu brīdinājuma konotāciju.

Kļūda vai briesmas

Ak! Mainiet dažas lietas un mēģiniet iesniegt vēlreiz.

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

Panākumi

Labi padarīts! Jūs veiksmīgi izlasījāt šo svarīgo brīdinājuma ziņojumu.

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

Informācija

Uzmanību! Šim brīdinājumam ir jāpievērš uzmanība, taču tas nav īpaši svarīgi.

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

Piemēri un marķējums

Pamata

Noklusējuma progresa josla ar vertikālu gradientu.

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
</div>

Svītrains

Izmanto gradientu, lai radītu svītrainu efektu. Nav pieejams IE7-8.

<div class="progress progress-striped">
  <div class="bar" style="width: 20%;"></div>
</div>

Animēts

Pievienot .active, .progress-stripedlai animētu svītras no labās uz kreiso pusi. Nav pieejams visās IE versijās.

<div class="progress progress-striped active">
  <div class="bar" style="width: 40%;"></div>
</div>

Sakrauts

Novietojiet vairākus stieņus vienā .progress, lai tos sakrautu.

<div class="progress">
  <div class="bar bar-success" style="width: 35%;"></div>
  <div class="bar bar-warning" style="width: 20%;"></div>
  <div class="bar bar-danger" style="width: 10%;"></div>
</div>

Iespējas

Papildu krāsas

Progresa joslās tiek izmantotas dažas no tām pašām pogu un brīdinājumu klasēm, lai nodrošinātu konsekventus stilus.

<div class="progress progress-info">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Svītraini stieņi

Līdzīgi vienkrāsainajām krāsām, mums ir dažādas svītrainas progresa joslas.

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

Pārlūka atbalsts

Progresa joslas izmanto CSS3 gradientus, pārejas un animācijas, lai sasniegtu visus to efektus. Šīs funkcijas netiek atbalstītas Firefox IE7-9 vai vecākās versijās.

Versijas, kas vecākas par Internet Explorer 10 un Opera 12, neatbalsta animācijas.

Abstraktie objektu stili dažāda veida komponentu veidošanai (piemēram, emuāra komentāri, tvīti u.c.), kuros līdzās teksta saturam ir līdzināts attēls pa kreisi vai pa labi.

Noklusējuma piemērs

Noklusējuma multivide ļauj peldēt multivides objektu (attēlus, video, audio) pa kreisi vai pa labi no satura bloka.

Multivides virsraksts

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Multivides virsraksts

<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" data-src="holder.js/64x64">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Multivides virsraksts</h4>
    ...

    <!-- Ligzdotas multivides objekts -->
    <div class="media">
      ...
    </div>
  </div>
</div>

Mediju saraksts

Izmantojot nedaudz papildu marķējumu, varat izmantot multividi sarakstā (noderīgi komentāru pavedieniem vai rakstu sarakstiem).

Multivides virsraksts

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Ligzdotas multivides virsraksts
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Ligzdotas multivides virsraksts
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Ligzdotas multivides virsraksts
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Multivides virsraksts
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" data-src="holder.js/64x64">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Multivides virsraksts</h4>
      ...

      <!-- Ligzdotas multivides objekts -->
      <div class="media">
        ...
     </div>
    </div>
  </li>
</ul>

Wells

Izmantojiet aku kā vienkāršu elementa efektu, lai piešķirtu tam ieliktu efektu.

Paskaties, es esmu akā!

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

Izvēles nodarbības

Kontroles polsterējums un noapaļoti stūri ar divām izvēles modifikatoru klasēm.

Paskaties, es esmu akā!

<div class="well well-large">
  ...
</div>

Paskaties, es esmu akā!

<div class="well well-small">
  ...
</div>

Aizvērt ikonu

Izmantojiet vispārīgo aizvēršanas ikonu, lai noraidītu saturu, piemēram, modālus un brīdinājumus.

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

href="#"Ja vēlaties izmantot enkuru, iOS ierīcēm ir nepieciešami notikumi par klikšķi.

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

Palīgu nodarbības

Vienkāršas, koncentrētas nodarbības maziem displeja vai uzvedības uzlabojumiem.

.velk-pa kreisi

Pludiniet elementu pa kreisi

class="pull-left"

.pull-left {
  pludiņš: pa kreisi;
}

.velciet pa labi

Peldiet elementu pa labi

class="pull-right"

.pull-right {
  pludiņš: pa labi;
}

.izslēgts

Mainiet elementa krāsu uz#999

class="muted"

.muted {
  krāsa: #999;
}

.noskaidrot

Notīriet floatjebkuru elementu

class="clearfix"

.clearfix {
  * tālummaiņa: 1;
  &:pirms,
  &:pēc {
    displejs: galds;
    saturs: "";
  }
  &:pēc {
    skaidrs: abi;
  }
}

Nolaižamās izvēlnes

Piemērs

Atzīmes

Iespējas

Izvēlņu saskaņošana

Atspējotas izvēlnes opcijas

Apakšizvēlnes nolaižamajos izvēlnēs

Pogu grupas

Piemēri

Viena pogu grupa

Vairākas pogu grupas

Vertikālās pogu grupas

Izvēles rūtiņas un radio garšas

Nolaižamās izvēlnes pogu grupās

Pogu nolaižamās izvēlnes

Pārskats un piemēri

Darbojas ar visiem pogas izmēriem

Nepieciešams JavaScript

Sadalīšanas pogas nolaižamās izvēlnes

Izmēri

Nolaižamās izvēlnes

Nav: cilnes, tabletes un saraksti

Vieglie noklusējuma iestatījumi Tas pats marķējums, dažādas klases

Pamata cilnes

Pamata tabletes

Atspējots stāvoklis

Komponentu izlīdzināšana

Saliekams viens uz otra

Sakrautas cilnes

Sakrautas tabletes

Nolaižamās izvēlnes

Cilnes ar nolaižamajām izvēlnēm

Tabletes ar nolaižamām izvēlnēm

Nav saraksti

Nav saraksta piemērs

Horizontālie sadalītāji

Tabbable nav

Tabulējams piemērs

Izbalināt cilnēs

Nepieciešams jQuery spraudnis

Tabulējams jebkurā virzienā

Cilnes apakšā

Cilnes kreisajā pusē

Cilnes labajā pusē

Navigbar

Pamata navigācijas josla

Navigbar komponenti

Zīmols

Nav saites

Veidlapas

Meklēšanas forma

Komponentu izlīdzināšana

Izmantojot nolaižamās izvēlnes

Teksts

Izvēles displeja varianti

Fiksēts augšpusē

Fiksēts apakšā

Statiska augšējā navigācijas josla

Adaptīva navigācijas josla

Apgriezta variācija

Maizes drupačas

Piemēri

Lapu šķirošana Divas satura lapošanas iespējas

Standarta lappušu šķirošana

Iespējas

Atspējoti un aktīvi stāvokļi

Izmēri

Izlīdzināšana

Peidžeris

Noklusējuma piemērs

Izlīdzinātas saites

Izvēles atspējošanas stāvoklis

Etiķetes un nozīmītes

Etiķetes

Nozīmītes

Viegli saliekams

Tipogrāfiskās sastāvdaļas

Varoņu vienība

Sveika pasaule!

Lapas galvene