Ma glyphs omwe alipo

Mulinso ma glyphs opitilira 250 mumtundu wamafonti kuchokera pagulu la Glyphicon Halflings. Glyphicons Halflings nthawi zambiri sapezeka kwaulere, koma mlengi wawo wawapanga kuti apezeke ku Bootstrap kwaulere. Monga zikomo, tikungopempha kuti muphatikize ulalo wobwerera ku Glyphicons ngati kuli kotheka.

glyphicon - nyenyezi ya nyenyezi
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-mtambo
envelopu ya glyphicon
pensulo ya glyphicon
galasi la glyphicon
nyimbo za glyphicon glyphicon
glyphicon glyphicon-search
glyphicon glyphicon-mtima
glyphicon glyphicon-nyenyezi
glyphicon glyphicon-nyenyezi yopanda kanthu
glyphicon glyphicon-wogwiritsa ntchito
filimu ya glyphicon
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-chotsani
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon-zinyalala
glyphicon glyphicon-nyumba
glyphicon glyphicon-fayilo
glyphicon glyphicon nthawi
glyphicon glyphicon-road
glyphicon glyphicon-kutsitsa-alt
glyphicon glyphicon-kutsitsa
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circular
glyphicon glyphicon-kubwereza
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
mbendera ya glyphicon
glyphicon glyphicon-headphones
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-pansi
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon tag
glyphicon glyphicon-tag
buku la glyphicon glyphicon
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
kamera ya glyphicon glyphicon
mawonekedwe a glyphicon
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-mawu-utali
glyphicon glyphicon-malemba-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-kumanzere
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-kanema
glyphicon glyphicon-chithunzi
glyphicon glyphicon-mapu-chizindikiro
glyphicon glyphicon-kusintha
glyphicon - mtundu wa glyphicon
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-step-backward
glyphicon glyphicon-mwachangu-kumbuyo
glyphicon glyphicon-kumbuyo
glyphicon glyphicon-masewera
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-mwachangu-patsogolo
glyphicon glyphicon-patsogolo-patsogolo
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-kumanzere
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-chizindikiro
glyphicon glyphicon-minus-sign
glyphicon glyphicon-chotsa-chizindikiro
glyphicon glyphicon-ok-chizindikiro
glyphicon glyphicon-mafunso-chizindikiro
glyphicon glyphicon-info-sign
glyphicon glyphicon-skrini
glyphicon glyphicon-chotsani-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-right
glyphicon glyphicon-arrow-up
glyphicon glyphicon-muvi-pansi
glyphicon glyphicon-share-alt
glyphicon glyphicon-resize-full
glyphicon glyphicon-resize-ang'ono
glyphicon glyphicon-chizindikiro-chizindikiro
glyphicon glyphicon-mphatso
glyphicon glyphicon-tsamba
glyphicon glyphicon-moto
glyphicon glyphicon-diso-otseguka
glyphicon glyphicon-diso-close
glyphicon glyphicon-chenjezo-chizindikiro
ndege ya glyphicon
glyphicon glyphicon-kalendala
glyphicon glyphicon-mwachisawawa
glyphicon glyphicon ndemanga
glyphicon glyphicon-maginito
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-pansi
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-ngolo
glyphicon glyphicon-folder-close
glyphicon glyphicon-foda-otseguka
glyphicon glyphicon-resize-vertical
glyphicon glyphicon-resize-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-belu
satifiketi ya glyphicon glyphicon
glyphicon glyphicon-thumbs-mmwamba
glyphicon glyphicon-pansi
glyphicon glyphicon-dzanja lakumanja
glyphicon glyphicon-kumanja-kumanzere
glyphicon glyphicon-mmwamba
glyphicon glyphicon-pansi-pansi
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
glyphicon glyphicon wrench
glyphicon glyphicon-ntchito
glyphicon glyphicon-sefa
glyphicon-chikwama chachifupi
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
Chithunzi cha glyphicon-paperclip
glyphicon glyphicon-mtima-empty
glyphicon glyphicon-link
glyphicon glyphicon-foni
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
mtundu wa glyphicon glyphicon
glyphicon glyphicon-mtundu-ndi-zilembo
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-mtundu-ndi-dongosolo
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-mtundu-ndi-makhalidwe
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-osasankhidwa
glyphicon glyphicon-expand
glyphicon glyphicon-kugwa-pansi
glyphicon glyphicon-kugwa-mmwamba
glyphicon glyphicon-lowani
mawonekedwe a glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-windows
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-otseguka
glyphicon glyphicon-yosungidwa
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-tumizani
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-yopulumutsidwa
glyphicon glyphicon-floppy-chotsani
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-transfer
glyphicon glyphicon-cutlery
glyphicon glyphicon-mutu
glyphicon glyphicon-compressed
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon - nsanja ya glyphicon
glyphicon glyphicon-stats
glyphicon glyphicon-sd-kanema
glyphicon glyphicon-hd-kanema
glyphicon glyphicon-subtitles
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-kutsitsa
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-mtengo-conifer
glyphicon glyphicon-mtengo-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-mmwamba-mmwamba
glyphicon glyphicon-copy
glyphicon glyphicon-paste
glyphicon glyphicon-alert
glyphicon glyphicon-equalizer
glyphicon glyphicon-mfumu
glyphicon glyphicon-mfumukazi
glyphicon glyphicon-pawn
glyphicon glyphicon-bishopu
glyphicon glyphicon-knight
glyphicon glyphicon-baby formula
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
bedi la glyphicon glyphicon
glyphicon glyphicon-apulo
glyphicon glyphicon-erase
glyphicon glyphicon-hourglass
glyphicon glyphicon-nyali
glyphicon glyphicon-duplicate
glyphicon glyphicon-piggy-bank
glyphicon glyphicon-scissors
glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-kulawa
glyphicon glyphicon-maphunziro
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-windows
mafuta a glyphicon
glyphicon glyphicon-mbewu
magalasi a magalasi a glyphicon
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-chinthu-align-top
glyphicon glyphicon-chinthu-align-pansi
glyphicon glyphicon-chinthu-align-horizontal
glyphicon glyphicon-chinthu-align-left
glyphicon glyphicon-chinthu-align-vertical
glyphicon glyphicon-chinthu-align-right
glyphicon glyphicon-triangle-right
glyphicon glyphicon-triangle-kumanzere
glyphicon glyphicon-triangle-pansi
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menyu-kumanzere
glyphicon glyphicon-menyu-kumanja
glyphicon glyphicon-menyu-pansi
glyphicon glyphicon-menyu-up

Momwe mungagwiritsire ntchito

Pazifukwa zogwirira ntchito, zithunzi zonse zimafunikira gulu loyambira komanso gulu lazithunzi. Kuti mugwiritse ntchito, ikani khodi ili pafupi kulikonse. Onetsetsani kuti mwasiya mpata pakati pa chithunzi ndi mawu kuti padding yoyenera.

Osasakaniza ndi zigawo zina

Makalasi azithunzi sangathe kuphatikizidwa mwachindunji ndi zigawo zina. Sayenera kugwiritsidwa ntchito limodzi ndi makalasi ena pa chinthu chomwecho. M'malo mwake, onjezani chisa <span>ndikugwiritsa ntchito makalasi azithunzi ku <span>.

Zongogwiritsidwa ntchito pazinthu zopanda kanthu

Makalasi azithunzi ayenera kugwiritsidwa ntchito pazinthu zomwe zilibe zolemba komanso zopanda mwana.

Kusintha mawonekedwe azithunzi

Bootstrap imaganiza kuti mafayilo amtundu wazithunzi adzakhala mu ../fonts/bukhuli, poyerekeza ndi mafayilo a CSS opangidwa. Kusuntha kapena kutchulanso mafayilo amtunduwo kumatanthauza kukonzanso CSS mu imodzi mwa njira zitatu:

Sinthani @icon-font-pathndi/kapena @icon-font-namezosintha mu gwero Mafayilo Ochepa.
Gwiritsani ntchito ma URL achibale omwe aperekedwa ndi Wopanga Pang'ono.
Sinthani url()njira mu CSS yophatikizidwa.

Gwiritsani ntchito njira iliyonse yomwe ikugwirizana ndi mapangidwe anu enieni.

Zithunzi zopezeka

Mitundu yamakono ya matekinoloje othandizira adzalengeza zomwe zapangidwa ndi CSS, komanso zilembo za Unicode. Kupewa zotuluka zosayembekezereka komanso zosokoneza pazowerengera zowonera (makamaka zithunzi zikagwiritsidwa ntchito kukongoletsa kokha), timazibisa ndi mawonekedwe ake aria-hidden="true".

Ngati mukugwiritsa ntchito chithunzi kufotokoza tanthauzo (osati ngati chinthu chokongoletsera), onetsetsani kuti tanthauzoli likuperekedwanso ku matekinoloje othandizira - mwachitsanzo, kuphatikiza zina, zobisika ndi .sr-onlykalasi.

Ngati mukupanga zowongolera popanda mawu ena (monga <button>omwe ali ndi chithunzi chokha), muyenera nthawi zonse kupereka zina kuti muzindikire cholinga chowongolera, kuti zikhale zomveka kwa ogwiritsa ntchito matekinoloje othandizira. Pankhaniyi, inu mukhoza kuwonjezera aria-labelkhalidwe pa ulamuliro palokha.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Zitsanzo

Agwiritseni ntchito m'mabatani, m'magulu a batani lazida, kusakatula, kapena zolowetsa mafomu omwe mwakonzedweratu.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Chizindikiro chogwiritsidwa ntchito pochenjeza kuwonetsa kuti ndi uthenga wolakwika, wokhala ndi .sr-onlymawu owonjezera kuti apereke chidziwitso kwa ogwiritsa ntchito matekinoloje othandizira.

Lowetsani imelo adilesi yolondola

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

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

Chitsanzo

Mangirirani choyambitsa chotsitsa ndi menyu yotsitsa mkati mwa .dropdown, kapena chinthu china chomwe chimalengeza position: relative;. Kenako onjezani HTML ya menyu.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Ma menyu otsitsa amatha kusinthidwa kuti akule mmwamba (m'malo mwa pansi) powonjezera .dropupkwa kholo.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Kuyanjanitsa

Mwachikhazikitso, menyu yotsitsa imayikidwa 100% kuchokera pamwamba ndi kumanzere kwa kholo lake. Onjezani .dropdown-menu-rightku a .dropdown-menukulumikiza kumanja menyu yotsitsa.

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

Mitu

Onjezani mutu kuti mulembe magawo a zochita mu menyu yotsikira.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Wogawanitsa

Onjezani chogawa kuti musiyanitse maulalo angapo pamenyu yotsitsa.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Zinthu zolemala za menyu

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

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Gwirizanitsani mabatani angapo pamzere umodzi ndi gulu la batani. Onjezani pa wayilesi ya JavaScript yosankha komanso mawonekedwe a bokosi loyang'ana ndi mabatani athu owonjezera .

Zida & popovers m'magulu a mabatani amafunikira masinthidwe apadera

Mukamagwiritsa ntchito zida kapena ma popovers pazinthu zomwe zili mkati mwa .btn-group, muyenera kufotokoza zomwe mungachite container: 'body'kuti mupewe zotsatira zosafunikira (monga chinthucho chikukulirakulira komanso/kapena kutaya ngodya zake zozungulira pomwe chida kapena popover yayambika).

Onetsetsani kuti mwalondola `role`ndikupereka chizindikiro

Kuti matekinoloje othandizira - monga owerenga skrini - awonetse kuti mabatani angapo agawidwa m'magulu, mawonekedwe oyenera roleayenera kuperekedwa. Kwa magulu a mabatani, izi zitha kukhala role="group", pomwe zida zogwiritsira ntchito ziyenera kukhala ndi role="toolbar".

Kupatulapo kumodzi ndi magulu omwe ali ndi chiwongolero chimodzi (mwachitsanzo magulu abatani ovomerezeka okhala ndi <button>zinthu) kapena kutsitsa.

Kuonjezera apo, magulu ndi zida zogwiritsira ntchito ziyenera kupatsidwa chizindikiro chomveka bwino, chifukwa matekinoloje ambiri othandizira sangawalengeze, ngakhale kuti ali ndi khalidwe lolondola role. Mu zitsanzo zomwe zaperekedwa apa, timagwiritsa ntchito aria-label, koma njira zina aria-labelledbyzomwe zingagwiritsidwe ntchito.

Chitsanzo choyambirira

Manga mabatani angapo ndi .btnmu .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

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

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

Kukula

M'malo mogwiritsa ntchito makalasi owerengera mabatani pa batani lililonse pagulu, ingowonjezerani pagulu .btn-group-*lililonse .btn-group, kuphatikiza pomanga magulu angapo.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Nesting

Ikani .btn-groupmkati mwa ina .btn-grouppamene mukufuna mindandanda yotsitsa yosakanikirana ndi mabatani angapo.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Kusintha koyima

Pangani mabatani angapo kuti awoneke ngati atayikidwa molunjika osati mopingasa. Kutsikira kwa mabatani ogawanika sikutheka pano.

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

Magulu a batani olungamitsidwa

Pangani gulu la mabatani kutambasula molingana ndi kukula kwake konse kwa kholo lake. Imagwiranso ntchito ndikutsitsa mabatani mkati mwa gulu la batani.

Kusamalira malire

Chifukwa cha HTML ndi CSS yeniyeni yomwe imagwiritsidwa ntchito kutsimikizira mabatani (omwe ndi display: table-cell), malire pakati pawo amawirikiza kawiri. M'magulu okhazikika a batani, margin-left: -1pxamagwiritsidwa ntchito kuyika malire m'malo mowachotsa. Komabe, marginsizigwira ntchito ndi display: table-cell. Zotsatira zake, kutengera makonda anu ku Bootstrap, mungafune kuchotsa kapena kukongoletsanso malire.

IE8 ndi malire

Internet Explorer 8 sipereka malire pamabatani mu gulu lovomerezeka, kaya ndi pa <a>kapena <button>zinthu. Kuti muchite izi, sungani batani lililonse mumzere wina .btn-group.

Onani #12476 kuti mumve zambiri.

Ndi `<a>`zinthu

Ingokulungani mndandanda wa .btns mu .btn-group.btn-group-justified.

Kumanzere Pakati Kulondola

Kumanzere Pakati

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Maulalo amakhala ngati mabatani

Ngati <a>zinthuzo zikugwiritsidwa ntchito ngati mabatani - kuyambitsa ntchito zapatsamba, m'malo mopita ku chikalata china kapena gawo lomwe lili mkati mwa tsamba lamakono - ayeneranso kupatsidwa zoyenera role="button".

Ndi `<button>`zinthu

Kuti mugwiritse ntchito magulu a mabatani omwe ali ndi <button>zinthu, muyenera kukulunga batani lililonse pagulu la batani . Asakatuli ambiri sagwiritsa ntchito bwino CSS yathu kuti tidzilungamitse <button>pazinthu, koma popeza timathandizira kutsitsa mabatani, titha kuthana ndi izi.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

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

Kudalira pulogalamu yowonjezera

Kutsitsa kwa mabatani kumafuna kuti pulogalamu yotsitsayo ikhale ndi mtundu wanu wa Bootstrap.

Zotsitsa za batani limodzi

Sinthani batani kukhala njira yotsikira ndi zosintha zina zoyambira.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Kutsitsa kwa batani logawanika

Mofananamo, pangani zotsitsa za batani logawanika ndi zosintha zomwezo, pokhapokha ndi batani losiyana.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Kukula

Mabatani otsitsa amagwira ntchito ndi mabatani amitundu yonse.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Kusintha kosiyanasiyana

Yambitsani mindandanda yotsikira pamwamba pa zinthu powonjezera .dropupkwa kholo.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Wonjezerani kuwongolera mawonekedwe powonjezera zolemba kapena mabatani isanakwane, pambuyo pake, kapena mbali zonse zalemba lililonse <input>. Gwiritsani ntchito .input-groupndi .input-group-addonkapena .input-group-btnkukonzekera kapena kuwonjezera zinthu ku chimodzi .form-control.

Zolemba `<input>`zokha

Pewani kugwiritsa ntchito <select>zinthu pano chifukwa sizingatchulidwe mokwanira mu asakatuli a WebKit.

Pewani kugwiritsa ntchito <textarea>zinthu apa rowschifukwa mawonekedwe ake sangalemekezedwe nthawi zina.

Malangizo a zida & popover m'magulu olowetsa amafunikira masinthidwe apadera

Mukamagwiritsa ntchito zida kapena ma popovers pazinthu zomwe zili mkati mwa .input-group, muyenera kufotokoza zomwe mungachite container: 'body'kuti mupewe zotsatira zosafunikira (monga chinthucho chikukulirakulira komanso/kapena kutaya ngodya zake zozungulira pomwe chida kapena popover yayambika).

Osasakaniza ndi zigawo zina

Osasakaniza magulu amtundu kapena makalasi amtundu wa gridi mwachindunji ndi magulu olowa. M'malo mwake, sungani gulu lolowera mkati mwa gulu la mawonekedwe kapena zinthu zokhudzana ndi grid.

Onjezani zolemba nthawi zonse

Owerenga pazenera adzakhala ndi vuto ndi mafomu anu ngati simuphatikiza zilembo zilizonse. Pamagulu olowetsawa, onetsetsani kuti zilembo zina zowonjezera zaperekedwa kuukadaulo wothandizira.

Njira yeniyeni yogwiritsidwira ntchito (zowoneka <label>, <label>zobisika pogwiritsa ntchito .sr-onlykalasi, kapena kugwiritsa ntchito aria-label, aria-labelledby, aria-describedby, titlekapena mawonekedwe placeholder) ndi zina zowonjezera zomwe zidzafunikire kuperekedwa zidzasiyana malinga ndi mtundu weniweni wa widget yomwe mukuyigwiritsa ntchito. Zitsanzo zomwe zili m'gawoli zimapereka njira zingapo zopangira, zomwe zimatengera zochitika zenizeni.

Chitsanzo choyambirira

Ikani chowonjezera chimodzi kapena batani mbali zonse za zolowetsa. Mukhozanso kuyika chimodzi mbali zonse za zolowetsa.

Sitithandizira zowonjezera zingapo ( .input-group-addonkapena .input-group-btn) mbali imodzi.

Sitithandizira maulamuliro angapo amitundu mugulu limodzi lolowetsa.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Kukula

Onjezani makalasi a kukula kwa mawonekedwe .input-groupomwewo ndipo zomwe zili mkatimo zidzasinthanso kukula kwake - palibe chifukwa chobwereza makalasi owongolera mawonekedwe pa chinthu chilichonse.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Mabokosi ndi ma radio addons

Ikani bokosi lililonse kapena njira ya wailesi mkati mwa addon ya gulu lolowetsa m'malo mwa mawu.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

batani addons

Mabatani m'magulu olowetsa ndi osiyana pang'ono ndipo amafunikira mulingo umodzi wowonjezera wa zisa. M'malo mwake .input-group-addon, muyenera kugwiritsa ntchito .input-group-btnkukulunga mabatani. Izi ndizofunikira chifukwa chosasinthika masitayelo asakatuli omwe sangathe kuchotsedwa.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Mabatani okhala ndi zotsitsa

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Mabatani agawo

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Mabatani angapo

Ngakhale mutha kukhala ndi chowonjezera chimodzi mbali iliyonse, mutha kukhala ndi mabatani angapo mkati mwa .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Ma Navs omwe amapezeka ku Bootstrap adagawana zolembera, kuyambira ndi gulu loyambira .nav, komanso mayiko omwe adagawana nawo. Sinthani makalasi osintha kuti musinthe pakati pa sitayilo iliyonse.

Kugwiritsa ntchito ma navs pamapanelo amafunikira pulogalamu yowonjezera ya JavaScript

Pama tabu okhala ndi madera okhoza kutha, muyenera kugwiritsa ntchito pulogalamu yowonjezera ya JavaScript . Kuyikako kudzafunikanso zina zowonjezera rolekomanso za ARIA - onani chitsanzo cha plugin kuti mumve zambiri.

Pangani ma navs ogwiritsidwa ntchito ngati navigation kupezeka

Ngati mukugwiritsa ntchito navs kuti mupereke malo olowera, onetsetsani kuti mwawonjezera ku role="navigation"chidebe chomveka bwino cha kholo cha <ul>, kapena kulungani <nav>chinthu pozungulira ponseponse. Osawonjeza gawolo <ul>, chifukwa izi zingalepheretse kulengezedwa ngati mndandanda weniweni ndi matekinoloje othandizira.

Ma tabu

Dziwani kuti .nav-tabskalasi ikufunika .navkalasi yoyambira.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Mapiritsi

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

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Mapiritsi nawonso vertically stackable. Ingowonjezerani .nav-stacked.

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

Kulungamitsidwa

Pangani ma tabo kapena mapiritsi mosavuta m'lifupi mwa makolo awo pazithunzi zazikulu kuposa 768px ndi .nav-justified. Pazithunzi zazing'ono, maulalo a nav amasungidwa.

Maulalo ovomerezeka a navbar sakuthandizidwa pakadali pano.

Safari ndi omvera olungamitsidwa navs

Pofika pa v9.1.2, Safari ikuwonetsa cholakwika momwe kusinthira kukula kwa msakatuli wanu mopingasa kumayambitsa zolakwika mu nav yovomerezeka yomwe imachotsedwa pakutsitsimutsa. Vutoli likuwonetsedwanso mu chitsanzo cholungamitsidwa cha nav .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Maulalo oletsedwa

Pachigawo chilichonse cha nav (ma tabu kapena mapiritsi), onjezani maulalo otuwa ndipo palibe zotsatira .disabledza hover .

Kugwiritsiridwa ntchito kwa ulalo sikunakhudzidwe

Kalasi iyi ingosintha <a>mawonekedwe a ', osati magwiridwe ake. Gwiritsani ntchito JavaScript kuti muyimitse maulalo apa.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Kugwiritsa ntchito dropdowns

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

Ma tabu okhala ndi zotsitsa

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Mapiritsi okhala ndi zotsitsa

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navbars ndi zigawo zomvera za meta zomwe zimagwira ntchito ngati mitu yakusaka pa pulogalamu yanu kapena tsamba lanu. Amayamba kugwa (ndipo amatha kusinthika) pamawonekedwe am'manja ndikukhala opingasa pomwe kukula kwa malo owonera kumachulukira.

Maulalo ovomerezeka a navbar sakuthandizidwa pakadali pano.

Zosefukira

Popeza Bootstrap sadziwa kuchuluka kwa zomwe zili mu navbar yanu zimafuna, mutha kukumana ndi zovuta zomwe zikukulitsidwa pamzere wachiwiri. Kuti muthetse izi, mutha:

Chepetsani kuchuluka kapena m'lifupi mwa zinthu za navbar.
Bisani zinthu zina za navbar pazithunzi zina pogwiritsa ntchito makalasi omvera .
Sinthani malo omwe navbar yanu imasinthira pakati pa kugwa ndi kopingasa. Sinthani makonda @grid-float-breakpointanu osinthika kapena onjezani funso lanu lazama media.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Sinthani mtundu wa navbar ndi chithunzi chanu posinthana mawu ndi <img>. Popeza .navbar-brandili ndi padding ndi kutalika kwake, mungafunike kupitilira CSS ina kutengera chithunzi chanu.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Ikani zomwe zili m'mawonekedwe mkati .navbar-formkuti muyike molunjika ndikugwera pamawonekedwe ang'onoang'ono. Gwiritsani ntchito masanjidwewo kuti musankhe komwe kumakhala mkati mwa navbar.

M'malo mwake, .navbar-formamagawana ma code ambiri ndi .form-inlinemixin. Kuwongolera mafomu kwina, monga magulu olowetsa, kungafunike m'lifupi mwake kuti awonetsedwe bwino mkati mwa navbar.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Onjezani zolemba nthawi zonse

Owerenga pazenera adzakhala ndi vuto ndi mafomu anu ngati simuphatikiza zilembo zilizonse. Pama fomu apaintaneti, mutha kubisa zilembo pogwiritsa ntchito .sr-onlykalasi. Palinso njira zina zoperekera chizindikiro chaukadaulo wothandizira, monga aria-label, aria-labelledbykapena mawonekedwe title. Ngati palibe chimodzi mwa izi, owerenga skrini amatha kugwiritsa ntchito mawonekedwewo placeholder, ngati alipo, koma dziwani kuti kugwiritsa placeholderntchito m'malo mwa njira zina zolembera sikulangizidwa.

Onjezani .navbar-btnkalasi kuzinthu <button>zomwe sizikhala mu a <form>kuti muwakhazikike molunjika mu navbar.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

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

<p class="navbar-text">Signed in as Mark Otto</p>

Kwa anthu omwe amagwiritsa ntchito maulalo okhazikika omwe sali m'gulu la navbar wamba, gwiritsani ntchito .navbar-linkkalasiyi kuti muwonjezere mitundu yoyenera pazosankha zosasinthika komanso zosintha.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Gwirizanitsani maulalo a nav, mafomu, mabatani, kapena mawu, pogwiritsa ntchito.navbar-left ntchito .navbar-rightmakalasi ofunikira. Makalasi onsewa adzawonjezera kuyandama kwa CSS m'njira yomwe mwatchulidwa. Mwachitsanzo, kuti muyanjanitse maulalo a nav, ikani mosiyana <ul>ndi gulu lothandizira lomwe likugwiritsidwa ntchito.

Makalasi awa ndi mitundu ya mixin-ed.pull-left ndi .pull-right, koma amafunsidwa mafunso atolankhani kuti azitha kuwongolera mosavuta zigawo za navbar pamitundu yonse yazida.

Onjezani .navbar-fixed-topndikuphatikiza a .containerkapena .container-fluidpakati ndi pad navbar.

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

Padding thupi lofunika

Navbar yokhazikika idzaphimba zina zanu, pokhapokha mutawonjezera paddingpamwamba pa <body>. Yesani zomwe mumakonda kapena gwiritsani ntchito mawu athu pansipa. Langizo: Mwachikhazikitso, navbar ndi yokwera 50px.

body { padding-top: 70px; }

Onetsetsani kuti mukuphatikiza izi pambuyo pa core Bootstrap CSS.

Onjezani .navbar-fixed-bottomndikuphatikiza a .containerkapena .container-fluidpakati ndi pad navbar.

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

Padding thupi lofunika

Navbar yokhazikika idzaphimba zina zanu, pokhapokha mutawonjezera paddingpansi pa <body>. Yesani zomwe mumakonda kapena gwiritsani ntchito mawu athu pansipa. Langizo: Mwachikhazikitso, navbar ndi yokwera 50px.

body { padding-bottom: 70px; }

Onetsetsani kuti mukuphatikiza izi pambuyo pa core Bootstrap CSS.

Pangani navbar yotalikirapo yomwe imachoka ndi tsambalo powonjezera .navbar-static-topndikuphatikiza a .containerkapena .container-fluidpakati ndi pad navbar.

Mosiyana ndi .navbar-fixed-*makalasi, simuyenera kusintha padding pa body.

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

Sinthani mawonekedwe a navbar powonjezera .navbar-inverse.

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

Zinyenyeswazi za mkate

Onetsani komwe tsamba ili mkati mwa kalozera wapanyanja.

Olekanitsa amawonjezedwa mu CSS kudzera :beforendi content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Pagination

Perekani maulalo amatsamba atsamba lanu kapena pulogalamu yanu yokhala ndi masamba ambiri, kapena njira yosavuta yopeja .

Kusindikiza kosasintha

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

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Kulemba chigawo cha pagination

Chigawo cha pagination chiyenera kukulungidwa mu <nav>chinthu kuti chizizindikiritse ngati gawo la navigation kuti muwone owerenga ndi matekinoloje ena othandizira. Kuphatikiza apo, popeza tsamba liyenera kukhala ndi magawo opitilira amodzi otere (monga mayendedwe oyambira pamutu, kapena kusakatula kwapambali), ndikofunikira kupereka kufotokozera aria-labelkomwe <nav>kukuwonetsa cholinga chake. Mwachitsanzo, ngati chigawo cha pagination chikugwiritsidwa ntchito poyang'ana pakati pa zotsatira zakusaka, chizindikiro choyenera chikhoza kukhala aria-label="Search results pages".

Mayiko olumala komanso ogwira ntchito

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

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

Tikukulimbikitsani kuti musinthe anangula omwe akugwira ntchito kapena olephereka ndi <span>, kapena kusiya nangula ngati muli ndi mivi yam'mbuyo/motsatira, kuti muchotse magwiridwe antchito ndikusunga masitayelo omwe mukufuna.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Kukula

Mukufuna zokhala zazikulu kapena zazing'ono? Onjezani .pagination-lgkapena .pagination-smma size owonjezera.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

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.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Zogwirizana

Kapenanso, mutha kugwirizanitsa ulalo uliwonse kumbali:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Dziko lolumala ngati mukufuna

Maulalo a Pager amagwiritsanso .disabledntchito gulu lazambiri lazachikunja.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Chitsanzo

Chitsanzo mutu Watsopano

<h3>Example heading <span class="label label-default">New</span></h3>

Zosiyanasiyana zomwe zilipo

Onjezani makalasi aliwonse omwe atchulidwa pansipa kuti musinthe mawonekedwe a lebulo.

Chenjezo Lachidziwitso Chachipambano Chosasinthika _ _

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Muli ndi matani ambiri?

Kupereka zovuta kumatha kubwera mukakhala ndi zolemba zambiri zam'mizere mkati mwa chidebe chopapatiza, chilichonse chili ndi zake inline-block(monga chithunzi). Njira yozungulira iyi ndikukhazikitsa display: inline-block;. Kuti muwone nkhani ndi chitsanzo, onani #13219 .

Onetsani mosavuta zinthu zatsopano kapena zosawerengeka powonjezera <span class="badge">maulalo, ma navs a Bootstrap, ndi zina zambiri.

Inbox42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Kudzikomoka

Ngati palibe zatsopano kapena zosawerengeka, mabaji amangogwa (kudzera pa :emptychosankha cha CSS) pokhapokha ngati mulibe chilichonse mkati mwake.

Kugwirizana kwa msakatuli

Mabaji sangadzigwetse okha mu Internet Explorer 8 chifukwa alibe chothandizira :emptychosankha.

Izolowera ku nav states yogwira

Masitayelo omangidwira akuphatikizidwa pakuyika mabaji m'malo okhazikika pamayendetsedwe a mapiritsi.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Chigawo chopepuka, chosinthika chomwe chitha kuwonjezera mawonekedwe onse kuti awonetse zomwe zili patsamba lanu.

Moni Dziko Lapansi!

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

Dziwani zambiri

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Kuti jumbotron ikhale m'lifupi mwake, ndipo popanda ngodya zozungulira, ikani kunja kwa .containers zonse ndipo m'malo mwake yonjezerani .containermkati.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

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

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Wonjezerani dongosolo la gridi ya Bootstrap ndi gawo lazithunzi kuti muwonetse zithunzi, makanema, zolemba, ndi zina zambiri.

Ngati mukuyang'ana mawonekedwe a Pinterest a tizithunzi tating'ono tosiyanasiyana ndi/kapena m'lifupi, muyenera kugwiritsa ntchito pulogalamu yowonjezera ya chipani chachitatu monga Masonry , Isotope , kapena Salvattore .

Chitsanzo chosasinthika

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

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Zomwe zili mwamakonda

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.

Batani Batani

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.

Batani Batani

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.

Batani Batani

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Perekani mauthenga okhudzana ndi zochitika za ogwiritsa ntchito ndi mauthenga ochepa omwe alipo komanso osinthika.

Zitsanzo

Manga mawu aliwonse ndi batani lochotsa .alertndi limodzi mwa magawo anayi (monga, .alert-success) pazidziwitso zoyambira.

Palibe kalasi yokhazikika

Zidziwitso zilibe makalasi osasinthika, magulu oyambira ndi osintha okha. Chenjezo losakhazikika la imvi silimveka kwambiri, chifukwa chake muyenera kufotokoza mtundu wake pogwiritsa ntchito kalasi. Sankhani kuchokera pakuchita bwino, zambiri, chenjezo, kapena zoopsa.

Mwachita bwino! Munawerenga bwino uthenga wochenjezawu.

Mungodziwiratu! Chenjezoli likufunika chisamaliro chanu, koma silofunika kwambiri.

Chenjezo! Kulibwino mudziyese nokha, simukuwoneka bwino kwambiri.

O, bwerani! Sinthani zinthu zingapo ndikuyesa kutumizanso.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Zidziwitso zochotsedwa

Pangani pa chenjezo lililonse powonjezera .alert-dismissiblebatani losankha ndikutseka.

Pamafunika JavaScript alert plugin

Kuti zidziwitso zigwire ntchito bwino, zochotsedwa, muyenera kugwiritsa ntchito pulogalamu yowonjezera ya JavaScript .

Chenjezo! Kulibwino mudziyese nokha, simukuwoneka bwino kwambiri.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Onetsetsani kuti mukuchita bwino pazida zonse

Onetsetsani kuti mukugwiritsa ntchito <button>chinthucho ndi mawonekedwe a data-dismiss="alert"data.

Maulalo muzidziwitso

Gwiritsani .alert-linkntchito gulu lothandizira kuti mupereke ulalo wamitundu yofananira mu chenjezo lililonse.

Mwachita bwino! Munawerenga bwino uthenga wochenjezawu .

Mungodziwiratu! Chenjezoli likufunika chisamaliro chanu , koma silofunika kwambiri.

Chenjezo! Bwino kudzifufuza, simukuwoneka bwino kwambiri .

O, bwerani! Sinthani zinthu zingapo ndikuyesa kutumizanso.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Perekani ndemanga zaposachedwa za momwe ntchito ikuyendetsedwera kapena zochita ndi mipiringidzo yosavuta koma yosinthika.

Kugwirizana kwa msakatuli

Mipiringidzo yopita patsogolo imagwiritsa ntchito kusintha kwa CSS3 ndi makanema ojambula kuti akwaniritse zina mwazotsatira zake. Izi sizikugwiritsidwa ntchito mu Internet Explorer 9 ndi m'munsimu kapena mitundu yakale ya Firefox. Opera 12 sichirikiza makanema ojambula.

Kugwirizana kwa Content Security Policy (CSP).

Ngati tsamba lanu lili ndi Content Security Policy (CSP) lomwe silikuloleza style-src 'unsafe-inline', ndiye kuti simungathe kugwiritsa ntchito mizere styleyapaintaneti kuti mukhazikitse kukula kwa bar monga tawonera m'zitsanzo zathu pansipa. Njira zina zokhazikitsira m'lifupi zomwe zimagwirizana ndi CSPs okhwima zimaphatikizapo kugwiritsa ntchito JavaScript (yomwe imayika element.style.width) kapena kugwiritsa ntchito makalasi a CSS.

Chitsanzo choyambirira

Njira yofikira.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

Ndi chizindikiro

Chotsani <span>ndi .sr-onlykalasi mkati mwa kapamwamba kapamwamba kuti muwonetse kuchuluka kowonekera.

60%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Kuti muwonetsetse kuti zolembazo zimakhala zomveka ngakhale zocheperako, ganizirani kuwonjezera a min-widthpa kapamwamba kapamwamba.

0%

2%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

Njira zina zachitukuko

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

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Mizeremizere

Amagwiritsa ntchito gradient kuti apange mizeremizere. Sizikupezeka mu IE9 ndi pansipa.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Makanema

Onjezani .activekuti .progress-bar-stripedmupangitse mikwingwirima kumanja kupita kumanzere. Sizikupezeka mu IE9 ndi pansipa.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Zosungidwa

Ikani mipiringidzo yambiri mofanana .progresskuti muyike.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

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

Media yosasinthika

Makanema osasinthika amawonetsa 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 wankhani wapa 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.

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.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Maphunzirowa .pull-leftkomanso .pull-rightalipo ndipo adagwiritsidwa ntchito kale ngati gawo lazofalitsa, koma adasiya kugwiritsidwa ntchito ngati v3.3.0. Zili pafupifupi zofanana ndi .media-leftndi .media-right, kupatula zomwe .media-rightziyenera kuikidwa pambuyo .media-bodypa html.

Kulumikizana kwa media

Zithunzi kapena makanema ena amatha kulumikizidwa pamwamba, pakati kapena pansi. Zosasintha ndizolumikizidwa pamwamba.

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Media yolumikizana pakati

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Media yolumikizidwa pansi

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.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Media list

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

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.

Mutu wankhani wapa 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.

Mutu wankhani wapa 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.

Mutu wankhani wapa 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.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Magulu a mndandanda ndi chinthu chosinthika komanso champhamvu chowonetsera osati mndandanda wazinthu zosavuta, koma zovuta zomwe zili ndi chikhalidwe.

Chitsanzo choyambirira

Gulu la mndandanda wofunikira kwambiri ndi mndandanda wosasankhidwa wokhala ndi mndandanda wazinthu, ndi makalasi oyenera. Mangani pa izo ndi zosankha zomwe zikutsatira, kapena CSS yanu ngati pakufunika.

Cras justo odio
Dapibus ac facilisis in
Mowa lero
Porta ac consectetur ac
Vestibulum ndi eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Mabaji

Onjezani gawo la mabaji pagulu lililonse la gulu ndipo liziyika kumanja.

14Cras justo odio
2Dapibus ac facilisis in
1Mowa lero

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Zinthu zogwirizana

Lumikizani mndandanda wazinthu zamagulu pogwiritsa ntchito ma tag a nangula m'malo mwa mndandanda wazinthu (zomwe zikutanthauzanso kholo <div>m'malo mwa <ul>). Palibe chifukwa cha makolo payekha kuzungulira chinthu chilichonse.

Cras justo odio Dapibus ac facilisis in Mowa lero Porta ac consectetur ac Vestibulum ndi eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Zinthu za batani

Mndandanda wazinthu zamagulu zitha kukhala mabatani m'malo mwa mndandanda wazinthu (zomwe zikutanthauzanso kholo <div>m'malo mwa <ul>). Palibe chifukwa cha makolo payekha kuzungulira chinthu chilichonse. Osagwiritsa ntchito .btnmakalasi apa.

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

Zinthu zolemala

Onjezani .disabledku a .list-group-itemkuti imvi kuti iwoneke yolemala.

Cras justo odio Dapibus ac facilisis in Mowa lero Porta ac consectetur ac Vestibulum ndi eros

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Maphunziro a Contextual

Gwiritsani ntchito makalasi okhazikika kuti mupange mndandanda wazinthu, zosasinthika kapena zolumikizidwa. Zimaphatikizanso .activeboma.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum ndi eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum ndi eros

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Zomwe zili mwamakonda

Onjezani pafupifupi ma HTML aliwonse mkati, ngakhale pamagulu olumikizana nawo ngati omwe ali pansipa.

Lembani mutu wazinthu zamagulu

Donec id ili si mi porta gravida ndi eget metus. Maecenas sed diam eget risus varius blandit.

Lembani mutu wazinthu zamagulu

Donec id ili si mi porta gravida ndi eget metus. Maecenas sed diam eget risus varius blandit.

Lembani mutu wazinthu zamagulu

Donec id ili si mi porta gravida ndi eget metus. Maecenas sed diam eget risus varius blandit.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Ngakhale sizofunikira nthawi zonse, nthawi zina muyenera kuyika DOM yanu m'bokosi. Pazifukwa izi, yesani gawo lagawo.

Chitsanzo choyambirira

Mwachikhazikitso, zonse zomwe .panelamachita zimagwiritsa ntchito malire ndi padding kuti zikhale ndi zina.

Basic panel chitsanzo

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Gulu lokhala ndi mutu

Onjezani chidebe chamutu mosavuta pagulu lanu ndi .panel-heading. Mutha kuphatikizanso chilichonse <h1>- <h6>chokhala ndi .panel-titlekalasi kuti muwonjezere mutu wolembedweratu. Komabe, makulidwe a mafonti a <h1>- <h6>amachotsedwa ndi .panel-heading.

Kuti mupeze mitundu yoyenera ya maulalo, onetsetsani kuti mwayika maulalo pamitu mkati mwa .panel-title.

Mutu wapagulu wopanda mutu

Zomwe zili pagulu

Mutu wapagulu

Zomwe zili pagulu

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Gulu lokhala ndi pansi

Manga mabatani kapena mawu achiwiri mu .panel-footer. Zindikirani kuti zolemba zapansi pamagulu sizitengera mitundu ndi malire mukamagwiritsa ntchito kusinthasintha kwanthawi zonse chifukwa siziyenera kukhala kumayambiriro.

Zomwe zili pagulu

Tsamba lapansi

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Njira zina zachitukuko

Mofanana ndi zigawo zina, pangani gululo kukhala lotanthawuza pazochitika zinazake powonjezera magulu aliwonse a chikhalidwe.

Mutu wapagulu

Zomwe zili pagulu

Mutu wapagulu

Zomwe zili pagulu

Mutu wapagulu

Zomwe zili pagulu

Mutu wapagulu

Zomwe zili pagulu

Mutu wapagulu

Zomwe zili pagulu

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Ndi matebulo

Onjezani chilichonse chomwe chilibe malire .tablemkati mwa gulu kuti mupange mawonekedwe osasinthika. Ngati pali .panel-body, timawonjezera malire owonjezera pamwamba pa tebulo kuti tisiyanitse.

Mutu wapagulu

Zina zokhazikika pano. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu lero quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Dzina loyamba	Dzina lomaliza	Dzina lolowera
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	Mbalame	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Ngati palibe gulu lamagulu, chigawocho chimasuntha kuchoka pamutu kupita ku tebulo popanda kusokoneza.

Mutu wapagulu

#	Dzina loyamba	Dzina lomaliza	Dzina lolowera
1	Mark	Otto	@mdo
2	Yakobo	Thornton	@mafuta
3	Larry	Mbalame	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Ndi magulu amndandanda

Phatikizani mosavuta magulu amndandanda amtundu uliwonse mkati mwa gulu lililonse.

Mutu wapagulu

Zina zokhazikika pano. Nulla vitae elit libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu lero quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
Mowa lero
Porta ac consectetur ac
Vestibulum ndi eros

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Lolani asakatuli kuti azindikire kukula kwa kanema kapena chiwonetsero chazithunzi kutengera kukula kwa chipika chake popanga chiŵerengero chapadera chomwe chidzakula bwino pa chipangizo chilichonse.

Malamulo akugwiritsidwa ntchito mwachindunji ku <iframe>, <embed>, <video>, ndi <object>zinthu; mwasankha gwiritsani ntchito gulu la mbadwa .embed-responsive-itempamene mukufuna kufanana ndi masitayelo a zina.

Pro-Tip! Simufunikanso kuphatikizira frameborder="0"m'mabuku anu <iframe>momwe timakuchotserani.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Chokhazikika bwino

Gwiritsani ntchito chitsime ngati chosavuta pa chinthu kuti chiwonekere.

Taonani, ndili pachitsime!

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

Maphunziro osankha

Control padding ndi ngodya zozungulira ndi makalasi awiri osankha osintha.

Taonani, ndili m’chitsime chachikulu!

<div class="well well-lg">...</div>

Taonani, ndili pachitsime chaching'ono!

<div class="well well-sm">...</div>

Zigawo

Glyphicons

Ma glyphs omwe alipo

Momwe mungagwiritsire ntchito

Osasakaniza ndi zigawo zina

Zongogwiritsidwa ntchito pazinthu zopanda kanthu

Kusintha mawonekedwe azithunzi

Zithunzi zopezeka

Zitsanzo

Zotsitsa

Chitsanzo

Kuyanjanitsa

Zingafune kuyimitsidwa kowonjezera

Kuyanjanitsa .pull-rightkosiyidwa

Mitu

Wogawanitsa

Zinthu zolemala za menyu

Magulu a batani

Zida & popovers m'magulu a mabatani amafunikira masinthidwe apadera

Onetsetsani kuti mwalondola rolendikupereka chizindikiro

Chitsanzo choyambirira

Dinani batani la zida

Kukula

Nesting

Kusintha koyima

Magulu a batani olungamitsidwa

Kusamalira malire

IE8 ndi malire

Ndi <a>zinthu

Maulalo amakhala ngati mabatani

Ndi <button>zinthu

Zotsitsa za batani

Kudalira pulogalamu yowonjezera

Zotsitsa za batani limodzi

Kutsitsa kwa batani logawanika

Kukula

Kusintha kosiyanasiyana

Magulu olowetsa

Zolemba <input>zokha

Malangizo a zida & popover m'magulu olowetsa amafunikira masinthidwe apadera

Osasakaniza ndi zigawo zina

Onjezani zolemba nthawi zonse

Chitsanzo choyambirira

Kukula

Mabokosi ndi ma radio addons

batani addons

Mabatani okhala ndi zotsitsa

Mabatani agawo

Mabatani angapo

Navs

Kugwiritsa ntchito ma navs pamapanelo amafunikira pulogalamu yowonjezera ya JavaScript

Pangani ma navs ogwiritsidwa ntchito ngati navigation kupezeka

Ma tabu

Mapiritsi

Kulungamitsidwa

Safari ndi omvera olungamitsidwa navs

Maulalo oletsedwa

Kugwiritsiridwa ntchito kwa ulalo sikunakhudzidwe

Kugwiritsa ntchito dropdowns

Ma tabu okhala ndi zotsitsa

Mapiritsi okhala ndi zotsitsa

Navbar

Navbar yofikira

Zosefukira

Imafunika pulogalamu yowonjezera ya JavaScript

Kusintha malo ophwanyika a navbar

Pangani ma navbar kupezeka

Chithunzi chamtundu

Mafomu

Zidziwitso za chipangizo cham'manja

Onjezani zolemba nthawi zonse

Mabatani

Kugwiritsa ntchito mokhazikika

Mawu

Maulalo omwe si-nav

Kulumikizana kwagawo

Kumanja kulumikiza zigawo zingapo

Zokhazikika pamwamba

Padding thupi lofunika

Zokhazikika mpaka pansi

Kuyanjanitsa `.pull-right`kosiyidwa

Onetsetsani kuti mwalondola `role`ndikupereka chizindikiro

Ndi `<a>`zinthu

Ndi `<button>`zinthu

Zolemba `<input>`zokha