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.

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

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

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

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

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

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

Shenjat

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

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

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

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

<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

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

Sukses

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

Informacion

<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ë stivosur

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

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

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.

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

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

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

Klasat me dëshirë

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

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

<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 ;
  }
}