Glyphicons

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 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, mogwirizana 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 zolowetsamo mafomu okonzedweratu.

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

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

Zotsitsa

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

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>

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

Zingafune kuyimitsidwa kowonjezera

Zotsitsa zimangoyimitsidwa kudzera pa CSS mkati mwamayendedwe anthawi zonse a chikalatacho. Izi zikutanthauza kuti zotsikirako zitha kudulidwa ndi makolo omwe ali ndi overflowkatundu wina kapena kuwonekera kunja kwa malo owonera. Yang'anirani nokha zovuta izi zikabuka.

Kuyanjanitsa .pull-rightkosiyidwa

Pofika pa v3.1.0, tasiya .pull-rightmindandanda yotsitsa. Kuti mugwirizane ndi menyu kumanja, gwiritsani ntchito .dropdown-menu-right. Zigawo za nav zoyanika kumanja mu navbar zimagwiritsa ntchito mtundu wa mixin wa kalasi iyi kuti zigwirizane ndi menyu. Kuti muchepetse, gwiritsani ntchito .dropdown-menu-left.

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

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>

Onjezani chogawa kuti musiyanitse maulalo angapo pamenyu yotsitsa.

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

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>

Magulu a batani

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

Zida & popovers m'magulu a mabatani amafunikira makonzedwe 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 rolendikupereka 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>

Dinani batani la zida

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 ndi lina .btn-group.

Onani #12476 kuti mumve zambiri.

Ndi <a>zinthu

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

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

Zotsitsa za batani

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>

Magulu olowetsa

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 chinthu chokhudzana 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 zoperekedwa, zomwe zimatengera zochitika zenizeni.

Chitsanzo choyambirira

Ikani chowonjezera chimodzi kapena batani mbali zonse za zolowetsa. Mukhozanso kuyikapo mbali zonse ziwiri za zolowetsa.

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

Sitithandizira maulamuliro angapo pagulu limodzi lolowetsa.

@

@chitsanzo.com

$ .00

https://example.com/users/
<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>

Navs

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

Kugwiritsa ntchito navs pamapanelo amafunikira pulogalamu yowonjezera ya JavaScript

Pama tabu okhala ndi madera otheka, muyenera kugwiritsa ntchito pulogalamu yowonjezera ya JavaScript . Kuyikako kudzafunikanso 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.

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>

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>

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>

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>

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>

Navbar

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:

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

Imafunika pulogalamu yowonjezera ya JavaScript

Ngati JavaScript yayimitsidwa ndipo malo owonera ndi opapatiza kotero kuti navbar ikugwa, sikungatheke kukulitsa navbar ndikuwona zomwe zili mkati mwa.navbar-collapse .

Navbar yomvera imafuna pulogalamu yowonjezera yakugwa kuti ikhale ndi mtundu wanu wa Bootstrap.

Kusintha malo ophwanyika a navbar

Navbar imagwera m'mawonekedwe ake oyimilira pomwe malo owonera ndi ochepera kuposa @grid-float-breakpoint, ndikumakula mpaka mawonekedwe ake opingasa osakhala a foni yam'manja pomwe malo owonera ali @grid-float-breakpointm'lifupi mwake. Sinthani kusinthaku mu gwero Laling'ono kuti muwongolere pomwe navbar ikugwa/kukula. Mtengo wokhazikika ndi 768px(chithunzi chaching'ono "chochepa" kapena "piritsi").

Pangani ma navbar kupezeka

Onetsetsani kuti mukugwiritsa ntchito <nav>chinthu kapena, ngati mukugwiritsa ntchito chinthu chodziwika bwino monga a <div>, onjezani a role="navigation"pa navbar iliyonse kuti muwonetsere kuti ndi gawo lodziwika bwino kwa ogwiritsa ntchito matekinoloje othandizira.

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

Kuphatikiza apo, .navbar-formamagawana ma code ake ambiri ndi .form-inlinemixin. Kuwongolera mafomu kwina, monga magulu olowetsa, kungafunike m'lifupi mwake kuti ziwoneke 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>

Zidziwitso za chipangizo cham'manja

Pali zidziwitso zina zokhudzana ndi kugwiritsa ntchito mawonekedwe owongolera mkati mwazinthu zokhazikika pazida zam'manja. Onani zolemba zathu zothandizira msakatuli kuti mumve zambiri.

Onjezani zolemba nthawi zonse

Owerenga pazenera adzakhala ndi vuto ndi mafomu anu ngati simuphatikiza zilembo zilizonse. Pama fomu apaintaneti, mutha kubisa zilembozo 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>

Kugwiritsa ntchito mokhazikika

Monga makalasi abatani wamba , .navbar-btnatha kugwiritsidwa ntchito <a>ndi <input>zinthu. Komabe, .navbar-btnkapena makalasi a batani lokhazikika sayenera kugwiritsidwa ntchito pazinthu <a>zomwe zili mkati mwa .navbar-nav.

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 zolemba, pogwiritsa .navbar-leftntchito .navbar-rightmakalasi ofunikira. Makalasi onsewa adzawonjezera kuyandama kwa CSS kumbali yomwe mwatchulidwa. Mwachitsanzo, kuti muyanjanitse maulalo a nav, ikani mosiyana <ul>ndi gulu lothandizira lomwe likugwiritsidwa ntchito.

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

Kumanja kulumikiza zigawo zingapo

Ma Navbar pakadali pano ali ndi malire okhala ndi .navbar-rightmakalasi angapo. Kuti danga bwino, timagwiritsa ntchito malire olakwika pa .navbar-rightchinthu chomaliza. Pakakhala zinthu zingapo zogwiritsa ntchito kalasi imeneyo, mitsinje iyi sigwira ntchito momwe amafunira.

Tidzawonanso izi tikatha kulembanso gawoli mu v4.

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-fluidpakatikati 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 tsamba lomwe lili patsamba lino muulamuliro 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>

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>

Zolemba

Chitsanzo

Chitsanzo mutu Watsopano

Chitsanzo mutu Watsopano

Chitsanzo mutu Watsopano

Chitsanzo mutu Watsopano

Chitsanzo mutu Watsopano
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 .

Mabaji

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>

Jumbotron

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>

Tsamba lamutu

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>

Tizithunzi

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 zimafunikira 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 zamtundu uliwonse wa HTML monga mitu, ndime, kapena mabatani pazithunzi.

100%x200

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

100%x200

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

100%x200

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>

Zidziwitso

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) pa mauthenga ofunikira.

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.

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

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

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

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

Mipiringidzo yopita patsogolo

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.

60% Yathunthu
<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 kuchokera mkati mwa 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, lingalirani zowonjeza min-widthku 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.

40% Yokwanira (kupambana)
20% Yathunthu
60% Yathunthu (chenjezo)
80% Yokwanira (yoopsa)
<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. Palibe mu IE9 ndi pansipa.

40% Yokwanira (kupambana)
20% Yathunthu
60% Yathunthu (chenjezo)
80% Yokwanira (yoopsa)
<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. Palibe mu IE9 ndi pansipa.

45% Yathunthu
<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.

35% Yokwanira (kupambana)
20% Yathunthu (chenjezo)
10% Yokwanira (yoopsa)
<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>

Media chinthu

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, mawu) 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>

Lembani gulu

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.

<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 zinthu zamndandanda (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.

<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 magalasi ozungulira kuti mupange mndandanda wazinthu, zosasinthika kapena zogwirizana. Zimaphatikizanso .activeboma.

  • 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 pamndandanda wamagulu olumikizidwa monga pansipa.

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

Magulu

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>

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
<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, gawolo limasuntha 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>

Kuyika momvera

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>

Zitsime

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>