Shembull

Meny e ndërrueshme, kontekstuale për shfaqjen e listave të lidhjeve. Bërë ndërveprues me shtojcën me zbritje JavaScript .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Veprimi </a></li>  
  <li><a tabindex = "-1" href = "#" > Një veprim tjetër </a></li>  
  <li><a tabindex = "-1" href = "#" > Diçka tjetër këtu </a></li>  
  <li class = "ndarës" ></li> 
  <li><a tabindex = "-1" href = "#" > Lidhje e ndarë </a></li>  
</ul>

Markup

Duke parë vetëm menunë rënëse, këtu është HTML-ja e kërkuar. Ju duhet të mbështillni këmbëzën e listës së lëshimit dhe menynë rënëse brenda .dropdown, ose një element tjetër që deklaron position: relative;. Pastaj thjesht krijoni menunë.

<div class = "dropdown" > 
  <!-- Lidhja ose butoni për të ndryshuar listën rënëse -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > Veprimi </a></li>  
    <li><a tabindex = "-1" href = "#" > Një veprim tjetër </a></li>  
    <li><a tabindex = "-1" href = "#" > Diçka tjetër këtu </a></li>  
    <li class = "ndarës" ></li> 
    <li><a tabindex = "-1" href = "#" > Lidhje e ndarë </a></li>  
  </ul>
</div>

Opsione

Lidhni menutë në të djathtë dhe shtoni nivele shtesë të zbritjeve.

Përafrimi i menyve

Shtoni .pull-rightnë a .dropdown-menunë të djathtë, rreshtoni menunë rënëse.

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

Opsionet e menysë të çaktivizuara

Shto .disablednë a <li>në listën rënëse për të çaktivizuar lidhjen.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Lidhje e rregullt </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Lidhja e çaktivizuar </a></li>   
  <li><a tabindex = "-1" href = "#" > Një lidhje tjetër </a></li>  
</ul>

Nënmenutë në zbritje

Shtoni një nivel shtesë të menyve rënëse, që shfaqen në lëvizje si ato të OS X, me disa shtesa të thjeshta të shënimit. Shto .dropdown-submenute ndonjë linë një menu ekzistuese rënëse për stilim automatik.

E paracaktuar

Dropup

Nënmenyja majtas

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "nënmenuja rënëse" > 
    <a tabindex = "-1" href = "#" > Opsione të tjera </a>  
    <ul class = "meny-dropdown" > 
      ...
    </ul>
  </li>
</ul>

Shembuj

Dy opsione bazë, së bashku me dy variacione më specifike.

Grupi me një buton të vetëm

Mbështillni një seri butonash me .btnnë .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Majtas </button> 
  <button class = "btn" > Mesme </button> 
  <button class = "btn" > Djathtas </button> 
</div>

Grupe të shumta butonash

Kombinoni grupe <div class="btn-group">në një <div class="btn-toolbar">për komponentë më komplekse.

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

Grupet vertikale të butonave

Bëni që një grup butonash të shfaqen vertikalisht dhe jo horizontalisht.

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

Kutia e kontrollit dhe shijet e radios

Grupet e butonave mund të funksionojnë gjithashtu si radio, ku vetëm një buton mund të jetë aktiv, ose kuti zgjedhjeje, ku çdo numër butonash mund të jetë aktiv. Shikoni dokumentet JavaScript për këtë.

Dropdowns në grupet e butonave

Kokat lart!Butonat me zbritje duhet të mbështillen në mënyrë individuale .btn-groupbrenda një .btn-toolbarpër interpretim të duhur.

Vështrim i përgjithshëm dhe shembuj

Përdorni çdo buton për të aktivizuar një menu dropdown duke e vendosur atë brenda një .btn-groupdhe duke siguruar shënimin e duhur të menusë.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Veprimi
    <span class = "caret" ></span> 
  </a>
  <ul class = "meny-dropdown" > 
    <!-- lidhjet e menusë rënëse -->
  </ul>
</div>

Punon me të gjitha madhësitë e butonave

Zbritja e butonave funksionon në çdo madhësi: .btn-large, .btn-small, ose .btn-mini.

Kërkon JavaScript

Zbritja e butonave kërkon që të funksionojë shtojca e lëshimit Bootstrap .

Në disa raste - si celulari - menytë rënëse do të shtrihen jashtë portit të shikimit. Ju duhet ta zgjidhni shtrirjen me dorë ose me JavaScript të personalizuar.

Zbritje të butonave të ndarjes

Duke u bazuar në stilet dhe shënjimin e grupit të butonave, ne mund të krijojmë lehtësisht një buton ndarjeje. Butonat e ndarjes paraqesin një veprim standard në të majtë dhe një ndryshim në rënie në të djathtë me lidhje kontekstuale.

<div class = "btn-group" > 
  <button class = "btn" > Veprimi </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "meny-dropdown" > 
    <!-- lidhjet e menusë rënëse -->
  </ul>
</div>

Përmasat

Përdorni klasat shtesë të butonave .btn-mini, .btn-smallose .btn-largepër madhësinë.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Veprimi </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "meny-dropdown" > 
    <!-- lidhjet e menusë rënëse -->
  </ul>
</div>

Menytë rënëse

Menytë rënëse mund të ndërrohen gjithashtu nga poshtë lart duke shtuar një klasë të vetme në prindin e menjëhershëm të .dropdown-menu. Do të kthejë drejtimin e .caretmenusë dhe do të ripozicionojë vetë menunë për të lëvizur nga poshtë lart në vend të lart poshtë.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "meny-dropdown" > 
    <!-- lidhjet e menusë rënëse -->
  </ul>
</div>

Parazgjedhjet me peshë të lehtë I njëjti shënim, klasa të ndryshme

Të gjithë komponentët e navigimit këtu - skedat, pilulat dhe listat - ndajnë të njëjtin shënim bazë dhe stile përmes .navklasës.

Skedat bazë

Merrni një <ul>lidhje të rregullt dhe shtoni .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "aktiv" > 
    <a href = "#" > Faqja kryesore </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Pilulat bazë

Merrni të njëjtin HTML, por përdorni .nav-pillsnë vend të kësaj:

<ul class = "nav nav-pills" > 
  <li class = "aktiv" > 
    <a href = "#" > Faqja kryesore </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Gjendja me aftësi të kufizuara

Për çdo komponent navigimi (skedat, pilulat ose listën), shtoni .disabledpër lidhje gri dhe pa efekte pezullimi . Megjithatë, lidhjet do të mbeten të klikueshme, nëse nuk e hiqni hrefatributin. Përndryshe, ju mund të zbatoni JavaScript të personalizuar për të parandaluar ato klikime.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > Faqja kryesore </a></li>  
  ...
</ul>

Rreshtimi i komponentëve

Për të lidhur lidhjet e navigimit, përdorni klasat e shërbimeve .pull-leftose . .pull-rightTë dyja klasat do të shtojnë një float CSS në drejtimin e specifikuar.

Stackable

Meqenëse skedat dhe pilulat janë horizontale si parazgjedhje, thjesht shtoni një klasë të dytë, .nav-stacked, për t'i bërë ato të duken të grumbulluara vertikalisht.

Skeda të grumbulluara

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

Pilula të grumbulluara

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

Dropdowns

Shtoni menytë rënëse me pak HTML shtesë dhe shtojcën JavaScript me zbritje .

Skedat me zbritje

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "meny-dropdown" > 
      <!-- lidhje -->
    </ul>
  </li>
</ul>

Pilula me pika

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Dropdown
        <b class = "caret" ></b> 
      </a>
    <ul class = "meny-dropdown" > 
      <!-- lidhje -->
    </ul>
  </li>
</ul>

Listat Nav

Një mënyrë e thjeshtë dhe e lehtë për të ndërtuar grupe lidhjesh navigimi me tituj opsionalë. Ato përdoren më së miri në shiritat anësor si Finder në OS X.

Shembull i listës së navigimeve

Merrni një listë lidhjesh dhe shtoni class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Kreu i listës </li> 
  <li class = "active" ><a href = "#" > Faqja kryesore </a></li>  
  <li><a href = "#" > Biblioteka </a></li> 
  ...
</ul>

shënimPër fole brenda një liste navigimi, përfshini class="nav nav-list"në çdo të ndërthurur <ul>.

Ndarëse horizontale

Shtoni një ndarës horizontal duke krijuar një artikull bosh të listës me klasën .divider, si kjo:

<ul class = "nav nav-list" > 
  ...
  <li class = "ndarës" ></li> 
  ...
</ul>

Navigacion me tabela

Jepni skedat tuaja në jetë me një shtesë të thjeshtë për të ndërruar përmbajtjen përmes skedave. Bootstrap integron skedat e tabelave në katër stile: sipër (parazgjedhur), djathtas, poshtë dhe majtas.

Shembull me tabela

Për t'i bërë skedat me skeda, krijoni një .tab-paneID unike për çdo skedë dhe mbështillini ato në .tab-content.

Unë jam në seksionin 1.

Përshëndetje, unë jam në seksionin 2.

Çfarë ndodh vajza, ky është seksioni 3.

<div class = "tabable" > <!-- Kërkohet vetëm për skedat majtas/djathtas -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Seksioni 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Seksioni 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane aktive" id = "tab1" >  
      <p> Unë jam në seksionin 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Mirë, jam në seksionin 2. </p>
    </div>
  </div>
</div>

Zbehet në skeda

Për të zbehur skedat, shtoni .fadenë secilën .tab-pane.

Kërkon shtojcën jQuery

Të gjitha skedat me tabela mundësohen nga shtojca jonë e lehtë jQuery. Lexoni më shumë se si t'i jepni jetë skedave me tabela në faqen e dokumenteve JavaScript .

Tableta në çdo drejtim

Skedat në fund

Kthejeni rendin e HTML dhe shtoni një klasë për të vendosur skedat në fund.

Unë jam në seksionin A.

Përshëndetje, unë jam në seksionin B.

Çfarë ndodh vajza, ky është seksioni C.

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

Skedat në të majtë

Ndërroni klasën për të vendosur skeda në të majtë.

Unë jam në seksionin A.

Përshëndetje, unë jam në seksionin B.

Çfarë ndodh vajza, ky është seksioni C.

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

Skedat në të djathtë

Ndërroni klasën për të vendosur skeda në të djathtë.

Unë jam në seksionin A.

Përshëndetje, unë jam në seksionin B.

Çfarë ndodh vajza, ky është seksioni C.

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

Shiriti bazë i navigimit

Për të filluar, shiritat e navigimit janë statik (jo të fiksuar në krye) dhe përfshijnë mbështetje për emrin e projektit dhe navigimin bazë. Vendosni një kudo brenda një .container, e cila përcakton gjerësinë e faqes tuaj dhe përmbajtjes.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Titulli </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Faqja kryesore </a></li>  
      <li><a href = "#" > Lidhja </a></li> 
      <li><a href = "#" > Lidhja </a></li> 
    </ul>
  </div>
</div>

Komponentët e Navbarit

Markë

Një lidhje e thjeshtë për të treguar emrin e markës ose projektit tuaj kërkon vetëm një etiketë ankorimi.

<a class = "brand" href = "#" > Emri i projektit </a>

Lidhjet e navigimit

Artikujt navigues janë të thjeshtë për t'u shtuar nëpërmjet listave të pa renditura.

<ul class = "nav" > 
  <li class = "aktiv" > 
    <a href = "#" > Faqja kryesore </a> 
  </li>
  <li><a href = "#" > Lidhja </a></li> 
  <li><a href = "#" > Lidhja </a></li> 
</ul>

Mund të shtoni lehtësisht ndarës në lidhjet tuaja naviguese me një artikull bosh të listës dhe një klasë të thjeshtë. Thjesht shtoni këtë midis lidhjeve:

<ul class = "nav" > 
  ...
  <li class = "ndarës-vertikal" </li> 
  ...
</ul>

Format

Për të stiluar dhe pozicionuar siç duhet një formë brenda shiritit të navigimit, shtoni klasat e duhura siç tregohet më poshtë. Për një formë të paracaktuar, përfshini .navbar-formose .pull-leftose .pull-rightpër ta rreshtuar siç duhet.

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

Formulari i kërkimit

Për një formë kërkimi më të personalizuar, shtoni .navbar-searchnë formdhe .search-querynë hyrjen për stile të specializuara në shiritin e navigimit.

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

Rreshtimi i komponentëve

Lidhni lidhjet e navigimit, formularin e kërkimit ose tekstin, përdorni klasat e shërbimeve .pull-leftose . .pull-rightTë dyja klasat do të shtojnë një float CSS në drejtimin e specifikuar.

Përdorimi i pikave me rënie

Shtoni skedarë me zbritje dhe zbritje në navigacion me pak shënim dhe shtojcën JavaScript me zbritje .

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

Vizitoni dokumentacionin e listës me zbritje të JavaScript për më shumë shënime dhe informacione mbi listën e thirrjeve.

Teksti

Mbështillni vargjet e tekstit në një element me .navbar-text, zakonisht në një <p>etiketë për drejtimin dhe ngjyrën e duhur.

Variacione opsionale të ekranit

Fiksoni shiritin e navigimit në krye ose në fund të portës së pamjes me një klasë shtesë në ndarjen më të jashtme, .navbar.

Fiks në krye

Shtoni .navbar-fixed-topdhe mbani mend të llogarisni zonën e fshehur nën të duke shtuar të paktën 40 px paddingnë <body>. Sigurohuni që ta shtoni këtë pas CSS-së kryesore të Bootstrap dhe përpara CSS-së opsionale të përgjegjshme.

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

Fiksuar në fund

Shtoni .navbar-fixed-bottomnë vend të kësaj.

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

Shiriti i navigimit të lartë statik

Krijo një shirit navigimi me gjerësi të plotë që largohet me faqen duke shtuar .navbar-static-top. Ndryshe nga .navbar-fixed-topklasa, nuk keni nevojë të ndryshoni asnjë mbushje në body.

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

Shiriti navigues i përgjegjshëm

Për të zbatuar një shirit navigues të përgjegjshëm në kolaps, mbështillni përmbajtjen e shiritit tuaj navigues në një div që përmban, .nav-collapse.collapsedhe shtoni butonin e ndërrimit të shiritit të navigimit, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "enë" > 
 
      <!-- .btn-navbar përdoret si çelës për përmbajtjen e shiritit të palosur -->
      <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>
 
      <!-- Sigurohuni që ta lini markën atje nëse dëshironi që ajo të shfaqet -->
      <a class = "brand" href = "#" > Emri i projektit </a>  
 
      <!-- Gjithçka që dëshironi të fshihet në 940 px ose më pak, vendoseni këtu -->
      <div class = "nav-collapse kolaps" > 
        <!-- .nav, .navbar-search, .navbar-form, etj -->
      </div>
 
    </div>
  </div>
</div>

Kokat lart! Shiriti navigues i përgjegjshëm kërkon shtojcën e kolapsit dhe skedarin reagues Bootstrap CSS .

Variacion i përmbysur

Ndryshoni pamjen e shiritit të navigimit duke shtuar .navbar-inverse.

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

Shembuj

Një shembull i vetëm i treguar pasi mund të shfaqet në shumë faqe.

<ul class = "thërrim buke" > 
  <li><a href = "#" > Faqja kryesore </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Biblioteka </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Të dhënat </li> 
</ul>

Faqerojtje standarde

Faqerojtje e thjeshtë e frymëzuar nga Rdio, e shkëlqyeshme për aplikacionet dhe rezultatet e kërkimit. Blloku i madh është i vështirë për t'u humbur, lehtësisht i shkallëzueshëm dhe ofron zona të mëdha klikimesh.

<div class = "faqezim" > 
  <ul>
    <li><a href = "#" > E mëparshme </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 = "#" > Tjetra </a></li> 
  </ul>
</div>

Opsione

Gjendjet me aftësi të kufizuara dhe aktive

Lidhjet janë të personalizueshme për rrethana të ndryshme. Përdorni .disabledpër lidhje të paklikueshme dhe .activepër të treguar faqen aktuale.

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

Mund të ndërroni opsionalisht ankorat aktive ose të paaftë për hapje për të hequr funksionalitetin e klikimeve duke ruajtur stilet e synuara.

<div class = "faqezim" > 
  <ul>
    <li class = "me aftësi të kufizuara" ><span> « </span></li> 
    <li class = "aktiv" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Përmasat

Dëshironi faqezim më të madh apo më të vogël? Shto .pagination-large, .pagination-smallose .pagination-minipër madhësi shtesë.

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

Radhitje

Shtoni një nga dy klasat opsionale për të ndryshuar shtrirjen e lidhjeve të faqes: .pagination-centereddhe .pagination-right.

<div class = "faqesimi në qendër të faqes" > 
  ...
</div>

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

Pager

Lidhje të shpejta të mëparshme dhe të ardhshme për zbatime të thjeshta të faqes me shënime dhe stile të lehta. Është i shkëlqyeshëm për sajte të thjeshta si blogje ose revista.

Shembulli i parazgjedhur

Si parazgjedhje, lidhjet përqendrojnë pager-in.

<ul class = "pager" > 
  <li><a href = "#" > E mëparshme </a></li> 
  <li><a href = "#" > Tjetra </a></li> 
</ul>

Lidhjet e rreshtuara

Përndryshe, ju mund të rreshtoni secilën lidhje në anët:

<ul class = "pager" > 
  <li class = "e mëparshme" > 
    <a href = "#" > ← Më i vjetër </a> 
  </li>
  <li class = "tjetër" > 
    <a href = "#" > Më të reja → </a> 
  </li>
</ul>

Gjendja opsionale e çaktivizuar

Lidhjet e Pager gjithashtu përdorin .disabledklasën e përgjithshme të shërbimeve nga pagination.

<ul class = "pager" > 
  <li class = "e mëparshme me aftësi të kufizuara" > 
    <a href = "#" > ← Më i vjetër </a> 
  </li>
  ...
</ul>

Etiketat

Etiketat	Markup
E paracaktuar	`<span class="label">Default</span>`
Sukses	`<span class="label label-success">Success</span>`
Paralajmërim	`<span class="label label-warning">Warning</span>`
E rëndësishme	`<span class="label label-important">Important</span>`
Informacion	`<span class="label label-info">Info</span>`
Anasjelltas	`<span class="label label-inverse">Inverse</span>`

Shenjat

Emri	Shembull	Markup
E paracaktuar	1	`<span class="badge">1</span>`
Sukses	2	`<span class="badge badge-success">2</span>`
Paralajmërim	4	`<span class="badge badge-warning">4</span>`
E rëndësishme	6	`<span class="badge badge-important">6</span>`
Informacion	8	`<span class="badge badge-info">8</span>`
Anasjelltas	10	`<span class="badge badge-inverse">10</span>`

Lehtë e palosshme

Për zbatim të lehtë, etiketat dhe distinktivët thjesht do të shemben (nëpërmjet :emptypërzgjedhësit të CSS) kur nuk ekziston asnjë përmbajtje brenda.

Njësia heroike

Një komponent i lehtë dhe fleksibël për të shfaqur përmbajtjen kryesore në faqen tuaj. Ajo funksionon mirë në faqet e marketingut dhe përmbajtjes së rëndë.

Përshendetje Botë!

Kjo është një njësi e thjeshtë heroike, një komponent i thjeshtë i stilit jumbotron për të tërhequr vëmendje shtesë ndaj përmbajtjes ose informacionit të paraqitur.

Mëso më shumë

<div class = "hero-njësi" > 
  <h1> Titulli </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primare btn-large" > 
      Mëso më shumë
    </a>
  </p>
</div>

Kreu i faqes

Një predhë e thjeshtë për h1të ndarë dhe segmentuar në mënyrë të përshtatshme seksionet e përmbajtjes në një faqe. Mund të përdorë elementin h1e paracaktuar small, si dhe shumicën e komponentëve të tjerë (me stile shtesë).

<div class = "page-header" > 
  <h1> Shembull i kokës së faqes <small> Nëntekst për kokën </small></h1>
</div>

Miniaturat e parazgjedhura

Si parazgjedhje, miniaturat e Bootstrap janë krijuar për të shfaqur imazhe të lidhura me shënjimin minimal të kërkuar.

Shumë i personalizueshëm

Me pak shënim shtesë, është e mundur të shtoni çdo lloj përmbajtjeje HTML si tituj, paragrafë ose butona në miniaturë.

Etiketa e miniaturës

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

Veprimi Veprimi
Etiketa e miniaturës

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

Veprimi Veprimi
Etiketa e miniaturës

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

Veprimi Veprimi

Pse të përdorni miniaturë

Miniaturat (më parë .media-gridderi në versionin 1.4) janë të shkëlqyera për rrjetet e fotografive ose videove, rezultatet e kërkimit të imazheve, produktet me pakicë, portofolet dhe shumë më tepër. Ato mund të jenë lidhje ose përmbajtje statike.

Shënim i thjeshtë, fleksibël

Shënimi i miniaturës është i thjeshtë - ulme çdo numër lielementësh është gjithçka që kërkohet. Është gjithashtu super fleksibël, duke lejuar çdo lloj përmbajtjeje me vetëm pak më shumë shënime për të mbështjellë përmbajtjen tuaj.

Përdor madhësitë e kolonave të rrjetit

Së fundi, komponenti i miniaturave përdor klasat ekzistuese të sistemit të rrjetit - si .span2ose .span3- për kontrollin e dimensioneve të miniaturave.

Markup

Siç u përmend më parë, shënimi i kërkuar për miniaturat është i lehtë dhe i drejtpërdrejtë. Ja një vështrim në konfigurimin e paracaktuar për imazhet e lidhura :

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

Për përmbajtjen e personalizuar HTML në miniaturë, shënimi ndryshon pak. Për të lejuar përmbajtjen e nivelit të bllokut kudo, ne e ndërrojmë atë <a>me një <div>si më poshtë:

<ul class = "miniaturë" > 
  <li class = "span4" > 
    <div class = "miniaturë" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Etiketa e miniaturës </h3>
      <p> Titulli i miniaturës... </p>
    </div>
  </li>
  ...
</ul>

Më shumë shembuj

Eksploroni të gjitha opsionet tuaja me klasat e ndryshme të rrjetit të disponueshme për ju. Ju gjithashtu mund të përzieni dhe përshtatni madhësi të ndryshme.

Sinjalizim i parazgjedhur

Mbështillni çdo tekst dhe një buton opsional të heqjes .alertpër një mesazh paralajmërues bazë.

Paralajmërim! Kontrolloni më mirë veten, nuk po dukeni shumë mirë.

<div class = "alarm" > 
  <button type = "button" class = "mbyll" data-dismiss = "alarm" > × </button>   
  <strong> Paralajmërim! </strong> Kontrolloni më mirë veten, nuk po dukeni shumë mirë.
</div>

Hiq butonat

Shfletuesit Mobile Safari dhe Mobile Opera, përveç data-dismiss="alert"atributit, kërkojnë një href="#"për heqjen e sinjalizimeve kur përdorin një <a>etiketë.

<a href = "#" class = "mbyll" data-dismiss = "alarm" > × </a>

Përndryshe, mund të përdorni një <button>element me atributin e të dhënave, të cilin ne kemi zgjedhur ta bëjmë për dokumentet tona. Kur përdorni <button>, ju duhet të përfshini type="button"ose formularët tuaj mund të mos dorëzohen.

<button type = "button" class = "mbyll" data-dismiss = "alarm" > × </button>

Hiq sinjalizimet nëpërmjet JavaScript

Përdorni shtesën e alarmeve jQuery për heqjen e shpejtë dhe të lehtë të sinjalizimeve.

Opsione

Për mesazhe më të gjata, rrisni mbushjen në pjesën e sipërme dhe të poshtme të mbështjellësit të sinjalizimeve duke shtuar .alert-block.

Paralajmërim!

Kontrolloni më mirë veten, nuk po dukeni shumë mirë. Nulla vitae elit libero, një pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

<div class = "alert-block" > 
  <button type = "button" class = "mbyll" data-dismiss = "alarm" > × </button>   
  <h4> Paralajmërim! </h4>
  Kontrolloni më mirë veten, nuk jeni...
</div>

Alternativat kontekstuale

Shto klasa opsionale për të ndryshuar konotacionin e një sinjalizimi.

Gabim apo rrezik

Dreqin! Ndrysho disa gjëra dhe provo të dorëzosh sërish.

<div class = "gabim alarmi i alarmit" > 
  ...
</div>

Sukses

Te lumte! Ju e lexoni me sukses këtë mesazh të rëndësishëm alarmi.

<div class = "suksesi i alarmit" > 
  ...
</div>

Informacion

Kokat lart! Ky alarm kërkon vëmendjen tuaj, por nuk është shumë i rëndësishëm.

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

Shembuj dhe shënimi

bazë

Shiriti i parazgjedhur i përparimit me një gradient vertikal.

<div class = "progres" > 
  <div class = "bar" style = " gjerësia : 60 %; " </div>   
</div>

Me vija

Përdor një gradient për të krijuar një efekt me vija. Nuk disponohet në IE7-8.

<div class = "progres progres-striped" > 
  <div class = "bar" style = " gjerësia : 20 %; " </div>   
</div>

I animuar

Shtoni .activenë .progress-stripedpër të animuar vijat nga e djathta në të majtë. Nuk disponohet në të gjitha versionet e IE.

<div class = "progres progres-striped aktiv" > 
  <div class = "bar" style = " gjerësia : 40 %; " </div>   
</div>

Të grumbulluara

Vendosni shufra të shumta në të njëjtën .progresspër t'i grumbulluar ato.

<div class = "progres" > 
  <div class = "bar bar-success" style = " gjerësia : 35 %; " ></div>   
  <div class = "bar bar-warning" style = " gjerësia : 20 %; " </div>   
  <div class = "bar bar-danger" style = " gjerësia : 10 %; " </div>   
</div>

Opsione

Ngjyra shtesë

Shiritat e progresit përdorin disa nga të njëjtin buton dhe klasa alarmi për stile të qëndrueshme.

<div class = "progres progres-info" > 
  <div class = "bar" style = " gjerësia : 20 % " ></div>   
</div>
<div class = "progres progres-sukses" > 
  <div class = "bar" style = " gjerësia : 40 % " ></div>   
</div>
<div class = "progres-paralajmërim" > 
  <div class = "bar" style = " gjerësia : 60 % " ></div>   
</div>
<div class = "progres progres-rrezik" > 
  <div class = "bar" style = " gjerësia : 80 % " ></div>   
</div>

Shufra me vija

Ngjashëm me ngjyrat e forta, ne kemi shirita të ndryshëm të përparimit me vija.

<div class = "progress progress-info progress-striped" > 
  <div class = "bar" style = " gjerësia : 20 % " ></div>   
</div>
<div class = "progres progres-sukses progres-striped" > 
  <div class = "bar" style = " gjerësia : 40 % " ></div>   
</div>
<div class = "progres progres-paralajmërim progresi-striped" > 
  <div class = "bar" style = " gjerësia : 60 % " ></div>   
</div>
<div class = "progres progres-risk progres-striped" > 
  <div class = "bar" style = " gjerësia : 80 % " ></div>   
</div>

Mbështetja e shfletuesit

Shiritat e progresit përdorin gradientët, tranzicionet dhe animacionet CSS3 për të arritur të gjitha efektet e tyre. Këto veçori nuk mbështeten në IE7-9 ose në versionet më të vjetra të Firefox-it.

Versionet më të hershme se Internet Explorer 10 dhe Opera 12 nuk mbështesin animacione.

Stilet abstrakte të objekteve për ndërtimin e llojeve të ndryshme të komponentëve (si komentet në blog, Tweet, etj) që paraqesin një imazh të rreshtuar majtas ose djathtas së bashku me përmbajtjen tekstuale.

Shembulli i parazgjedhur

Mediat e parazgjedhura lejojnë të notosh një objekt mediatik (imazhe, video, audio) në të majtë ose në të djathtë të një blloku të përmbajtjes.

Titulli i medias

Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis në faucibus.

Titulli i medias

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-trup" > 
    <h4 class = "media-heading" > Titulli i medias </h4> 
    ...
 
    <!-- Objekt mediatik i mbivendosur -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Lista e mediave

Me pak shënim shtesë, mund të përdorni media brenda listës (e dobishme për temat e komenteve ose listat e artikujve).

Titulli i medias

Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Titulli i medias së mbivendosur
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Titulli i medias së mbivendosur
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Titulli i medias së mbivendosur
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Titulli i medias
Cras sit amet nibh libero, in gravida nulla. Nuk do të thotë se nuk do të jetë e mundur. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class = "media-lista" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-trup" > 
      <h4 class = "media-heading" > Titulli i medias </h4> 
      ...
 
      <!-- Objekt mediatik i mbivendosur -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Puset

Përdorni pusin si një efekt të thjeshtë në një element për t'i dhënë atij një efekt të futur.

Shiko, unë jam në një pus!

<div class = "mirë" > 
  ...
</div>

Klasat me dëshirë

Kontrolloni mbushjen dhe qoshet e rrumbullakosura me dy klasa modifikuese opsionale.

Shiko, unë jam në një pus!

<div class = "mirë-mirë i madh" > 
  ...
</div>

Shiko, unë jam në një pus!

<div class = "mirë e vogël" > 
  ...
</div>

Ikona e mbylljes

Përdorni ikonën e përgjithshme të mbylljes për të hequr përmbajtjen si modalet dhe sinjalizimet.

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

Pajisjet iOS kërkojnë një href="#"ngjarje për klikim nëse preferoni të përdorni një spirancë.

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

Klasat ndihmëse

Klasa të thjeshta, të fokusuara për ndryshime të vogla të paraqitjes ose sjelljes.

.tërheq-majtas

Fluturoni një element majtas

class = "tërheq majtas"

. tërheq - majtas {
  noton : majtas ;
}

.tërheq-djathtas

Fluturoni një element djathtas

class = "tërheq djathtas"

. tërheq - djathtas {
  noton : djathtas ;
}

.e heshtur

Ndrysho ngjyrën e një elementi në#999

klasa = "e heshtur"

. i heshtur {
  ngjyra : #999; 
}

.sqaroj

Pastroni floatçdo element

class = "i qartësuar"

. zgjidh {
  * zmadhimi : 1 ; 
  &: më parë ,
  &: pas {
    shfaqja : tabela ;
    përmbajtja : "" ; 
  }
  &: pas {
    qartë : të dyja ;
  }
}

Menytë rënëse

Shembull

Markup

Opsione

Përafrimi i menyve

Opsionet e menysë të çaktivizuara

Nënmenutë në zbritje

Grupet e butonave

Shembuj

Grupi me një buton të vetëm

Grupe të shumta butonash

Grupet vertikale të butonave

Kutia e kontrollit dhe shijet e radios

Dropdowns në grupet e butonave

Menytë e lëshimit të butonave

Vështrim i përgjithshëm dhe shembuj

Punon me të gjitha madhësitë e butonave

Kërkon JavaScript

Zbritje të butonave të ndarjes

Përmasat

Menytë rënëse

Nav: skedat, pilulat dhe listat

Parazgjedhjet me peshë të lehtë I njëjti shënim, klasa të ndryshme

Skedat bazë

Pilulat bazë

Gjendja me aftësi të kufizuara

Rreshtimi i komponentëve

Stackable

Skeda të grumbulluara

Pilula të grumbulluara

Dropdowns

Skedat me zbritje

Pilula me pika

Listat Nav

Shembull i listës së navigimeve

Ndarëse horizontale

Navigacion me tabela

Shembull me tabela

Zbehet në skeda

Kërkon shtojcën jQuery

Tableta në çdo drejtim

Skedat në fund

Skedat në të majtë

Skedat në të djathtë

Navbar

Shiriti bazë i navigimit

Komponentët e Navbarit

Markë

Lidhjet e navigimit

Format

Formulari i kërkimit

Rreshtimi i komponentëve

Përdorimi i pikave me rënie

Teksti

Variacione opsionale të ekranit

Fiks në krye

Fiksuar në fund

Shiriti i navigimit të lartë statik

Shiriti navigues i përgjegjshëm

Variacion i përmbysur

Therrime buke

Shembuj

Faqerojtje Dy opsione për faqosje përmes përmbajtjes

Faqerojtje standarde

Opsione

Gjendjet me aftësi të kufizuara dhe aktive

Përmasat

Radhitje

Pager

Shembulli i parazgjedhur

Lidhjet e rreshtuara

Gjendja opsionale e çaktivizuar

Etiketat dhe distinktivët

Etiketat

Shenjat

Lehtë e palosshme

Komponentët tipografikë

Njësia heroike

Përshendetje Botë!

Kreu i faqes