Magulu a batani

Gwiritsani ntchito magulu a batani kuti mugwirizane ndi mabatani angapo pamodzi ngati chigawo chimodzi. Mangani iwo ndi mndandanda wa <a>kapena <button>zinthu.

Njira zabwino kwambiri

Tikupangira malangizo awa ogwiritsira ntchito magulu a batani ndi zida:

• Nthawi zonse gwiritsani ntchito chinthu chomwecho mu gulu limodzi la batani, <a>kapena <button>.
• Osasakaniza mabatani amitundu yosiyanasiyana mugulu limodzi la mabatani.
• Gwiritsani ntchito zithunzi kuwonjezera kapena m'malo mwa mawu, koma onetsetsani kuti muli ndi mawu amtundu wamtundu ngati kuli koyenera.

Magulu a Mabatani ofananira omwe ali ndi zotsitsa (onani m'munsimu) akuyenera kuyitanitsidwa padera ndipo nthawi zonse azikhala ndi zotsikira zomwe zikuwonetsa zomwe akufuna kuchita.

Chitsanzo chosasinthika

Umu ndi momwe HTML imawonera gulu labatani lokhazikika lomangidwa ndi mabatani a nangula:

<div class = "btn-group" > 
  <button class = "btn" > 1 </ batani> 
  <button class = "btn" > 2 </ batani> 
  <button class = "btn" > 3 </ batani> 
</div>

Toolbar chitsanzo

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>

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.

Pezani javascript »

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.

Chizindikiro cha chitsanzo

Mofanana ndi gulu la mabatani, zolembera zathu zimagwiritsa ntchito mabatani okhazikika, koma ndi zowonjezera zochepa kuti ziwongolere kalembedwe ndikuthandizira Bootstrap's dropdown jQuery plugin.

<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. mabatani anu amakula mpaka .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.

Mwachidule ndi zitsanzo

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.

Makulidwe

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

<div class = "btn-group" > 
  ...
  <ul class = "menyu yotsitsa-koka kumanja" > 
    <!-- maulalo a menyu otsika -->
  </ul>
</div>

Chizindikiro cha chitsanzo

Timakulitsa pa batani lotsika kuti tipereke batani lachiwiri lomwe limagwira ntchito ngati choyambitsa chotsitsa.

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

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>

Gulu loyambira lamphamvu

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

Nthawi yoti mugwiritse ntchito

Ma tabu ndi mapiritsi ndiabwino pamagawo azinthu kapena kuyenda pakati pamasamba okhudzana.

Kulumikizana kwagawo

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

Ma tabu oyambira

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

• Kunyumba
• Mbiri
• Mauthenga

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

• Kunyumba
• Mbiri
• Mauthenga

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

Momwe mungazisungire

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

Ma tabu osungidwa

• Kunyumba
• Mbiri
• Mauthenga

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

Mapiritsi osanjikizidwa

• Kunyumba
• Mbiri
• Mauthenga

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

Mindandanda yazakudya idapangidwa kukhala yosavuta

Ma menyu otsikira m'ma tabu ndi mapiritsi a Bootstrap ndi osavuta kwambiri ndipo amangofunika HTML yowonjezera pang'ono ndi pulogalamu yowonjezera ya jQuery yopepuka.

Pitani ku tsamba la Javascript kuti muwerenge zolemba zoyambira kutsitsa mu Bootstrap.

Ma tabu okhala ndi zotsitsa

• Kunyumba
• Thandizeni
• Tsitsa m'munsi
  • Action
  • Another action
  • Something else here
  • Separated link

<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

• Kunyumba
• Thandizeni
• Tsitsa m'munsi
  • Action
  • Another action
  • Something else here
  • Separated link

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

Mayendedwe amtundu wa ntchito

Mindandanda ya Nav imapereka 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.

Mwamakhalidwe, amamangidwa pamayendedwe amtundu womwewo wa nav monga ma tabo ndi mapiritsi, kotero kugwiritsa ntchito ndikusintha mwamakonda ndikosavuta.

Ndi zithunzi

Mindandanda ya Nav ndiyosavuta kukhazikitsa ndi zithunzi. Onjezani tag yoyenera <i>ndi kalasi ndipo mwakonzeka.

Zogawaniza zopingasa

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

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

Chitsanzo nav list

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

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Lembani mutu
  </li>
  <li class = "active" > 
    <a href = "#"> Kwawo </a> _ 
  </li>
  <li>
    <a href = "#"> Library </a> _ 
  </li>
  ...
</ul>

Chitsanzo ndi zithunzi

Chitsanzo chomwecho, koma ndi <i>ma tag a zithunzi.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#"> _ 
      <i class = "icon-book" > </i> 
      Library
    </a>
  </li>
  ...
</ul>

Zomwe zikuphatikizidwa

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.

Kusintha pakati pawo ndikosavuta ndipo kumangofunika kusintha pang'ono.

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 tabbable kukhala amoyo patsamba la javascript docs .

Pezani javascript →

Table chitsanzo

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

Pama tabu olumikizidwa kumanja kapena kumanzere , kulungani .nav-tabsndi .tab-content..tabbable

Chizindikiro chowongoka

Kugwiritsa ntchito ma tabbable kumafuna div yokulungidwa, ma tabo angapo, ndi magawo angapo azinthu.

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

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>

Navbar scaffolding

Navbar imangofunika ma div ochepa kuti ipangike bwino kuti iwonetsere mawonekedwe osasunthika.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "chotengera" > 
      ...
    </div>
  </div>
</div>

Navbar yokhazikika

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

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

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

Mukayika navbar, kumbukirani kuwerengera malo obisika pansi. Onjezani 40px kapena kupitilira apo pazida za <body>. Onetsetsani kuti mwawonjezera izi pambuyo pa core Bootstrap CSS komanso musanasankhe CSS yomvera.

Dzina lamalonda

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

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

Mafomu mu navbar

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" >  
</ fomu>

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>

Kusiyanasiyana koyankhira kosankha

Kutengera kuchuluka kwa zomwe zili patsamba lanu lapamwamba, mungafune kugwiritsa ntchito njira zoyankhira. Kuti muchite izi, sungani zomwe zili mu nav mu div, .nav-collapse.collapse, ndikuwonjezera batani 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" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

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>

Kulumikizana kwagawo

Kuti muyanjanitse nav, mawonekedwe osakira, kapena mawu, gwiritsani .pull-leftntchito .pull-rightmakalasi ofunikira. Makalasi onsewa adzawonjezera kuyandama kwa CSS m'njira yomwe mwatchulidwa.

Kuwonjezera menyu otsika

Kuyika zotsitsa ndi zotsitsa ku nav ndikosavuta, koma kumafunikira kugwiritsa ntchito pulogalamu yathu ya javascript .

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

Pezani javascript →

Lembani mu navbar

Mangirirani zingwe za mawu mu <.navbar-text>, nthawi zambiri pa <p>tagi kuti mupeze chitsogozo choyenera ndi mtundu.

Chifukwa chiyani amazigwiritsa ntchito

Breadcrumb navigation imagwiritsidwa ntchito ngati njira yowonetsera ogwiritsa ntchito komwe ali mkati mwa pulogalamu kapena tsamba, koma osati pakusaka koyamba. Kugwiritsa ntchito kwawo pafupipafupi komanso kwachidule kuti kukhale kothandiza kwambiri.

Zitsanzo

Chitsanzo chimodzi chikuwonetsedwa momwe chikhoza kuwonetsedwa pamasamba angapo.

• Kunyumba

• Kunyumba /
• Library

• Kunyumba /
• Library /
• Zambiri

Markup

HTML ndiye mndandanda wanu wokhazikika wosayendetsedwa ndi maulalo.

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

Nthawi yoti mugwiritse ntchito

Zosavuta komanso zosasinthika pang'ono zowuziridwa ndi Rdio, zabwino pamapulogalamu ndi zotsatira zosaka. Chotchinga chachikulu ndi chovuta kuphonya, chiwonjezeke mosavuta, ndipo chimapereka malo akulu odina.

Maulalo atsamba lachidziwitso

Maulalo amasinthidwa mwamakonda ndipo amagwira ntchito zingapo ndi kalasi yoyenera. .disabledpa maulalo osadina komanso .activepatsamba lapano.

Kukhazikika kosinthika

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

Zitsanzo

Chigawo chosasinthika cha pagination chimasinthasintha ndipo chimagwira ntchito zosiyanasiyana.

Markup

Kukulungidwa mu <div>, pagination ndi chabe <ul>.

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

Za pager

Chigawo cha pager ndi gulu la maulalo osavuta kukhazikitsa amitundu okhala ndi mawonekedwe opepuka komanso masitayelo opepuka. Ndi yabwino kwa masamba osavuta monga mabulogu kapena magazini.

Dziko lolumala ngati mukufuna

Maulalo a Pager amagwiritsanso ntchito .disabledgulu lambiri kuchokera pamitundu.

Chitsanzo chosasinthika

Mwachikhazikitso, pager centers maulalo.

• Zam'mbuyo
• Ena

<ul class = "pager" > 
  <li>
    <a href = "#"> Zakale </a> _ 
  </li>
  <li>
    <a href = "#"> Kenako </a> _ 
  </li>
</ul>

Zogwirizana

Kapenanso, mutha kugwirizanitsa ulalo uliwonse kumbali:

• ← Zakale
• Zatsopano →

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

Za

Mabaji ndi ang'onoang'ono, zigawo zosavuta zowonetsera chizindikiro kapena chiwerengero cha mtundu wina. Amapezeka kawirikawiri mumakasitomala a imelo ngati Mail.app kapena pa mapulogalamu a m'manja kuti azidziwitso zokankhira.

Makalasi opezeka

Bootstrap imapereka gawo lopepuka, losinthika lotchedwa gawo la ngwazi kuti liwonetse zomwe zili patsamba lanu. Zimagwira ntchito bwino pazamalonda komanso masamba olemera.

Markup

Mangirirani zomwe divmwalemba motere:

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

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

• 

  Chizindikiro chazithunzi

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

  Zochita Zochita

• 

  Chizindikiro chazithunzi

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

  Zochita Zochita

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.

Chizindikiro

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

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail"> _  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Chizindikiro chazithunzi </h5>
      <p> Mawu azithunzi pomwe pano... </p>
    </div>
  </li>
  ...
</ul>

Zitsanzo zambiri

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

Kalasi yoyambira yolembedwanso

Ndi Bootstrap 2, tafewetsa kalasi yoyambira: .alertm'malo mwa .alert-message. Tachepetsanso zotsalira zomwe zimafunikira—ayi <p>amafunikira mwachisawawa, akunja okha <div>.

Uthenga umodzi wochenjeza

Pachigawo chokhazikika chokhala ndi ma code ochepa, tachotsa mawonekedwe osiyanitsa a zidziwitso za block, mauthenga omwe amabwera ndi zotchingira zambiri komanso zolemba zambiri. Kalasi nayonso yasintha kukhala .alert-block.

Zimayenda bwino ndi javascript

Bootstrap imabwera ndi pulogalamu yowonjezera ya jQuery yomwe imathandizira mauthenga ochenjeza, kuwapangitsa kuwachotsa mwachangu komanso kosavuta.

Pezani pulogalamu yowonjezera »

Zidziwitso zachitsanzo

Manga uthenga wanu ndi chithunzi chotseka mu div yokhala ndi kalasi yosavuta.

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

Mungodziwiratu! Zida za iOS zimafunikira href="#"kuchotsedwa kwa zidziwitso. Onetsetsani kuti mwayiphatikiza ndi mawonekedwe a data pazithunzi za nangula. 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.

Wonjezerani mosavuta uthenga wa chenjezo ndi makalasi awiri omwe mungafune: .alert-blockkuti muwonjezere zowongolera ndi zolemba komanso .alert-headingmutu wofananira.

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#"> × </a> _   
  <h4 class = "alert-heading" > Chenjezo! </ h4> 
  Chabwino dziyeseni nokha, simuli ...
</div>

Cholakwika kapena ngozi

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

Kupambana

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

Zambiri

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

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

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

Makanema

Amatenga chitsanzo chamizeremizere ndikuchiwonetsa (palibe IE).

<div class = "kupita patsogolo-kukhazikika 
     yogwira" >
  <div class = "bar" 
       style = " wide : 40 %; " ></div> 
</div>

Mitundu yowonjezera

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

Mipiringidzo yamizeremizere

Mofanana ndi mitundu yolimba, tili ndi mipiringidzo yamitundu yosiyanasiyana.

Khalidwe

Mipiringidzo yopita patsogolo imagwiritsa ntchito kusintha kwa CSS3, kotero ngati mutasintha m'lifupi mwa javascript, idzasintha bwino.

Ngati mugwiritsa ntchito .activekalasi, .progress-stripedmipiringidzo yanu yopita patsogolo idzawonetsa mikwingwirima kumanzere kupita kumanja.

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.

Opera ndi IE samathandizira makanema ojambula pakali pano.

Zitsime

Gwiritsani ntchito chitsime ngati chosavuta pa chinthu kuti chiwonekere.

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

Tsekani chizindikiro

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

×

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

Zida za iOS zimafunikira href="#" pakudina zochitika ngati mukufuna kugwiritsa ntchito nangula.

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