Ավելի քան մեկ տասնյակ բազմակի օգտագործման բաղադրիչներ, որոնք ստեղծվել են պատկերագրություն, բացվող ցանկեր, մուտքային խմբեր, նավիգացիա, ծանուցումներ և շատ ավելին ապահովելու համար:
Գլիֆիկոններ
Հասանելի գլիֆներ
Ներառում է ավելի քան 250 գլիֆ տառատեսակով Glyphicon Halflings հավաքածուից: Glyphicons Halflings-ը սովորաբար անվճար հասանելի չէ, սակայն դրանց ստեղծողը դրանք հասանելի է դարձրել Bootstrap-ի համար անվճար: Որպես շնորհակալություն, մենք միայն խնդրում ենք, որ հնարավորության դեպքում ներառեք հղում դեպի Glyphicons :
glyphicon glyphicon-աստղանիշ
glyphicon glyphicon-plus
glyphicon glyphicon-եվրո
glyphicon glyphicon-eur
glyphicon glyphicon-մինուս
glyphicon glyphicon-ամպ
glyphicon glyphicon-ծրար
glyphicon glyphicon-մատիտ
glyphicon glyphicon-glass
glyphicon glyphicon-երաժշտություն
glyphicon glyphicon-որոնում
glyphicon glyphicon-սիրտ
glyphicon glyphicon-աստղ
glyphicon glyphicon-աստղ-դատարկ
glyphicon glyphicon-օգտագործող
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-րդ
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-հեռացնել
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-ազդանշան
glyphicon glyphicon-cog
glyphicon glyphicon-աղբարկղ
glyphicon glyphicon-տուն
glyphicon glyphicon-ֆայլ
glyphicon glyphicon-ժամանակ
glyphicon glyphicon-ճանապարհ
glyphicon glyphicon-ներբեռնել-alt
glyphicon glyphicon-ներբեռնել
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-կրկնել
glyphicon glyphicon-թարմացնել
glyphicon glyphicon-list-alt
glyphicon glyphicon-կողպեք
glyphicon glyphicon-դրոշ
glyphicon glyphicon-ականջակալներ
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-շտրիխ կոդ
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-գիրք
glyphicon glyphicon-էջանիշ
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-italic
glyphicon glyphicon-տեքստ-բարձրություն
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-հավասարեցնել-արդարացնել
glyphicon glyphicon-ցուցակ
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-պատկեր
glyphicon glyphicon-քարտեզ-մարկեր
glyphicon glyphicon-կարգավորել
glyphicon glyphicon-երանգ
glyphicon glyphicon-խմբագրել
glyphicon glyphicon-շեյր
glyphicon glyphicon-ստուգում
glyphicon glyphicon-շարժվել
glyphicon glyphicon-քայլ-հետ
glyphicon glyphicon-արագ-հետամնաց
glyphicon glyphicon-հետամնաց
glyphicon glyphicon-խաղ
glyphicon glyphicon-դադար
glyphicon glyphicon-stop
glyphicon glyphicon-առաջ
glyphicon glyphicon-fast-forward
glyphicon glyphicon-քայլ առաջ
glyphicon glyphicon-արտահանել
glyphicon glyphicon-chevron-ձախ
glyphicon glyphicon-chevron-աջ
glyphicon glyphicon-plus-նշան
glyphicon glyphicon-մինուս-նշան
glyphicon glyphicon-հեռացնել-նշան
glyphicon glyphicon-ok-նշան
glyphicon glyphicon-հարց-նշան
glyphicon glyphicon-ինֆո-նշան
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-ձախ
glyphicon glyphicon-arrow-աջ
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-ներքև
glyphicon glyphicon-share-alt
glyphicon glyphicon-չափափոխել-լրիվ
glyphicon glyphicon-չափափոխել-փոքր
glyphicon glyphicon-բացականչական-նշան
glyphicon glyphicon-նվեր
glyphicon glyphicon-տերեւ
glyphicon glyphicon-կրակ
glyphicon glyphicon-աչքաբաց
glyphicon glyphicon-աչք փակել
glyphicon glyphicon-նախազգուշական նշան
glyphicon glyphicon-plane
glyphicon glyphicon-օրացույց
glyphicon glyphicon-պատահական
glyphicon glyphicon-մեկնաբանություն
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-գնումների-սայլ
glyphicon glyphicon-folder-close
glyphicon glyphicon-թղթապանակ-բաց
glyphicon glyphicon-չափափոխել-ուղղահայաց
glyphicon glyphicon-չափափոխել-հորիզոնական
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-զանգ
glyphicon glyphicon-վկայական
glyphicon glyphicon-thumbs-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-ձեռքի-աջ
glyphicon glyphicon-ձեռքի ձախ
glyphicon glyphicon-ձեռքի վեր
glyphicon glyphicon-ձեռքի ներքեւ
glyphicon glyphicon-circle-arrow-աջ
glyphicon glyphicon-circle-arrow-ձախ
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-գլոբուս
glyphicon glyphicon-բանալին
glyphicon glyphicon-առաջադրանքներ
glyphicon glyphicon-ֆիլտր
glyphicon glyphicon-պորտֆել
glyphicon glyphicon-ամբողջ էկրանով
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-սիրտ-դատարկ
glyphicon glyphicon-link
glyphicon glyphicon-հեռախոս
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-սորտ
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-չնշված է
glyphicon glyphicon-ընդլայնել
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-մուտք
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-ռեկորդ
glyphicon glyphicon-փրկել
glyphicon glyphicon-բաց
glyphicon glyphicon-պահպանված
glyphicon glyphicon-ներմուծում
glyphicon glyphicon-արտահանում
glyphicon glyphicon-ուղարկել
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-փոխանցում
glyphicon glyphicon-դանակախաղ
glyphicon glyphicon-header
glyphicon glyphicon-սեղմված
glyphicon glyphicon-ականջակալ
glyphicon glyphicon-phone-alt
glyphicon glyphicon-աշտարակ
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-ենթագրեր
glyphicon glyphicon-ձայնային-ստերեո
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-ձայն-5-1
glyphicon glyphicon-ձայն-6-1
glyphicon glyphicon-ձայն-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-գրանցման նշան
glyphicon glyphicon-ամպի ներբեռնում
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-ծառ-տերեւաթափ
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-պատճեն
glyphicon glyphicon- paste
glyphicon glyphicon-զգոն
glyphicon glyphicon-հավասարիչ
glyphicon glyphicon-արքա
glyphicon glyphicon-queen
glyphicon glyphicon-լոմբարդ
glyphicon glyphicon-եպիսկոպոս
glyphicon glyphicon-ասպետ
glyphicon glyphicon-baby-formula
glyphicon glyphicon-վրան
glyphicon glyphicon-գրատախտակ
glyphicon glyphicon-մահճակալ
glyphicon glyphicon-խնձոր
glyphicon glyphicon-ջնջել
glyphicon glyphicon-ավազի ժամացույց
glyphicon glyphicon-լամպ
glyphicon glyphicon-կրկնօրինակ
glyphicon glyphicon-խոզուկ-բանկ
glyphicon glyphicon-scissors
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-իեն
glyphicon glyphicon-jpy
glyphicon glyphicon-ռուբլի
glyphicon glyphicon-ռուբ
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-սառույց-շուշակ-համ
glyphicon glyphicon-կրթություն
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-մենյու-համբուրգեր
glyphicon glyphicon-modal-window
glyphicon glyphicon-յուղ
glyphicon glyphicon-հատիկ
glyphicon glyphicon-արևային ակնոցներ
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-եռանկյուն-աջ
glyphicon glyphicon-եռանկյուն-ձախ
glyphicon glyphicon-եռանկյուն-ներքև
glyphicon glyphicon-triangle-top
glyphicon glyphicon-կոնսոլ
glyphicon glyphicon-վերնագիր
glyphicon glyphicon-subscript
glyphicon glyphicon-մենյու-ձախ
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-մենյու-up
Ինչպես օգտագործել
Կատարման նկատառումներից ելնելով, բոլոր պատկերակները պահանջում են բազային դաս և անհատական պատկերակների դաս: Օգտագործելու համար տեղադրեք հետևյալ կոդը գրեթե ցանկացած վայրում: Համոզվեք, որ բացատ թողեք պատկերակի և տեքստի միջև՝ պատշաճ լրացման համար:
Մի խառնեք այլ բաղադրիչների հետ
Սրբապատկերների դասերը չեն կարող ուղղակիորեն համակցվել այլ բաղադրիչների հետ: Նրանք չպետք է օգտագործվեն նույն տարրի վրա այլ դասերի հետ միասին: Փոխարենը, ավելացրեք ներդիր <span>և կիրառեք պատկերակների դասերը <span>.
Միայն դատարկ տարրերի վրա օգտագործելու համար
Սրբապատկերների դասերը պետք է օգտագործվեն միայն այն տարրերի վրա, որոնք չեն պարունակում տեքստային բովանդակություն և չունեն մանկական տարրեր:
Փոխելով պատկերակի տառատեսակի գտնվելու վայրը
Bootstrap-ը ենթադրում է, որ պատկերակ տառատեսակի ֆայլերը կտեղակայվեն ../fonts/գրացուցակում՝ համեմատած կազմված CSS ֆայլերի հետ: Այդ տառատեսակի ֆայլերը տեղափոխելը կամ վերանվանելը նշանակում է CSS-ի թարմացում երեք եղանակներից մեկով.
Փոխեք @icon-font-pathև/կամ @icon-font-nameփոփոխականները սկզբնաղբյուրում Ավելի քիչ ֆայլեր:
Օգտագործեք ցանկացած տարբերակ, որը լավագույնս համապատասխանում է ձեր հատուկ զարգացման կարգավորումներին:
Մատչելի պատկերակներ
Օժանդակ տեխնոլոգիաների ժամանակակից տարբերակները կհայտարարեն CSS-ի գեներացված բովանդակությունը, ինչպես նաև Unicode-ի հատուկ նիշերը: Էկրանի ընթերցիչներում չնախատեսված և շփոթեցնող արդյունքից խուսափելու համար (հատկապես, երբ պատկերակները օգտագործվում են զուտ ձևավորման համար), մենք թաքցնում ենք դրանք aria-hidden="true"հատկանիշով:
Եթե դուք պատկերակ եք օգտագործում իմաստ փոխանցելու համար (այլ ոչ միայն որպես դեկորատիվ տարր), համոզվեք, որ այդ իմաստը փոխանցվում է նաև օժանդակ տեխնոլոգիաներին, օրինակ՝ ներառեք լրացուցիչ բովանդակություն՝ տեսողականորեն թաքցված .sr-onlyդասի հետ:
Եթե դուք ստեղծում եք կառավարիչներ՝ առանց այլ տեքստի (օրինակ <button>՝ միայն պատկերակ պարունակող), դուք պետք է միշտ տրամադրեք այլընտրանքային բովանդակություն՝ պարզելու համար կառավարման նպատակը, որպեսզի այն իմաստ ունենա օժանդակ տեխնոլոգիաների օգտագործողների համար: Այս դեպքում դուք կարող եք aria-labelատրիբուտ ավելացնել հենց հսկողության վրա:
Օրինակներ
Օգտագործեք դրանք կոճակներում, կոճակների խմբերում՝ գործիքագոտու, նավիգացիայի կամ նախապես տեղադրված ձևի մուտքագրման համար:
Պատկերակ, որն օգտագործվում է ահազանգում , որպեսզի փոխանցի, որ դա սխալ հաղորդագրություն է, և լրացուցիչ .sr-onlyտեքստով այս ակնարկը փոխանցելու օժանդակ տեխնոլոգիաների օգտագործողներին:
Սխալ.Մուտքագրեք վավեր էլփոստի հասցե
Բացվող պատուհաններ
Փոխարկվող, համատեքստային ընտրացանկ՝ հղումների ցուցակները ցուցադրելու համար: Ստեղծվել է ինտերակտիվ JavaScript-ի բացվող հավելվածով :
Օրինակ
Փաթեթավորեք բացվող ցանկի գործարկիչը և բացվող ընտրացանկը .dropdownկամ մեկ այլ տարր, որը հայտարարում է position: relative;. Այնուհետև ավելացրեք ցանկի HTML-ը:
Լռելյայնորեն, բացվող ընտրացանկը ավտոմատ կերպով տեղադրվում է 100% վերևից և իր ծնողի ձախ կողմում: Ավելացնել .dropdown-menu-righta-ին .dropdown-menuդեպի աջ հարթեցնել բացվող ընտրացանկը:
Կարող է պահանջվել լրացուցիչ դիրքավորում
Բացվող պատուհանները ավտոմատ կերպով տեղադրվում են CSS-ի միջոցով փաստաթղթի նորմալ հոսքի շրջանակներում: Սա նշանակում է, որ բացվող ցանկերը կարող են կրճատվել որոշակի հատկություններ ունեցող ծնողների կողմից overflowկամ հայտնվել տեսադաշտի սահմաններից դուրս: Անդրադառնալով այս խնդիրներին ինքնուրույն, երբ դրանք ծագում են:
Հնացած .pull-rightհավասարեցում
v3.1.0-ի դրությամբ մենք հնացել ենք .pull-rightբացվող ընտրացանկերի վրա: Մենյու աջ հարթեցնելու համար օգտագործեք .dropdown-menu-right. Նավագոտում աջ հարթեցված nav բաղադրիչներն օգտագործում են այս դասի mixin տարբերակը՝ մենյուն ավտոմատ կերպով հավասարեցնելու համար: Այն վերացնելու համար օգտագործեք .dropdown-menu-left:
Վերնագրեր
Ցանկացած բացվող ընտրացանկում գործողությունների բաժինները պիտակավորելու համար ավելացրեք վերնագիր:
Խմբավորեք կոճակների շարքը մեկ տողի վրա կոճակների խմբի հետ: Ավելացրեք լրացուցիչ JavaScript ռադիոյի և վանդակի ոճի վարքագիծ մեր կոճակների հավելվածով :
Գործիքների հուշումները և կոճակները խմբերում հատուկ կարգավորում են պահանջում
Գործիքների հուշումներ կամ բլոկներ a-ի տարրերի վրա օգտագործելիս .btn-groupդուք պետք է նշեք container: 'body'անցանկալի կողմնակի ազդեցություններից խուսափելու տարբերակը (օրինակ, տարրը մեծանում է և/կամ կորցնում իր կլորացված անկյունները, երբ գործարկվում է գործիքի հուշումը կամ պոպովը):
Համոզվեք, որ ճիշտ roleէ և տրամադրեք պիտակ
Որպեսզի օժանդակ տեխնոլոգիաները, ինչպիսիք են էկրանի ընթերցողները, ցույց տան, որ մի շարք կոճակներ խմբավորված են, roleպետք է համապատասխան հատկանիշ տրամադրվի: Կոճակների խմբերի համար սա կլինի role="group", մինչդեռ գործիքների տողերը պետք է ունենան role="toolbar".
Բացի այդ, խմբերին և գործիքների տողերին պետք է տրվի հստակ պիտակ, քանի որ օժանդակ տեխնոլոգիաների մեծ մասը հակառակ դեպքում դրանք չեն հայտարարի, չնայած ճիշտ roleհատկանիշի առկայությանը: Այստեղ ներկայացված օրինակներում մենք օգտագործում ենք aria-label, բայց կարող են օգտագործվել նաև այնպիսի այլընտրանքներ, ինչպիսիք են aria-labelledby:
Հիմնական օրինակ
Փաթեթավորեք մի շարք կոճակներ ներսով .btn:.btn-group
Կոճակների գործիքագոտին
Կոմպլեկտները միացրեք <div class="btn-group">ավելի <div class="btn-toolbar">բարդ բաղադրիչների համար:
Չափսերը
Խմբի յուրաքանչյուր կոճակի վրա կոճակների չափման դասեր կիրառելու փոխարեն, պարզապես ավելացրեք .btn-group-*յուրաքանչյուրին .btn-group, ներառյալ մի քանի խմբերի տեղադրման ժամանակ:
Բնադրում
Տեղադրեք a .btn-groupմյուսի .btn-groupմեջ, երբ ցանկանում եք, որ բացվող ընտրացանկերը խառնվեն մի շարք կոճակներով:
Կատարեք կոճակների մի խումբ, որոնք ձգվում են հավասար չափերով, որպեսզի ընդգրկեն դրա մայրիկի ամբողջ լայնությունը: Նաև աշխատում է կոճակների խմբում բացվող կոճակներով:
Սահմանների մշակում
Կոճակները հիմնավորելու համար օգտագործվող հատուկ HTML-ի և CSS-ի պատճառով (մասնավորապես display: table-cell), նրանց միջև սահմանները կրկնապատկվում են: Սովորական կոճակների խմբերում margin-left: -1pxօգտագործվում է եզրագծերը ցցելու համար՝ դրանք հեռացնելու փոխարեն: Այնուամենայնիվ, marginչի աշխատում display: table-cell: Արդյունքում, կախված Bootstrap-ի ձեր հարմարեցումներից, գուցե ցանկանաք հեռացնել կամ նորից գունավորել եզրագծերը:
IE8 և սահմաններ
Internet Explorer 8-ը չի ներկայացնում կոճակների եզրագծերը հիմնավորված կոճակների խմբում, անկախ նրանից, թե դա միացված է, <a>թե <button>տարրեր: Դա շրջանցելու համար յուրաքանչյուր կոճակ փաթաթեք մյուսի մեջ .btn-group:
Եթե <a>տարրերն օգտագործվում են որպես կոճակներ գործելու համար՝ գործարկելով ներէջի ֆունկցիոնալությունը, այլ ոչ թե ընթացիկ էջի մեկ այլ փաստաթուղթ կամ բաժին նավարկելու փոխարեն, նրանց նույնպես պետք է տրվի համապատասխան role="button".
Տարրերով <button>_
Տարրերով հիմնավորված կոճակների խմբերն օգտագործելու <button>համար դուք պետք է յուրաքանչյուր կոճակ փաթաթեք կոճակների խմբի մեջ : Բրաուզերների մեծամասնությունը պատշաճ կերպով չի կիրառում մեր CSS-ը <button>տարրերի համար հիմնավորման համար, բայց քանի որ մենք աջակցում ենք կոճակների բացվող պատուհաններին, մենք կարող ենք դրա շուրջ աշխատել:
Կոճակների բացվող պատուհաններ
Օգտագործեք ցանկացած կոճակ՝ բացվող ընտրացանկը գործարկելու համար՝ տեղադրելով այն a-ում .btn-groupև ապահովելով մենյուի համապատասխան նշում:
Plugin-ի կախվածություն
Կոճակների բացվող պատուհանները պահանջում են, որ բացվող հավելվածը ներառվի Bootstrap-ի ձեր տարբերակում:
Մեկ կոճակի բացվող ցանկեր
Վերածեք կոճակը բացվող անջատիչի մի քանի հիմնական նշագծման փոփոխություններով:
Ընդլայնեք ձևի կառավարումները՝ ավելացնելով տեքստ կամ կոճակներ ցանկացած տեքստի վրա հիմնված ցանկացած տեքստից առաջ, հետո կամ երկու կողմերում <input>: Օգտագործեք .input-groupan-ի հետ .input-group-addonկամ .input-group-btnմեկին տարրեր կցելու կամ կցելու համար .form-control:
Միայն տեքստային <input>s
Խուսափեք <select>այստեղ տարրեր օգտագործելուց, քանի որ դրանք չեն կարող ամբողջությամբ ձևավորվել WebKit բրաուզերներում:
Խուսափեք <textarea>այստեղ տարրեր օգտագործելուց, քանի որ դրանց rowsհատկանիշը որոշ դեպքերում չի հարգվի:
Գործիքների հուշումները և ներածական խմբերը պահանջում են հատուկ կարգավորում
Tooltips կամ popovers-ի տարրերի վրա օգտագործելիս .input-group, դուք պետք է նշեք container: 'body'անցանկալի կողմնակի ազդեցություններից խուսափելու տարբերակը (օրինակ, տարրն ավելի լայնանում է և/կամ կորցնում է իր կլորացված անկյունները, երբ գործարկվում է գործիքի հուշումը կամ պոպովը):
Մի խառնեք այլ բաղադրիչների հետ
Մի խառնեք ձևերի խմբերը կամ ցանցի սյունակների դասերը ուղղակիորեն մուտքային խմբերի հետ: Փոխարենը, տեղադրեք մուտքային խումբը ձևի խմբի կամ ցանցին առնչվող տարրի ներսում:
Միշտ ավելացրեք պիտակներ
Էկրանի ընթերցողները դժվարություններ կունենան ձեր ձևերի հետ, եթե յուրաքանչյուր մուտքագրման համար պիտակ չներառեք: Այս մուտքային խմբերի համար համոզվեք, որ ցանկացած լրացուցիչ պիտակ կամ գործառույթ փոխանցված է օժանդակ տեխնոլոգիաներին:
Օգտագործվող ճշգրիտ տեխնիկան (տեսանելի <label>տարրեր, <label>թաքնված տարրեր .sr-onlyդասի օգտագործմամբ կամ aria-label, aria-labelledby, aria-describedby, titleկամ placeholderհատկանիշի օգտագործումը) և այն, թե ինչ լրացուցիչ տեղեկատվություն պետք է փոխանցվի, կտարբերվեն՝ կախված ինտերֆեյսի վիջեթի ճշգրիտ տեսակից, որը դուք իրականացնում եք: Այս բաժնի օրինակները ներկայացնում են մի քանի առաջարկվող, կոնկրետ դեպքերի մոտեցումներ:
Հիմնական օրինակ
Տեղադրեք մեկ հավելում կամ կոճակ մուտքի երկու կողմերում: Կարող եք նաև մեկը տեղադրել մուտքի երկու կողմերում:
Մենք չենք աջակցում մի քանի հավելումներ ( .input-group-addonկամ .input-group-btn) մեկ կողմում:
Մենք չենք աջակցում մի քանի ձևի վերահսկում մեկ մուտքային խմբում:
Չափսերը
Ձևի չափի հարաբերական դասերը ավելացրեք .input-groupինքնին, և ներսում բովանդակությունը ավտոմատ կերպով կփոխի չափը. կարիք չկա կրկնել ձևի վերահսկման չափի դասերը յուրաքանչյուր տարրի վրա:
Նշման տուփեր և ռադիո հավելումներ
Տեղադրեք ցանկացած վանդակ կամ ռադիո տարբերակ ներածման խմբի հավելումում՝ տեքստի փոխարեն:
Կոճակային հավելումներ
Ներածման խմբերի կոճակները մի փոքր տարբեր են և պահանջում են մեկ լրացուցիչ մակարդակի բույն: Փոխարենը .input-group-addon, դուք պետք է օգտագործեք .input-group-btnկոճակները փաթաթելու համար: Սա պահանջվում է դիտարկիչի լռելյայն ոճերի պատճառով, որոնք չեն կարող վերացվել:
Բացվող կոճակներ
Սեգմենտացված կոճակներ
Բազմաթիվ կոճակներ
Թեև յուրաքանչյուր կողմում կարող եք ունենալ միայն մեկ հավելում, կարող եք ունենալ մի քանի կոճակներ մեկում .input-group-btn:
Navs
Bootstrap-ում հասանելի Navs-ներն ունեն համօգտագործվող նշումներ՝ սկսած բազային .navդասից, ինչպես նաև ընդհանուր վիճակներ: Փոխեք մոդիֆիկատորների դասերը՝ յուրաքանչյուր ոճի միջև անցնելու համար:
Ներդիրների վահանակների համար navs օգտագործելու համար պահանջվում է JavaScript ներդիրների հավելված
Tabbable տարածքներով ներդիրների համար դուք պետք է օգտագործեք ներդիրների JavaScript հավելվածը : Նշումը նաև կպահանջի լրացուցիչ և ARIA ատրիբուտներ . լրացուցիչ մանրամասների համար roleտե՛ս plugin-ի օրինակի նշագրումը :
Որպես նավիգացիա օգտագործվող նավիգացիաները հասանելի դարձրեք
Եթե դուք օգտագործում եք navs՝ նավիգացիոն գիծ տրամադրելու համար, համոզվեք, որ ավելացնեք a-ը role="navigation"ի ամենատրամաբանական մայր կոնտեյների մեջ <ul>կամ փաթաթեք <nav>տարրը ամբողջ նավիգացիայի շուրջ: Մի ավելացրեք դերը <ul>ինքնին, քանի որ դա կխանգարի այն հայտարարվել որպես փաստացի ցուցակ օժանդակ տեխնոլոգիաների կողմից:
Ներդիրներ
Նկատի ունեցեք, որ .nav-tabsդասը պահանջում է .navբազային դաս:
Հեշտությամբ ներդիրները կամ դեղահաբերը հավասարեցրեք իրենց մայրիկի լայնությանը 768px-ից ավելի լայն էկրանների վրա .nav-justified: Ավելի փոքր էկրանների վրա նավի հղումները կուտակված են:
Հիմնավորված նավագոտու նավի հղումները ներկայումս չեն աջակցվում:
Safari և արձագանքող արդարացված navs
v9.1.2-ի դրությամբ Safari-ն ի հայտ է գալիս սխալ, որի դեպքում ձեր դիտարկիչի հորիզոնական չափափոխումը առաջացնում է արդարացված նավարկման սխալներ, որոնք մաքրվում են թարմացման ժամանակ: Այս վրիպակը ցույց է տրված նաև հիմնավորված նավի օրինակում :
Navbars-ը պատասխանատու մետա բաղադրիչներ են, որոնք ծառայում են որպես նավիգացիոն վերնագրեր ձեր հավելվածի կամ կայքի համար: Դրանք սկսում են փլվել (և փոխարկվող) շարժական դիտումներում և դառնում հորիզոնական, քանի որ հասանելի տեսադաշտի լայնությունը մեծանում է:
Հիմնավորված նավագոտու նավի հղումները ներկայումս չեն աջակցվում:
Հորդառատ բովանդակություն
Քանի որ Bootstrap-ը չգիտի, թե որքան տարածք է անհրաժեշտ ձեր navbar-ի բովանդակությանը, դուք կարող եք խնդիրներ ունենալ բովանդակությունը երկրորդ շարքում փաթաթելու հետ: Դա լուծելու համար կարող եք.
Փոխեք այն կետը, որտեղ ձեր navbar-ը անցնում է փլված և հորիզոնական ռեժիմների միջև: Անհատականացրեք @grid-float-breakpointփոփոխականը կամ ավելացրեք ձեր սեփական մեդիա հարցումը:
Պահանջվում է JavaScript հավելված
Եթե JavaScript-ն անջատված է, և տեսադաշտը այնքան նեղ է, որ նավագոտին փլվի, անհնար կլինի ընդլայնել նավագոտին և դիտել բովանդակությունը .navbar-collapse.
Պատասխանող նավարկիչը պահանջում է, որ փլուզման հավելվածը ներառվի Bootstrap-ի ձեր տարբերակում:
Բջջային շարժական նավագոտու ընդմիջման կետի փոփոխություն
Navbar-ը ընկնում է դեպի իր ուղղահայաց շարժական տեսքը, երբ տեսադաշտը ավելի նեղ է, քան @grid-float-breakpoint, և ընդլայնվում է դեպի իր հորիզոնական ոչ շարժական տեսքը, երբ տեսադաշտը առնվազն @grid-float-breakpointլայնությամբ է: Կարգավորեք այս փոփոխականը Less source-ում, որպեսզի վերահսկի, երբ նավագոտի փլուզվի/ընդլայնվի: Լռելյայն արժեքն է 768px(ամենափոքր «փոքր» կամ «պլանշետ» էկրան):
Մատչելի դարձրեք նավագոտիները
Համոզվեք, որ օգտագործեք <nav>տարր կամ, եթե օգտագործում եք ավելի ընդհանուր տարր, ինչպիսին է ,-ն է <div>, ավելացրեք a role="navigation"յուրաքանչյուր navbar-ում, որպեսզի այն հստակորեն ճանաչվի որպես ուղենիշային տարածաշրջան օժանդակ տեխնոլոգիաների օգտագործողների համար:
Ապրանքանիշի պատկեր
Փոխարինեք navbar ապրանքանիշը ձեր սեփական պատկերով՝ տեքստը փոխարինելով <img>. Քանի որ .navbar-brandունի իր սեփական լիցքավորումը և բարձրությունը, հնարավոր է, որ ձեզ անհրաժեշտ լինի փոխել որոշ CSS՝ կախված ձեր պատկերից:
Ձևաթղթեր
Տեղադրեք ձևի բովանդակությունը .navbar-formնեղ տեսադաշտերում ճիշտ ուղղահայաց հավասարեցման և ծալված վարքի համար: Օգտագործեք հավասարեցման ընտրանքները՝ որոշելու, թե որտեղ է այն գտնվում նավագոտու բովանդակության մեջ:
Որպես ղեկավար, .navbar-formկիսում է իր ծածկագրի մեծ մասը .form-inlinemixin-ի միջոցով: Ձևերի որոշ վերահսկիչներ, ինչպիսիք են մուտքային խմբերը, կարող են պահանջել ֆիքսված լայնություններ, որպեսզի պատշաճ կերպով ցուցադրվեն նավագոտում:
Էկրանի ընթերցողները դժվարություններ կունենան ձեր ձևերի հետ, եթե յուրաքանչյուր մուտքագրման համար պիտակ չներառեք: Այս ներդիր ձևերի համար կարող եք թաքցնել պիտակները՝ օգտագործելով .sr-onlyդասը: Աջակցող տեխնոլոգիաների համար պիտակ տրամադրելու այլ այլընտրանքային մեթոդներ կան, ինչպիսիք են aria-label, aria-labelledbyկամ titleհատկանիշը: Եթե սրանցից ոչ մեկը չկա, էկրանի ընթերցողները կարող են օգտագործել placeholderհատկանիշը, եթե առկա է, բայց նշեք, որ placeholderորպես պիտակավորման այլ մեթոդների փոխարինում օգտագործելը խորհուրդ չի տրվում:
Կոճակներ
Ավելացրեք .navbar-btnդասը <button>տարրերին, որոնք չեն գտնվում a-ում, <form>որպեսզի դրանք ուղղահայաց կենտրոնացվեն navbar-ում:
Համատեքստի հատուկ օգտագործում
Ինչպես ստանդարտ կոճակների դասերը , .navbar-btnկարող են օգտագործվել <a>և <input>տարրերի վրա: Այնուամենայնիվ, ոչ .navbar-btnստանդարտ կոճակների դասերը չպետք է օգտագործվեն <a>տարրերի վրա .navbar-nav:
Տեքստ
Տեքստի տողերը տարրի մեջ փաթաթեք .navbar-text, սովորաբար <p>պիտակի վրա՝ համապատասխան առաջատարի և գույնի համար:
Ոչ նավի հղումներ
Այն մարդկանց համար, ովքեր օգտագործում են ստանդարտ հղումներ, որոնք չեն մտնում սովորական navbar նավիգացիոն բաղադրիչի մեջ, օգտագործեք .navbar-linkդասը՝ լռելյայն և հակադարձ նավագոտու ընտրանքների համար պատշաճ գույներ ավելացնելու համար:
Բաղադրիչների հավասարեցում
Հավասարեցրեք նավի հղումները, ձևերը, կոճակները կամ տեքստը՝ օգտագործելով .navbar-leftկամ .navbar-rightօգտակար դասերը: Երկու դասերն էլ կավելացնեն CSS float նշված ուղղությամբ: Օրինակ՝ նավի հղումները հավասարեցնելու համար դրանք տեղադրեք առանձին <ul>՝ կիրառված համապատասխան օգտակար դասի հետ:
Այս դասերը և-ի միախառնված տարբերակներն են .pull-left, .pull-rightբայց դրանք նախատեսված են մեդիա հարցումների համար՝ սարքերի չափսերի մեջ նավագոտու բաղադրիչներն ավելի հեշտ կառավարելու համար:
Մի քանի բաղադրիչների ճիշտ հավասարեցում
Navbars-ը ներկայումս ունի մի քանի .navbar-rightդասերի սահմանափակում: Բովանդակությունը պատշաճ կերպով տարածելու համար մենք օգտագործում ենք բացասական լուսանցք վերջին .navbar-rightտարրի վրա: Երբ կան մի քանի տարրեր, որոնք օգտագործում են այդ դասը, այս լուսանցքները չեն աշխատում այնպես, ինչպես նախատեսված էր:
Մենք կվերանայենք սա, երբ կարողանանք վերաշարադրել այդ բաղադրիչը v4-ում:
Ամրացված է վերևում
Ավելացրեք .navbar-fixed-topև ներառեք նավագոտու բովանդակություն .containerկամ կենտրոն և պահեք:.container-fluid
Պահանջվում է մարմնի լցոնում
Ֆիքսված navbar-ը կվերածվի ձեր մյուս բովանդակության վրա, եթե չավելացնեք paddingվերևում <body>: Փորձեք ձեր սեփական արժեքները կամ օգտագործեք ստորև բերված մեր հատվածը: Հուշում. Լռելյայնորեն, navbar-ի բարձրությունը 50px է:
Համոզվեք, որ սա ներառեք հիմնական Bootstrap CSS- ից հետո :
Ամրագրված է ներքևում
Ավելացրեք .navbar-fixed-bottomև ներառեք նավագոտու բովանդակություն .containerկամ կենտրոն և պահեք:.container-fluid
Պահանջվում է մարմնի լցոնում
Ֆիքսված navbar-ը կվերածվի ձեր մյուս բովանդակության վրա, եթե դուք ավելացնեք paddingներքևի մասում <body>: Փորձեք ձեր սեփական արժեքները կամ օգտագործեք ստորև բերված մեր հատվածը: Հուշում. Լռելյայնորեն, navbar-ի բարձրությունը 50px է:
Համոզվեք, որ սա ներառեք հիմնական Bootstrap CSS- ից հետո :
Ստատիկ վերնաշապիկ
Ստեղծեք ամբողջ լայնությամբ նավագոտի, որը հեռանում է էջից՝ ավելացնելով .navbar-static-topև ներառելով նավագոտու բովանդակություն .containerկամ կենտրոն և ներդիր:.container-fluid
Ի տարբերություն .navbar-fixed-*դասերի, դուք կարիք չունեք որևէ լիցք փոխել body.
Տրամադրեք ձեր կայքի կամ հավելվածի համար էջադրման հղումներ բազմաէջանոց էջադրման բաղադրիչով կամ ավելի պարզ էջի այլընտրանքով :
Կանխադրված էջադրում
Պարզ էջավորում՝ ոգեշնչված Rdio-ից, հիանալի հավելվածների և որոնման արդյունքների համար: Մեծ բլոկը դժվար է բաց թողնել, հեշտությամբ մասշտաբելի և ապահովում է սեղմումների մեծ տարածքներ:
Էջավորման բաղադրիչի պիտակավորում
Էջավորման բաղադրիչը պետք է փաթաթված լինի <nav>տարրի մեջ, որպեսզի այն նույնականացվի որպես նավիգացիոն բաժին էկրանի ընթերցիչների և այլ օժանդակ տեխնոլոգիաների համար: Բացի այդ, քանի որ էջը, հավանաբար, արդեն ունի մեկից ավելի նման նավարկության բաժին (օրինակ՝ վերնագրի հիմնական նավարկությունը կամ կողագոտի նավարկությունը), խորհուրդ է տրվում տրամադրել նկարագրություն aria-label, <nav>որն արտացոլում է դրա նպատակը: Օրինակ, եթե էջավորման բաղադրիչն օգտագործվում է որոնման արդյունքների մի շարքի միջև նավարկելու համար, համապատասխան պիտակը կարող է լինել aria-label="Search results pages".
Հաշմանդամ և ակտիվ վիճակներ
Հղումները հարմարեցված են տարբեր հանգամանքների համար: Օգտագործեք .disabledչսեղմվող հղումների և .activeընթացիկ էջը նշելու համար:
Մենք խորհուրդ ենք տալիս փոխել ակտիվ կամ անջատված խարիսխները <span>, կամ բաց թողնել խարիսխը նախորդ/հաջորդ սլաքների դեպքում՝ հեռացնելու համար սեղմելու գործառույթը՝ պահպանելով նախատեսված ոճերը:
Չափսերը
Ցանկանում եք ավելի մեծ, թե փոքր էջադրում: Ավելացնել .pagination-lgկամ .pagination-smլրացուցիչ չափերի համար:
Փեյջեր
Արագ նախորդ և հաջորդ հղումներ պարզ էջադրման իրականացման համար՝ թեթև նշագրումով և ոճերով: Այն հիանալի է պարզ կայքերի համար, ինչպիսիք են բլոգները կամ ամսագրերը:
Կանխադրված օրինակ
Լռելյայնորեն, փեյջերը կենտրոնացնում է հղումները:
Հավասարեցված հղումներ
Որպես այլընտրանք, դուք կարող եք հավասարեցնել յուրաքանչյուր հղումը կողմերին.
Ընտրովի անջատված վիճակ
Էջերի հղումները նաև օգտագործում են էջագրման ընդհանուր .disabledօգտակար դասը:
Պիտակներ
Օրինակ
Օրինակ վերնագիր Նոր
Օրինակ վերնագիր Նոր
Օրինակ վերնագիր Նոր
Օրինակ վերնագիր Նոր
Օրինակ վերնագիր Նոր
Օրինակ վերնագիր Նոր
Հասանելի տատանումներ
Ավելացրեք ստորև նշված մոդիֆիկատորների դասերից որևէ մեկը՝ պիտակի տեսքը փոխելու համար:
Կանխադրված առաջնային հաջողության տեղեկատվության նախազգուշացման վտանգ
Ունե՞ք տոննա պիտակներ:
Ռենդերի հետ կապված խնդիրներ կարող են առաջանալ, երբ նեղ կոնտեյների մեջ ունեք տասնյակ ներդիր պիտակներ, որոնցից յուրաքանչյուրը պարունակում է իր inline-blockտարրը (ինչպես պատկերակը): Այս ճանապարհը կարգավորվում է display: inline-block;: Համատեքստի և օրինակի համար տե՛ս #13219 :
Պիտակներ
Հեշտությամբ ընդգծեք նոր կամ չկարդացված տարրերը՝ ավելացնելով <span class="badge">հղումներ, Bootstrap նավարկիչներ և այլն:
Jumbotron-ը ամբողջ լայնությամբ և առանց կլորացված անկյունների դարձնելու համար դրեք այն բոլոր .containers-ներից դուրս և փոխարենը ավելացրեք .containerներսում:
Էջի վերնագիր
Պարզ կեղև h1՝ էջի վրա բովանդակության հատվածները պատշաճ կերպով տարածելու և հատվածավորելու համար: Այն կարող է օգտագործել h1լռելյայն smallտարրը, ինչպես նաև այլ բաղադրիչների մեծ մասը (լրացուցիչ ոճերով):
Էջի վերնագրի օրինակ Ենթատեքստ վերնագրի համար
Մանրապատկերներ
Ընդլայնեք Bootstrap-ի ցանցային համակարգը մանրապատկերների բաղադրիչով՝ հեշտությամբ ցուցադրելու պատկերների, տեսանյութերի, տեքստի և այլնի ցանցերը:
Եթե փնտրում եք տարբեր բարձրությունների և/կամ լայնությունների մանրապատկերների Pinterest-ի նման ներկայացում, ապա ձեզ հարկավոր է օգտագործել երրորդ կողմի պլագին, ինչպիսիք են Masonry- ը , Isotope- ը կամ Salvattore-ը :
Կանխադրված օրինակ
Լռելյայնորեն, Bootstrap-ի մանրապատկերները նախատեսված են ցուցադրելու կապակցված պատկերները նվազագույն պահանջվող նշումներով:
Պատվերով բովանդակություն
Մի փոքր լրացուցիչ նշագրման դեպքում հնարավոր է մանրապատկերների մեջ ավելացնել ցանկացած տեսակի HTML բովանդակություն, ինչպիսիք են վերնագրերը, պարբերությունները կամ կոճակները:
Մանրապատկերի պիտակ
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Տրամադրեք համատեքստային հետադարձ կապի հաղորդագրություններ օգտատիրոջ սովորական գործողությունների համար մի քանի մատչելի և ճկուն ահազանգերի հաղորդագրություններով:
Օրինակներ
Փաթեթավորեք ցանկացած տեքստ և կամընտիր անջատման կոճակը .alertև չորս համատեքստային դասերից մեկում (օրինակ՝ .alert-success) հիմնական ահազանգերի համար:
Լռելյայն դաս չկա
Զգուշացումները չունեն լռելյայն դասեր, միայն հիմնական և մոդիֆիկատորների դասեր: Լռելյայն մոխրագույն զգուշացումն այնքան էլ իմաստ չունի, ուստի ձեզանից պահանջվում է նշել տեսակը համատեքստային դասի միջոցով: Ընտրեք հաջողությունից, տեղեկատվությունից, նախազգուշացումից կամ վտանգից:
Լավ արեցիր։ Դուք հաջողությամբ կարդացել եք այս կարևոր նախազգուշական հաղորդագրությունը:
Գլուխը վեր Այս ահազանգը ձեր ուշադրության կարիքն ունի, բայց դա այնքան էլ կարևոր չէ:
Զգուշացում. Ավելի լավ է ստուգեք ինքներդ ձեզ, դուք այնքան էլ լավ տեսք չունեք:
Օ՜, դիպուկ Փոխեք մի քանի բան և փորձեք նորից ուղարկել:
Անտեսելի ազդանշաններ
Կառուցեք ցանկացած ազդանշանի վրա՝ ավելացնելով կամընտիր .alert-dismissibleև փակ կոճակը:
Տրամադրեք արդի արձագանքներ աշխատանքային հոսքի կամ գործողության առաջընթացի վերաբերյալ պարզ, բայց ճկուն առաջընթացի գծերով:
Բրաուզերների համատեղելիություն
Առաջընթացի գծերը օգտագործում են CSS3 անցումներ և անիմացիաներ՝ դրանց որոշ էֆեկտների հասնելու համար: Այս գործառույթները չեն աջակցվում Internet Explorer 9-ում և Firefox-ի նոր կամ ավելի հին տարբերակներում: Opera 12-ը չի աջակցում անիմացիաներին:
Բովանդակության անվտանգության քաղաքականության (CSP) համատեղելիություն
Եթե ձեր վեբկայքն ունի Բովանդակության անվտանգության քաղաքականություն (CSP) , որը թույլ չի տալիս style-src 'unsafe-inline', ապա դուք չեք կարողանա օգտագործել ներկառուցված styleատրիբուտները՝ առաջընթացի գծերի լայնությունը սահմանելու համար, ինչպես ցույց է տրված ստորև ներկայացված մեր օրինակներում: Լայնությունները սահմանելու այլընտրանքային մեթոդները, որոնք համատեղելի են խիստ CSP-ների հետ, ներառում են մի փոքր հատուկ JavaScript-ի օգտագործումը (որը սահմանվում է element.style.width) կամ սովորական CSS դասերի օգտագործումը:
Հիմնական օրինակ
Կանխադրված առաջընթացի տող:
60% Ավարտված
Պիտակի հետ
Հեռացրեք <span>with .sr-onlyclass-ը առաջընթացի գոտուց՝ տեսանելի տոկոս ցույց տալու համար:
60%
Ապահովելու համար, որ պիտակի տեքստը մնում է ընթեռնելի նույնիսկ ցածր տոկոսների դեպքում, մտածեք min-widthառաջընթացի տողում ավելացնելու մասին a:
0%
2%
Համատեքստային այլընտրանքներ
Առաջընթացի գծերը օգտագործում են միևնույն կոճակներից մի քանիսը և ազդանշանային դասեր՝ հետևողական ոճերի համար:
40% Ավարտված (հաջողություն)
20% Ավարտված
60% Ավարտված է (նախազգուշացում)
80% Ավարտված (վտանգավոր)
Գծավոր
Օգտագործում է գրադիենտ՝ գծավոր էֆեկտ ստեղծելու համար: Հասանելի չէ IE9-ում և ստորև:
40% Ավարտված (հաջողություն)
20% Ավարտված
60% Ավարտված է (նախազգուշացում)
80% Ավարտված (վտանգավոր)
Անիմացիոն
Ավելացրե՛ք .active՝ .progress-bar-stripedգծերն աջից ձախ շարժելու համար: Հասանելի չէ IE9-ում և ստորև:
45% Ավարտված
Դարձված
Տեղադրեք մի քանի ձողեր միևնույն մեջ՝ .progressդրանք կուտակելու համար:
35% Ավարտված (հաջողություն)
20% Ավարտված (նախազգուշացում)
10% Ավարտված (վտանգավոր)
Մեդիա օբյեկտ
Վերացական օբյեկտների ոճեր՝ տարբեր տեսակի բաղադրիչներ ստեղծելու համար (օրինակ՝ բլոգի մեկնաբանությունները, թվիթերը և այլն), որոնք տեքստային բովանդակության հետ մեկտեղ ցուցադրում են ձախ կամ աջ հարթեցված պատկեր:
Կանխադրված մեդիա
Նախնական մեդիան ցուցադրում է մեդիա օբյեկտ (պատկերներ, տեսանյութեր, աուդիո) բովանդակության բլոկի ձախ կամ աջ կողմում:
Մեդիա վերնագիր
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:
Մեդիա վերնագիր
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:
Ներդրված մեդիա վերնագիր
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:
Մեդիա վերնագիր
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:
Մեդիա վերնագիր
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:
Դասերը .pull-leftև .pull-rightնաև գոյություն ունեն և նախկինում օգտագործվել են որպես մեդիա բաղադրիչի մաս, սակայն այդ օգտագործման համար հնացած են v3.3.0-ի դրությամբ: Դրանք մոտավորապես համարժեք են .media-leftև .media-right-ին, բացառությամբ, որ .media-rightդրանք պետք է տեղադրվեն .media-bodyhtml-ում նշվածից հետո:
Մեդիա հարթեցում
Պատկերները կամ այլ լրատվամիջոցները կարող են հավասարեցվել վերևից, միջինից կամ ներքևից: Կանխադրվածը վերևին հավասարեցված է:
Վերևից հավասարեցված լրատվամիջոցներ
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Միջին հավասարեցված լրատվամիջոցներ
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Ներքևից հավասարեցված մեդիա
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis: Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis faucibus-ում:
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
ԶԼՄ-ների ցանկ
Մի փոքր լրացուցիչ նշագրման դեպքում դուք կարող եք օգտագործել մեդիա ցանկի ներսում (օգտակար մեկնաբանությունների թեմաների կամ հոդվածների ցուցակների համար):
Մեդիա վերնագիր
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:
Ներդրված մեդիա վերնագիր
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:
Ներդրված մեդիա վերնագիր
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:
Ներդրված մեդիա վերնագիր
Cras sit amet nibh libero, gravida nulla-ում: Նուլա կամ մետուս սլերիսկ, նախքան սոլիցիտուդին համակրանքը: Cras purus odio, գավիթ vulputate at, tempus viverra turpis:
Ցուցակի խումբ
Ցուցակի խմբերը ճկուն և հզոր բաղադրիչ են տարրերի ոչ միայն պարզ ցուցակները ցուցադրելու համար, այլև հատուկ բովանդակությամբ բարդ ցուցակները:
Հիմնական օրինակ
Ցուցակի ամենահիմնական խումբը պարզապես չդասավորված ցուցակ է՝ ցուցակի տարրերով և համապատասխան դասերով: Կառուցեք դրա վրա հետևյալ տարբերակներով կամ ձեր սեփական CSS-ով, ըստ անհրաժեշտության:
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Վեստիբուլում և էրոս
Պիտակներ
Ցուցակի խմբի ցանկացած կետում ավելացրեք կրծքանշանների բաղադրիչը և այն ավտոմատ կերպով կտեղադրվի աջ կողմում:
14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus
Կապակցված տարրեր
Կցեք ցուցակի խմբի տարրերը՝ օգտագործելով խարիսխ պիտակներ ցուցակի տարրերի փոխարեն (դա նաև նշանակում է ծնող <div>՝ ի փոխարեն <ul>): Յուրաքանչյուր տարրի շուրջ առանձին ծնողների կարիք չկա:
Ցանկի խմբի տարրերը կարող են լինել կոճակներ ցուցակի տարրերի փոխարեն (դա նաև նշանակում է ծնող <div>՝ ի փոխարեն <ul>): Յուրաքանչյուր տարրի շուրջ առանձին ծնողների կարիք չկա: Մի օգտագործեք .btnայստեղ ստանդարտ դասերը:
Հաշմանդամ տարրեր
Ավելացրե՛ք .disableda-ին .list-group-item, որպեսզի այն մոխրագույն երևա՝ անջատված երևալու համար:
Թեև միշտ չէ, որ անհրաժեշտ է, երբեմն անհրաժեշտ է ձեր DOM-ը տուփի մեջ դնել: Այդ իրավիճակների համար փորձեք վահանակի բաղադրիչը:
Հիմնական օրինակ
Լռելյայնորեն, այն ամենը, .panelինչ անում է, կիրառում է որոշ հիմնական եզրագիծ և լիցք՝ որոշակի բովանդակություն պարունակելու համար:
Հիմնական վահանակի օրինակ
Վահանակ վերնագրով
Հեշտությամբ ավելացրեք վերնագրի կոնտեյներ ձեր վահանակին .panel-heading. Կարող եք նաև ներառել ցանկացած <h1>- դասի <h6>հետ .panel-title՝ նախապես ոճավորված վերնագիր ավելացնելու համար: <h1>Այնուամենայնիվ, --ի տառաչափերը <h6>վերացված են .panel-heading.
Հղումների ճիշտ գունավորման համար, համոզվեք, որ հղումները տեղադրեք վերնագրերում .panel-title:
Վահանակի վերնագիր առանց վերնագրի
Վահանակի բովանդակությունը
Վահանակի վերնագիր
Վահանակի բովանդակությունը
Վահանակ՝ ստորագիր
Փաթեթավորեք կոճակները կամ երկրորդական տեքստը .panel-footer: Նկատի ունեցեք, որ վահանակի էջատակերը չեն ժառանգում գույներն ու եզրագծերը համատեքստային տատանումներ օգտագործելիս, քանի որ դրանք նախատեսված չեն առաջին պլանում լինելու համար:
Վահանակի բովանդակությունը
Համատեքստային այլընտրանքներ
Ինչպես մյուս բաղադրիչները, հեշտությամբ պանելն ավելի իմաստալից դարձրեք որոշակի համատեքստում՝ ավելացնելով կոնտեքստային վիճակի դասերից որևէ մեկը:
Վահանակի վերնագիր
Վահանակի բովանդակությունը
Վահանակի վերնագիր
Վահանակի բովանդակությունը
Վահանակի վերնագիր
Վահանակի բովանդակությունը
Վահանակի վերնագիր
Վահանակի բովանդակությունը
Վահանակի վերնագիր
Վահանակի բովանդակությունը
Սեղաններով
.tableԱնթերի դիզայնի համար ավելացրեք ցանկացած առանց եզրագծերի վահանակի ներսում: Եթե կա .panel-body, ապա մենք ավելացնում ենք լրացուցիչ եզրագիծ աղյուսակի վերևին բաժանման համար:
Վահանակի վերնագիր
Վահանակի որոշ կանխադրված բովանդակություն այստեղ: 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.
#
Անուն
Ազգանուն
Օգտագործողի անունը
1
նշագծել
Օտտո
@mdo
2
Յակոբ
Թորնթոն
@ճարպ
3
Լարի
թռչունը
@twitter
Եթե վահանակի մարմին չկա, բաղադրիչն առանց ընդհատումների տեղափոխվում է վահանակի վերնագրից աղյուսակ:
Վահանակի վերնագիր
#
Անուն
Ազգանուն
Օգտագործողի անունը
1
նշագծել
Օտտո
@mdo
2
Յակոբ
Թորնթոն
@ճարպ
3
Լարի
թռչունը
@twitter
Ցուցակային խմբերով
Հեշտությամբ ներառեք ամբողջ լայնությամբ ցուցակի խմբերը ցանկացած վահանակում:
Վահանակի վերնագիր
Վահանակի որոշ կանխադրված բովանդակություն այստեղ: 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 in
Morbi leo risus
Porta ac consectetur ac
Վեստիբուլում և էրոս
Պատասխանատու ներկառուցում
Թույլ տվեք դիտարկիչներին որոշել տեսանյութի կամ սլայդերի չափերը՝ հիմնվելով դրանց պարունակող բլոկի լայնության վրա՝ ստեղծելով ներքին հարաբերակցություն, որը պատշաճ կերպով կմեծացվի ցանկացած սարքի վրա:
Կանոնները ուղղակիորեն կիրառվում են <iframe>, <embed>, <video>, և <object>տարրերի վրա. ընտրովի օգտագործեք բացահայտ ժառանգական դաս .embed-responsive-item, երբ ցանկանում եք համապատասխանեցնել ոճը այլ հատկանիշների համար:
Pro-Tip! Ձեզ անհրաժեշտ չէ ներառել frameborder="0"ձեր <iframe>s-ում, քանի որ մենք դա անտեսում ենք ձեզ համար:
Հորեր
Կանխադրված լավ
Օգտագործեք ջրհորը որպես պարզ ազդեցություն տարրի վրա՝ դրան ներդիր էֆեկտ տալու համար:
Տեսեք, ես ջրհորի մեջ եմ:
Ընտրովի պարապմունքներ
Կառավարեք լիցքավորումը և կլորացված անկյունները երկու կամընտիր մոդիֆիկատորների դասերով: