Pogu grupas

Izmantojiet pogu grupas, lai apvienotu vairākas pogas kā vienu saliktu komponentu. Veidojiet tos, izmantojot virkni <a>vai <button>elementu.

Labākā pieredze

Pogu grupu un rīkjoslu lietošanai iesakām ievērot tālāk norādītās vadlīnijas.

• Vienmēr izmantojiet vienu un to pašu elementu vienā pogu grupā <a>vai <button>.
• Nejauciet dažādu krāsu pogas vienā pogu grupā.
• Izmantojiet ikonas papildus tekstam vai tā vietā, taču noteikti iekļaujiet alternatīvo tekstu un virsraksta tekstu, ja nepieciešams.

Saistītās pogu grupas ar nolaižamajām izvēlnēm (skatiet tālāk) ir jāizsauc atsevišķi un vienmēr jāiekļauj nolaižamā izvēlne, lai norādītu paredzēto darbību.

Noklusējuma piemērs

Lūk, kā HTML meklē standarta pogu grupu, kas izveidota ar enkura tagu pogām:

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</div>

Rīkjoslas piemērs

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

<div class = "btn-rīkjosla" > 
  <div class = "btn-group" > 
    ...
  </div>
</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. Lai to izdarītu, skatiet Javascript dokumentus .

Iegūstiet javascript »

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.

Marķējuma piemērs

Līdzīgi kā pogu grupai, mūsu iezīmēšanā tiek izmantots parastais pogu marķējums, taču ar dažiem papildinājumiem, lai uzlabotu stilu un atbalstītu Bootstrap nolaižamo spraudni jQuery.

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

Darbojas ar visiem pogas izmēriem

Pogu nolaižamās izvēlnes darbojas jebkurā izmērā. jūsu pogu izmēri ir .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. Izlīdzināšana ir jāatrisina manuāli vai ar pielāgotu JavaScript.

Pārskats un piemēri

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.

Izmēri

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

<div class = "btn-group" > 
  ...
  <ul class = "nolaižamās izvēlnes vilkšana pa labi" > 
    <!-- nolaižamās izvēlnes saites -->
  </ul>
</div>

Marķējuma piemērs

Mēs izvēršam parastās pogu nolaižamās izvēlnes, lai nodrošinātu otru pogas darbību, kas darbojas kā atsevišķs nolaižamās izvēlnes aktivizētājs.

<div class = "btn-group" > 
  <button class = "btn" > Darbība </button> 
  <button class = "btn dropdown-toggle" data-toggle = "nolaižamā izvēlne" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "nolaižamā izvēlne" > 
    <!-- 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žams </button> 
  <button class = "btn dropdown-toggle" data-toggle = "nolaižamā izvēlne" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "nolaižamā izvēlne" > 
    <!-- nolaižamās izvēlnes saites -->
  </ul>
</div>

Jaudīga bāzes klase

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

Kad lietot

Cilnes un tabletes ir lieliski piemērotas satura sadaļām vai navigācijai starp saistītā satura lapām.

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ā.

Pamata cilnes

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

• Mājas
• Profils
• Ziņojumi

<ul class = "nav nav-tabs" > 
  <li class = "aktīvs" > 
    <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:

• Mājas
• Profils
• Ziņojumi

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

Kā tos sakraut

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

• Mājas
• Profils
• Ziņojumi

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

Sakrautas tabletes

• Mājas
• Profils
• Ziņojumi

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

Vienkāršas bagātīgas ēdienkartes

Nolaižamās izvēlnes Bootstrap cilnēs un tabletēs ir ļoti vienkāršas, un tām ir nepieciešams tikai nedaudz papildu HTML un viegls jQuery spraudnis.

Dodieties uz Javascript lapu, lai lasītu dokumentus par Bootstrap nolaižamo izvēlņu inicializāciju .

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

• Mājas
• Palīdzība
• Nomest lejā
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = "nolaižamā izvēlne" > 
    <a class = "nolaižamās izvēlnes pārslēgšana" 
       data-toggle = "nolaižamā izvēlne"
       href = "#" >
        Nomest lejā
        <b class = "caret" ></b> 
      </a>
    <ul class = "nolaižamā izvēlne" > 
      <!-- saites -->
    </ul>
  </li>
</ul>

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

• Mājas
• Palīdzība
• Nomest lejā
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li class = "nolaižamā izvēlne" > 
    <a class = "nolaižamās izvēlnes pārslēgšana" 
       data-toggle = "nolaižamā izvēlne"
       href = "#" >
        Nomest lejā
        <b class = "caret" ></b> 
      </a>
    <ul class = "nolaižamā izvēlne" > 
      <!-- saites -->
    </ul>
  </li>
</ul>

Lietojumprogrammas stila navigācija

Navigācijas saraksti nodrošina vienkāršu un vienkāršu veidu, 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.

Strukturāli tie ir veidoti uz tiem pašiem galvenajiem navigācijas stiliem kā cilnes un tabletes, tāpēc lietošana un pielāgošana ir vienkārša.

Ar ikonām

Nav arī viegli aprīkot ar ikonām. Pievienojiet atbilstošo <i>atzīmi ar klasi, un tas ir gatavs.

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>

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 = "aktīvs" > 
    <a href = "#" > Sākums </a> 
  </li>
  <li>
    <a href = "#" > Bibliotēka </a> 
  </li>
  ...
</ul>

Piemērs ar ikonām

Tas pats piemērs, bet ar <i>ikonu tagiem.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "ikonu grāmata" ></i> 
      Bibliotēka
    </a>
  </li>
  ...
</ul>

Kas ir iekļauts

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ā.

Mainīt starp tām ir vienkārša, un ir jāmaina tikai ļoti maz uzcenojumu.

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 cilnes ar cilnēm JavaScript dokumentu lapā .

Iegūstiet JavaScript →

Tabulējams piemērs

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

Pa labi vai pa kreisi līdzinātām cilnēm ietiniet .nav-tabsun .tab-content..tabbable

Vienkāršs marķējums

Lai izmantotu ciļņu cilnes, ir nepieciešams iesaiņojuma div, ciļņu kopa un cilnes satura rūšu kopa.

<div class = "tabable" > <!-- 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 = "cilnes saturs" > 
    <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>

Cilnes apakšā

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

<div class = "tabulējamās cilnes-below" > 
  <div class = "cilnes saturs" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Cilnes kreisajā pusē

Mainiet klasi, lai cilnes ievietotu kreisajā pusē.

<div class = "tabable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "cilnes saturs" > 
    ...
  </div>
</div>

Cilnes labajā pusē

Mainiet klasi, lai labajā pusē ievietotu cilnes.

<div class = "tabable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "cilnes saturs" > 
    ...
  </div>
</div>

Navbar sastatnes

Navigācijas joslai ir nepieciešami tikai daži div elementi, lai to labi strukturētu statiskam vai fiksētam displejam.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "konteineris" > 
      ...
    </div>
  </div>
</div>

Fiksēta navigācijas josla

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

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

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

Piestiprinot navigācijas joslu, neaizmirstiet ņemt vērā slēpto laukumu zem tā. Pievienojiet 40 pikseļu vai lielāku polsterējumu <body>. Noteikti pievienojiet to pēc Bootstrap CSS pamata un pirms izvēles adaptīvā CSS.

Zīmola nosaukums

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

<a class = "zīmols" href = "#" >  
  Projekta nosaukums
</a>

Veidlapas navigācijas joslā

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" > 
  <ievades veids = "text" class = "span2" >  
</form>

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 = "Meklēt" >   
</form>

Izvēles adaptīvā variācija

Atkarībā no satura daudzuma augšējā joslā, iespējams, vēlēsities ieviest adaptīvās opcijas. Lai to izdarītu, ietiniet navigācijas 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 = "konteineris" > 
 
      <!-- .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" > 
        <!-- .nav, .navbar-search, .navbar-form utt -->
      </div>
 
    </div>
  </div>
</div>

Nav saites

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

<ul class = "nav" > 
  <li class = "aktīvs" > 
    <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 = "dalītājs-vertikāls" ></li> 
  ...
</ul>

Komponentu izlīdzināšana

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

Nolaižamo izvēlņu pievienošana

Nolaižamo izvēlņu un nolaižamo izvēlņu pievienošana navigācijai ir ļoti vienkārša, taču tam ir jāizmanto mūsu JavaScript spraudnis .

<ul class = "nav" > 
  <li class = "nolaižamā izvēlne" > 
    <a href = "#" 
          klase = "nolaižamā izvēlne"
          data-toggle = "nolaižamā izvēlne" >
          Konts
          <b class = "caret" ></b> 
    </a>
    <ul class = "nolaižamā izvēlne" > 
      ...
    </ul>
  </li>
</ul>

Iegūstiet JavaScript →

Teksts navigācijas joslā

Aptiniet teksta virknes <.navbar-text>, parasti uz <p>atzīmes, lai nodrošinātu pareizu sākumu un krāsu.

Kāpēc tos izmantot

Ātrās navigācijas navigācija tiek izmantota, lai parādītu lietotājiem, kur viņi atrodas lietotnē vai vietnē, bet ne primārajai navigācijai. Izmantojiet tos reti un kodolīgi, lai tie būtu visefektīvākie.

Piemēri

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

• Mājas

• Sākums /
• Bibliotēka

• Sākums /
• Bibliotēka /
• Dati

Atzīmes

HTML ir jūsu standarta nesakārtotais saraksts ar saitēm.

<ul class = "rīvmaize" > 
  <li>
    <a href = "#" > Sākums </a> <span class = "dalītājs" > / </span>   
  </li>
  <li>
    <a href = "#" > Bibliotēka </a> <span class = "dalītājs" > / </span>   
  </li>
  <li class = "active" > Dati </li> 
</ul>

Kad lietot

Īpaši vienkārša un minimāli veidota lappuse, kas iedvesmota no 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.

Raksturīgas lapas saites

Saites ir pielāgojamas un darbojas dažādos apstākļos ar pareizo klasi. .disabledneklikšķināmām saitēm un .activepašreizējai lapai.

Elastīga 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.

Piemēri

Noklusējuma lappušu veidošanas komponents ir elastīgs un darbojas vairākos variantos.

Atzīmes

Iesaiņots <div>, lappušu skaits ir tikai <ul>.

<div class = "lapu šķirošana" > 
  <ul>
    <li><a href = "#" > Iepriekšējā </a></li> 
    <li class = "aktīvs" > 
      <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 = "#" > Nākamais </a></li> 
  </ul>
</div>

Par peidžeri

Peidžera komponents ir saišu kopa vienkāršai lappušu ievietošanai ar vieglu marķējumu un vēl vieglākiem stiliem. Tas ir lieliski piemērots vienkāršām vietnēm, piemēram, emuāriem vai žurnāliem.

Izvēles atspējošanas stāvoklis

Peidžera saitēs tiek izmantota arī vispārīgā .disabledklase no lappušu klāšanas.

Noklusējuma piemērs

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

• Iepriekšējais
• Nākamais

<ul class = "peidžeris" > 
  <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:

• ← Vecāks
• Jaunāks →

<ul class = "peidžeris" > 
  <li class = "iepriekšējais" > 
    <a href = "#" > ← Vecāks </a> 
  </li>
  <li class = "nākamais" > 
    <a href = "#" > Jaunāka → </a> 
  </li>
</ul>

Par

Emblēmas ir mazi, vienkārši komponenti sava veida indikatora vai skaita parādīšanai. Tie parasti ir atrodami e-pasta klientos, piemēram, Mail.app, vai mobilajās lietotnēs push paziņojumiem.

Pieejamās nodarbības

Bootstrap nodrošina vieglu, elastīgu komponentu, ko sauc par varoņu vienību, lai parādītu saturu jūsu vietnē. Tas labi darbojas mārketinga un satura vietnēs.

Atzīmes

Aptiniet savu saturu, divpiemēram:

<div class = "varoņa vienība" > 
  <h1> Virsraksts </h1>
  <p> Ieraksts </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Uzzināt vairāk
    </a>
  </p>
</div>

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 = "lapas galvene" > 
  <h1> Lapas galvenes piemērs </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

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.

Uzcenojums

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 = "sīktēli" > 
  <li class = "span3" > 
    <a href = "#" class = "sīktēls" >  
      <img src = "https://placehold.it/260x180" 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 = "sīktēli" > 
  <li class = "span3" > 
    <div class = "sīktēls" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Sīktēla etiķete </h5>
      <p> Sīktēla paraksts šeit... </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.

Pārrakstīta bāzes klase

Izmantojot Bootstrap 2, mēs esam vienkāršojuši bāzes klasi: .alertnevis .alert-message. Mēs esam arī samazinājuši minimālo nepieciešamo marķējumu — <p>pēc noklusējuma nav nepieciešams, tikai ārējais <div>.

Viens brīdinājuma ziņojums

Lai nodrošinātu izturīgāku komponentu ar mazāku kodu, esam noņēmuši atšķirīgo izskatu bloķēt brīdinājumiem, ziņojumiem, kuriem ir vairāk polsterējuma un parasti vairāk teksta. Klase arī ir mainīta uz .alert-block.

Lieliski sader ar javascript

Bootstrap ir aprīkots ar lielisku jQuery spraudni, kas atbalsta brīdinājuma ziņojumus, padarot tos ātru un vienkāršu.

Iegūstiet spraudni »

Brīdinājumu piemēri

Aptiniet savu ziņojumu un neobligāto aizvēršanas ikonu divdaļā ar vienkāršu mācību priekšmetu.

<div class = "brīdinājums" > 
  <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>

Uzmanību! iOS ierīcēm ir nepieciešama href="#"brīdinājumu noraidīšana. Noteikti iekļaujiet to un datu atribūtu enkura aizvēršanas ikonām. 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.

Ērti paplašiniet standarta brīdinājuma ziņojumu ar divām izvēles klasēm: .alert-blocklai iegūtu vairāk polsterējuma un teksta vadīklu, kā .alert-headingarī atbilstošs virsraksts.

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

Kļūda vai briesmas

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

Panākumi

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

Informācija

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

Pamata

Noklusējuma progresa josla ar vertikālu gradientu.

<div class = "progress" > 
  <div class = "josla" 
       style = " platums : 60 %; " ></div> 
</div>

Svītrains

Izmanto gradientu, lai izveidotu svītrainu efektu (bez IE).

<div class = "progress progress-svītrains" > 
  <div class = "josla" 
       style = " platums : 20 %; " ></div> 
</div>

Animēts

Ņem svītraino piemēru un animē to (nav IE).

<div class = "progress progress-svītrains 
     aktīvs" >
  <div class = "josla" 
       style = " platums : 40 %; " ></div> 
</div>

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.

Svītraini stieņi

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

Uzvedība

Progresa joslās tiek izmantotas CSS3 pārejas, tādēļ, ja dinamiski pielāgojat platumu, izmantojot JavaScript, tā izmēri vienmērīgi tiks mainīti.

Ja izmantojat .activeklasi, .progress-stripedprogresa joslas animēs svītras no kreisās uz labo pusi.

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.

Opera un IE pašlaik neatbalsta animācijas.

Wells

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

<div class = "labi" > 
  ...
</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 = "aizvērt" > × </button> 

Ja vēlaties izmantot enkuru, iOS ierīcēs klikšķu notikumiem ir nepieciešams simbols href="#".

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