Glyphs dị

Gụnyere ihe karịrị 250 glyph n'ụdị mkpụrụedemede sitere na Glyphicon Halflings set. Glyphicons Halflings anaghị adị n'efu, mana onye kere ha emeela ka ha dịrị maka Bootstrap n'efu. Dịka ekele gị, naanị anyị na-arịọ ka ị tinye njikọ azụ na Glyphicons mgbe ọ bụla enwere ike.

Glyphicon glyphicon-akara mmuke
glyphicon glyphicon-gbakwunyere
glyphicon-euro
glyphicon-eur
glyphicon glyphicon-mwepu
glyphicon glyphicon-igwe ojii
glyphicon glyphicon-envelopu
glyphicon glyphicon-pensụl
glyphicon glyphicon-glass
glyphicon glyphicon-egwu
ihe nchọta glyphicon glyphicon
glyphicon glyphicon-obi
kpakpando glyphicon
glyphicon glyphicon-kpakpando-efu
onye ọrụ glyphicon glyphicon-onye ọrụ
ihe nkiri glyphicon glyphicon
glyphicon glyphicon-th-nnukwu
glyphicon glyphicon-th
glyphicon glyphicon-th-ndepụta
glyphicon glyphicon-ọ dị mma
glyphicon glyphicon-wepu
glyphicon glyphicon-mbubata
glyphicon glyphicon-mbugharị-apụ
glyphicon glyphicon-apụ
akara ngosi glyphicon
glyphicon-cog
glyphicon glyphicon-ihe mkpofu
glyphicon glyphicon-ụlọ
glyphicon glyphicon-faịlụ
oge glyphicon glyphicon
glyphicon glyphicon-ụzọ
glyphicon glyphicon-budata-alt
glyphicon glyphicon-budata
glyphicon glyphicon-ebugote
igbe mbata glyphicon glyphicon
glyphicon glyphicon-egwu-gburugburu
glyphicon glyphicon-emegharị
glyphicon glyphicon-ume ọhụrụ
glyphicon glyphicon-ndepụta-alt
glyphicon glyphicon-mkpọchi
glyphicon glyphicon-ọkọlọtọ
glyphicon glyphicon - ekweisi
glyphicon glyphicon-olu-apụ
glyphicon glyphicon-olu-ala
glyphicon glyphicon-olu-elu
Glyphicon glyphicon-qrcode
Glyphicon glyphicon-barcode
glyphicon glyphicon-tag
mkpado glyphicon glyphicon
akwụkwọ glyphicon glyphicon
glyphicon glyphicon-bookmark
glyphicon glyphicon-ebipụta
glyphicon glyphicon-igwefoto
glyphicon glyphicon-font
glyphicon glyphicon-obi ike
glyphicon-italic
glyphicon glyphicon-ederede-ịdị elu
glyphicon glyphicon-ederede-obosara
glyphicon glyphicon-align-ekpe
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-zie ezi
ndepụta glyphicon glyphicon
glyphicon glyphicon-indent-aka ekpe
glyphicon glyphicon-indent-nri
glyphicon glyphicon-facetime-video
glyphicon glyphicon-eserese
glyphicon glyphicon-map-marker
glyphicon glyphicon-gbanwee
glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-oke
glyphicon glyphicon-elele
glyphicon glyphicon-akpali
glyphicon glyphicon-nzọụkwụ-azụ
glyphicon glyphicon-ngwa ngwa-azụ
glyphicon glyphicon-azụ
glyphicon glyphicon-egwu
glyphicon glyphicon-kwụsịtụ
glyphicon glyphicon-nkwụsị
glyphicon glyphicon-n'ihu
glyphicon glyphicon-ọsọ-n'ihu
glyphicon glyphicon-nzọụkwụ-na-aga n'ihu
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-ekpe
glyphicon glyphicon-chevron-nri
glyphicon glyphicon-gbakwunyere-akara
glyphicon glyphicon-mwepu-akara
glyphicon glyphicon-ewepu-akara
glyphicon glyphicon-ok-akara
glyphicon glyphicon-akara ajụjụ-akara
akara glyphicon glyphicon-ozi-akara
glyphicon glyphicon-nseta ihuenyo
glyphicon glyphicon-wepu-okirikiri
glyphicon glyphicon-ok- okirikiri
glyphicon glyphicon-ban-okirikiri
glyphicon glyphicon-akụ-ekpe
glyphicon glyphicon-akụ-nri
glyphicon glyphicon-akụ-elu
glyphicon glyphicon-akụ-ala
glyphicon glyphicon-share-alt
glyphicon glyphicon-nha-uju
glyphicon glyphicon-nha-obere
glyphicon glyphicon-mkpu-akara
onyinye glyphicon glyphicon-onyinye
akwụkwọ glyphicon-glyphicon
glyphicon glyphicon-ọkụ
glyphicon glyphicon-anya-emeghe
glyphicon glyphicon-anya-nso
glyphicon glyphicon-ịdọ aka ná ntị-akara
glyphicon glyphicon-ụgbọ elu
glyphicon glyphicon-kalịnda
glyphicon glyphicon-random
glyphicon glyphicon-okwu
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-elu
glyphicon glyphicon-chevron-ala
glyphicon glyphicon-retweet
ụgbọ ahịa glyphicon glyphicon-ịzụ ahịa
glyphicon glyphicon-nchekwa-nchekwa
glyphicon glyphicon-folda-emeghe
glyphicon glyphicon-resize- vetikal
glyphicon glyphicon-nha-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-mgbịrịgba
Asambodo glyphicon glyphicon
glyphicon glyphicon-mkpịsị aka elu
glyphicon glyphicon-mkpịsị aka-ala
glyphicon glyphicon-aka-nri
glyphicon glyphicon-aka-ekpe
glyphicon glyphicon-aka-elu
glyphicon glyphicon-aka-ala
glyphicon glyphicon-gburugburu-akụ-nri
glyphicon glyphicon-okirikiri-akụ-akaekpe
glyphicon glyphicon-gburugburu-akụ-elu
glyphicon glyphicon-gburugburu-akụ-ala
Glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-ọrụ
glyphicon glyphicon-nyo
obere akpa glyphicon
glyphicon glyphicon - ihuenyo zuru oke
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-obi-efu
glyphicon glyphicon-njikọ
ekwentị glyphicon glyphicon
Glyphicon-pushpin
glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-ụdị
glyphicon glyphicon-ụdị-site-mkpụrụedemede
glyphicon glyphicon-ụdị-site-mkpụrụedemede-alt
glyphicon glyphicon-usoro-site-n'usoro
glyphicon glyphicon-ụdị-site-usoro-alt
glyphicon glyphicon-ụdị-site-njirimara
glyphicon glyphicon-ụdị-site-njirimara-alt
glyphicon glyphicon-anaghị enyocha ya
glyphicon glyphicon-gbasaa
glyphicon glyphicon-dalata-ala
glyphicon glyphicon-dakpọ-elu
glyphicon glyphicon-nbanye
glyphicon glyphicon-flash
glyphicon glyphicon-apụ apụ
glyphicon glyphicon-window ọhụrụ
glyphicon glyphicon - ndekọ
glyphicon glyphicon-azọpụta
glyphicon glyphicon-emeghe
glyphicon glyphicon echekwara
glyphicon glyphicon-mbubata
glyphicon glyphicon-ebupụ
glyphicon glyphicon-eziga
glyphicon glyphicon-floppy diski
glyphicon glyphicon-floppy echekwara
glyphicon glyphicon-floppy-wepu
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-emeghe
glyphicon glyphicon-kaadị kredit
glyphicon glyphicon-enyefe
Glyphicon glyphicon-cutlery
glyphicon glyphicon - nkụnye eji isi mee
glyphicon glyphicon-mpịakọta
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
ụlọ elu glyphicon
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
Nkọwa okwu glyphicon glyphicon
glyphicon glyphicon-ụda-stereo
glyphicon glyphicon-ụda-dolby
glyphicon glyphicon-ụda-5-1
glyphicon glyphicon-ụda-6-1
glyphicon glyphicon-ụda-7-1
glyphicon glyphicon-akara ikike nwebisiinka
glyphicon glyphicon-akara ndebanye
glyphicon glyphicon-Cloud-budata
bulite glyphicon glyphicon-igwe ojii
glyphicon glyphicon-osisi-conifer
glyphicon glyphicon-osisi-deciduous
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-ọkwa elu
glyphicon glyphicon-otuo
glyphicon glyphicon-tapawa
glyphicon glyphicon-elet
glyphicon glyphicon-equalizer
glyphicon glyphicon-eze
glyphicon glyphicon-eze nwanyị
glyphicon glyphicon-pawn
glyphicon glyphicon-bishọp
glyphicon glyphicon-knight
glyphicon glyphicon-nwa-formula
glyphicon glyphicon-tent
glyphicon glyphicon-blackboard
glyphicon glyphicon-bed
glyphicon glyphicon-apple
glyphicon glyphicon-ehichapụ
glyphicon glyphicon-hourglass
glyphicon glyphicon- oriọna
glyphicon glyphicon- oyiri
Glyphicon glyphicon-piggy-bank
glyphicon glyphicon-mma
Ọnụ ego nke glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
Glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-ọnụ ọgụgụ
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-atọ ụtọ
glyphicon glyphicon-akụziri
glyphicon glyphicon-nhọrọ-horizontal
glyphicon glyphicon-nhọrọ- vetikal
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
mmanụ glyphicon glyphicon-mmanụ
glyphicon glyphicon-ọka
glyphicon glyphicon-ugogbe anya maka anwụ
glyphicon glyphicon-nha ederede
glyphicon glyphicon-ederede-agba
glyphicon glyphicon-ederede- ndabere
glyphicon glyphicon-object-align-top
glyphicon glyphicon-ihe-nhazi-ala
glyphicon glyphicon-ihe-aligne-horizontal
glyphicon glyphicon-ihe-nhazi-akaekpe
glyphicon glyphicon-ihe-nhazi- kwụ ọtọ
glyphicon glyphicon-ihe-nhazi-nri
glyphicon glyphicon-triangle-nri
glyphicon glyphicon-triangle-ekpe
glyphicon glyphicon-triangle-ala
glyphicon glyphicon-triangle-elu
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-menu-ekpe
glyphicon glyphicon-menu-nri
glyphicon glyphicon-menu-ala
glyphicon glyphicon-menu-elu

Otu esi eji

Maka ebumnuche arụmọrụ, akara ngosi niile chọrọ klaasị ntọala na otu akara ngosi. Iji jiri, tinye koodu na-esonụ ebe ọ bụla. Jide n'aka na ị ga-ahapụ oghere n'etiti akara ngosi na ederede maka akwa akwa kwesịrị ekwesị.

Ejikọtala ihe ndị ọzọ

Enweghị ike ijikọ klaasị akara na ihe ndị ọzọ. E kwesịghị iji ha na klaasị ndị ọzọ n'otu mmewere. Kama, tinye akwụkwụ <span>wee tinye klaasị akara ngosi na faịlụ <span>.

Naanị maka ojiji na ihe efu

Ekwesịrị iji klas akara ngosi naanị na ihe enweghị ọdịnaya ederede yana enweghị ihe ụmụaka.

Na-agbanwe ọnọdụ mkpụrụedemede akara ngosi

Bootstrap chere na faịlụ font akara ngosi ga-adị na ../fonts/ndekọ aha, dabere na faịlụ CSS achịkọtara. Ịtụgharị ma ọ bụ ịnyegharị faịlụ ndị ahụ aha pụtara imelite CSS n'otu ụzọ atọ:

Gbanwee @icon-font-pathna/ma ọ bụ @icon-font-namemgbanwe dị na isi mmalite faịlụ dị obere.
Jiri nhọrọ URL ndị ikwu nke onye mkpokọta pere mpe nyere.
Gbanwee url()ụzọ dị na CSS achịkọtara.

Jiri nhọrọ ọ bụla dabara na ntọala mmepe gị akọwapụtara.

Akara ngosi enwere ike ịnweta

Ụdị teknụzụ enyemaka nke ọgbara ọhụrụ ga-akpọsa ọdịnaya ewepụtara CSS yana mkpụrụedemede Unicode akọwapụtara. Iji zere mmepụta na-atụghị anya ya na mgbagwoju anya na ndị na-agụ ihuenyo (karịsịa mgbe ejiri akara ngosi naanị maka ịchọ mma), anyị na-ezobe ha naaria-hidden="true" njirimara.

Ọ bụrụ na ị na-eji akara ngosi akọwapụta ihe ọ pụtara (kama ọ bụghị naanị dị ka ihe ịchọ mma), hụ na ebutekwara nkọwa a na teknụzụ enyemaka - dịka ọmụmaatụ, tinye ọdịnaya agbakwunyere, nke zoro ezo na anya..sr-only klaasị.

Ọ bụrụ na ị na-emepụta njikwa na-enweghị ederede ọzọ (dị ka <button>nke nwere naanị akara ngosi), ị kwesịrị ị na-enye ọdịnaya ọzọ mgbe niile iji chọpụta ebumnuche njikwa ahụ, ka ọ bụrụ ihe ezi uche dị na ya nye ndị ọrụ teknụzụ enyemaka. N'okwu a, ịnwere ike ịgbakwunye aria-labelnjirimara na njikwa n'onwe ya.

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

Ihe atụ

Jiri ha na bọtịnụ, otu bọtịnụ maka ogwe ngwaọrụ, igodo, ma ọ bụ ntinye ụdị echedoro.

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

Akara ngosi ejiri n'ọkwa iji gosi na ọ bụ ozi ezighi ezi, yana .sr-onlyederede agbakwunyere iji gosi ndị ọrụ teknụzụ enyemaka.

Tinye adreesị ozi-e bara uru

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

Enwere ike ịgbanwee, menu onodu okirikiri maka igosipụta ndepụta njikọ. Ejiri ngwa mgbakwunye Javascript emekọrịta ihe .

Ọmụmaatụ

Kechie mkpalite dropdown na menu ndọpụta n'ime .dropdown, ma ọ bụ ihe ọzọ na-ekwupụta position: relative;. Mgbe ahụ tinye HTML menu.

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

Enwere ike ịgbanwe menus mwụda ka ọ gbasaa elu (kama ala) site na ịgbakwunye .dropupnne na nna.

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

Nhazi

Site na ndabara, a na-edobe menu ndetu ozugbo 100% site na elu yana n'akụkụ aka ekpe nke nne na nna ya. Tinye .dropdown-menu-rightna a .dropdown-menun'aka nri kwado menu ndọpụta.

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

nkụnye eji isi mee

Tinye nkụnye eji isi mee ka aha ngalaba omume na nchịkọta nhọrọ ọ bụla.

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

Nkesa

Tinye ihe nkesa ka ị kewaa usoro njikọ na menu ndọpụta.

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

Ihe nchịkọta nhọrọ agbanyụrụ

Tinye .disabledna a <li>na ndọpụta iji gbanyụọ njikọ ahụ.

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

Jikọta usoro bọtịnụ ọnụ n'otu ahịrị yana otu bọtịnụ. Tinye na redio Javascript nhọrọ yana omume ụdị igbe nlele na ngwa mgbakwunye bọtịnụ anyị .

Ntuziaka ngwaọrụ & popovers na otu bọtịnụ chọrọ ntọala pụrụ iche

Mgbe ị na-eji Tooltips ma ọ bụ popovers na ọcha n'ime a .btn-group, ị ga-ezipụta nhọrọ container: 'body'iji zere mmetụta ndị na-achọghị (dị ka mmewere na-etowanye na/ma ọ bụ na-efunahụ akụkụ ya gburugburu mgbe ebutere tooltip ma ọ bụ popover).

Gbaa mbọ hụ na ọ ziri ezi `role`wee nye akara

Ka teknụzụ na-enyere aka - dị ka ndị na-agụ ihuenyo - iji gosi na a na-achịkọta usoro nke bọtịnụ, ọ roledị mkpa ịnye àgwà kwesịrị ekwesị. Maka otu bọtịnụ, nke a ga-abụ role="group", ebe toolbar kwesịrị inwe role="toolbar".

Otu ewepụrụ bụ otu nwere naanị otu njikwa (dịka ọmụmaatụ otu bọtịnụ ziri ezi nwere <button>ọcha) ma ọ bụ ndetu.

Na mgbakwunye, otu na ngwaọrụ ngwaọrụ kwesịrị inye akara doro anya, n'ihi na ọtụtụ teknụzụ na-enyere aka agaghị akpọsa ha ma ọ bụghị ya, n'agbanyeghị ọnụnọ nke njirimara ziri ezi role. N'ihe atụ ndị e nyere ebe a, anyị na-eji aria-label, ma ndị ọzọ dị ka aria-labelledbynwekwara ike iji.

Ihe atụ bụ isi

Kechie usoro bọtịnụ .btnna .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>

Gwakọta tent <div class="btn-group">n'ime a <div class="btn-toolbar">maka ihe mgbagwoju anya.

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

Nha nha

Kama itinye klaasị nha bọtịnụ na bọtịnụ ọ bụla n'ime otu, gbakwunye .btn-group-*na nke ọ bụla .btn-group, gụnyere mgbe ị na-akpa ọtụtụ otu.

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

Akwu

Debe .btn-groupn'ime ọzọ .btn-groupmgbe ịchọrọ menu ndọpụta agwakọta ya na usoro bọtịnụ.

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

Mgbanwe kwụ ọtọ

Mee ka otu bọtịnụ ka ọ dị ka ekpokọtara ya na kwụ ọtọ kama ịbụ kehoraizin. Anaghị akwado mwụda bọtịnụ gbawara ebe a.

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

Otu bọtịnụ ziri ezi

Mee ka otu bọtịnụ gbatịa n' nha nha ka ọ gbasaa obosara nke nne na nna ya. Ọ na-arụkwa ọrụ na ntinye bọtịnụ n'ime otu bọtịnụ.

Ijikwa oke

N'ihi HTML na CSS a kapịrị ọnụ ejiri iji kwado bọtịnụ (ya bụ display: table-cell), ókèala dị n'etiti ha na-agbaji okpukpu abụọ. Na otu bọtịnụ oge niile, margin-left: -1pxa na-eji ekpokọta oke ala kama iwepu ha. Agbanyeghị, marginanaghị arụ ọrụ na display: table-cell. N'ihi ya, dabere na nhazi gị na Bootstrap, ị nwere ike ịwepụ ma ọ bụ gbanwee agba nke oke.

IE8 na oke

Internet Explorer 8 anaghị ewepụta oke na bọtịnụ na otu bọtịnụ ziri ezi, ma ọ dị na <a>ma ọ bụ <button>ihe. Iji mee nke a, kechie bọtịnụ ọ bụla n'akụkụ nke ọzọ .btn-group.

Hụ #12476 maka ozi ndị ọzọ.

Na `<a>`ọcha

Naanị kechie usoro .btns na .btn-group.btn-group-justified.

Aka ekpe N'etiti Right

Aka ekpe N'etiti

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

Njikọ na-arụ ọrụ dị ka bọtịnụ

Ọ bụrụ na <a>a na-eji ihe ndị ahụ eme ihe dị ka bọtịnụ - na-ebute ọrụ dị na ibe, kama ịgagharị na akwụkwọ ma ọ bụ ngalaba ọzọ n'ime ibe dị ugbu a - ekwesịrị inye ha ihe kwesịrị ekwesị role="button".

Na `<button>`ọcha

Iji jiri otu bọtịnụ ziri ezi nwere <button>ọcha, ị ga-ekechi bọtịnụ ọ bụla na otu bọtịnụ . Ọtụtụ ihe nchọgharị anaghị etinye CSS anyị nke ọma maka izi ezi maka <button>ihe, mana ebe anyị na-akwado ndetu bọtịnụ, anyị nwere ike ịrụ ọrụ na nke ahụ.

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

Jiri bọtịnụ ọ bụla kpalite menu ndọpụta site na itinye ya n'ime .btn-groupma nye akara ngosi menu kwesịrị ekwesị.

Ndabere ngwa mgbakwunye

Mbudata bọtịnụ chọrọ ka etinyere ngwa mgbakwunye na ụdị Bootstrap gị.

Mbudata bọtịnụ otu

Tụgharịa bọtịnụ ka ọ bụrụ ngbanwe mkpọda nwere ụfọdụ mgbanwe akara akara.

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

Mbelata bọtịnụ gbawara agbawa

N'otu aka ahụ, mepụta bọtịnụ mgbada gbawara agbawa nwere otu mgbanwe akara, naanị jiri bọtịnụ dị iche.

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

Nha nha

Mbelata bọtịnụ na-arụ ọrụ na bọtịnụ nha niile.

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

Mwepu mgbanwe

Kpalite menu ndọpụta n'elu ihe site na ịgbakwunye .dropupnne na nna.

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

Gbatịa njikwa ụdị site na ịgbakwunye ederede ma ọ bụ bọtịnụ tupu, mgbe, ma ọ bụ n'akụkụ abụọ nke ederede ọ bụla dabere <input>. Jiri .input-groupma .input-group-addonọ bụ .input-group-btnkwado ma ọ bụ tinye ihe na otu .form-control.

Ederede `<input>`s naanị

Zere iji <select>ihe ndị a n'ihi na enweghị ike ịhazi ha nke ọma na ihe nchọgharị WebKit.

Zere iji <textarea>ihe ndị a n'ihi rowsna agaghị asọpụrụ àgwà ha n'ọnọdụ ụfọdụ.

Ntuziaka ngwaọrụ & popovers na otu ntinye chọrọ ntọala pụrụ iche

Mgbe ị na-eji Tooltips ma ọ bụ popovers na ọcha n'ime ihe .input-group, ị ga-ezipụta nhọrọ container: 'body'iji zere mmetụta ndị na-achọghị (dị ka mmewere na-etowanye na/ma ọ bụ na-efunahụ akụkụ ya gburugburu mgbe ebutere tooltip ma ọ bụ popover).

Ejikọtala ihe ndị ọzọ

Ejikọtala otu ụdị ma ọ bụ klas kọlụm grid ozugbo na otu ntinye. Kama, kpakọba otu ndenye n'ime otu ụdị ma ọ bụ ihe metụtara grid.

Tinye akara mgbe niile

Ndị na-agụ ihuenyo ga-enwe nsogbu na ụdị gị ma ọ bụrụ na itinyeghị akara maka ntinye ọ bụla. Maka otu ndenye ndị a, hụ na ebugara akara ma ọ bụ ọrụ ọ bụla na teknụzụ enyemaka.

Usoro a ga-eji (ihe a na-ahụ anya <label>, <label>ihe ndị zoro ezo site na iji .sr-onlyklaasị, ma ọ bụ ojiji nke aria-label, aria-labelledby, aria-describedby, titlema ọ bụ placeholderàgwà) yana ozi ndị ọzọ a ga-ebuga ga-adịgasị iche dabere n'ụdị wijetị interface ị na-emejuputa. Ọmụmaatụ ndị dị na ngalaba a na-enye ụzọ ole na ole atụpụtara, nke akọwapụtara nke ọma.

Ihe atụ bụ isi

Tinye otu mgbakwunye ma ọ bụ bọtịnụ n'akụkụ ọ bụla nke ntinye. Ị nwekwara ike idowe otu n'akụkụ abụọ nke ntinye.

Anyị anaghị akwado ọtụtụ mgbakwunye ( .input-group-addonma ọ bụ .input-group-btn) n'otu akụkụ.

Anyị anaghị akwado ọtụtụ njikwa-ụdị n'ime otu ntinye.

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

Nha nha

Tinye klaasị nha nha nha .input-groupn'onwe ya na ọdịnaya dị n'ime ga-agbanwe na-akpaghị aka - ọ dịghị mkpa ịmegharị klaasị nha nha ụdị na mmewere ọ bụla.

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

Igbe nlele na ihe mgbakwunye redio

Tinye igbe nrịbama ma ọ bụ nhọrọ redio ọ bụla n'ime ntinye otu ntinye kama ederede.

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

Tinye bọtịnụ

Bọtịnụ ndị dị na otu ntinye dịtụ iche ma chọọ otu ọkwa akwụkwụ ọzọ. Kama .input-group-addon, ị ga-achọ iji .input-group-btnkechie bọtịnụ. Achọrọ nke a n'ihi ụdị ihe nchọgharị ndabara nke enweghị ike ịkagbu.

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

Bọtịnụ nwere ndapụta

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

Bọtịnụ ndị kewara

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

Otutu bọtịnụ

Ọ bụ ezie na ị nwere ike ịnwe naanị otu mgbakwunye n'otu akụkụ, ịnwere ike ịnwe ọtụtụ bọtịnụ n'ime otu faịlụ .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>

Ndị agha ụgbọ mmiri dị na Bootstrap ekekọrịtara akara, malite na .navklaasị, yana steeti ekekọrịtara. Gbanwee klaasị modifier ka ịgbanwee n'etiti ụdị ọ bụla.

Iji navs maka akụkụ taabụ chọrọ ngwa mgbakwunye taabụ Javascript

Maka taabụ nwere mpaghara tabbable, ị ga-ejirịrị ngwa mgbakwunye Javascript . Ihe nrịbama a ga-achọkwa mgbakwunye rolena njirimara ARIA - lee ihe atụ ngwa mgbakwunye maka nkọwa ndị ọzọ.

Mee ka ndị agha ụgbọ mmiri mee ka enwere ike ịnweta ya

Ọ bụrụ na ị na-eji ụgbọ mmiri iji weta mmanya nsoroụzọ, jide n'aka na ị ga-agbakwunye role="navigation"na akpa nne na nna kacha ezi uche dị na ya <ul>, ma ọ bụ kechie <nav>mmewere gburugburu nsoroụzọ niile. Etinyekwala ọrụ ahụ <ul>n'onwe ya, n'ihi na nke a ga-egbochi ịkpọsa ya dị ka ndepụta n'ezie site na teknụzụ enyemaka.

Taabụ

Rịba ama na .nav-tabsklas chọrọ .navklaasị isi.

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

Ọgwụ

Were otu HTML ahụ, mana jiri .nav-pillskama:

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

A na-enwekwa ike ikpokọta mkpụrụ ọgwụ na kwụ ọtọ. Naanị tinye .nav-stacked.

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

Kwesịrị ekwesị

Jiri nwayọ mee taabụ ma ọ bụ ọgwụ nha nha nha nha nke nne na nna ha na ihuenyo ka obosara karịa 768px nwere .nav-justified. N'ihuenyo ndị pere mpe, a na-akwakọba njikọ ndị ụgbọ mmiri.

A naghị akwado njikọ navbar ziri ezi ugbu a.

Safari na ndị agha ụgbọ mmiri ziri ezi na-anabata

Dị ka nke v9.1.2, Safari na-egosipụta ahụhụ nke imegharị ihe nchọgharị gị n'ụzọ kwụ ọtọ na-akpata mmejọ nav ziri ezi nke na-ekpochapụ na ume ọhụrụ. Egosikwara ahụhụ a n'ụkpụrụ nav ziri ezi .

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

Njikọ ndị nwere nkwarụ

Maka akụrụngwa nav ọ bụla (taabụ ma ọ bụ ọgwụ), gbakwunye .disabledmaka njikọ isi awọ na enweghị mmetụta hover .

emetụtaghị ọrụ njikọ

Klas a ga-agbanwe naanị <a>ọdịdị ', ọ bụghị ọrụ ya. Jiri Javascript omenala iji gbanyụọ njikọ ebe a.

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

Iji dropdowns

Tinye ndetu mwụda nwere ntakịrị HTML mgbakwunye yana ngwa mgbakwunye Javascript .

Taabụ nwere dropdowns

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

Ọgwụ nwere ndapụta

<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 bụ ihe meta na-anabata nke na-arụ ọrụ dị ka nkụnye igodo ụzọ maka ngwa ma ọ bụ saịtị gị. Ha na-amalite daa (ma na-atụgharị) na nlele mkpanaka wee bụrụ kehoraizin ka obosara nlele dị na-abawanye.

A naghị akwado njikọ navbar ziri ezi ugbu a.

Ọdịnaya na-ejubiga ókè

Ebe ọ bụ na Bootstrap amaghị oke ohere ọdịnaya dị na navbar gị chọrọ, ị nwere ike ịbanye na nsogbu gbasara itinye ọdịnaya n'ime ahịrị nke abụọ. Iji dozie nke a, ị nwere ike:

Belata ego ma ọ bụ obosara nke ihe navbar.
Zoo ụfọdụ ihe navbar n'ụfọdụ nha ihuenyo site na iji klaasị ịba uru .
Gbanwee isi ihe navbar gị na-agbanye n'etiti ọnọdụ dara ada na kehoraizin. Hazie @grid-float-breakpointmgbanwe ma ọ bụ tinye ajụjụ mgbasa ozi nke gị.

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

Jiri onyonyo nke gị dochie akara navbar site n'ịgbanwe ederede maka faịlụ <img>. Ebe ọ bụ na .navbar-brande nwere padding na ịdị elu nke ya, ị nwere ike ịkagbu ụfọdụ CSS dabere na onyonyo gị.

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

Debe ọdịnaya n'ime .navbar-formmaka nhazi kwụ ọtọ na omume dara ada n'ọdụ ụgbọ mmiri dị warara. Jiri nhọrọ nhazigharị ka ikpebi ebe ọ bi n'ime ọdịnaya navbar.

Dịka isi mmalite, .navbar-formna-ekerịta ọtụtụ koodu ya .form-inlinesite na mixin. Ụfọdụ njikwa ụdị, dị ka otu ndenye, nwere ike ịchọ ka obosara obosara ka egosipụtara nke ọma n'ime ebe nchekwa ụgbọ mmiri.

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

Tinye akara mgbe niile

Ndị na-agụ ihuenyo ga-enwe nsogbu na ụdị gị ma ọ bụrụ na itinyeghị akara maka ntinye ọ bụla. Maka ụdị inline ndị a, ị nwere ike zoo akara n'iji .sr-onlyklas ahụ. Enwere ụzọ ọzọ nke ịnye akara maka teknụzụ enyemaka, dị ka aria-label, aria-labelledbyma ọ bụ titlenjirimara. Ọ bụrụ na ọ nweghị nke ọ bụla n'ime ihe ndị a dị, ndị na-agụ enyo nwere ike ịmalite iji placeholdernjirimara ahụ, ọ bụrụ na ọ dị, mana rịba ama na akwadoghị iji placeholderdị ka nnọchi maka ụzọ akara ndị ọzọ.

Tinye .navbar-btnklas ahụ na <button>ihe ndị na-adịghị ebi na a <form>ka ha guzoro ọtọ n'etiti navbar.

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

Kechie eriri ederede na mmewere na .navbar-text, na-emekarị na <p>mkpado maka ndu na agba kwesịrị ekwesị.

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

Maka ndị folks na-eji njikọ ọkọlọtọ na-anọghị n'ime mpaghara igodo nsoro ụzọ oge niile, jiri .navbar-linkklas tinye agba kwesịrị ekwesị maka nhọrọ navbar ndabara na nke na-agbanwe agbanwe.

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

Hazie njikọ, ụdị, bọtịnụ, ma ọ bụ ederede, site na iji klaasị .navbar-leftma ọ bụ ike. .navbar-rightKlas abụọ a ga-agbakwunye CSS sere n'elu na ntụzịaka akọwapụtara. Dịka ọmụmaatụ, iji dozie njikọ nav, tinye ha n'ebe dị iche <ul>yana klaasị akụrụngwa etinyere ya.

Klas ndị a bụ ụdị agwakọta-ed nke .pull-leftna .pull-right, mana ha na-agbasa na ajụjụ mgbasa ozi maka ijikwa ngwa navbar mfe n'ofe nha ngwaọrụ.

Tinye .navbar-fixed-topma tinye .containerma ọ bụ .container-fluidna etiti na pad ọdịnaya navbar.

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

Ihe mkpuchi ahụ chọrọ

Navbar etinyere ga-ekpuchi ọdịnaya gị ọzọ, ọ gwụla ma ị gbakwunyere paddingn'elu <body>. Nwalee ụkpụrụ nke gị ma ọ bụ jiri snippet anyị n'okpuru. Ndụmọdụ: Site na ndabara, navbar dị elu 50px.

body { padding-top: 70px; }

Gbaa mbọ hụ na itinye nke a ka emechara Bootstrap isi CSS.

Tinye .navbar-fixed-bottomma tinye .containerma ọ bụ .container-fluidna etiti na pad ọdịnaya navbar.

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

Ihe mkpuchi ahụ chọrọ

Navbar etinyere ga-ekpuchi ọdịnaya gị ọzọ, ọ gwụla ma ị gbakwunyere paddingna ala nke faịlụ <body>. Nwalee ụkpụrụ nke gị ma ọ bụ jiri snippet anyị n'okpuru. Ndụmọdụ: Site na ndabara, navbar dị elu 50px.

body { padding-bottom: 70px; }

Gbaa mbọ hụ na itinye nke a ka emechara Bootstrap isi CSS.

Mepụta navbar obosara zuru oke nke ga-eji ibe ahụ pụọ site na ịgbakwunye .navbar-static-topma tinye .containerọdịnaya .container-fluidn'etiti na pad navbar.

N'adịghị ka .navbar-fixed-*klaasị, ịkwesighi ịgbanwe padding ọ bụla na body.

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

Gbanwee ọdịdị nke navbar site na ịgbakwunye .navbar-inverse.

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

Nri achịcha

Gosipụta ọnọdụ ibe dị ugbu a n'ime usoro ịnyagharị.

A na-agbakwunye ndị nkewa na-akpaghị aka na CSS site :beforena content.

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

Pagination

Nye njikọ pagination maka saịtị ma ọ bụ ngwa gị na mpaghara pagination multi-page, ma ọ bụ ụzọ ọzọ dị mfe pager .

Ihu pagination ezighi ezi

Mpempe akwụkwọ dị mfe sitere na Rdio, mara mma maka ngwa na nsonaazụ ọchụchọ. Nnukwu ngọngọ siri ike ịgbaghara, na-adị mfe ịrị elu, ma na-enye nnukwu mpaghara pịa.

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

Ịkpọ aha mpaghara pagination

Ekwesịrị ịkechie akụkụ pagination na <nav>mmewere iji mata ya dị ka ngalaba igodo maka ndị na-agụ ihuenyo na teknụzụ enyemaka ndị ọzọ. Na mgbakwunye, dị ka ibe nwere ike ịnwe ihe karịrị otu ngalaba igodo dị ugbu a (dị ka igodo igodo na nkụnye eji isi mee, ma ọ bụ igodo n'akụkụ), ọ dị mma ịnye nkọwa aria-labelmaka <nav>nke na-egosipụta ebumnuche ya. Dịka ọmụmaatụ, ọ bụrụ na ejiri akụkụ pagination mee njem n'etiti otu nsonaazụ ọchụchọ, akara kwesịrị ekwesị nwere ike ịbụ aria-label="Search results pages".

Steeti nwere nkwarụ na arụ ọrụ

Enwere ike ịhazi njikọ maka ọnọdụ dị iche iche. Jiri .disabledmaka njikọ enweghị ike ịpị yana .activeigosi ibe dị ugbu a.

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

Anyị na-akwado ka ị gbanwee arịlịka na-arụ ọrụ ma ọ bụ nwere nkwarụ maka <span>, ma ọ bụ hapụ arịlịka n'ihe gbasara akụ ndị gara aga/ na-esote, iji wepụ ọrụ pịa mgbe ị na-ejigide ụdị echere.

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

Nha nha

Ọ na-amasị gị ibu ma ọ bụ obere pagination? Tinye .pagination-lgma ọ bụ .pagination-smmaka nha ndị ọzọ.

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

Pager

Njikọ ngwa ngwa gara aga na nke na-esote maka mmejuputa pagination dị mfe nwere akara ọkụ na ụdị. Ọ dị mma maka saịtị dị mfe dị ka blọọgụ ma ọ bụ akwụkwọ akụkọ.

Ọmụmaatụ ndabara

Site na ndabara, ebe nrụọrụ pager na-ejikọta njikọ.

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

Njikọ agbakwunyere

N'aka nke ọzọ, ị nwere ike ịhazi njikọ ọ bụla n'akụkụ:

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

Ọnọdụ nkwarụ nhọrọ

Njikọ Pager na-ejikwa .disabledklas ịba uru izugbe sitere na pagination.

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

Ọmụmaatụ

Isi ihe atụ ọhụrụ

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

Ọdịiche dị

Tinye nke ọ bụla n'ime klaasị mgbanwe ndị a kpọtụrụ aha n'okpuru iji gbanwee ọdịdị nke akara.

Ozi Ịdọ Aka ná Ntị dị egwu

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

Ị nwere ọtụtụ akara?

Nsogbu ntụgharị nwere ike ibilite mgbe ị nwere ọtụtụ akara inline n'ime akpa dị warara, nke ọ bụla nwere ihe nke ya inline-block(dị ka akara ngosi). Ụzọ gburugburu nke a bụ ntọala display: inline-block;. Maka ihe gbara ya gburugburu na ọmụmaatụ, lee #13219 .

Mepụta ihe ọhụrụ ma ọ bụ nke a na-agụghị ngwa ngwa site na ịgbakwunye <span class="badge">njikọ, Bootstrap navs na ndị ọzọ.

Igbe mbata42

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

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

Na-ada onwe ya

Mgbe enweghị ihe ọhụrụ ma ọ bụ nke a na-agụghị, baajị ga-ada naanị (site na onye na :empty-ahọrọ CSS) ma ọ bụrụ na ọ nweghị ọdịnaya dị n'ime ya.

Ndakọrịta ihe nchọgharị gafere

Baji agaghị ada n'onwe ya na Internet Explorer 8 n'ihi na ọ nweghị nkwado maka onye :emptyahọpụtara ya.

Na-adaba na steeti ndị agha mmiri na-arụ ọrụ

Agụnyere ụdị arụnyere n'ime ya maka idowe baajị na steeti ndị na-arụsi ọrụ ike na igodo ụzọ pill.

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

Akụkụ dị fechaa, na-agbanwe agbanwe nke nwere ike ịgbatị ihe nlele niile iji gosipụta ọdịnaya dị na saịtị gị.

Ndewo Ụwa!

Nke a bụ otu dike dị mfe, ngwa ngwa jumbotron dị mfe maka ịkpọkwu nlebara anya na ọdịnaya ma ọ bụ ozi egosipụtara.

Mụtakwuo

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

Iji mee ka jumbotron zuo oke, na-enweghị akụkụ gbara okirikiri, tinye ya n'èzí niile .containerwee tinye .containern'ime.

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

Shei dị mfe maka h1ịpụpụ n'ụzọ kwesịrị ekwesị na akụkụ nke ọdịnaya na ibe. Ọ nwere ike iji ihe h1ndabara 's small, yana ọtụtụ ihe ndị ọzọ (nwere ụdị ndị ọzọ).

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

Jiri akụkụ thumbnail gbasaa sistemu grid Bootstrap ka ọ dị mfe igosipụta grid nke onyonyo, vidiyo, ederede na ndị ọzọ.

Ọ bụrụ na ị na-achọ Pinterest-dị ka ngosi nke thumbnails nke ịdị elu dị iche iche na / ma ọ bụ obosara, ị ga-achọ iji ngwa mgbakwunye ndị ọzọ dị ka Masonry , Isotope , ma ọ bụ Salvattore .

Ọmụmaatụ ndabara

Site na ndabara, emebere obere mkpụkọ Bootstrap iji gosipụta onyonyo ejikọrọ na obere akara achọrọ.

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

Ọdịnaya ahaziri ahazi

N'iji ntakịrị nrịbama agbakwunyere, ọ ga-ekwe omume itinye ụdị ọdịnaya HTML ọ bụla dị ka isiokwu, paragraf, ma ọ bụ bọtịnụ n'ime obere mkpịsị aka.

akara mkpịsị mkpịsị aka

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Achọpụtaghị m porta gravida na eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Bọtịnụ Bọtịnụ

akara mkpịsị mkpịsị aka

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Achọpụtaghị m porta gravida na eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Bọtịnụ Bọtịnụ

akara mkpịsị mkpịsị aka

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Achọpụtaghị m porta gravida na eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Bọtịnụ Bọtịnụ

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

Nye ozi nzaghachi gburugburu maka omume onye ọrụ na-ahụkarị site na iji obere ozi njikere dị ma na-agbanwe agbanwe.

Ihe atụ

Kechie ederede ọ bụla na bọtịnụ ịchụpụ nhọrọ .alertna otu n'ime klaasị anọ ahụ gbara gburugburu (dịka ọmụmaatụ .alert-success) maka ozi njikere bụ isi.

Enweghị klas ndabara

Ntinye enweghị klaasị ndabara, naanị klaasị ntọala na mgbanwe. Ngosipụta isi awọ nke ndabara anaghị enwe uche dị ukwuu, yabụ achọrọ ka ezipụta otu ụdị site na klaasị okirikiri. Họrọ site na ịga nke ọma, ozi, ịdọ aka ná ntị, ma ọ bụ ihe egwu.

Ị mere nke ọma! Ị gụchara ozi njikere a dị mkpa nke ọma.

Welie isi elu! Ọkwa a chọrọ nlebara anya gị, mana ọ bụghị oke mkpa.

Ịdọ aka ná ntị! Lelee onwe gị nke ọma, ị naghị adị oke mma.

Oh snoo! Gbanwee ihe ole na ole wee nwaa ịnyefe ọzọ.

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

Ngosipụta agaghị ekwe omume

.alert-dismissibleWulite na njikere ọ bụla site na ịgbakwunye bọtịnụ nhọrọ na mechie.

Chọrọ ngwa mgbakwunye njikere JavaScript

Maka ịrụ ọrụ nke ọma, ọkwa ọkwa enweghị ike ịchụpụ, ị ga-ejirịrị ngwa mgbakwunye JavaScript nke ndoro anya .

Ịdọ aka ná ntị! Lelee onwe gị nke ọma, ị naghị adị oke mma.

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

Gbaa mbọ hụ na omume kwesịrị ekwesị n'ofe ngwaọrụ niile

Jide n'aka na iji <button>mmewere na njirimara data-dismiss="alert"data.

Njikọ dị na ọkwa

Jiri .alert-linkklaasị ��ba uru nye ngwa ngwa njikọ agba dabara n'ime njikere ọ bụla.

Ị mere nke ọma! Ị gụrụ ozi njikere a dị mkpa nke ọma .

Welie isi elu! Ọkwa a chọrọ nlebara anya gị , mana ọ bụghị oke mkpa.

Ịdọ aka ná ntị! Ka mma lelee onwe gị, ị naghị adị oke mma .

Oh snoo! Gbanwee ihe ole na ole wee nwaa ịnyefe ọzọ.

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

Nye nzaghachi ọhụrụ maka ọganihu nke usoro ọrụ ma ọ bụ omume nwere ogwe ọganihu dị mfe ma na-agbanwe agbanwe.

Ndakọrịta ihe nchọgharị gafere

Ogwe ọganihu na-eji mgbanwe CSS3 na ihe ngosi iji nweta ụfọdụ mmetụta ha. Anaghị akwado atụmatụ ndị a na Internet Explorer 9 na n'okpuru ma ọ bụ ụdị Firefox ochie. Opera 12 anaghị akwado animation.

Ndakọrịta amụma nchekwa ọdịnaya (CSP).

Ọ bụrụ na ebe nrụọrụ weebụ gị nwere amụma nchekwa ọdịnaya (CSP) nke na-adịghị ekwe ka style-src 'unsafe-inline', mgbe ahụ ị gaghị enwe ike iji stylenjirimara inline tọọ obosara mmanya ọganihu dị ka egosiri na ihe atụ anyị n'okpuru. Ụzọ ọzọ maka ịtọ obosara nke dabara na CSP siri ike gụnyere iji obere Javascript omenala (nke ahụ element.style.width) ma ọ bụ iji klas CSS omenala.

Ihe atụ bụ isi

Ogwe ọganihu agamnihu.

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

Na labelụ

Wepu klas <span>ahụ .sr-onlyn'ime ogwe ọganihu iji gosi pasenti a na-ahụ anya.

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>

Iji hụ na ederede labelụ ka nwere ike gụgharia ọbụlagodi maka pasentị dị ala, tụlee ịgbakwunye otu min-widthna ogwe ọganihu.

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>

Nhọrọ ndị dị n'usoro

Ogwe na-aga n'ihu na-eji ụfọdụ bọtịnụ na klaasị njikere maka ụdị na-agbanwe agbanwe.

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

Ekewapụ

Na-eji gradient mepụta mmetụta dị warara. Ọ dịghị na IE9 na n'okpuru.

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

Anụmanụ

Tinye .activen'ime .progress-bar-stripedka emee ahịrị ndị dị n'aka nri gaa n'aka ekpe. Ọ dịghị na IE9 na n'okpuru.

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

Akwadoro

Tinye ọtụtụ mmanya n'ime otu .progresska ikpokọta ha.

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

Ụdị ihe na-adịghị ahụkebe maka iwulite ụdị ngwa dị iche iche (dị ka nkọwa blọgụ, Tweets, wdg) nke na-egosipụta onyonyo aka ekpe ma ọ bụ aka nri n'akụkụ ọdịnaya ederede.

Mgbasa ozi ezighi ezi

Mgbasa ozi ndabara na-egosiputa ihe mgbasa ozi (oyiyi, vidiyo, ọdịyo) n'aka ekpe ma ọ bụ aka nri nke ngọngọ ọdịnaya.

Isi mgbasa ozi

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

Isi mgbasa ozi

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

Isi mgbasa ozi akwụghị ụgwọ

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

Isi mgbasa ozi

Cras sit amet nibh libero, na gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis.

Isi mgbasa ozi

Cras sit amet nibh libero, na gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum na vulputate na, 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>

Klas .pull-leftndị .pull-rightahụ dịkwa adị ma ejiribu ya dị ka akụkụ nke akụrụngwa mgbasa ozi, mana ewepụrụ ya maka ojiji ahụ dịka nke v3.3.0. Ha dị ihe dịka .media-leftna .media-right, ma e wezụga nke ahụ .media-rightekwesịrị idowe ya .media-bodyna html.

Nhazi mgbasa ozi

Ihe onyonyo ma ọ bụ mgbasa ozi ndị ọzọ nwere ike ịhakọ n'elu, etiti ma ọ bụ ala. Edoziri ndabara n'elu.

Mgbasa ozi dabara n'elu

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. N'ihi ya, ọ bụ ezie na ọ dị mkpa ka a na-eme ihe nkiri, na-akpa ọchị.

Mgbasa mgbasa ozi jikọtara ọnụ

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. N'ihi ya, ọ bụ ezie na ọ dị mkpa ka a na-eme ihe nkiri, na-akpa ọchị.

Mgbasa ozi dabara n'okpuru

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

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. N'ihi ya, ọ bụ ezie na ọ dị mkpa ka a na-eme ihe nkiri, na-akpa ọchị.

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

Ndepụta mgbasa ozi

N'iji ntakịrị nrịbama agbakwunyere, ị nwere ike iji mgbasa ozi n'ime listi (ọ bara uru maka eriri okwu ma ọ bụ ndepụta akụkọ).

Isi mgbasa ozi

Cras sit amet nibh libero, na gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis.

Isi mgbasa ozi akwụghị ụgwọ
Cras sit amet nibh libero, na gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis.

Isi mgbasa ozi akwụghị ụgwọ
Cras sit amet nibh libero, na gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum na vulputate na, tempus viverra turpis.

Isi mgbasa ozi akwụghị ụgwọ
Cras sit amet nibh libero, na gravida nulla. Nulla vel metus sclerisque ante sollicitudin commodo. Cras purus odio, vestibulum na vulputate na, 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>

Otu ndepụta bụ ihe na-agbanwe agbanwe ma dị ike maka igosipụta ọ bụghị naanị ndepụta nke ihe dị mfe, mana ndị siri ike nwere ọdịnaya omenala.

Ihe atụ bụ isi

Otu ndepụta kachasị ewu ewu bụ naanị ndepụta edeghị aha nke nwere ihe ndepụta yana klaasị kwesịrị ekwesị. Jiri nhọrọ ndị na-eso wulite ya, ma ọ bụ CSS nke gị ka ọ dị mkpa.

Cras justo odio
Dapibus ac facilisis na
Morbi leo risus
Porta ac consectetur ac
Vestibulum na 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>

Akara

Tinye akụrụngwa baajị na ihe ndepụta ọ bụla, a ga-edobe ya ozugbo n'aka nri.

14Cras justo odio
2Dapibus ac facilisis na
1Morbi leo risus

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

Ihe ejikọrọ

Jikọọ ihe ndị otu ndetu site na iji mkpado arịlịka kama ịdepụta ihe (nke ahụ pụtakwara nne na nna <div>kama ịbụ <ul>). Ọ dịghị mkpa maka ndị nne na nna n'otu n'otu gburugburu ihe ọ bụla.

Cras justo odio Dapibus ac facilisis na Morbi leo risus Porta ac consectetur ac Vestibulum na 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>

Ihe bọtịnụ

Ndepụta otu ihe nwere ike ịbụ bọtịnụ kama ndepụta ihe (nke ahụ pụtakwara nne na nna <div>kama ịbụ <ul>). Ọ dịghị mkpa maka ndị nne na nna n'otu n'otu gburugburu ihe ọ bụla. Ejila .btnklaasị ọkọlọtọ ebe a.

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

Ihe ndị nwere nkwarụ

Tinye .disabledna a .list-group-itemna isi awọ ka ọ dị ka ọ nwere nkwarụ.

Cras justo odio Dapibus ac facilisis na Morbi leo risus Porta ac consectetur ac Vestibulum na 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>

Klaasị ihe atụ

Jiri klaasị okirikiri mee ihe ndepụta ụdị, ndabara ma ọ bụ jikọtara ya. Tinyekwara .activesteeti.

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

Dapibus ac facilisis na Cras sit amet nibh libero Porta ac consectetur ac Vestibulum na 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>

Ọdịnaya ahaziri ahazi

Tinye ihe fọrọ nke nta ka ọ bụrụ HTML ọ bụla n'ime, ọbụlagodi maka otu ndepụta ejikọtara dị ka nke dị n'okpuru.

Depụta isiokwu isiokwu otu

Achọpụtaghị m porta gravida na eget metus. Maecenas sed diam eget risus varius blandit.

Depụta isiokwu isiokwu otu

Achọpụtaghị m porta gravida na eget metus. Maecenas sed diam eget risus varius blandit.

Depụta isiokwu isiokwu otu

Achọpụtaghị m porta gravida na 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>

Ọ bụ ezie na ọ bụghị mgbe niile ka ọ dị mkpa, mgbe ụfọdụ ịkwesịrị itinye DOM gị n'ime igbe. Maka ọnọdụ ndị ahụ, gbalịa akụkụ panel.

Ihe atụ bụ isi

Site na ndabara, ihe niile a na .panel-eme bụ itinye ụfọdụ oke na padding iji nwee ụfọdụ ọdịnaya.

Ihe atụ panel nke isi

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

Ogwe nwere isiokwu

Jiri nwayọ tinye akpa isi na panel gị .panel-heading. Ị nwekwara ike ịgụnye nke ọ bụla <h1>- <h6>ya na .panel-titleklaasị iji tinye isiokwu ahaziri mbụ. Agbanyeghị, ogo mkpụrụedemede nke <h1>- <h6>ka ejiri .panel-heading.

Maka agba njikọ kwesịrị ekwesị, jide n'aka na itinye njikọ na isiokwu n'ime .panel-title.

Panel na-aga na-enweghị aha

Ọdịnaya panel

Aha panel

Ọdịnaya panel

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

Ogwe nwere ụkwụ

Kechie bọtịnụ ma ọ bụ ederede nke abụọ na .panel-footer. Rịba ama na n'ụkwụ panel anaghị eketa agba na oke mgbe ha na-eji mgbanwe n'okwu n'ihi na ekwesighi ka ha nọrọ n'ihu.

Ọdịnaya panel

Ndabere panel

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

Nhọrọ ndị dị n'usoro

Dị ka ihe ndị ọzọ, mee ka panel dịkwuo mfe maka otu ọnọdụ site n'ịgbakwunye nke ọ bụla n'ime klaasị steeti.

Aha panel

Ọdịnaya panel

Aha panel

Ọdịnaya panel

Aha panel

Ọdịnaya panel

Aha panel

Ọdịnaya panel

Aha panel

Ọdịnaya panel

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

Na tebụl

Tinye ihe ọ bụla na-enweghị .tableoke n'ime otu panel maka imewe enweghị nkebi. Ọ bụrụ na enwere .panel-body, anyị na-agbakwunye oke oke n'elu tebụl maka nkewa.

Isi panel

Ụfọdụ ọdịnaya panel ndabara ebe a. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Aha mbụ	Aha ikpeazụ	Aha njirimara
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry	Nnụnụ ahụ	@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>

Ọ bụrụ na enweghị ahụ panel, akụrụngwa na-esi na nkụnye eji isi mee gaa na tebụl na-enweghị nkwụsị.

Isi panel

#	Aha mbụ	Aha ikpeazụ	Aha njirimara
1	Mark	Otto	@mdo
2	Jekọb	Thornton	@abụba
3	Larry	Nnụnụ ahụ	@twitter

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

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

Na otu ndepụta

Ọ dị mfe tinye otu ndepụta obosara n'ime panel ọ bụla.

Isi panel

Ụfọdụ ọdịnaya panel ndabara ebe a. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis na
Morbi leo risus
Porta ac consectetur ac
Vestibulum na 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>

Kwe ka ihe nchọgharị chọpụta akụkụ vidiyo ma ọ bụ ihe ngosi mmịfe dabere na obosara nke ngọngọ nwere site na ịmepụta oke dị n'ime nke ga-adaba nke ọma na ngwaọrụ ọ bụla.

A na-etinye iwu ozugbo na <iframe>, <embed>, <video>, na <object>ọcha; na nhọrọ jiri klaasị nke pụtara ìhè .embed-responsive-itemmgbe ịchọrọ dakọtara na nhazi maka njirimara ndị ọzọ.

Pro-ndụmọdụ! Ịkwesighi itinye frameborder="0"na <iframe>s gị ka anyị na-ewepụ nke ahụ maka gị.

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

Dabara nke ọma

Jiri nke ọma dị ka mmetụta dị mfe na mmewere iji nye ya mmetụta inset.

Lee, anọ m n'olulu mmiri!

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

Klas nke nhọrọ

Mkpuchi njikwa na akụkụ gbara okirikiri nwere klaasị mgbanwe nhọrọ abụọ.

Lee, anọ m n'olulu mmiri buru ibu!

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

Lee, anọ m n'otu obere olulu mmiri!

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

Ngwa

Glyphicons

Glyphs dị

Otu esi eji

Ejikọtala ihe ndị ọzọ

Naanị maka ojiji na ihe efu

Na-agbanwe ọnọdụ mkpụrụedemede akara ngosi

Akara ngosi enwere ike ịnweta

Ihe atụ

Mbelata

Ọmụmaatụ

Nhazi

Nwere ike ịchọ ndokwa ọzọ

Nkwanye .pull-rightemebiela

nkụnye eji isi mee

Nkesa

Ihe nchịkọta nhọrọ agbanyụrụ

Otu bọtịnụ

Ntuziaka ngwaọrụ & popovers na otu bọtịnụ chọrọ ntọala pụrụ iche

Gbaa mbọ hụ na ọ ziri ezi rolewee nye akara

Ihe atụ bụ isi

Ogwe bọtịnụ bọtịnụ

Nha nha

Akwu

Mgbanwe kwụ ọtọ

Otu bọtịnụ ziri ezi

Ijikwa oke

IE8 na oke

Na <a>ọcha

Njikọ na-arụ ọrụ dị ka bọtịnụ

Na <button>ọcha

Mbudata bọtịnụ

Ndabere ngwa mgbakwunye

Mbudata bọtịnụ otu

Mbelata bọtịnụ gbawara agbawa

Nha nha

Mwepu mgbanwe

Otu ntinye

Ederede <input>s naanị

Ntuziaka ngwaọrụ & popovers na otu ntinye chọrọ ntọala pụrụ iche

Ejikọtala ihe ndị ọzọ

Tinye akara mgbe niile

Ihe atụ bụ isi

Nha nha

Igbe nlele na ihe mgbakwunye redio

Tinye bọtịnụ

Bọtịnụ nwere ndapụta

Bọtịnụ ndị kewara

Otutu bọtịnụ

Ndị agha mmiri

Iji navs maka akụkụ taabụ chọrọ ngwa mgbakwunye taabụ Javascript

Mee ka ndị agha ụgbọ mmiri mee ka enwere ike ịnweta ya

Taabụ

Ọgwụ

Kwesịrị ekwesị

Safari na ndị agha ụgbọ mmiri ziri ezi na-anabata

Njikọ ndị nwere nkwarụ

emetụtaghị ọrụ njikọ

Iji dropdowns

Taabụ nwere dropdowns

Ọgwụ nwere ndapụta

Navbar

Navbar mbụ

Ọdịnaya na-ejubiga ókè

Na-achọ ngwa mgbakwunye JavaScript

Na-agbanwe ebe nkwụsịtụ navbar mkpanaaka dara ada

Mee navbars enwere ike ịnweta

Onyonyo ika

Ụdị

Akaụntụ ngwaọrụ mkpanaka

Tinye akara mgbe niile

Bọtịnụ

Ojiji akọwapụtara nke ọma

Ederede

Njikọ ndị na-abụghị nav

Nhazi akụrụngwa

Na-ahazi ọtụtụ akụkụ aka nri

Edoziri n'elu

Ihe mkpuchi ahụ chọrọ

Edoziri na ala

Nkwanye `.pull-right`emebiela

Gbaa mbọ hụ na ọ ziri ezi `role`wee nye akara

Na `<a>`ọcha

Na `<button>`ọcha

Ederede `<input>`s naanị