Հասանելի գլիֆներ

Ներառում է ավելի քան 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փոփոխականները սկզբնաղբյուրում Ավելի քիչ ֆայլեր:
Օգտագործեք ավելի քիչ կոմպիլյատորի կողմից տրամադրված հարաբերական URL-ների տարբերակը :
Փոխեք url()ուղիները կազմված CSS-ում:

Օգտագործեք ցանկացած տարբերակ, որը լավագույնս համապատասխանում է ձեր հատուկ զարգացման կարգավորումներին:

Մատչելի պատկերակներ

Օժանդակ տեխնոլոգիաների ժամանակակից տարբերակները կհայտարարեն CSS-ի գեներացված բովանդակությունը, ինչպես նաև Unicode-ի հատուկ նիշերը: Էկրանի ընթերցիչներում չնախատեսված և շփոթեցնող արդյունքից խուսափելու համար (հատկապես, երբ պատկերակները օգտագործվում են զուտ ձևավորման համար), մենք թաքցնում ենք դրանք aria-hidden="true"հատկանիշով:

Եթե դուք պատկերակ եք օգտագործում իմաստ փոխանցելու համար (այլ ոչ միայն որպես դեկորատիվ տարր), համոզվեք, որ այդ իմաստը փոխանցվում է նաև օժանդակ տեխնոլոգիաներին, օրինակ՝ ներառեք լրացուցիչ բովանդակություն՝ տեսողականորեն թաքցված .sr-onlyդասի հետ:

Եթե դուք ստեղծում եք կառավարումներ՝ առանց այլ տեքստի (օրինակ <button>՝ միայն պատկերակ պարունակող), դուք պետք է միշտ տրամադրեք այլընտրանքային բովանդակություն՝ պարզելու համար կառավարման նպատակը, որպեսզի այն իմաստ ունենա օժանդակ տեխնոլոգիաների օգտագործողների համար: Այս դեպքում դուք կարող եք aria-labelատրիբուտ ավելացնել հենց հսկողության վրա:

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

Օրինակներ

Օգտագործեք դրանք կոճակներում, կոճակների խմբերում՝ գործիքագոտու, նավիգացիայի կամ նախապես տեղադրված ձևի մուտքագրման համար:

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

Պատկերակ, որն օգտագործվում է ահազանգում , որպեսզի փոխանցի, որ դա սխալ հաղորդագրություն է, և լրացուցիչ .sr-onlyտեքստով այս ակնարկը փոխանցելու օժանդակ տեխնոլոգիաների օգտագործողներին:

Մուտքագրեք վավեր էլփոստի հասցե

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

Փոխարկվող, համատեքստային ընտրացանկ՝ հղումների ցուցակները ցուցադրելու համար: Ստեղծվել է ինտերակտիվ JavaScript-ի բացվող հավելվածով :

Օրինակ

Փաթեթավորեք բացվող ցանկի գործարկիչը և բացվող ընտրացանկը .dropdownկամ մեկ այլ տարր, որը հայտարարում է position: relative;. Այնուհետև ավելացրեք ցանկի HTML-ը:

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

Բացվող ընտրացանկերը կարող են փոփոխվել՝ ընդլայնելու համար դեպի վեր (փոխարեն դեպի ներքև)՝ ավելացնելով .dropupծնողին:

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

Հավասարեցում

Լռելյայնորեն, բացվող ընտրացանկը ավտոմատ կերպով տեղադրվում է 100% վերևից և իր ծնողի ձախ կողմում: Ավելացնել .dropdown-menu-righta-ին .dropdown-menuդեպի աջ հավասարեցնել բացվող ընտրացանկը:

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

Վերնագրեր

Ցանկացած բացվող ընտրացանկում գործողությունների բաժինները պիտակավորելու համար ավելացրեք վերնագիր:

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

Բաժանարար

Բաժանարար ավելացրեք բացվող ընտրացանկում գտնվող հղումների առանձին շարքին:

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

Անջատված ընտրացանկի տարրեր

Ավելացրեք .disableda- <li>ին բացվող ցանկում՝ հղումն անջատելու համար:

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

Խմբավորեք կոճակների շարքը մեկ տողի վրա կոճակների խմբի հետ: Ավելացրեք լրացուցիչ JavaScript ռադիոյի և վանդակի ոճի վարքագիծ մեր կոճակների հավելվածով :

Գործիքների հուշումները և կոճակները խմբերում հատուկ կարգավորում են պահանջում

Գործիքների հուշումներ կամ բլոկներ a-ի տարրերի վրա օգտագործելիս .btn-groupդուք պետք է նշեք container: 'body'անցանկալի կողմնակի ազդեցություններից խուսափելու տարբերակը (օրինակ, տարրը մեծանում է և/կամ կորցնում իր կլորացված անկյունները, երբ գործարկվում է գործիքի հուշումը կամ պոպովը):

Համոզվեք, որ ճիշտ `role`է և տրամադրեք պիտակ

Որպեսզի օժանդակ տեխնոլոգիաները, ինչպիսիք են էկրանի ընթերցողները, ցույց տան, որ մի շարք կոճակներ խմբավորված են, roleպետք է համապատասխան հատկանիշ տրամադրվի: Կոճակների խմբերի համար սա կլինի role="group", մինչդեռ գործիքների տողերը պետք է ունենան role="toolbar".

Բացա _ _ <button>_

Բացի այդ, խմբերին և գործիքների տողերին պետք է տրվի հստակ պիտակ, քանի որ օժանդակ տեխնոլոգիաների մեծ մասը հակառակ դեպքում դրանք չեն հայտարարի, չնայած ճիշտ roleհատկանիշի առկայությանը: Այստեղ ներկայացված օրինակներում մենք օգտագործում ենք aria-label, բայց կարող են օգտագործվել նաև այնպիսի այլընտրանքներ, ինչպիսիք են aria-labelledby:

Հիմնական օրինակ

Փաթեթավորեք մի շարք կոճակներ ներսով .btn:.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>

Կոմպլեկտները միացրեք <div class="btn-group">ավելի <div class="btn-toolbar">բարդ բաղադրիչների համար:

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

Չափսերը

Խմբի յուրաքանչյուր կոճակի վրա կոճակների չափման դասեր կիրառելու փոխարեն, պարզապես ավելացրեք .btn-group-*յուրաքանչյուրին .btn-group, ներառյալ մի քանի խմբերի տեղադրման ժամանակ:

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

Բնադրում

Տեղադրեք a .btn-groupմյուսի .btn-groupմեջ, երբ ցանկանում եք, որ բացվող ընտրացանկերը խառնվեն մի շարք կոճակներով:

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

Ուղղահայաց տատանումներ

Դարձրեք կոճակների հավաքածուն ուղղահայաց շարված, այլ ոչ թե հորիզոնական: Պառակտման կոճակների բացվող ցանկերն այստեղ չեն աջակցվում:

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

Հիմնավորված կոճակների խմբեր

Կատարեք կոճակների մի խումբ, որոնք ձգվում են հավասար չափերով, որպեսզի ընդգրկեն դրա մայրիկի ամբողջ լայնությունը: Նաև աշխատում է կոճակների խմբում բացվող կոճակներով:

Սահմանների մշակում

Կոճակները հիմնավորելու համար օգտագործվող հատուկ HTML-ի և CSS-ի պատճառով (մասնավորապես display: table-cell), նրանց միջև սահմանները կրկնապատկվում են: Սովորական կոճակների խմբերում margin-left: -1pxօգտագործվում է եզրագծերը ցցելու համար՝ դրանք հեռացնելու փոխարեն: Այնուամենայնիվ, marginչի աշխատում display: table-cell: Արդյունքում, կախված Bootstrap-ի ձեր հարմարեցումներից, գուցե ցանկանաք հեռացնել կամ նորից գունավորել եզրագծերը:

IE8 և սահմաններ

Internet Explorer 8-ը չի ներկայացնում կոճակների եզրագծերը հիմնավորված կոճակների խմբում, անկախ նրանից, թե դա միացված է, <a>թե <button>տարրեր: Դա շրջանցելու համար յուրաքանչյուր կոճակ փաթաթեք մյուսի մեջ .btn-group:

Լրացուցիչ տեղեկությունների համար տես #12476 :

Տարրերով `<a>`_

Պարզապես փաթեթավորեք մի շարք .btns-ի մեջ .btn-group.btn-group-justified:

Ձախ Միջին Ճիշտ

Ձախ Միջին

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

Հղումներ, որոնք գործում են որպես կոճակներ

Եթե <a>տարրերն օգտագործվում են որպես կոճակներ գործելու համար՝ գործարկելով ներէջի ֆունկցիոնալությունը, այլ ոչ թե ընթացիկ էջի մեկ այլ փաստաթուղթ կամ բաժին նավարկելու փոխարեն, նրանց նույնպես պետք է տրվի համապատասխան role="button".

Տարրերով `<button>`_

Տարրերով հիմնավորված կոճակների խմբերն օգտագործելու <button>համար դուք պետք է յուրաքանչյուր կոճակ փաթաթեք կոճակների խմբի մեջ : Բրաուզերների մեծամասնությունը պատշաճ կերպով չի կիրառում մեր CSS-ը <button>տարրերի համար հիմնավորման համար, բայց քանի որ մենք աջակցում ենք կոճակների բացվող պատուհաններին, մենք կարող ենք դրա շուրջ աշխատել:

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

Օգտագործեք ցանկացած կոճակ՝ բացվող ընտրացանկը գործարկելու համար՝ տեղադրելով այն a-ում .btn-groupև ապահովելով մենյուի համապատասխան նշում:

Plugin-ի կախվածություն

Կոճակների բացվող պատուհանները պահանջում են, որ բացվող հավելվածը ներառվի Bootstrap-ի ձեր տարբերակում:

Մեկ կոճակի բացվող ցանկեր

Վերածեք կոճակը բացվող անջատիչի մի քանի հիմնական նշագծման փոփոխություններով:

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

Պառակտման կոճակների բացվող ցանկեր

Նմանապես, ստեղծեք պառակտման կոճակների բացվող պատուհաններ նույն նշագծման փոփոխություններով, միայն առանձին կոճակով:

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

Չափսերը

Կոճակների բացվող պատուհանները աշխատում են բոլոր չափերի կոճակներով:

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

Բացվող տարբերակ

Գործարկեք բացվող ընտրացանկերը տարրերի վերևում՝ ավելացնելով .dropupծնողին:

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

Ընդլայնեք ձևի կառավարումները՝ ավելացնելով տեքստ կամ կոճակներ ցանկացած տեքստի վրա հիմնված ցանկացած տեքստից առաջ, հետո կամ երկու կողմերում <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) մեկ կողմում:

Մենք չենք աջակցում մի քանի ձևի վերահսկում մեկ մուտքային խմբում:

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

Չափսերը

Ձևի չափի հարաբերական դասերը ավելացրեք .input-groupինքնին, և ներսում բովանդակությունը ավտոմատ կերպով կփոխի չափը. կարիք չկա կրկնել ձևի վերահսկման չափի դասերը յուրաքանչյուր տարրի վրա:

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

Նշման տուփեր և ռադիո հավելումներ

Տեղադրեք ցանկացած վանդակ կամ ռադիո տարբերակ ներածման խմբի հավելումում՝ տեքստի փոխարեն:

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

Կոճակային հավելումներ

Ներածման խմբերի կոճակները մի փոքր տարբեր են և պահանջում են մեկ լրացուցիչ մակարդակի բույն: Փոխարենը .input-group-addon, դուք պետք է օգտագործեք .input-group-btnկոճակները փաթաթելու համար: Սա պահանջվում է դիտարկիչի լռելյայն ոճերի պատճառով, որոնք չեն կարող վերացվել:

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

Բացվող կոճակներ

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

Սեգմենտացված կոճակներ

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

Բազմաթիվ կոճակներ

Թեև յուրաքանչյուր կողմում կարող եք ունենալ միայն մեկ հավելում, կարող եք ունենալ մի քանի կոճակներ մեկում .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>

Bootstrap-ում հասանելի Navs-ներն ունեն համօգտագործվող նշումներ՝ սկսած բազային .navդասից, ինչպես նաև ընդհանուր վիճակներ: Փոխեք մոդիֆիկատորների դասերը՝ յուրաքանչյուր ոճի միջև անցնելու համար:

Ներդիրների վահանակների համար navs օգտագործելու համար պահանջվում է JavaScript ներդիրների հավելված

Tabbable տարածքներով ներդիրների համար դուք պետք է օգտագործեք ներդիրների JavaScript հավելվածը : Նշումը նաև կպահանջի լրացուցիչ և ARIA ատրիբուտներ . լրացուցիչ մանրամասների համար roleտե՛ս plugin-ի օրինակի նշագրումը :

Որպես նավիգացիա օգտագործվող նավիգացիաները հասանելի դարձրեք

Եթե դուք օգտագործում եք navs՝ նավիգացիոն գիծ տրամադրելու համար, համոզվեք, որ ավելացնեք a- role="navigation"ն ի ամենատրամաբանական մայր կոնտեյների մեջ <ul>կամ փաթաթեք <nav>տարրը ամբողջ նավիգացիայի շուրջ: Մի ավելացրեք դերը <ul>ինքնին, քանի որ դա կխանգարի այն հայտարարվել որպես փաստացի ցուցակ օժանդակ տեխնոլոգիաների կողմից:

Ներդիրներ

Նկատի ունեցեք, որ .nav-tabsդասը պահանջում է .navբազային դաս:

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

Հաբեր

Վերցրեք նույն HTML-ը, բայց .nav-pillsդրա փոխարեն օգտագործեք.

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

Հաբերը կարող են նաև ուղղահայաց դարսվել: Պարզապես ավելացրեք .nav-stacked.

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

Արդարացված

Հեշտությամբ ներդիրները կամ դեղահաբերը հավասարեցրեք իրենց մայրիկի լայնությանը 768px-ից ավելի լայն էկրանների վրա .nav-justified: Ավելի փոքր էկրանների վրա նավի հղումները կուտակված են:

Հիմնավորված նավագոտու նավի հղումները ներկայումս չեն աջակցվում:

Safari և արձագանքող արդարացված navs

v9.1.2-ի դրությամբ, Safari-ն ի հայտ է գալիս սխալ, որի դեպքում ձեր դիտարկիչի հորիզոնական չափափոխումը առաջացնում է արդարացված նավարկման սխալներ, որոնք մաքրվում են թարմացման ժամանակ: Այս վրիպակը ցույց է տրված նաև հիմնավորված նավի օրինակում :

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

Անջատված հղումներ

Նավի ցանկացած բաղադրիչի համար (ներդիրներ կամ հաբեր), ավելացրեք .disabledմոխրագույն հղումներ և առանց սավառնող էֆեկտների :

Հղման գործառույթը չի ազդել

Այս դասը կփոխի միայն <a>«-ի տեսքը, այլ ոչ նրա ֆունկցիոնալությունը: Այստեղ հղումներն անջատելու համար օգտագործեք հատուկ JavaScript:

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

Օգտագործելով բացվող պատուհաններ

Ավելացրեք բացվող ընտրացանկերը մի փոքր լրացուցիչ HTML-ով և բացվող JavaScript հավելվածով :

Բացվող ներդիրներով

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

Դեղահատեր կաթիլներով

<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-ը պատասխանատու մետա բաղադրիչներ են, որոնք ծառայում են որպես նավիգացիոն վերնագրեր ձեր հավելվածի կամ կայքի համար: Դրանք սկսում են փլվել (և փոխարկվող) շարժական դիտումներում և դառնում հորիզոնական, քանի որ հասանելի տեսադաշտի լայնությունը մեծանում է:

Հիմնավորված նավագոտու նավի հղումները ներկայումս չեն աջակցվում:

Հորդառատ բովանդակություն

Քանի որ Bootstrap-ը չգիտի, թե որքան տարածք է անհրաժեշտ ձեր navbar-ի բովանդակությանը, դուք կարող եք խնդիրներ ունենալ բովանդակությունը երկրորդ շարքում փաթաթելու հետ: Դա լուծելու համար կարող եք.

Նվազեցրեք navbar տարրերի քանակը կամ լայնությունը:
Թաքցրեք նավագոտու որոշ տարրեր որոշակի էկրանի չափերով՝ օգտագործելով արձագանքող օգտակար դասեր :
Փոխեք այն կետը, որտեղ ձեր navbar-ը անցնում է փլված և հորիզոնական ռեժիմների միջև: Անհատականացրեք @grid-float-breakpointփոփոխականը կամ ավելացրեք ձեր սեփական մեդիա հարցումը:

Բջջային շարժական նավագոտու ընդմիջման կետի փոփոխություն

Navbar-ը ընկնում է դեպի իր ուղղահայաց շարժական տեսքը, երբ տեսադաշտը ավելի նեղ է, քան @grid-float-breakpoint, և ընդլայնվում է դեպի իր հորիզոնական ոչ շարժական տեսքը, երբ տեսադաշտը առնվազն @grid-float-breakpointլայնությամբ է: Կարգավորեք այս փոփոխականը Less source-ում, որպեսզի վերահսկի, երբ նավագոտի փլուզվի/ընդլայնվի: Լռելյայն արժեքն է 768px(ամենափոքր «փոքր» կամ «պլանշետ» էկրան):

Մատչելի դարձրեք նավագոտիները

Համոզվեք, որ օգտագործեք <nav>տարր կամ, եթե օգտագործում եք ավելի ընդհանուր տարր, ինչպիսին է ,-ն է <div>, ավելացրեք a role="navigation"յուրաքանչյուր navbar-ում, որպեսզի այն հստակորեն ճանաչվի որպես ուղենիշային տարածաշրջան օժանդակ տեխնոլոգիաների օգտագործողների համար:

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

Փոխարինեք navbar ապրանքանիշը ձեր սեփական պատկերով՝ տեքստը փոխարինելով <img>. Քանի որ .navbar-brandունի իր սեփական լիցքավորումը և բարձրությունը, հնարավոր է, որ ձեզ անհրաժեշտ լինի փոխել որոշ CSS՝ կախված ձեր պատկերից:

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

Տեղադրեք ձևի բովանդակությունը .navbar-formնեղ տեսադաշտերում ճիշտ ուղղահայաց հավասարեցման և ծալված վարքի համար: Օգտագործեք հավասարեցման ընտրանքները՝ որոշելու, թե որտեղ է այն գտնվում նավագոտու բովանդակության մեջ:

Որպես ղեկավար, .navbar-formկիսում է իր ծածկագրի մեծ մասը .form-inlinemixin-ի միջոցով: Ձևերի որոշ վերահսկիչներ, ինչպիսիք են մուտքային խմբերը, կարող են պահանջել ֆիքսված լայնություններ, որպեսզի պատշաճ կերպով ցուցադրվեն նավագոտում:

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

Միշտ ավելացրեք պիտակներ

Էկրանի ընթերցողները դժվարություններ կունենան ձեր ձևերի հետ, եթե յուրաքանչյուր մուտքագրման համար պիտակ չներառեք: Այս ներդիր ձևերի համար կարող եք թաքցնել պիտակները՝ օգտագործելով .sr-onlyդասը: Աջակցող տեխնոլոգիաների համար պիտակ տրամադրելու այլ այլընտրանքային մեթոդներ կան, ինչպիսիք են aria-label, aria-labelledbyկամ titleհատկանիշը: Եթե սրանցից ոչ մեկը չկա, էկրանի ընթերցողները կարող են օգտագործել placeholderհատկանիշը, եթե առկա է, բայց նշեք, որ placeholderորպես պիտակավորման այլ մեթոդների փոխարինում օգտագործելը խորհուրդ չի տրվում:

Ավելացրեք .navbar-btnդասը <button>տարրերին, որոնք չեն գտնվում a-ում, <form>որպեսզի դրանք ուղղահայաց կենտրոնացվեն navbar-ում:

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

Տեքստի տողերը տարրի մեջ փաթաթեք .navbar-text, սովորաբար <p>պիտակի վրա՝ համապատասխան առաջատարի և գույնի համար:

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

Այն մարդկանց համար, ովքեր օգտագործում են ստանդարտ հղումներ, որոնք չեն մտնում սովորական navbar նավիգացիոն բաղադրիչի մեջ, օգտագործեք .navbar-linkդասը՝ լռելյայն և հակադարձ նավագոտու ընտրանքների համար պատշաճ գույներ ավելացնելու համար:

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

Հավասարեցրեք նավի հղումները, ձևերը, կոճակները կամ տեքստը՝ օգտագործելով .navbar-leftկամ .navbar-rightօգտակար դասերը: Երկու դասերն էլ կավելացնեն CSS float նշված ուղղությամբ: Օրինակ՝ նավի հղումները հավասարեցնելու համար դրանք տեղադրեք առանձին <ul>՝ կիրառված համապատասխան օգտակար դասի հետ:

Այս դասերը և-ի միախառնված տարբերակներն են .pull-left, .pull-rightբայց դրանք նախատեսված են մեդիա հարցումների համար՝ սարքերի չափսերի մեջ նավագոտու բաղադրիչներն ավելի հեշտ կառավարելու համար:

Մի քանի բաղադրիչների ճիշտ հավասարեցում

Navbars-ը ներկայումս ունի մի քանի .navbar-rightդասերի սահմանափակում: Բովանդակությունը պատշաճ կերպով տարածելու համար մենք օգտագործում ենք բացասական լուսանցք վերջին .navbar-rightտարրի վրա: Երբ կան մի քանի տարրեր, որոնք օգտագործում են այդ դասը, այս լուսանցքները չեն աշխատում այնպես, ինչպես նախատեսված էր:

Մենք կվերանայենք սա, երբ կարողանանք վերաշարադրել այդ բաղադրիչը v4-ում:

Ավելացրեք .navbar-fixed-topև ներառեք նավագոտու բովանդակություն .containerկամ կենտրոն և պահեք:.container-fluid

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

Պահանջվում է մարմնի լցոնում

Ֆիքսված navbar-ը կվերածվի ձեր մյուս բովանդակության վրա, եթե չավելացնեք paddingվերևում <body>: Փորձեք ձեր սեփական արժեքները կամ օգտագործեք ստորև բերված մեր հատվածը: Հուշում. Լռելյայնորեն, navbar-ի բարձրությունը 50px է:

body { padding-top: 70px; }

Համոզվեք, որ սա ներառեք հիմնական Bootstrap CSS- ից հետո :

Ավելացրեք .navbar-fixed-bottomև ներառեք նավագոտու բովանդակություն .containerկամ կենտրոն և պահեք:.container-fluid

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

Պահանջվում է մարմնի լցոնում

Ֆիքսված navbar-ը կվերածվի ձեր մյուս բովանդակության վրա, եթե դուք ավելացնեք paddingներքևի մասում <body>: Փորձեք ձեր սեփական արժեքները կամ օգտագործեք ստորև բերված մեր հատվածը: Հուշում. Լռելյայնորեն, navbar-ի բարձրությունը 50px է:

body { padding-bottom: 70px; }

Համոզվեք, որ սա ներառեք հիմնական Bootstrap CSS- ից հետո :

Ստեղծեք ամբողջ լայնությամբ նավագոտի, որը հեռանում է էջից՝ ավելացնելով .navbar-static-topև ներառելով նավագոտու բովանդակություն .containerկամ կենտրոն և ներդիր:.container-fluid

Ի տարբերություն .navbar-fixed-*դասերի, դուք կարիք չունեք որևէ լիցք փոխել body.

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

Փոփոխեք navbar-ի տեսքը՝ ավելացնելով .navbar-inverse:

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

Հացի փշրանքներ

Նշեք ընթացիկ էջի գտնվելու վայրը նավիգացիոն հիերարխիայում:

CSS-ում տարանջատիչները ավտոմատ կերպով ավելացվում են :beforeև content.

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

Էջավորում

Տրամադրեք ձեր կայքի կամ հավելվածի համար էջադրման հղումներ բազմաէջանոց էջադրման բաղադրիչով կամ ավելի պարզ էջի այլընտրանքով :

Կանխադրված էջադրում

Պարզ էջավորում՝ ոգեշնչված Rdio-ից, հիանալի հավելվածների և որոնման արդյունքների համար: Մեծ բլոկը դժվար է բաց թողնել, հեշտությամբ մասշտաբելի և ապահովում է սեղմումների մեծ տարածքներ:

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

Էջավորման բաղադրիչի պիտակավորում

Էջավորման բաղադրիչը պետք է փաթաթված լինի <nav>տարրի մեջ, որպեսզի այն նույնականացվի որպես նավիգացիոն բաժին էկրանի ընթերցիչների և այլ օժանդակ տեխնոլոգիաների համար: Բացի այդ, քանի որ էջը, հավանաբար, արդեն ունի մեկից ավելի նման նավարկության բաժին (օրինակ՝ վերնագրի հիմնական նավարկությունը կամ կողագոտի նավարկությունը), խորհուրդ է տրվում տրամադրել նկարագրություն aria-label, <nav>որն արտացոլում է դրա նպատակը: Օրինակ, եթե էջավորման բաղադրիչն օգտագործվում է որոնման արդյունքների մի շարքի միջև նավարկելու համար, համապատասխան պիտակը կարող է լինել aria-label="Search results pages".

Հաշմանդամ և ակտիվ վիճակներ

Հղումները հարմարեցված են տարբեր հանգամանքների համար: Օգտագործեք .disabledչսեղմվող հղումների և .activeընթացիկ էջը նշելու համար:

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

Մենք խորհուրդ ենք տալիս փոխել ակտիվ կամ անջատված խարիսխները <span>, կամ բաց թողնել խարիսխը նախորդ/հաջորդ սլաքների դեպքում՝ հեռացնելու համար սեղմելու գործառույթը՝ պահպանելով նախատեսված ոճերը:

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

Չափսերը

Ցանկանում եք ավելի մեծ, թե փոքր էջադրում: Ավելացնել .pagination-lgկամ .pagination-smլրացուցիչ չափերի համար:

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

Փեյջեր

Արագ նախորդ և հաջորդ հղումներ պարզ էջադրման իրականացման համար՝ թեթև նշագրումով և ոճերով: Այն հիանալի է պարզ կայքերի համար, ինչպիսիք են բլոգները կամ ամսագրերը:

Կանխադրված օրինակ

Լռելյայնորեն, փեյջերը կենտրոնացնում է հղումները:

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

Հավասարեցված հղումներ

Որպես այլընտրանք, դուք կարող եք հավասարեցնել յուրաքանչյուր հղումը կողմերին.

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

Ընտրովի անջատված վիճակ

Էջերի հղումները նաև օգտագործում են էջագրման ընդհանուր .disabledօգտակար դասը:

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

Օրինակ

Օրինակ վերնագիր Նոր

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

Հասանելի տատանումներ

Ավելացրեք ստորև նշված մոդիֆիկատորների դասերից որևէ մեկը՝ պիտակի տեսքը փոխելու համար:

Կանխադրված առաջնային հաջողության տեղեկատվության նախազգուշացման վտանգ

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

Ունե՞ք տոննա պիտակներ:

Ռենդերի հետ կապված խնդիրներ կարող են առաջանալ, երբ նեղ կոնտեյների մեջ ունեք տասնյակ ներդիր պիտակներ, որոնցից յուրաքանչյուրը պարունակում է իր inline-blockտարրը (ինչպես պատկերակը): Այս ճանապարհը կարգավորվում է display: inline-block;: Համատեքստի և օրինակի համար տե՛ս #13219 :

Հեշտությամբ ընդգծեք նոր կամ չկարդացված տարրերը՝ ավելացնելով <span class="badge">հղումներ, Bootstrap նավարկիչներ և այլն:

Մուտքի արկղ42

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

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

Ինքնափլուզվող

Երբ չկան նոր կամ չկարդացված տարրեր, կրծքանշանները պարզապես կփլուզվեն (CSS-ի :emptyընտրիչի միջոցով), եթե ներսում բովանդակություն չկա:

Բրաուզերների համատեղելիություն

Նշանակներն ինքնուրույն չեն քանդվի Internet Explorer 8-ում, քանի որ այն չի աջակցում :emptyընտրիչին:

Հարմարվում է նավատորմի ակտիվ վիճակներին

Ներկառուցված ոճերը ներառված են դեղահատերի նավարկության մեջ ակտիվ վիճակներում կրծքանշաններ տեղադրելու համար:

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

Թեթև, ճկուն բաղադրիչ, որը կարող է կամայականորեն երկարացնել ամբողջ տեսադաշտը՝ ձեր կայքի հիմնական բովանդակությունը ցուցադրելու համար:

Բարեւ աշխարհ!

Սա պարզ հերոսի միավոր է, պարզ jumbotron ոճի բաղադրիչ՝ հատուկ ուշադրություն հրավիրելու համար ներկայացված բովանդակությանը կամ տեղեկատվությանը:

Իմացեք ավելին

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

Jumbotron-ը ամբողջ լայնությամբ և առանց կլորացված անկյունների դարձնելու համար դրեք այն բոլոր .containers-ներից դուրս և փոխարենը ավելացրեք .containerներսում:

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

Պարզ կեղև h1՝ էջի վրա բովանդակության հատվածները պատշաճ կերպով տարածելու և հատվածավորելու համար: Այն կարող է օգտագործել h1լռելյայն smallտարրը, ինչպես նաև այլ բաղադրիչների մեծ մասը (լրացուցիչ ոճերով):

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

Ընդլայնեք Bootstrap-ի ցանցային համակարգը մանրապատկերների բաղադրիչով՝ հեշտությամբ ցուցադրելու պատկերների, տեսանյութերի, տեքստի և այլնի ցանցերը:

Եթե փնտրում եք տարբեր բարձրությունների և/կամ լայնությունների մանրապատկերների Pinterest-ի նման ներկայացում, ապա ձեզ հարկավոր է օգտագործել երրորդ կողմի պլագին, ինչպիսիք են Masonry- ը , Isotope- ը կամ Salvattore-ը :

Կանխադրված օրինակ

Լռելյայնորեն, Bootstrap-ի մանրապատկերները նախատեսված են ցուցադրելու կապակցված պատկերները նվազագույն պահանջվող նշումներով:

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

Պատվերով բովանդակություն

Մի փոքր լրացուցիչ նշագրման դեպքում հնարավոր է մանրապատկերների մեջ ավելացնել ցանկացած տեսակի 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.

Կոճակ Կոճակ

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

Տրամադրեք համատեքստային հետադարձ կապի հաղորդագրություններ օգտատիրոջ սովորական գործողությունների համար մի քանի մատչելի և ճկուն ահազանգերի հաղորդագրություններով:

Օրինակներ

Փաթեթավորեք ցանկացած տեքստ և կամընտիր անջատման կոճակը .alertև չորս համատեքստային դասերից մեկում (օրինակ՝ .alert-success) հիմնական ահազանգերի համար:

Լռելյայն դաս չկա

Զգուշացումները չունեն լռելյայն դասեր, միայն հիմնական և մոդիֆիկատորների դասեր: Լռելյայն մոխրագույն զգուշացումն այնքան էլ իմաստ չունի, ուստի ձեզանից պահանջվում է նշել տեսակը համատեքստային դասի միջոցով: Ընտրեք հաջողությունից, տեղեկատվությունից, նախազգուշացումից կամ վտանգից:

Լավ արեցիր։ Դուք հաջողությամբ կարդացել եք այս կարևոր նախազգուշական հաղորդագրությունը:

Գլուխը վեր Այս ահազանգը ձեր ուշադրության կարիքն ունի, բայց դա այնքան էլ կարևոր չէ:

Զգուշացում. Ավելի լավ է ստուգեք ինքներդ ձեզ, դուք այնքան էլ լավ տեսք չունեք:

Օ՜, դիպուկ Փոխեք մի քանի բան և փորձեք նորից ուղարկել:

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

Անտեսելի ահազանգեր

Կառուցեք ցանկացած ազդանշանի վրա՝ ավելացնելով կամընտիր .alert-dismissibleև փակ կոճակը:

Պահանջվում է JavaScript նախազգուշացման պլագին

Լիարժեք գործող, մերժելի ծանուցումների համար դուք պետք է օգտագործեք ազդանշանների JavaScript հավելվածը :

Զգուշացում. Ավելի լավ է ստուգեք ինքներդ ձեզ, դուք այնքան էլ լավ տեսք չունեք:

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

Ապահովեք պատշաճ վարքագիծ բոլոր սարքերում

Համոզվեք, որ օգտագործեք <button>տարրը data-dismiss="alert"տվյալների հատկանիշով:

Հղումներ ահազանգերում

Օգտագործեք .alert-linkօգտակար դասը` ցանկացած ահազանգում արագ տրամադրելու համապատասխան գունավոր հղումներ:

Լավ արեցիր։ Դուք հաջողությամբ կարդացել եք այս կարևոր նախազգուշական հաղորդագրությունը :

Գլուխը վեր Այս ահազանգը ձեր ուշադրության կարիքն ունի , բայց դա այնքան էլ կարևոր չէ:

Զգուշացում. Ավելի լավ է ստուգեք ինքներդ ձեզ, դուք այնքան էլ լավ տեսք չունեք :

Օ՜, դիպուկ Փոխեք մի քանի բան և փորձեք նորից ուղարկել:

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

Տրամադրեք արդի արձագանքներ աշխատանքային հոսքի կամ գործողության առաջընթացի վերաբերյալ պարզ, բայց ճկուն առաջընթացի գծերով:

Բրաուզերների համատեղելիություն

Առաջընթացի գծերը օգտագործում են CSS3 անցումներ և անիմացիաներ՝ դրանց որոշ էֆեկտների հասնելու համար: Այս գործառույթները չեն աջակցվում Internet Explorer 9-ում և Firefox-ի նոր կամ ավելի հին տարբերակներում: Opera 12-ը չի աջակցում անիմացիաներին:

Բովանդակության անվտանգության քաղաքականության (CSP) համատեղելիություն

Եթե ձեր վեբկայքն ունի Բովանդակության անվտանգության քաղաքականություն (CSP) , որը թույլ չի տալիս style-src 'unsafe-inline', ապա դուք չեք կարողանա օգտագործել ներկառուցված styleատրիբուտները՝ առաջընթացի գծերի լայնությունը սահմանելու համար, ինչպես ցույց է տրված ստորև ներկայացված մեր օրինակներում: Լայնությունները սահմանելու այլընտրանքային մեթոդները, որոնք համատեղել�� են խիստ CSP-ների հետ, ներառում են մի փոքր հատուկ JavaScript-ի օգտագործումը (որը սահմանվում է element.style.width) կամ սովորական CSS դասերի օգտագործումը:

Հիմնական օրինակ

Կանխադրված առաջընթացի տող:

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

Պիտակի հետ

Հեռացրեք <span>with .sr-onlyclass-ը առաջընթացի գոտուց՝ տեսանելի տոկոս ցույց տալու համար:

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>

Ապահովելու համար, որ պիտակի տեքստը մնում է ընթեռնելի նույնիսկ ցածր տոկոսների դեպքում, մտածեք min-widthառաջընթացի տողում ավելացնելու մասին a:

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>

Համատեքստային այլընտրանքներ

Առաջընթացի գծերը օգտագործում են միևնույն կոճակներից մի քանիսը և ազդանշանային դասեր՝ հետևողական ոճերի համար:

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

Գծավոր

Օգտագործում է գրադիենտ՝ գծավոր էֆեկտ ստեղծելու համար: Հասանելի չէ IE9-ում և ստորև:

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

Անիմացիոն

Ավելացրե՛ք .active՝ .progress-bar-stripedգծերն աջից ձախ շարժելու համար: Հասանելի չէ IE9-ում և ստորև:

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

Դարձված

Տեղադրեք մի քանի ձողեր միևնույն մեջ՝ .progressդրանք կուտակելու համար:

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

Վերացական օբյեկտների ոճեր՝ տարբեր տեսակի բաղադրիչներ ստեղծելու համար (օրինակ՝ բլոգի մեկնաբանությունները, թվիթերը և այլն), որոնք տեքստային բովանդակության հետ մեկտեղ ցուցադրում են ձախ կամ աջ հարթեցված պատկեր:

Կանխադրված մեդիա

Կանխադրված մեդիան ցուցադրում է մեդիա օբյեկտ (պատկերներ, տեսանյութեր, աուդիո) բովանդակության բլոկի ձախ կամ աջ կողմում:

Մեդիա վերնագիր

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:

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

Դասերը .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.

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

ԶԼՄ-ների ցանկ

Մի փոքր լրացուցիչ նշագրման դեպքում դուք կարող եք օգտագործել մեդիա ցանկի ներսում (օգտակար մեկնաբանությունների թեմաների կամ հոդվածների ցուցակների համար):

Մեդիա վերնագիր

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:

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

Ցուցակի խմբերը ճկուն և հզոր բաղադրիչ են տարրերի ոչ միայն պարզ ցուցակները ցուցադրելու համար, այլև հատուկ բովանդակությամբ բարդ ցուցակները:

Հիմնական օրինակ

Ցուցակի ամենահիմնական խումբը պարզապես չդասավորված ցուցակ է՝ ցուցակի տարրերով և համապատասխան դասերով: Կառուցեք դրա վրա հետևյալ տարբերակներով կամ ձեր սեփական CSS-ով, ըստ անհրաժեշտության:

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Վեստիբուլում և էրոս

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

Կրծքանշաններ

Ցուցակի խմբի ցանկացած կետում ավելացրեք կրծքանշանների բաղադրիչը և այն ավտոմատ կերպով կտեղադրվի աջ կողմում:

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

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

Կապակցված տարրեր

Կցեք ցուցակի խմբի տարրերը՝ օգտագործելով խարիսխ պիտակներ ցուցակի տարրերի փոխարեն (դա նաև նշանակում է ծնող <div>՝ ի փոխարեն <ul>): Յուրաքանչյուր տարրի շուրջ առանձին ծնողների կարիք չկա:

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Վեստիբուլում և էրոս

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

Կոճակի տարրեր

Ցանկի խմբի տարրերը կարող են լինել կոճակներ ցուցակի տարրերի փոխարեն (դա նաև նշանակում է ծնող <div>՝ ի փոխարեն <ul>): Յուրաքանչյուր տարրի շուրջ առանձին ծնողների կարիք չկա: Մի օգտագործեք .btnայստեղ ստանդարտ դասերը:

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

Հաշմանդամ տարրեր

Ավելացրե՛ք .disableda-ին .list-group-item, որպեսզի այն մոխրագույն երևա՝ անջատված երևալու համար:

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Վեստիբուլում և էրոս

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

Համատեքստային դասեր

Օգտագործեք համատեքստային դասեր՝ ցանկի տարրերը ոճավորելու համար՝ լռելյայն կամ կապակցված: Ներառում է նաև .activeպետ.

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Վեստիբուլում և էրոս

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Վեստիբուլում և էրոս

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

Պատվերով բովանդակություն

Ավելացրեք գրեթե ցանկացած HTML ներսում, նույնիսկ կապված ցուցակի խմբերի համար, ինչպիսին է ստորև:

Ցանկի խմբի տարրի վերնագիր

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Ցանկի խմբի տարրի վերնագիր

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Ցանկի խմբի տարրի վերնագիր

Donec id elit non mi porta gravida at 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>

Թեև միշտ չէ, որ անհրաժեշտ է, երբեմն անհրաժեշտ է ձեր DOM-ը տուփի մեջ դնել: Այդ իրավիճակների համար փորձեք վահանակի բաղադրիչը:

Հիմնական օրինակ

Լռելյայնորեն, այն ամենը, .panelինչ անում է, կիրառում է որոշ հիմնական եզրագիծ և լիցք՝ որոշակի բովանդակություն պարունակելու համար:

Հիմնական վահանակի օրինակ

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

Վահանակ վերնագրով

Հեշտությամբ ավելացրեք վերնագրի կոնտեյներ ձեր վահանակին .panel-heading. Կարող եք նաև ներառել ցանկացած <h1>- դասի <h6>հետ .panel-title՝ նախապես ոճավորված վերնագիր ավելացնելու համար: <h1>Այնուամենայնիվ, --ի տառաչափերը <h6>վերացված են .panel-heading.

Հղումների ճիշտ գունավորման համար, համոզվեք, որ հղումները տեղադրեք վերնագրերում .panel-title:

Վահանակի վերնագիր առանց վերնագրի

Վահանակի բովանդակությունը

Վահանակի վերնագիր

Վահանակի բովանդակությունը

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

Պանել ստորատետրով

Փաթեթավորեք կոճակները կամ երկրորդական տեքստը .panel-footer: Նկատի ունեցեք, որ վահանակի էջատակերը չեն ժառանգում գույներն ու եզրագծերը համատեքստային տատանումներ օգտագործելիս, քանի որ դրանք նախատեսված չեն առաջին պլանում լինելու համար:

Վահանակի բովանդակությունը

Վահանակի ստորագիր

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

Համատեքստային այլընտրանքներ

Ինչպես մյուս բաղադրիչները, հեշտությամբ պանելն ավելի իմաստալից դարձրեք որոշակի համատեքստում՝ ավելացնելով կոնտեքստային վիճակի դասերից որևէ մեկը:

Վահանակի վերնագիր

Վահանակի բովանդակությունը

Վահանակի վերնագիր

Վահանակի բովանդակությունը

Վահանակի վերնագիր

Վահանակի բովանդակությունը

Վահանակի վերնագիր

Վահանակի բովանդակությունը

Վահանակի վերնագիր

Վահանակի բովանդակությունը

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

Սեղաններով

.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

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

Եթե վահանակի մարմին չկա, բաղադրիչն առանց ընդհատումների տեղափոխվում է վահանակի վերնագրից աղյուսակ:

Վահանակի վերնագիր

#	Անուն	Ազգանուն	Օգտագործողի անունը
1	նշագծել	Օտտո	@mdo
2	Յակոբ	Թորնթոն	@ճարպ
3	Լարի	թռչունը	@twitter

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

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

Ցուցակային խմբերով

Հեշտությամբ ներառեք ամբողջ լայնությամբ ցուցակի խմբերը ցանկացած վահանակում:

Վահանակի վերնագիր

Վահանակի որոշ կանխադրված բովանդակություն այստեղ: 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
Վեստիբուլում և էրոս

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

Թույլ տվեք դիտարկիչներին որոշել տեսանյութի կամ սլայդերի չափերը՝ հիմնվելով դրանց պարունակող բլոկի լայնության վրա՝ ստեղծելով ներքին հարաբերակցություն, որը պատշաճ կերպով կմեծանա ցանկացած սարքի վրա:

Կանոնները ուղղակիորեն կիրառվում են <iframe>, <embed>, <video>, և <object>տարրերի վրա. ընտրովի օգտագործեք բացահայտ ժառանգական դաս .embed-responsive-item, երբ ցանկանում եք համապատասխանեցնել ոճը այլ հատկանիշների համար:

Pro-Tip! Ձեզ անհրաժեշտ չէ ներառել frameborder="0"ձեր <iframe>s-ում, քանի որ մենք դա անտեսում ենք ձեզ համար:

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

Կանխադրված լավ

Օգտագործեք ջրհորը որպես պարզ ազդեցություն տարրի վրա՝ դրան ներդիր էֆեկտ տալու համար:

Տեսեք, ես ջրհորի մեջ եմ:

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

Ընտրովի պարապմունքներ

Կառավարեք լիցքավորումը և կլորացված անկյունները երկու կամընտիր մոդիֆիկատորների դասերով:

Տեսեք, ես մեծ ջրհորի մեջ եմ:

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

Տեսեք, ես փոքր ջրհորի մեջ եմ:

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

Բաղադրիչներ

Գլիֆիկոններ

Հասանելի գլիֆներ

Ինչպես օգտագործել

Մի խառնեք այլ բաղադրիչների հետ

Միայն դատարկ տարրերի վրա օգտագործելու համար

Փոխելով պատկերակի տառատեսակի գտնվելու վայրը

Մատչելի պատկերակներ

Օրինակներ

Բացվող պատուհաններ

Օրինակ

Հավասարեցում

Կարող է պահանջել լրացուցիչ դիրքավորում

Հնացած .pull-rightհավասարեցում

Վերնագրեր

Բաժանարար

Անջատված ընտրացանկի տարրեր

Կոճակների խմբեր

Գործիքների հուշումները և կոճակները խմբերում հատուկ կարգավորում են պահանջում

Համոզվեք, որ ճիշտ roleէ և տրամադրեք պիտակ

Հիմնական օրինակ

Կոճակների գործիքագոտին

Չափսերը

Բնադրում

Ուղղահայաց տատանումներ

Հիմնավորված կոճակների խմբեր

Սահմանների մշակում

IE8 և սահմաններ

Տարրերով <a>_

Հղումներ, որոնք գործում են որպես կոճակներ

Տարրերով <button>_

Կոճակների բացվող ցանկեր

Plugin-ի կախվածություն

Մեկ կոճակի բացվող ցանկեր

Պառակտման կոճակների բացվող ցանկեր

Չափսերը

Բացվող տարբերակ

Մուտքային խմբեր

Միայն տեքստային <input>s

Գործիքների հուշումները և ներածական խմբերը պահանջում են հատուկ կարգավորում

Մի խառնեք այլ բաղադրիչների հետ

Միշտ ավելացրեք պիտակներ

Հիմնական օրինակ

Չափսերը

Նշման տուփեր և ռադիո հավելումներ

Կոճակային հավելումներ

Բացվող կոճակներ

Սեգմենտացված կոճակներ

Բազմաթիվ կոճակներ

Navs

Ներդիրների վահանակների համար navs օգտագործելու համար պահանջվում է JavaScript ներդիրների հավելված

Որպես նավիգացիա օգտագործվող նավիգացիաները հասանելի դարձրեք

Ներդիրներ

Հաբեր

Արդարացված

Safari և արձագանքող արդարացված navs

Անջատված հղումներ

Հղման գործառույթը չի ազդել

Օգտագործելով բացվող պատուհաններ

Բացվող ներդիրներով

Դեղահատեր կաթիլներով

Navbar

Կանխադրված նավարկիչ

Հորդառատ բովանդակություն

Պահանջվում է JavaScript հավելված

Բջջային շարժական նավագոտու ընդմիջման կետի փոփոխություն

Մատչելի դարձրեք նավագոտիները

Ապրանքանիշի պատկեր

Ձևաթղթեր

Բջջային սարքերի նախազգուշացումներ

Միշտ ավելացրեք պիտակներ

Կոճակներ

Համատեքստի հատուկ օգտագործում

Տեքստ

Ոչ նավի հղումներ

Բաղադրիչների հավասարեցում

Մի քանի բաղադրիչների ճիշտ հավասարեցում

Ամրացված է վերևում

Պահանջվում է մարմնի լցոնում

Ամրագրված է ներքևում

Հնացած `.pull-right`հավասարեցում

Համոզվեք, որ ճիշտ `role`է և տրամադրեք պիտակ

Տարրերով `<a>`_

Տարրերով `<button>`_

Միայն տեքստային `<input>`s