Ihe karịrị ihe iri na abuo enwere ike iji rụọ ọrụ iji nye akara ngosi, ndetu, otu ntinye, igodo, ọkwa, na ọtụtụ ndị ọzọ.
Glyphicons
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ụ-akaekpe
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ọ ọ 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 mee ihe maka ịchọ mma), anyị na-ezobe ha na aria-hidden="true"njirimara.
Ọ bụrụ na ị na-eji akara ngosi akọwapụta ihe (kama ịbụ naanị dị ka ihe ịchọ mma), hụ na ebutekwara nkọwa a na teknụzụ enyemaka - dịka ọmụmaatụ, tinye ọdịnaya agbakwunyere, zoro ezo na .sr-onlyklaasị.
Ọ 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.
Ihe atụ
Jiri ha na bọtịnụ, otu bọtịnụ maka ogwe ngwaọrụ, igodo, ma ọ bụ ntinye ụdị echedoro.
Akara ngosi ejiri n'ọkwa iji gosi na ọ bụ ozi ezighi ezi, yana .sr-onlyederede agbakwunyere iji gosi ndị ọrụ teknụzụ enyemaka.
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.
Nwere ike ịchọ ndokwa ọzọ
A na-edobe ihe ndọghachi azụ na-akpaghị aka site na CSS n'ime usoro ọ na-aga nke ọma na akwụkwọ ahụ. Nke a pụtara na ndị nne na nna nwere ụfọdụ overflowakụrụngwa nwere ike gbutuo mkpọda ma ọ bụ pụta na-enweghị oke na nlele. Dozie nsogbu ndị a n'onwe gị ka ha na-ebilite.
Akwụsịla.pull-right emebiela
Dịka nke v3.1.0, anyị akwụsịla .pull-rightna menu ndetu. Iji kwado otu menu, jiri .dropdown-menu-right. Ngwa ndị nav kwụkọtara aka nri n'ime navbar na-eji ụdị mixin nke klaasị a iji kwado menu ozugbo. Iji mebie ya, jiri .dropdown-menu-left.
nkụnye eji isi mee
Tinye nkụnye eji isi mee ka aha ngalaba omume na nchịkọta nhọrọ ọ bụla.
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 rolewee 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.
Ogwe bọtịnụ bọtịnụ
Gwakọta tent <div class="btn-group">n'ime a <div class="btn-toolbar">maka ihe mgbagwoju anya.
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.
Akwu
Debe .btn-groupn'ime ọzọ .btn-groupmgbe ịchọrọ menu ndọpụta agwakọta ya na usoro bọtịnụ.
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.
Ọ 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ụ.
Mbudata bọtịnụ
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ị.
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.
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.
Igbe nlele na ihe mgbakwunye redio
Tinye igbe nrịbama ma ọ bụ nhọrọ redio ọ bụla n'ime ntinye otu ntinye kama ederede.
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.
Bọtịnụ nwere ndapụta
Bọtịnụ ndị kewara
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.
Ndị agha mmiri
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.
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 .
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ị.
Na-achọ ngwa mgbakwunye JavaScript
Ọ bụrụ na Javascript nwere nkwarụ na ebe nlele dị warara nke na navbar ahụ daa, ọ gaghị ekwe omume ịgbasa navbar wee lelee ọdịnaya dị n'ime faịlụ .navbar-collapse.
Navbar ahụ na-adaba n'ime anya mkpanaka kwụ ọtọ mgbe ihe nlele ahụ dị warara karịa @grid-float-breakpoint, wee gbasaa n'ime nlele ya na-abụghị nke mkpanaka mgbe ebe nlele dị opekata mpe @grid-float-breakpointn'obosara. Gbanwee mgbanwe a na isi mmalite dị nta iji chịkwaa mgbe navbar daa/ gbasaa. Uru ndabara bụ 768px(ihuenyo "obere" ma ọ bụ "tablet" kacha nta).
Mee navbars enwere ike ịnweta
Jide n'aka na ị na-eji <nav>mmewere ma ọ bụ, ọ bụrụ na ị na-eji ihe ndị ọzọ dị ka a <div>, tinye a role="navigation"na navbar ọ bụla iji chọpụta ya nke ọma dị ka mpaghara akara ngosi maka ndị ọrụ nke teknụzụ enyemaka.
Onyonyo ika
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ị.
Ụdị
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.
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ọ.
Bọtịnụ
Tinye .navbar-btnklas ahụ na <button>ihe ndị na-adịghị ebi na a <form>ka ha guzoro ọtọ n'etiti navbar.
Ojiji akọwapụtara nke ọma
Dị ka klaasị bọtịnụ ọkọlọtọ , .navbar-btnenwere ike iji ya <a>na <input>ihe. Agbanyeghị, ọbụghị .navbar-btnma ọ bụ klaasị ọkọlọtọ ọkọlọtọ ekwesighi iji ihe <a>dị n'ime .navbar-nav.
Ederede
Kechie eriri ederede na mmewere na .navbar-text, na-emekarị na <p>mkpado maka ndu na agba kwesịrị ekwesị.
Njikọ ndị na-abụghị nav
Maka ndị folks na-eji njikọ ọkọlọtọ na-anọghị n'ime mpaghara igodo nsoroụzọ mgbe niile, jiri .navbar-linkklaasị tinye agba kwesịrị ekwesị maka nhọrọ navbar ndabara na nke na-agbanwe agbanwe.
Nhazi akụrụngwa
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ị ịba uru etinyere.
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ụ.
Na-ahazi ọtụtụ akụkụ aka nri
Navbars nwere oke nwere ọtụtụ .navbar-rightklaasị ugbu a. Iji nweta ọdịnaya nke ọma, anyị na-eji oke adịghị mma na .navbar-rightmmewere ikpeazụ. Mgbe enwere ọtụtụ ihe na-eji klaasị ahụ, oke ndị a anaghị arụ ọrụ dịka ebum n'uche.
Anyị ga-eletaghachi nke a mgbe anyị nwere ike idegharị akụrụngwa ahụ na v4.
Edoziri n'elu
Tinye .navbar-fixed-topma tinye .containerma ọ bụ .container-fluidna etiti na pad ọdịnaya navbar.
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.
Gbaa mbọ hụ na itinye nke a ka emechara Bootstrap isi CSS.
Edoziri na ala
Tinye .navbar-fixed-bottomma tinye .containerma ọ bụ .container-fluidna etiti na pad ọdịnaya navbar.
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.
Gbaa mbọ hụ na itinye nke a ka emechara Bootstrap isi CSS.
elu kwụ ọtọ
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.
Ụgbọ mmiri atụgharịrị
Gbanwee ọdịdị nke navbar site na ịgbakwunye .navbar-inverse.
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.
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.
Ị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.
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.
Nha nha
Ọ na-amasị gị ibu ma ọ bụ obere pagination? Tinye .pagination-lgma ọ bụ .pagination-smmaka nha ndị ọzọ.
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ọ.
Njikọ agbakwunyere
N'aka nke ọzọ, ị nwere ike ịhazi njikọ ọ bụla n'akụkụ:
Ọnọdụ nkwarụ nhọrọ
Njikọ Pager na-ejikwa .disabledklas ịba uru izugbe sitere na pagination.
Akara aha
Ọmụmaatụ
Isi ihe atụ ọhụrụ
Isi ihe atụ ọhụrụ
Isi ihe atụ ọhụrụ
Isi ihe atụ ọhụrụ
Isi ihe atụ ọhụrụ
Isi ihe atụ ọhụrụ
Ọ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
Ị 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 .
Akara
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ọ.
Iji mee ka jumbotron zuo oke, na-enweghị akụkụ gbara okirikiri, tinye ya n'èzí niile .containerwee tinye .containern'ime.
nkụnye eji isi mee
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ọ).
Ihe atụ isi ibe akwụkwọ Subtext maka nkụnye eji isi mee
Ọ 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ọ.
Ọ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.
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.
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.
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ọ.
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.
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.
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.
Iji hụ na ederede labelụ ka na-agụgharị ọbụlagodi maka pasentị dị ala, tụlee ịgbakwunye otu min-widthna ogwe ọganihu.
0%
2%
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.
40% zuru ezu (ihe ịga nke ọma)
20% zuru ezu
60% zuru ezu (ịdọ aka ná ntị)
80% zuru oke (ihe egwu)
Ekewapụ
Na-eji gradient mepụta mmetụta dị warara. Ọ dịghị na IE9 na n'okpuru.
40% zuru ezu (ihe ịga nke ọma)
20% zuru ezu
60% zuru ezu (ịdọ aka ná ntị)
80% zuru oke (ihe egwu)
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.
45% zuru oke
Akwadoro
Tinye ọtụtụ mmanya n'ime otu .progresska ikpokọta ha.
35% zuru ezu (ihe ịga nke ọma)
20% zuru ezu (ịdọ aka ná ntị)
10% zuru oke (ihe egwu)
Ihe mgbasa ozi
Ụ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.
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ị.
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.
Ndepụta otu
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
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
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.
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.
Ihe ndị nwere nkwarụ
Tinye .disabledna a .list-group-itemna isi awọ ka ọ dị ka ọ nwere nkwarụ.
Ọ 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
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
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
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
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
Ọ 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ị.
Ụ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
Mgbakwụnye na-anabata
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ị.
Ọdịda
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!
Klas nke nhọrọ
Mkpuchi njikwa na akụkụ gbara okirikiri nwere klaasị mgbanwe nhọrọ abụọ.