Sastāvdaļas

Desmitiem atkārtoti lietojamu komponentu ir iebūvēti Bootstrap, lai nodrošinātu navigāciju, brīdinājumus, uznirstošos logus un daudz ko citu.

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:

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

Rīkjoslas piemērs

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

  1. <div class = "btn-rīkjosla" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </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.

Pogu nolaižamās izvēlnes

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.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "nolaižamā izvēlne" href = "#" >
  3. Darbība
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "nolaižamā izvēlne" >
  7. <!-- nolaižamās izvēlnes saites -->
  8. </ul>
  9. </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.


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

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.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "nolaižamās izvēlnes vilkšana pa labi" >
  4. <!-- nolaižamās izvēlnes saites -->
  5. </ul>
  6. </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.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Darbība </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "nolaižamā izvēlne" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "nolaižamā izvēlne" >
  7. <!-- nolaižamās izvēlnes saites -->
  8. </ul>
  9. </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.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Nolaižams </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "nolaižamā izvēlne" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "nolaižamā izvēlne" >
  7. <!-- nolaižamās izvēlnes saites -->
  8. </ul>
  9. </div>

Vairāku lapu lappušu šķirošana

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

  1. <div class = "lapu šķirošana" >
  2. <ul>
  3. <li><a href = "#" > Iepriekšējā </a></li>
  4. <li class = "aktīvs" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Nākamais </a></li>
  11. </ul>
  12. </div>

Peidžeris Ātrai iepriekšējām un nākamajām saitēm

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.

  1. <ul class = "peidžeris" >
  2. <li>
  3. <a href = "#" > Iepriekšējais </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Nākamais </a>
  7. </li>
  8. </ul>

Izlīdzinātas saites

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

  1. <ul class = "peidžeris" >
  2. <li class = "iepriekšējais" >
  3. <a href = "#" > Vecāks </a>
  4. </li>
  5. <li class = "nākamais" >
  6. <a href = "#" > Jaunāka → </a>
  7. </li>
  8. </ul>
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>

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

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>

Varoņu vienība

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:

  1. <div class = "varoņa vienība" >
  2. <h1> Virsraksts </h1>
  3. <p> Ieraksts </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Uzzināt vairāk
  7. </a>
  8. </p>
  9. </div>

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

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

  1. <div class = "lapas galvene" >
  2. <h1> Lapas galvenes piemērs </h1>
  3. </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 .

  1. <ul class = "sīktēli" >
  2. <li class = "span3" >
  3. <a href = "#" class = "sīktēls" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </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:

  1. <ul class = "sīktēli" >
  2. <li class = "span3" >
  3. <div class = "sīktēls" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Sīktēla etiķete </h5>
  6. <p> Sīktēla paraksts šeit... </p>
  7. </div>
  8. </li>
  9. ...
  10. </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.

Vieglie noklusējuma iestatījumi

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.

Brīdinājums! Labāk pārbaudiet sevi, jūs neizskatāties pārāk labi.
  1. <div class = "brīdinājums" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Brīdinājums! </strong> Labāk pārbaudiet sevi, jūs neizskatāties pārāk labi.
  4. </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.

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.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Brīdinājums! </h4>
  4. Labāk pārbaudiet sevi, jūs neesat...
  5. </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.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Panākumi

Labi padarīts! Jūs veiksmīgi izlasījāt šo svarīgo brīdinājuma ziņojumu.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Informācija

Uzmanību! Šim brīdinājumam ir jāpievērš uzmanība, taču tas nav īpaši svarīgi.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Piemēri un marķējums

Pamata

Noklusējuma progresa josla ar vertikālu gradientu.

  1. <div class = "progress" >
  2. <div class = "josla"
  3. style = " platums : 60 %; " ></div>
  4. </div>

Svītrains

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

  1. <div class = "progress progress-svītrains" >
  2. <div class = "josla"
  3. style = " platums : 20 %; " ></div>
  4. </div>

Animēts

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

  1. <div class = "progress progress-svītrains
  2. aktīvs" >
  3. <div class = "josla"
  4. style = " platums : 40 %; " ></div>
  5. </div>

Opcijas un pārlūkprogrammas atbalsts

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.

Paskaties, es esmu akā!
  1. <div class = "labi" >
  2. ...
  3. </div>

Aizvērt ikonu

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

  1. <button class = "aizvērt" > × </button>

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

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