Chitsanzo

Zosintha, menyu wanthawi zonse kuti muwonetse mndandanda wamaulalo. Zapangidwa kuti zizitha kulumikizana ndi pulogalamu yowonjezera ya JavaScript .

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#"> Zochita </a></li >  
  <li><a tabindex = "-1" href = "#"> Zochita zina </a></li>  
  <li><a tabindex = "-1" href = "#" > Chinanso apa </a></li>  
  <li class = "divider" > </li> 
  <li><a tabindex = "-1" href = "#"> Ulalo wolekanitsidwa </a> </li>  
</ul>

Markup

Kuyang'ana pa menyu yotsitsa, nayi HTML yofunikira. Muyenera kukulunga choyambitsa chotsitsa ndi menyu yotsitsa mkati .dropdown, kapena chinthu china chomwe chimalengeza position: relative;. Ndiye ingopangani menyu.

<div class = "dropdown" > 
  <!-- Lumikizani kapena batani kuti musinthe kutsitsa -->
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#"> Zochita </a></li >  
    <li><a tabindex = "-1" href = "#"> Zochita zina </a></li>  
    <li><a tabindex = "-1" href = "#" > Chinanso apa </a></li>  
    <li class = "divider" > </li> 
    <li><a tabindex = "-1" href = "#"> Ulalo wolekanitsidwa </a> </li>  
  </ul>
</div>

Zosankha

Gwirizanitsani mindandanda kumanja ndikuwonjezeranso milingo yowonjezera yotsitsa.

Kusintha menyu

Onjezani .pull-rightku a .dropdown-menukulumikiza kumanja menyu yotsitsa.

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

Zosankha zamamenyu zomwe zayimitsidwa

Onjezani .disabledku <li>a potsitsa kuti mulepheretse ulalo.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#"> Ulalo wokhazikika </a> </li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#"> Ulalo wolemala </a></li >   
  <li><a tabindex = "-1" href = "#"> Ulalo wina </a></li>  
</ul>

Ma sub menus pa dropdowns

Onjezani mulingo wowonjezera wamamenyu otsitsa, omwe akuwoneka pa hover ngati a OS X, ndi zowonjezera zina zosavuta. Onjezani pazosankha .dropdown-submenuzilizonse lizomwe zilipo kuti mukongolere zokha.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#"> Zosankha zina </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Zitsanzo

Zosankha ziwiri zofunika, pamodzi ndi zina ziwiri zosiyana.

Gulu la batani limodzi

Manga mabatani angapo ndi .btnmu .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Kumanzere </ batani> 
  <button class = "btn" > Pakati </ batani> 
  <button class = "btn" > Kumanja </ batani> 
</div>

Magulu angapo mabatani

Phatikizani ma seti a <div class="btn-group">kukhala <div class="btn-toolbar">a zigawo zovuta kwambiri.

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

Magulu a batani oima

Pangani mabatani angapo kuti awoneke ngati atayikidwa molunjika osati mopingasa.

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

Checkbox ndi zokometsera wailesi

Magulu a mabatani amathanso kugwira ntchito ngati mawayilesi, pomwe batani limodzi lokha litha kukhala logwira, kapena mabokosi, pomwe mabatani angapo amatha kugwira ntchito. Onani zolemba za JavaScript za izo.

Zotsitsa m'magulu a batani

Mungodziwiratu!Mabatani okhala ndi madontho ayenera kukulungidwa payekhapayekha kuti aperekedwe .btn-groupmoyenera .btn-toolbar.

Mwachidule ndi zitsanzo

Gwiritsani ntchito batani lililonse kuti muyambitse menyu yotsitsa poyiyika mkati .btn-groupndikupereka zolembera zoyenera.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    Zochita
    <span class = "caret" > </span> 
  </a>
  <ul class = "dropdown-menu" > 
    <!-- maulalo a menyu otsika -->
  </ul>
</div>

Imagwira ntchito ndi mabatani onse

Mabatani otsitsa amagwira ntchito pakukula kulikonse: .btn-large, .btn-small, kapena .btn-mini.

Pamafunika JavaScript

Kutsitsa kwa mabatani kumafuna pulogalamu yowonjezera ya Bootstrap kuti igwire ntchito.

Nthawi zina, monga mafoni a m'manja-otsika, amatuluka kunja kwa malo owonera. Muyenera kukonza makonzedwewo pamanja kapena ndi JavaScript yokhazikika.

Kutsitsa kwa batani logawanika

Kumanga pamatayilo amagulu a batani ndi zolembera, titha kupanga batani logawanika mosavuta. Mabatani ogawanika amakhala ndi zochitika zokhazikika kumanzere ndikusintha kotsikira kumanja ndi maulalo amkati.

<div class = "btn-group" > 
  <button class = "btn" > Zochita </ ​​batani> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </span> 
  </ batani>
  <ul class = "dropdown-menu" > 
    <!-- maulalo a menyu otsika -->
  </ul>
</div>

Makulidwe

Gwiritsani ntchito makalasi owonjezera mabatani .btn-mini, .btn-small, kapena .btn-largekukula kwake.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Action </ batani> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </span> 
  </ batani>
  <ul class = "dropdown-menu" > 
    <!-- maulalo a menyu otsika -->
  </ul>
</div>

Ma menyu otsika

Ma menyu otsitsa amathanso kusinthidwa kuchokera pansi kupita mmwamba powonjezera kalasi imodzi kwa kholo lomwe la .dropdown-menu. Idzatembenuza njira .caretndikuyikanso menyu kuti isunthe kuchokera pansi kupita pamwamba m'malo mwa pamwamba pansi.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </ batani> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </span> 
  </ batani>
  <ul class = "dropdown-menu" > 
    <!-- maulalo a menyu otsika -->
  </ul>
</div>

Zosasintha zopepuka Kusindikiza komweko, magulu osiyanasiyana

Zonse zomwe zili pano - ma tabo, mapiritsi, ndi mindandanda - zimagawana zoyambira ndi masitaelo omwewo m'kalasi .nav.

Ma tabu oyambira

Tengani <ul>maulalo okhazikika ndikuwonjezera .nav-tabs:

<ul class = "nav-tabs" > 
  <li class = "active" > 
    <a href = "#"> Kwawo </a> _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Mapiritsi oyambira

Tengani HTML yomweyo, koma gwiritsani ntchito .nav-pills:

<ul class = "mapiritsi a nav-nav" > 
  <li class = "active" > 
    <a href = "#"> Kwawo </a> _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Dziko olumala

Pazigawo zilizonse za nav (ma tabu, mapiritsi, kapena mndandanda), onjezani maulalo otuwa ndipo palibe zotsatira .disabledza hover . Maulalo azikhala odina, komabe, pokhapokha mutachotsa href. Kapenanso, mutha kugwiritsa ntchito JavaScript kuti mupewe kudina uku.

<ul class = "mapiritsi a nav-nav" > 
  ...
  <li class = "disabled" > <a href = "#"> Kwawo </a></li>  
  ...
</ul>

Kulumikizana kwagawo

Kuti muyanjanitse maulalo a nav, gwiritsani .pull-leftntchito .pull-rightmakalasi ofunikira. Makalasi onsewa adzawonjezera kuyandama kwa CSS m'njira yomwe mwatchulidwa.

Stackable

Monga ma tabo ndi mapiritsi ali opingasa mwachisawawa, ingowonjezerani kalasi yachiwiri, .nav-stacked, kuti awoneke ngati atapachikidwa.

Ma tabu osungidwa

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

Mapiritsi osanjikizidwa

<ul class = "mapiritsi a nav nav-stacked" > 
  ...
</ul>

Zotsitsa

Onjezani mindandanda yotsitsa ndi HTML yowonjezera pang'ono ndi pulagi yotsitsa ya JavaScript .

Ma tabu okhala ndi zotsitsa

<ul class = "nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "kutsitsa"
       href = "#" >
        Tsitsa m'munsi
        <b class = "caret" > </b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- maulalo -->
    </ul>
  </li>
</ul>

Mapiritsi okhala ndi zotsitsa

<ul class = "mapiritsi a nav-nav" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "kutsitsa"
       href = "#" >
        Tsitsa m'munsi
        <b class = "caret" > </b> 
      </a>
    <ul class = "dropdown-menu" > 
      <!-- maulalo -->
    </ul>
  </li>
</ul>

Nav mndandanda

Njira yosavuta komanso yosavuta yopangira magulu a maulalo a nav okhala ndi mitu yosankha. Amagwiritsidwa ntchito bwino m'mbali mwazitsulo monga Finder mu OS X.

Chitsanzo nav list

Tengani maulalo ndikuwonjezera class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Mndandanda wamutu </li> 
  <li class = "active" > <a href = "#"> Kwawo </a></li>  
  <li><a href = "#"> Library </a> </li> 
  ...
</ul>

ZindikiraniPomanga zisa mkati mwa mndandanda wa nav, phatikizani class="nav nav-list"pa zisa zilizonse <ul>.

Zogawaniza zopingasa

Onjezani chogawa chopingasa popanga chinthu chamndandanda wopanda kanthu ndi kalasi .divider, monga:

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

Table nav

Bweretsani ma tabu anu kukhala ndi moyo ndi pulogalamu yowonjezera yosavuta kuti musinthe pakati pa zomwe zili ndi ma tabo. Bootstrap imaphatikiza ma tabo owoneka mu masitayelo anayi: pamwamba (zosasintha), kumanja, pansi, ndi kumanzere.

Table chitsanzo

Kuti ma tabo awoneke, pangani .tab-paneID yokhala ndi ma ID apadera pa tabu iliyonse ndikukulunga mu .tab-content.

<div class = "tabable" > <!-- Zofunikira pazokha zakumanzere / kumanja -->  
  <ul class = "nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab"> Gawo 1 </a></li >   
    <li><a href = "#tab2" data-toggle = "tab"> Gawo 2 </a></li >  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane yogwira" id = "tab1" >  
      <p> Ndili mu Gawo 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Moni, ndili mu Gawo 2. </p>
    </div>
  </div>
</div>

Kuzimiririka mu ma tabo

Kuti ma tabo azitha kuzimiririka, onjezani .fadechilichonse .tab-pane.

Pamafunika jQuery pulogalamu yowonjezera

Ma tabu onse owoneka amathandizidwa ndi plugin yathu yopepuka ya jQuery. Werengani zambiri zamomwe mungapangire ma tabable kukhala amoyo patsamba la JavaScript docs .

Table mbali iliyonse

Ma tabu pansi

Sinthani dongosolo la HTML ndikuwonjezera kalasi kuti muyike ma tabu pansi.

<div class = "ma tabu omwe ali pansipa" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav-tabs" > 
    ...
  </ul>
</div>

Ma tabu kumanzere

Sinthanitsani kalasi kuti muyike ma tabu kumanzere.

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

Ma tabu kumanja

Sinthanitsani kalasi kuti muyike ma tabu kumanja.

<div class = "tabtable tabo-kumanja" > 
  <ul class = "nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Basic navbar

Kuti ayambe, ma navbars amakhala osasunthika (osakhazikika pamwamba) ndipo amaphatikiza kuthandizira dzina la polojekiti komanso kusanja kofunikira. Ikani paliponse mkati mwa .container, zomwe zimayika m'lifupi mwa tsamba lanu ndi zomwe zili.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#"> Mutu </a> _  
    <ul class = "nav" > 
      <li class = "active" > <a href = "#"> Kwawo </a></li>  
      <li><a href = "#"> Link </a> </li> 
      <li><a href = "#"> Link </a> </li> 
    </ul>
  </div>
</div>

Zida za Navbar

Mtundu

Ulalo wosavuta wowonetsa mtundu wanu kapena dzina la pulojekiti yanu umangofunika chizindikiro cha nangula.

<a class = "brand" href = "#"> Dzina la polojekiti </a>  

Nav maulalo

Zinthu za Nav ndizosavuta kuwonjezera kudzera pamndandanda wosasankhidwa.

<ul class = "nav" > 
  <li class = "active" > 
    <a href = "#"> Kwawo </a> _ 
  </li>
  <li><a href = "#"> Link </a> </li> 
  <li><a href = "#"> Link </a> </li> 
</ul>

Mutha kuwonjezera zogawanitsa pamalumikizidwe anu a nav ndi mndandanda wopanda kanthu komanso kalasi yosavuta. Ingowonjezerani izi pakati pa maulalo:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" > </li> 
  ...
</ul>

Mafomu

Kuti masitayilo oyenera ndikuyika mawonekedwe mkati mwa navbar, onjezani makalasi oyenera monga momwe ziliri pansipa. Kwa fomu yokhazikika, phatikizani .navbar-formndi mwina .pull-leftkapena .pull-rightkuyigwirizanitsa bwino.

<form class = "navbar-form kukoka kumanzere" > 
  <input type = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Tumizani </ batani>  
</ fomu>

Fufuzani mawonekedwe

Kuti mupeze mawonekedwe osakira makonda, onjezani .navbar-searchku formndi .search-queryzolowetsa zamasitayilo apadera mu navbar.

<form class = "navbar-search kukoka kumanzere" > 
  <input type = "text" class = "search-query" placeholder = "Sakani" >   
</ fomu>

Kulumikizana kwagawo

Gwirizanitsani maulalo a nav, mawonekedwe osakira, kapena zolemba, gwiritsani .pull-leftntchito .pull-rightmakalasi ofunikira. Makalasi onsewa adzawonjezera kuyandama kwa CSS m'njira yomwe mwatchulidwa.

Kugwiritsa ntchito dropdowns

Onjezani zotsitsa ndi zotsitsa ku nav ndikuyika pang'ono ndi pulagi yotsitsa ya JavaScript .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"> _   
      Akaunti
      <b class = "caret" > </b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Pitani ku zolemba zotsitsa za JavaScript kuti mumve zambiri komanso zambiri zamayimba otsitsa.

Mawu

Mangirirani zingwe za mawu mu chinthu ndi .navbar-text, nthawi zambiri pa <p>tagi kuti muwonetsetse mayendedwe oyenera ndi mtundu.

Zosankha zowonetsera

Konzani navbar pamwamba kapena pansi pa malo owonera ndi kalasi yowonjezera pa div yakunja, .navbar.

Zokhazikika pamwamba

Onjezani .navbar-fixed-topndikukumbukira kuwerengera malo obisika pansi pake powonjezera osachepera 40px paddingku fayilo ya <body>. Onetsetsani kuti mwawonjezera izi pambuyo pa core Bootstrap CSS komanso musanasankhe CSS yomvera.

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

Zokhazikika mpaka pansi

Onjezani .navbar-fixed-bottomm'malo mwake.

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

Static top navbar

Pangani navbar yotalikirapo yomwe imachoka ndi tsambalo powonjezera .navbar-static-top. Mosiyana ndi .navbar-fixed-topkalasi, simuyenera kusintha padding pa body.

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

Navbar yomvera

Kuti mugwiritse ntchito navbar yomwe ikugwa, sungani zomwe zili mkati mwa navbar yomwe ili ndi div, .nav-collapse.collapse, ndikuwonjezera batani losintha la navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "chotengera" > 
 
      <!-- .btn-navbar imagwiritsidwa ntchito ngati kusintha kwa navbar zomwe zagwa -->
      <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>
 
      <!-- Onetsetsani kuti mwasiya chizindikirocho ngati mukufuna kuti chiwonetsedwe -->
      <a class = "brand" href = "#"> Dzina la polojekiti </a>  
 
      <!-- Chilichonse chomwe mukufuna chibisike pa 940px kapena kuchepera, chiyikeni mkati muno -->
      <div class = "nav-collapse collapse" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Kusintha kosinthika

Sinthani mawonekedwe a navbar powonjezera .navbar-inverse.

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

Zitsanzo

Chitsanzo chimodzi chikuwonetsedwa momwe chikhoza kuwonetsedwa pamasamba angapo.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Kwawo </a> <span class = "divider" > / </span></li>   
  <li><a href = "#"> Library </a> < span class = "divider" > / </span></li>   
  <li class = "active" > Deta </li> 
</ul>

Standard pagination

Kusindikiza kosavuta kouziridwa ndi Rdio, koyenera kwa mapulogalamu ndi zotsatira zosaka. Chotchinga chachikulu ndi chovuta kuphonya, chiwonjezeke mosavuta, ndipo chimapereka malo akulu odina.

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

Zosankha

Mayiko olumala komanso ogwira ntchito

Maulalo ndi makonda pamikhalidwe yosiyanasiyana. Gwiritsani .disabledntchito maulalo osadina .activendikuwonetsa tsamba lomwe lilipo.

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

Mutha kusinthanitsa ma nangula omwe akugwira ntchito kapena olemala kuti muchotse magwiridwe antchito ndikusunga masitayelo omwe mukufuna.

<div class = "pagination" > 
  <ul>
    <li kalasi = "olumala" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Makulidwe

Mukufuna zokhala zazikulu kapena zazing'ono? Onjezani .pagination-large, .pagination-small, kapena .pagination-minima size owonjezera.

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

Kuyanjanitsa

Onjezani limodzi mwamakalasi awiri osankha kuti musinthe masinthidwe amitundu: .pagination-centeredndi .pagination-right.

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

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

Peja

Maulalo am'mbuyomu komanso otsatirawa kuti mukhazikitse zosavuta zamitundu yokhala ndi zowunikira komanso masitayelo. Ndi yabwino kwa masamba osavuta monga mabulogu kapena magazini.

Chitsanzo chosasinthika

Mwachikhazikitso, pager centers maulalo.

<ul class = "pager" > 
  <li><a href = "#"> Yam'mbuyo </a> </li> 
  <li><a href = "#"> Kenako </a> </li> 
</ul>

Zogwirizana

Kapenanso, mutha kugwirizanitsa ulalo uliwonse kumbali:

<ul class = "pager" > 
  <li class = "previous" > 
    <a href = "#" > ← Zakale </a> 
  </li>
  <li class = "next" > 
    <a href = "#"> Zatsopano &rarr ; </a> 
  </li>
</ul>

Dziko lolumala ngati mukufuna

Maulalo a Pager amagwiritsanso .disabledntchito gulu lazambiri lazachikunja.

<ul class = "pager" > 
  <li class = "olemala kale" > 
    <a href = "#" > ← Zakale </a> 
  </li>
  ...
</ul>

Zolemba

Mabaji

Zosavuta kupunduka

Kuti mugwiritse ntchito mosavuta, zilembo ndi mabaji azingogwa (kudzera pa :emptychosankha cha CSS) ngati mulibe chilichonse mkati mwake.

Hero unit

Chigawo chopepuka, chosinthika kuti chiwonetse zomwe zili patsamba lanu. Zimagwira ntchito bwino pazamalonda komanso masamba olemera.

<div class = "hero-unit" > 
  <h1> Mutu </h1>
  <p> Tagline </p>
  <p>
    <a class = "btn btn-primary btn-large"> 
      Dziwani zambiri
    </a>
  </p>
</div>

Tsamba lamutu

Chipolopolo chosavuta kuti h1muthe kuyika moyenerera ndikugawa magawo omwe ali patsamba. Itha kugwiritsa ntchito h1's default small, element komanso zigawo zina zambiri (ndi masitaelo owonjezera).

<div class = "tsamba-mutu" > 
  <h1> Chitsanzo cha mutu watsamba <small> Mutu wapamutu </small></h1>
</div>

Zojambula zofikira

Mwachikhazikitso, zikwangwani za Bootstrap zidapangidwa kuti ziziwonetsa zithunzi zolumikizidwa zomwe zili ndi zolembera zochepa.

Kwambiri makonda

Powonjezera pang'ono, ndizotheka kuwonjezera mtundu uliwonse wazinthu za HTML monga mitu, ndime, kapena mabatani pazithunzi.

Chifukwa chiyani timagwiritsa ntchito tizithunzi

Tizithunzi (kale .media-gridmpaka v1.4) ndi zabwino kwa ma gridi a zithunzi kapena makanema, zotsatira zosaka zithunzi, malonda ogulitsa, ma portfolio, ndi zina zambiri. Zitha kukhala maulalo kapena zokhazikika.

Zosavuta, zosinthika

Zolemba pazithunzi ndizosavuta - ulzokhala ndi chiwerengero lichilichonse ndizomwe zimafunikira. Ndiwosinthika kwambiri, kulola mtundu uliwonse wazinthu zokhala ndi zolembera zochulukirapo kuti zimakutira zomwe muli nazo.

Amagwiritsa ntchito makulidwe a gridi

Pomaliza, gawo la tizithunzi limagwiritsa ntchito makalasi a gridi omwe alipo - monga .span2kapena .span3-kuwongolera kukula kwazithunzi.

Markup

Monga tanena kale, chizindikiro chofunikira pazithunzithunzi ndizopepuka komanso zowongoka. Nayi mawonekedwe okhazikika azithunzi zolumikizidwa :

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

Pazokonda za HTML pazithunzithunzi, zolembera zimasintha pang'ono. <a>Kuti tilole zomwe zili mu block level kulikonse, timasinthana <div>motere:

<ul class = "thumbnails" > 
  <li class = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "holder.js/300x200" alt = "" >  
      <h3> Chizindikiro chazithunzi </h3>
      <p> Mawu azithunzi... </p>
    </div>
  </li>
  ...
</ul>

Zitsanzo zambiri

Onani zosankha zanu zonse ndi magulu osiyanasiyana a gridi omwe mungapeze. Mukhozanso kusakaniza ndi ma size osiyana.

Chidziwitso chofikira

Manga mawu aliwonse ndi batani lochotsapo .alertkuti mumve chenjezo lofunikira.

<div class = "chenjezo" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </ batani>   
  <strong> Chenjezo! </strong> Chabwino fufuzani inu nokha, simukuwoneka bwino kwambiri.
</div>

Chotsani mabatani

Asakatuli a Mobile Safari ndi Mobile Opera, kuphatikiza data-dismiss="alert"pamalingaliro, amafunikira href="#"kuchotsedwa kwa zidziwitso mukamagwiritsa ntchito <a>tag.

<a href = "#" class = "close" data-dismiss = "chenjezo" > × </a>   

Kapenanso, mutha kugwiritsa ntchito <button>chinthu chomwe chili ndi mawonekedwe a data, chomwe tasankha kuchita pa ma docs athu. Mukamagwiritsa ntchito <button>, muyenera kuphatikiza type="button"kapena mafomu anu sangatumize.

<button type = "button" class = "close" data-dismiss = "alert" > × </ batani>   

Chotsani zidziwitso kudzera pa JavaScript

Gwiritsani ntchito zochenjeza za jQuery kuti muchotse zidziwitso mwachangu komanso mosavuta.

Zosankha

Kwa mauthenga ataliatali, onjezani zotchingira pamwamba ndi pansi pa chokulunga chochenjeza powonjezera .alert-block.

<div class = "alert alert-block" > 
  <button type = "button" class = "close" data-dismiss = "alert" > × </ batani>   
  <h4> Chenjezo! </ h4>
  Chabwino dziyeseni nokha, simuli ...
</div>

Njira zina zachitukuko

Onjezani makalasi osankha kuti musinthe tanthauzo la zidziwitso.

Cholakwika kapena ngozi

<div class = "cholakwika chochenjeza" > 
  ...
</div>

Kupambana

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

Zambiri

<div class = "chidziwitso chochenjeza" > 
  ...
</div>

Zitsanzo ndi zizindikiro

Basic

Njira yofikira yomwe ili ndi gradient yoyima.

<div class = "progress" > 
  <div class = "bar" style = " wide : 60 %; " ></div>   
</div>

Mizeremizere

Amagwiritsa ntchito gradient kuti apange mizeremizere. Palibe mu IE7-8.

<div class = "progress progress-striped" > 
  <div class = "bar" style = " wide : 20 %; " ></div>   
</div>

Makanema

Onjezani .activekuti .progress-stripedmupangitse mikwingwirima kumanja kupita kumanzere. Palibe m'mitundu yonse ya IE.

<div class = "kupita patsogolo kogwira ntchito" > 
  <div class = "bar" style = " wide : 40 %; " ></div>   
</div>

Zosungidwa

Ikani mipiringidzo yambiri mofanana .progresskuti muyike.

<div class = "progress" > 
  <div class = "bar-success" style = " wide : 35 %; " ></div>   
  <div class = "bar-warning" style = " wide : 20 %; " ></div>   
  <div class = "bar-danger" style = " wide : 10 %; " ></div>   
</div>

Zosankha

Mitundu yowonjezera

Mipiringidzo yopita patsogolo imagwiritsa ntchito mabatani omwewo ndi makalasi ochenjeza a masitayelo ofanana.

<div class = "progress progress-info" > 
  <div class = "bar" style = " wide : 20 % > </div>   
</div>
<div class = "kupita patsogolo-kupambana" > 
  <div class = "bar" style = " wide : 40 % > </div>   
</div>
<div class = "chenjezo lakupita patsogolo" > 
  <div class = "bar" style = " wide : 60 % " ></div>   
</div>
<div class = "kupita patsogolo-ngozi" > 
  <div class = "bar" style = " wide : 80 % > </div>   
</div>

Mipiringidzo yamizeremizere

Mofanana ndi mitundu yolimba, tili ndi mipiringidzo yamitundu yosiyanasiyana.

<div class = "kupita patsogolo-chidziwitso chakupita patsogolo" > 
  <div class = "bar" style = " wide : 20 % > </div>   
</div>
<div class = "kupita patsogolo-kupambana-kupambana-kupambana" > 
  <div class = "bar" style = " wide : 40 % > </div>   
</div>
<div class = "kupita patsogolo-chenjezo lakupita patsogolo-kukhazikika" > 
  <div class = "bar" style = " wide : 60 % " ></div>   
</div>
<div class = "kupita patsogolo-kutsogolo kwa ngozi" > 
  <div class = "bar" style = " wide : 80 % > </div>   
</div>

Thandizo la msakatuli

Mipiringidzo yopita patsogolo imagwiritsa ntchito ma gradients a CSS3, masinthidwe, ndi makanema ojambula kuti akwaniritse zotsatira zake zonse. Izi sizimathandizidwa mu IE7-9 kapena mitundu yakale ya Firefox.

Zomasulira zakale kuposa Internet Explorer 10 ndi Opera 12 sizigwirizana ndi makanema ojambula.

Masitayelo azinthu zopangira mitundu yosiyanasiyana yazigawo (monga ndemanga zamabulogu, ma Tweets, ndi zina) zomwe zimakhala ndi chithunzi cholowera kumanzere kapena kumanja motsatira zolemba.

Chitsanzo chosasinthika

Makanema osasinthika amalola kuyandama chinthu chapa media (zithunzi, makanema, zomvera) kumanzere kapena kumanja kwa block block.

Mutu wa media

Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus.

Mutu wa media

Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu faucibus.

Mutu wa media

Cras sit amet nibh libero, mu gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum mu vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis mu 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" > Mutu wankhani </h4> 
    ...
 
    <!-- Nested media object -->
    <div class = "media" > 
      ...
    </div>
  </div>
</div>

Media list

Ndizowonjezera pang'ono, mutha kugwiritsa ntchito media mkati mwa mndandanda (zothandiza pamindandanda yankhani kapena mindandanda).

<ul class = "media-list" > 
  <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" > Mutu wankhani </h4> 
      ...
 
      <!-- Nested media object -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Zitsime

Gwiritsani ntchito chitsime ngati chosavuta pa chinthu kuti chiwonekere.

<div class = "chabwino" > 
  ...
</div>

Maphunziro osankha

Control padding ndi ngodya zozungulira ndi makalasi awiri osankha osintha.

<div class = "chabwino-chabwino" > 
  ...
</div>

<div class = "chabwino pang'ono" > 
  ...
</div>

Tsekani chizindikiro

Gwiritsani ntchito chizindikiro chapafupi chotseka pochotsa zinthu monga ma modals ndi zidziwitso.

<button class = "close" > × </ batani> 

Zida za iOS zimafunikira href="#"kudina zochitika ngati mungafune kugwiritsa ntchito nangula.

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

Maphunziro othandizira

Makalasi osavuta, olunjika akuwonetsa zazing'ono kapena zosintha zamakhalidwe.

.kokani-kumanzere

Sungani chinthu kumanzere

class = "kukoka kumanzere"

. kukoka - kumanzere {
  kuyandama : kumanzere ;
}

.kokani-kumanja

Nyamulirani chinthu kumanja

class = "kukokera kumanja"

. kukoka - kumanja {
  kuyandama : kumanja ;
}

.osalankhula

Sinthani mtundu wa chinthu kukhala#999

class = "muted"

. osalankhula {
  mtundu : #999; 
}

.clearfix

Chotsani floatpa chinthu chilichonse

class = "clearfix"

. clearfix {
  * kukula : 1 ; 
  &: kale ,
  &: pambuyo {
    chiwonetsero : tebulo ;
    zomwe : "" ; 
  }
  &: pambuyo {
    zomveka : zonse ;
  }
}