Pavyzdys

Perjungiamas kontekstinis meniu nuorodų sąrašams rodyti. Interaktyvus naudojant išskleidžiamąjį JavaScript papildinį .

<ul class = "dropdown-menu" role = "meniu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Veiksmas </a></li>  
  <li><a tabindex = "-1" href = "#" > Kitas veiksmas </a></li>  
  <li><a tabindex = "-1" href = "#" > Čia dar kažkas </a></li>  
  <li class = "daliklis" ></li> 
  <li><a tabindex = "-1" href = "#" > Atskira nuoroda </a></li>  
</ul>

Žymėjimas

Žiūrint tik į išskleidžiamąjį meniu, čia yra reikalingas HTML. Išskleidžiamojo meniu aktyviklį ir išskleidžiamąjį meniu turite įtraukti į .dropdown, arba kitą elementą, kuris deklaruoja position: relative;. Tada tiesiog sukurkite meniu.

<div class = "išskleidžiamasis sąrašas" > 
  <!-- Nuoroda arba mygtukas, skirtas perjungti išskleidžiamąjį meniu -->
  <ul class = "dropdown-menu" role = "meniu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Veiksmas </a></li>  
    <li><a tabindex = "-1" href = "#" > Kitas veiksmas </a></li>  
    <li><a tabindex = "-1" href = "#" > Čia dar kažkas </a></li>  
    <li class = "daliklis" ></li> 
    <li><a tabindex = "-1" href = "#" > Atskira nuoroda </a></li>  
  </ul>
</div>

Galimybės

Sulygiuokite meniu dešinėje ir įtraukite papildomų lygių išskleidžiamųjų meniu.

Meniu suderinimas

Pridėti .pull-rightprie a .dropdown-menuį dešinę lygiuoti išskleidžiamąjį meniu.

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

Išjungtos meniu parinktys

Pridėkite .disabledprie a <li>išskleidžiamajame meniu, kad išjungtumėte nuorodą.

<ul class = "dropdown-menu" role = "meniu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Įprasta nuoroda </a></li>  
  <li class = "išjungta" ><a tabindex = "-1" href = "#" > Išjungta nuoroda </a></li>   
  <li><a tabindex = "-1" href = "#" > Kita nuoroda </a></li>  
</ul>

Submeniu išskleidžiamajame meniu

Pridėkite papildomo lygio išskleidžiamuosius meniu, rodomus užvedus pelės žymeklį, kaip ir OS X, su keliais paprastais žymėjimo priedais. Pridėkite .dropdown-submenuprie bet likurio esamo išskleidžiamojo meniu, kad sukurtumėte automatinį stilių.

<ul class = "dropdown-menu" role = "meniu" aria-labelledby = "dLabel" >   
  ...
  <li class = "išskleidžiamasis submeniu" > 
    <a tabindex = "-1" href = "#" > Daugiau parinkčių </a>  
    <ul class = "išskleidžiamasis meniu" > 
      ...
    </ul>
  </li>
</ul>

Pavyzdžiai

Dvi pagrindinės parinktys ir du konkretesni variantai.

Vieno mygtuko grupė

Apvyniokite mygtukų seriją su .btn..btn-group

<div class = "btn-group" > 
  <button class = "btn" > Kairėn </button> 
  <button class = "btn" > Vidurinis </button> 
  <button class = "btn" > Dešinėn </button> 
</div>

Kelios mygtukų grupės

Sujunkite rinkinius <div class="btn-group">į a <div class="btn-toolbar">, kad gautumėte sudėtingesnius komponentus.

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

Vertikalios mygtukų grupės

Padarykite, kad mygtukų rinkinys būtų išdėstytas vertikaliai, o ne horizontaliai.

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

Žymės langelis ir radijo skoniai

Mygtukų grupės taip pat gali veikti kaip radijo imtuvai, kuriuose gali būti aktyvus tik vienas mygtukas, arba žymės langeliai, kuriuose gali būti aktyvus bet koks mygtukų skaičius. Peržiūrėkite „JavaScript“ dokumentus .

Išskleidžiamieji meniu mygtukų grupėse

Galvas aukštyn!Mygtukai su išskleidžiamaisiais meniu turi būti atskirai suvynioti į juos .btn-group, kad .btn-toolbarbūtų tinkamai atvaizduojami.

Apžvalga ir pavyzdžiai

Naudokite bet kurį mygtuką, kad suaktyvintumėte išskleidžiamąjį meniu, įtraukdami jį į a .btn-groupir nurodydami tinkamą meniu žymėjimą.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "išskleidžiamasis sąrašas" href = "#" >   
    Veiksmas
    <span class = "caret" ></span> 
  </a>
  <ul class = "išskleidžiamasis meniu" > 
    <!-- išskleidžiamojo meniu nuorodos -->
  </ul>
</div>

Veikia su visų dydžių mygtukais

Išskleidžiamieji mygtukų meniu veikia bet kokio dydžio: .btn-large, .btn-small, arba .btn-mini.

Reikalingas JavaScript

Kad veiktų išskleidžiamieji mygtukų meniu, reikalingas Bootstrap išskleidžiamasis papildinys .

Kai kuriais atvejais, pvz., mobiliesiems, išskleidžiamieji meniu bus išplėsti už peržiūros srities. Lygiavimą turite išspręsti rankiniu būdu arba naudodami tinkintą „JavaScript“.

Split mygtuko išskleidžiamieji meniu

Remdamiesi mygtukų grupių stiliais ir žymėjimu, galime lengvai sukurti padalijimo mygtuką. Split mygtukai turi standartinį veiksmą kairėje ir išskleidžiamąjį perjungiklį dešinėje su kontekstinėmis nuorodomis.

<div class = "btn-group" > 
  <button class = "btn" > Veiksmas </button> 
  <button class = "btn dropdown-toggle" data-toggle = "išskleidžiamasis sąrašas" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "išskleidžiamasis meniu" > 
    <!-- išskleidžiamojo meniu nuorodos -->
  </ul>
</div>

Dydžiai

Norėdami nustatyti dydį, naudokite papildomas mygtukų klases .btn-mini, .btn-smallarba .btn-large.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Veiksmas </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "išskleidžiamasis sąrašas" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "išskleidžiamasis meniu" > 
    <!-- išskleidžiamojo meniu nuorodos -->
  </ul>
</div>

Išskleidžiamieji meniu

Išskleidžiamuosius meniu taip pat galima perjungti iš apačios į viršų, pridedant vieną klasę prie tiesioginio pirminio .dropdown-menu. Jis pasuks kryptį ir pakeis .caretpaties meniu padėtį, kad judėtų iš apačios į viršų, o ne iš viršaus žemyn.

<div class = "btn-group dropup" > 
  <button class = "btn" > Išmesti </button> 
  <button class = "btn dropdown-toggle" data-toggle = "išskleidžiamasis sąrašas" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "išskleidžiamasis meniu" > 
    <!-- išskleidžiamojo meniu nuorodos -->
  </ul>
</div>

Lengvi numatytieji Tas pats žymėjimas, skirtingos klasės

Visi čia esantys navigacijos komponentai – skirtukai, tabletės ir sąrašai – turi tą patį pagrindinį žymėjimą ir stilius visoje .navklasėje.

Pagrindiniai skirtukai

Paimkite reguliarias <ul>nuorodas ir pridėkite .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "aktyvus" > 
    <a href = "#" > Pagrindinis puslapis </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pagrindinės tabletės

Paimkite tą patį HTML, bet .nav-pillsvietoj jo naudokite:

<ul class = "nav nav-pills" > 
  <li class = "aktyvus" > 
    <a href = "#" > Pagrindinis puslapis </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Neįgalus būsena

Prie bet kurio navigacijos komponento (skirtukų, tablečių ar sąrašo) pridėkite .disabledpilkų nuorodų ir be pelės žymeklio efektų . Tačiau nuorodas bus galima spustelėti, nebent pašalinsite hrefatributą. Arba galite įdiegti tinkintą „JavaScript“, kad išvengtumėte tų paspaudimų.

<ul class = "nav nav-pills" > 
  ...
  <li class = "išjungta" ><a href = "#" > Pagrindinis puslapis </a></li>  
  ...
</ul>

Komponentų derinimas

Norėdami sulygiuoti navigacijos nuorodas, naudokite .pull-leftarba .pull-rightnaudingumo klases. Abi klasės pridės CSS plūdę nurodyta kryptimi.

Didina

Kadangi pagal numatytuosius nustatymus skirtukai ir tabletės yra horizontalios, tiesiog pridėkite antrą klasę , .nav-stackedkad jie atrodytų vertikaliai sukrauti.

Sukrauti skirtukai

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

Sukrautos tabletės

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

Išskleidžiamieji meniu

Pridėkite išskleidžiamųjų meniu naudodami šiek tiek papildomo HTML ir išskleidžiamąjį JavaScript papildinį .

Skirtukai su išskleidžiamaisiais meniu

<ul class = "nav nav-tabs" > 
  <li class = "išskleidžiamasis sąrašas" > 
    <a class = "išskleidžiamasis meniu perjungimas" 
       data-toggle = "išskleidžiamasis sąrašas"
       href = "#" >
        Išskleidžiamasis meniu
        <b klasė = "caret" ></b> 
      </a>
    <ul class = "išskleidžiamasis meniu" > 
      <!-- nuorodos -->
    </ul>
  </li>
</ul>

Tabletės su išskleidžiamaisiais meniu

<ul class = "nav nav-pills" > 
  <li class = "išskleidžiamasis sąrašas" > 
    <a class = "išskleidžiamasis meniu perjungimas" 
       data-toggle = "išskleidžiamasis sąrašas"
       href = "#" >
        Išskleidžiamasis meniu
        <b klasė = "caret" ></b> 
      </a>
    <ul class = "išskleidžiamasis meniu" > 
      <!-- nuorodos -->
    </ul>
  </li>
</ul>

Navigacijos sąrašai

Paprastas ir lengvas būdas sukurti naršymo nuorodų grupes su pasirenkamomis antraštėmis. Juos geriausia naudoti šoninėse juostose, pvz., OS X „Finder“.

Navigacijos sąrašo pavyzdys

Paimkite nuorodų sąrašą ir pridėkite class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Sąrašo antraštė </li> 
  <li class = "aktyvus" ><a href = "#" > Pagrindinis puslapis </a></li>  
  <li><a href = "#" > Biblioteka </a></li> 
  ...
</ul>

PastabaJei norite įdėti į naršymo sąrašą, įtraukite class="nav nav-list"į bet kurį įdėtą <ul>.

Horizontalūs skirstytuvai

Pridėkite horizontalų skirstytuvą sukurdami tuščią sąrašo elementą su klase .divider, pavyzdžiui:

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

Tabbable nav

Pagyvinkite savo skirtukus naudodami paprastą papildinį, skirtą skirtukuose perjungti turinį. „Bootstrap“ integruoja keturių stilių skirtukus: viršuje (numatytasis), dešinėje, apačioje ir kairėje.

Tabletinis pavyzdys

Kad skirtukai būtų rodomi skirtukuose, .tab-panekiekvienam skirtukui sukurkite unikalų ID ir apvyniokite juos .tab-content.

<div class = "tabable" > <!-- Reikalingas tik kairiesiems / dešiniesiems skirtukams -->  
  <ul class = "nav nav-tabs" > 
    <li class = "aktyvus" ><a href = "#tab1" data-toggle = "skirtukas" > 1 skyrius </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > 2 skiltis </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Esu 1 skyriuje. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Sveiki, esu 2 skyriuje. </p>
    </div>
  </div>
</div>

Išblukti skirtukuose

Jei norite, kad skirtukai išnyktų, pridėkite .fadeprie kiekvieno .tab-pane.

Reikia jQuery papildinio

Visi skirtukai su skirtukais yra aprūpinti mūsų lengvu jQuery papildiniu. Skaitykite daugiau apie tai, kaip atgaivinti skirtukus, skirtus „JavaScript“ dokumentų puslapyje .

Galima kabinti bet kuria kryptimi

Skirtukai apačioje

Apverskite HTML tvarką ir pridėkite klasę, kad skirtukai būtų apačioje.

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

Skirtukai kairėje

Pakeiskite klasę, kad skirtukai būtų rodomi kairėje.

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

Skirtukai dešinėje

Sukeiskite klasę, kad skirtukai būtų dešinėje.

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

Pagrindinė naršymo juosta

Norėdami pradėti, naršymo juostos yra statinės (nepritvirtintos viršuje) ir apima projekto pavadinimo bei pagrindinio naršymo palaikymą. Įdėkite jį bet kurioje vietoje .container, kuri nustato svetainės ir turinio plotį.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Pavadinimas </a>  
    <ul class = "nav" > 
      <li class = "aktyvus" ><a href = "#" > Pagrindinis puslapis </a></li>  
      <li><a href = "#" > Nuoroda </a></li> 
      <li><a href = "#" > Nuoroda </a></li> 
    </ul>
  </div>
</div>

Navigacijos juostos komponentai

Prekės ženklas

Paprastai nuorodai, kad būtų rodomas jūsų prekės ženklo ar projekto pavadinimas, reikia tik prierašo žymos.

<a class = "brand" href = "#" > Projekto pavadinimas </a>  

Navigacijos nuorodos

Navigacijos elementus paprasta pridėti naudojant nerūšiuotus sąrašus.

<ul class = "nav" > 
  <li class = "aktyvus" > 
    <a href = "#" > Pagrindinis puslapis </a> 
  </li>
  <li><a href = "#" > Nuoroda </a></li> 
  <li><a href = "#" > Nuoroda </a></li> 
</ul>

Galite lengvai pridėti skirstytuvus prie navigacijos nuorodų naudodami tuščią sąrašo elementą ir paprastą klasę. Tiesiog pridėkite tai tarp nuorodų:

<ul class = "nav" > 
  ...
  <li class = "daliklis-vertikalė" ></li> 
  ...
</ul>

Formos

Norėdami tinkamai formuoti ir išdėstyti formą naršymo juostoje, pridėkite atitinkamas klases, kaip parodyta toliau. Jei norite naudoti numatytąją formą, įtraukite .navbar-formir arba .pull-leftarba .pull-right, kad ją tinkamai sulygiuotumėte.

<form class = "navbar-form pull-left" > 
  <įvesties tipas = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Pateikti </button>  
</form>

Paieškos forma

Norėdami gauti labiau pritaikytą paieškos formą, naršymo juostoje pridėkite .navbar-searchprie specializuotų stilių įvesties ir form..search-query

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

Komponentų derinimas

Sulygiuokite navigacijos nuorodas, paieškos formą arba tekstą, naudokite .pull-leftarba .pull-rightnaudingumo klases. Abi klasės pridės CSS plūdę nurodyta kryptimi.

Naudojant išskleidžiamuosius meniu

Pridėkite išskleidžiamųjų ir išskleidžiamųjų meniu prie naršymo su šiek tiek žymėjimo ir išskleidžiamųjų meniu „JavaScript“ papildiniu .

<ul class = "nav" > 
  <li class = "išskleidžiamasis sąrašas" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "išskleidžiamasis sąrašas" >   
      sąskaita
      <b klasė = "caret" ></b> 
    </a>
    <ul class = "išskleidžiamasis meniu" > 
      ...
    </ul>
  </li>
</ul>

Apsilankykite „ JavaScript“ išskleidžiamųjų meniu dokumentacijoje , kad gautumėte daugiau žymėjimo ir informacijos apie iškvietimo meniu.

Tekstas

Apvyniokite teksto eilutes į elementą su .navbar-text, paprastai ant <p>žymos, kad būtų tinkama pradžia ir spalva.

Pasirenkami ekrano variantai

Pritvirtinkite naršymo juostą peržiūros srities viršuje arba apačioje naudodami papildomą klasę atokiausioje dalyje .navbar.

Tvirtinama viršuje

Pridėkite .navbar-fixed-topir nepamirškite atsižvelgti į paslėptą sritį po juo, pridėdami bent 40 pikselių paddingprie <body>. Būtinai pridėkite tai po pagrindinio Bootstrap CSS ir prieš pasirenkamą reaguojantį CSS.

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

Tvirtinama apačioje

.navbar-fixed-bottomVietoj to pridėkite .

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

Statinė viršutinė naršymo juosta

Sukurkite viso pločio naršymo juostą, kuri slinktų kartu su puslapiu, pridėdami .navbar-static-top. Skirtingai nei .navbar-fixed-topklasėje, jums nereikia keisti jokių užpildų ant body.

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

Reaguojanti naršymo juosta

Norėdami įdiegti sutraukiamą interaktyvią naršymo juostą, naršymo juostos turinį įdėkite į div, .nav-collapse.collapseir pridėkite naršymo juostos perjungimo mygtuką .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "konteineris" > 
 
      <!-- .btn-navbar naudojama kaip sutraukto naršymo juostos turinio perjungiklis -->
      <a class = "btn btn-navbar" data-toggle = "sutraukti" data-target = ".nav-collapse" >   
        <span class = "piktogramų juosta" ></span> 
        <span class = "piktogramų juosta" ></span> 
        <span class = "piktogramų juosta" ></span> 
      </a>
 
      <!-- Būtinai palikite prekės ženklą, jei norite, kad jis būtų rodomas -->
      <a class = "brand" href = "#" > Projekto pavadinimas </a>  
 
      <!-- Viskas, ko norite paslėpti 940 pikselių ar mažesniu raiška, įdėkite čia -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form ir tt -->
      </div>
 
    </div>
  </div>
</div>

Apverstas variantas

Keiskite naršymo juostos išvaizdą pridėdami .navbar-inverse.

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

Pavyzdžiai

Rodomas vienas pavyzdys, kuris gali būti rodomas keliuose puslapiuose.

<ul class = "džiūvėsėlis" > 
  <li><a href = "#" > Pagrindinis puslapis </a> <span class = "daliklis" > / </span></li>   
  <li><a href = "#" > Biblioteka </a> <span class = "daliklis" > / </span></li>   
  <li class = "aktyvus" > Duomenys </li> 
</ul>

Standartinis puslapių skyrimas

Paprastas puslapių rūšiavimas, įkvėptas Rdio, puikiai tinka programoms ir paieškos rezultatams. Didelis blokas yra sunkiai nepastebimas, lengvai keičiamas ir suteikia dideles paspaudimų sritis.

<div class = "pagination" > 
  <ul>
    <li><a href = "#" > Ankstesnis </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 = "#" > Kitas </a></li> 
  </ul>
</div>

Galimybės

Išjungtos ir aktyvios būsenos

Nuorodos pritaikomos įvairioms aplinkybėms. Naudokite .disablednespaudžiamoms nuorodoms ir .activedabartiniam puslapiui nurodyti.

<div class = "pagination" > 
  <ul>
    <li class = "išjungta" ><a href = "#" > « </a></li>  
    <li class = "aktyvus" ><a href = "#" > 1 </a></li>  
    ...
  </ul>
</div>

Galite pasirinktinai pakeisti aktyvius arba išjungtus inkarus į tarpatramius, kad pašalintumėte paspaudimo funkciją išlaikant numatytus stilius.

<div class = "pagination" > 
  <ul>
    <li class = "išjungta" ><span> « </span></li> 
    <li class = "aktyvus" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Dydžiai

Norite didesnio ar mažesnio puslapių skaičiaus? Pridėkite .pagination-large, .pagination-small, arba .pagination-minipapildomų dydžių.

<div class = "puslapių skaičius-didelis" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "puslapių skaičius-mažas" > 
  <ul>
    ...
  </ul>
</div>
<div class = "puslapių numeracija-mini" > 
  <ul>
    ...
  </ul>
</div>

Lygiavimas

Norėdami pakeisti puslapių nuorodų lygiavimą, pridėkite vieną iš dviejų pasirenkamų klasių: .pagination-centeredir .pagination-right.

<div class = "centruotas puslapių numeravimas" > 
  ...
</div>

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

Gaviklis

Greitos ankstesnės ir kitos nuorodos, skirtos paprastam puslapių rūšiavimui su lengvu žymėjimu ir stiliais. Tai puikiai tinka paprastoms svetainėms, pvz., tinklaraščiams ar žurnalams.

Numatytasis pavyzdys

Pagal numatytuosius nustatymus gaviklis sutelkia nuorodas.

<ul class = "gaviklis" > 
  <li><a href = "#" > Ankstesnis </a></li> 
  <li><a href = "#" > Kitas </a></li> 
</ul>

Sulygiuotos nuorodos

Arba galite lygiuoti kiekvieną nuorodą į šonus:

<ul class = "gaviklis" > 
  <li class = "ankstesnis" > 
    <a href = "#" > ← Senesnis </a> 
  </li>
  <li class = "kitas" > 
    <a href = "#" > Naujesnis → </a> 
  </li>
</ul>

Neprivaloma išjungta būsena

Gaviklio nuorodose taip pat naudojama bendroji .disablednaudingumo klasė iš puslapių.

<ul class = "gaviklis" > 
  <li class = "ankstesnis išjungtas" > 
    <a href = "#" > ← Senesnis </a> 
  </li>
  ...
</ul>

Etiketės

Ženkliukai

Lengvai sulankstomas

Kad būtų lengviau įdiegti, etiketės ir ženkleliai tiesiog sutrauks (naudojant CSS :emptyparinkiklį), kai nėra turinio.

Herojaus vienetas

Lengvas, lankstus komponentas, skirtas pagrindiniam jūsų svetainės turiniui parodyti. Tai gerai veikia rinkodaros ir turinio svetainėse.

<div class = "didvyrio vienetas" > 
  <h1> Antraštė </h1>
  <p> Žymės eilutė </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Sužinokite daugiau
    </a>
  </p>
</div>

Puslapio antraštė

Paprastas apvalkalas, skirtas h1tinkamai atskirti ir segmentuoti turinio dalis puslapyje. Jis gali naudoti h1numatytąjį smallelementą ir daugumą kitų komponentų (su papildomais stiliais).

<div class = "puslapio antraštė" > 
  <h1> Puslapio antraštės pavyzdys <small> Antraštės potekstė </small></h1>
</div>

Numatytosios miniatiūros

Pagal numatytuosius nustatymus „Bootstrap“ miniatiūros yra skirtos rodyti susietus vaizdus su minimaliu reikalingu žymėjimu.

Labai pritaikoma

Naudojant šiek tiek papildomo žymėjimo, į miniatiūras galima pridėti bet kokio HTML turinio, pvz., antraščių, pastraipų ar mygtukų.

Kodėl verta naudoti miniatiūras

Miniatiūros (anksčiau .media-gridiki 1.4 versijos) puikiai tinka nuotraukų ar vaizdo įrašų tinkleliams, vaizdų paieškos rezultatams, mažmeninės prekybos produktams, portfeliams ir dar daugiau. Tai gali būti nuorodos arba statinis turinys.

Paprastas, lankstus žymėjimas

Miniatiūrų žymėjimas yra paprastas – a ulsu bet kokiu skaičiumili – viskas, ko reikiaJis taip pat itin lankstus, leidžiantis bet kokio tipo turiniui, naudojant tik šiek tiek daugiau žymėjimo turinio apvyniojimui.

Naudojami tinklelio stulpelių dydžiai

Galiausiai, miniatiūrų komponentas naudoja esamas tinklelio sistemos klases, pvz., .span2arba.span3 – miniatiūrų matmenims valdyti.

Žymėjimas

Kaip minėta anksčiau, reikalingas miniatiūrų žymėjimas yra lengvas ir paprastas. Štai numatytosios susietų vaizdų sąrankos peržiūra :

<ul class = "miniatiūros" > 
  <li class = "span4" > 
    <a href = "#" class = "miniatiūra" >  
      <img data-src = "holder.js/300x200" alt = "" >  
    </a>
  </li>
  ...
</ul>

Priskirto HTML turinio miniatiūrose žymėjimas šiek tiek pasikeičia. Norėdami leisti bloko lygio turinį bet kur, pakeičiame <a>į <div>tokį:

<ul class = "miniatiūros" > 
  <li class = "span4" > 
    <div class = "miniatiūra" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Miniatiūros etiketė </h3>
      <p> Miniatiūros antraštė... </p>
    </div>
  </li>
  ...
</ul>

Daugiau pavyzdžių

Ištirkite visas savo galimybes naudodamiesi įvairiomis jums prieinamomis tinklelio klasėmis. Taip pat galite maišyti ir derinti skirtingus dydžius.

Numatytasis įspėjimas

Įtraukite bet kokį tekstą ir pasirenkamą atsisakymo mygtuką, .alertkad gautumėte pagrindinį įspėjimo pranešimą.

<div class = "alert" > 
  <button type = "button" class = "uždaryti" data-dismiss = "perspėjimas" > × </button>   
  <strong> Įspėjimas! </strong> Geriausia pasitikrinti, ar neatrodote per gerai.
</div>

Atmesti mygtukus

Mobiliosiose „Safari“ ir „Mobile Opera“ naršyklėse, be data-dismiss="alert"atributo, reikalaujama href="#"atmesti įspėjimus naudojant <a>žymą.

<a href = "#" class = "uždaryti" data-dismiss = "perspėjimas" > × </a>   

Arba galite naudoti <button>elementą su duomenų atributu, kurį pasirinkome savo dokumentams. Kai naudojate <button>, turite įtraukti type="button"arba jūsų formos negali būti pateiktos.

<button type = "button" class = "uždaryti" data-dismiss = "perspėjimas" > × </button>   

Atsisakyti įspėjimų naudojant „JavaScript“.

Norėdami greitai ir lengvai atmesti įspėjimus, naudokite įspėjimų jQuery papildinį .

Galimybės

Jei norite gauti ilgesnius pranešimus, padidinkite užpildymą įspėjimų apvalkalo viršuje ir apačioje pridėdami .alert-block.

<div class = "alert alert-block" > 
  <button type = "button" class = "uždaryti" data-dismiss = "perspėjimas" > × </button>   
  <h4> Įspėjimas! </h4>
  Geriausia pasitikrinti save, tu nesi...
</div>

Kontekstinės alternatyvos

Pridėkite pasirenkamų klasių, kad pakeistumėte įspėjimo konotaciją.

Klaida arba pavojus

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

Sėkmė

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

Informacija

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

Pavyzdžiai ir žymėjimas

Pagrindinis

Numatytoji eigos juosta su vertikaliu gradientu.

<div class = "pažanga" > 
  <div class = "bar" style = " plotis : 60 %; " ></div>   
</div>

Dryžuotas

Naudoja gradientą, kad sukurtų dryžuotą efektą. Nėra IE7-8.

<div class = "progreso progreso juostelės" > 
  <div class = "bar" style = " plotis : 20 %; " ></div>   
</div>

Animuoti

Pridėti .activeprie .progress-striped, kad animuotų juosteles iš dešinės į kairę. Ne visose IE versijose.

<div class = "progreso progreso juostelės aktyvus" > 
  <div class = "bar" style = " plotis : 40 %; " ></div>   
</div>

Sukrauti

Įdėkite kelis strypus į tą patį .progress, kad juos sukrautumėte.

<div class = "pažanga" > 
  <div class = "juosta juosta-sėkmė" style = " plotis : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " plotis : 20 %; " ></div>   
  <div class = "baras-pavojus" style = " plotis : 10 %; " ></div>   
</div>

Galimybės

Papildomos spalvos

Pažangos juostose naudojami tie patys mygtukai ir įspėjimų klasės, kad būtų nuoseklūs stiliai.

<div class = "progress progress-info" > 
  <div class = "bar" style = " plotis : 20 % " ></div>   
</div>
<div class = "progreso pažanga-sėkmė" > 
  <div class = "bar" style = " plotis : 40 % " ></div>   
</div>
<div class = "progress progress-warning" > 
  <div class = "bar" style = " plotis : 60 % " ></div>   
</div>
<div class = "progreso progresas-pavojus" > 
  <div class = "bar" style = " plotis : 80 % " ></div>   
</div>

Dryžuotos juostos

Panašiai kaip ir vienspalvių spalvų, turime įvairių dryžuotų eigos juostų.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " plotis : 20 % " ></div>   
</div>
<div class = "progreso pažanga-sėkmės pažanga-dryžuota" > 
  <div class = "bar" style = " plotis : 40 % " ></div>   
</div>
<div class = "pažangos įspėjimas apie pažangą - dryžuotas" > 
  <div class = "bar" style = " plotis : 60 % " ></div>   
</div>
<div class = "progreso progresas-pavojus progresas-dryžuotas" > 
  <div class = "bar" style = " plotis : 80 % " ></div>   
</div>

Naršyklės palaikymas

Pažangos juostose naudojami CSS3 gradientai, perėjimai ir animacijos, kad būtų pasiekti visi jų efektai. Šios funkcijos nepalaikomos IE7-9 ar senesnėse „Firefox“ versijose.

Ankstesnės nei Internet Explorer 10 ir Opera 12 versijos nepalaiko animacijos.

Abstrakčių objektų stiliai, skirti kurti įvairių tipų komponentus (pvz., tinklaraščio komentarus, tviterius ir kt.), kuriuose kartu su tekstiniu turiniu yra kairėje arba dešinėje išlygiuotas vaizdas.

Numatytasis pavyzdys

Numatytoji laikmena leidžia perkelti medijos objektą (vaizdus, ​​vaizdo įrašą, garsą) turinio bloko kairėje arba dešinėje.

Žiniasklaidos antraštė

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.

Žiniasklaidos antraštė

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.

Žiniasklaidos antraštė

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.

<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" > Medijos antraštė </h4> 
    ...
 
    <!-- Įdėtas medijos objektas -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Žiniasklaidos sąrašas

Naudodami šiek tiek papildomo žymėjimo, galite naudoti laikmeną sąraše (naudinga komentarų temoms ar straipsnių sąrašams).

<ul class = "medijos sąrašas" > 
  <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" > Medijos antraštė </h4> 
      ...
 
      <!-- Įdėtas medijos objektas -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Šuliniai

Naudokite šulinį kaip paprastą elemento efektą, kad suteiktumėte jam įterptinį efektą.

<div klasė = "gerai" > 
  ...
</div>

Neprivalomi užsiėmimai

Valdykite paminkštinimus ir suapvalintus kampus su dviem pasirenkamomis modifikavimo klasėmis.

<div class = "gerai gerai-didelis" > 
  ...
</div>

<div class = "gerai gerai-mažas" > 
  ...
</div>

Uždaryti piktogramą

Jei norite atsisakyti turinio, pvz., modalų ir įspėjimų, naudokite bendrąją uždarymo piktogramą.

<button class = "uždaryti" > × </button> 

„iOS“ įrenginiuose reikalingas href="#"paspaudimo įvykis, jei norėtumėte naudoti prieraišą.

<a class = "uždaryti" href = "#" > × </a>  

Pagalbinės klasės

Paprastos, tikslingos pamokos, skirtos nedideliems ekrano ar elgesio patobulinimams.

.traukite į kairę

Nuplaukite elementą į kairę

klasė = "traukite į kairę"

. traukti - kairėn {
  plūdė : kairė ;
}

.traukite dešinėn

Paslinkite elementą į dešinę

klasė = "traukite į dešinę"

. traukti - dešinėn {
  plūdė : dešinė ;
}

.nutildyta

Pakeiskite elemento spalvą į#999

klasė = "nutildyta"

. nutildytas {
  spalva : #999; 
}

.Paaiškink

Išvalykite floatbet kurį elementą

klasė = "išvalyti"

. clearfix {
  * priartinimas : 1 ; 
  &: prieš ,
  &: po {
    ekranas : stalas ;
    turinys : "" ; 
  }
  &: po {
    aišku : abu ;
  }
}