Zigawo

Zida zambiri zomwe zingagwiritsidwenso ntchito zimamangidwa mu Bootstrap kuti zipereke kuyenda, zidziwitso, popovers, ndi zina zambiri.

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:

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

Toolbar chitsanzo

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

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </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.

Zotsitsa za batani

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.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">
  3. Zochita
  4. <span class = "caret" > </span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <!-- maulalo a menyu otsika -->
  8. </ul>
  9. </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.


Kutsitsa kwa batani logawanika

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.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "menyu yotsitsa-koka kumanja" >
  4. <!-- maulalo a menyu otsika -->
  5. </ul>
  6. </div>

Chizindikiro cha chitsanzo

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

  1. <div class = "btn-group" >
  2. <button class = "btn" > Zochita </ ​​batani>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </ batani>
  6. <ul class = "dropdown-menu" >
  7. <!-- maulalo a menyu otsika -->
  8. </ul>
  9. </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.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </ batani>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </ batani>
  6. <ul class = "dropdown-menu" >
  7. <!-- maulalo a menyu otsika -->
  8. </ul>
  9. </div>

Multicon-page pagination

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

  1. <div class = "pagination" >
  2. <ul>
  3. <li><a href = "#"> Prev </a> < /li>
  4. <li class = "active" >
  5. <a href = "#"> 1 </a> _
  6. </li>
  7. <li><a href = "#"> 2 </a> </li>
  8. <li><a href = "#"> 3 </a> </li>
  9. <li><a href = "#"> 4 </a> </li>
  10. <li><a href = "#"> Kenako </a> </li>
  11. </ul>
  12. </div>

Pager Kwa maulalo am'mbuyomu komanso otsatira

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.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#"> Zakale </a> _
  4. </li>
  5. <li>
  6. <a href = "#"> Kenako </a> _
  7. </li>
  8. </ul>

Zogwirizana

Kapenanso, mutha kugwirizanitsa ulalo uliwonse kumbali:

  1. <ul class = "pager" >
  2. <li class = "previous" >
  3. <a href = "#" > Zakale </a>
  4. </li>
  5. <li class = "next" >
  6. <a href = "#"> Zatsopano &rarr ; </a>
  7. </li>
  8. </ul>
Zolemba Markup
Zosasintha <span class="label">Default</span>
Kupambana <span class="label label-success">Success</span>
Chenjezo <span class="label label-warning">Warning</span>
Zofunika <span class="label label-important">Important</span>
Zambiri <span class="label label-info">Info</span>
Zosiyana <span class="label label-inverse">Inverse</span>

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

Dzina Chitsanzo Markup
Zosasintha 1 <span class="badge">1</span>
Kupambana 2 <span class="badge badge-success">2</span>
Chenjezo 4 <span class="badge badge-warning">4</span>
Zofunika 6 <span class="badge badge-important">6</span>
Zambiri 8 <span class="badge badge-info">8</span>
Zosiyana 10 <span class="badge badge-inverse">10</span>

Hero unit

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:

  1. <div class = "hero-unit" >
  2. <h1> Mutu </h1>
  3. <p> Tagline </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large">
  6. Dziwani zambiri
  7. </a>
  8. </p>
  9. </div>

Moni Dziko Lapansi!

Ichi ndi gawo losavuta la ngwazi, gawo losavuta la jumbotron poyitanitsa chidwi chowonjezereka pazomwe zili kapena zambiri.

Dziwani zambiri

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

  1. <div class = "tsamba-mutu" >
  2. <h1> Chitsanzo cha mutu watsamba </h1>
  3. </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 :

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail"> _
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

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

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Chizindikiro chazithunzi </h5>
  6. <p> Mawu azithunzi pomwe pano... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Zitsanzo zambiri

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

Zosasintha zopepuka

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.

Chenjezo! Chabwino, fufuzani nokha, simukuwoneka bwino kwambiri.
  1. <div class = "chenjezo" >
  2. <button class = "close" data-dismiss = "chenjezo" > × </ batani>
  3. <strong> Chenjezo! </strong> Chabwino fufuzani inu nokha, simukuwoneka bwino kwambiri.
  4. </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.

Chenjezo!

Chabwino, fufuzani nokha, simukuwoneka bwino kwambiri. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

Zosintha za Context Onjezani makalasi osankha kuti musinthe tanthauzo la zidziwitso

Cholakwika kapena ngozi

O, bwerani! Sinthani zinthu zingapo ndikuyesa kutumizanso.
  1. <div class = "cholakwika chochenjeza" >
  2. ...
  3. </div>

Kupambana

Mwachita bwino! Munawerenga bwino uthenga wochenjezawu.
  1. <div class = "alert alert-kupambana" >
  2. ...
  3. </div>

Zambiri

Mungodziwiratu! Chenjezoli likufunika chisamaliro chanu, koma silofunika kwambiri.
  1. <div class = "chidziwitso chochenjeza" >
  2. ...
  3. </div>

Zitsanzo ndi zizindikiro

Basic

Njira yofikira yomwe ili ndi gradient yoyima.

  1. <div class = "progress" >
  2. <div class = "bar"
  3. style = " wide : 60 %; " ></div>
  4. </div>

Mizeremizere

Amagwiritsa ntchito gradient kuti apange mizeremizere (palibe IE).

  1. <div class = "progress progress-striped" >
  2. <div class = "bar"
  3. style = " wide : 20 %; " ></div>
  4. </div>

Makanema

Amatenga chitsanzo chamizeremizere ndikuchiwonetsa (palibe IE).

  1. <div class = "kupita patsogolo-kukhazikika
  2. yogwira" >
  3. <div class = "bar"
  4. style = " wide : 40 %; " ></div>
  5. </div>

Zosankha ndi chithandizo cha msakatuli

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.

Taonani, ndili pachitsime!
  1. <div class = "chabwino" >
  2. ...
  3. </div>

Tsekani chizindikiro

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

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

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

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