Glyphicons

ලබා ගත හැකි ග්ලයිෆ්

Glyphicon Halflings කට්ටලයෙන් අකුරු ආකෘතියෙන් glyphs 250 කට වඩා ඇතුළත් වේ. Glyphicons Halflings සාමාන්‍යයෙන් නොමිලේ ලබා ගත නොහැක, නමුත් ඒවායේ නිර්මාතෘ විසින් Bootstrap සඳහා ඒවා නොමිලේ ලබා දී ඇත. ස්තූතියක් වශයෙන්, හැකි සෑම විටම Glyphicons වෙත සබැඳියක් ඇතුළත් කරන ලෙස පමණක් අපි ඔබෙන් ඉල්ලා සිටිමු .

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-යුරෝ
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-Cloud
  • glyphicon glyphicon-ලියුම් කවරය
  • glyphicon glyphicon-පැන්සල
  • glyphicon glyphicon-වීදුරු
  • glyphicon glyphicon-සංගීතය
  • glyphicon glyphicon-සෙවුම්
  • glyphicon glyphicon-හදවත
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-හිස්
  • glyphicon glyphicon-පරිශීලක
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • 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-home
  • glyphicon glyphicon-ගොනුව
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-බාගත කරන්න
  • glyphicon glyphicon-උඩුගත කිරීම
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-කොඩිය
  • glyphicon glyphicon-හෙඩ්ෆෝන්
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-පරිමාව-පහළ
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-මුද්රණය
  • glyphicon glyphicon-කැමරාව
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-පළල
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-පින්තූරය
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-ගැළපීම
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-සංස්කරණය
  • glyphicon glyphicon-share
  • glyphicon glyphicon-චෙක්
  • glyphicon glyphicon-චලනය
  • glyphicon glyphicon-පියවර-පස්සට
  • glyphicon glyphicon-වේගවත්-පසුගාමී
  • glyphicon glyphicon-පසුගාමී
  • glyphicon glyphicon-play
  • glyphicon glyphicon-විරාමය
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-ඉදිරියට
  • glyphicon glyphicon-Fast-forward
  • glyphicon glyphicon-පියවර-ඉදිරියට
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-ප්රශ්න-ලකුණ
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-ඉවත් කරන්න-කවය
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-arrow-left
  • glyphicon glyphicon-arrow-දකුණ
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-විස්මයාර්ථ-ලකුණ
  • glyphicon glyphicon-තෑගි
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-ගිනි
  • glyphicon glyphicon-ඇස්-විවෘත
  • glyphicon glyphicon-ඇස් සමීප
  • glyphicon glyphicon-අනතුරු ඇඟවීමේ ලකුණ
  • glyphicon glyphicon-තලය
  • glyphicon glyphicon-කැලැන්ඩරය
  • glyphicon glyphicon-අහඹු
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-ෆෝල්ඩරය-විවෘත
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-බෙල්
  • glyphicon glyphicon-සහතිකය
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-අත-දකුණ
  • glyphicon glyphicon-අත-වම
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-අත-පහළ
  • glyphicon glyphicon-කවය-ඊතලය-දකුණ
  • glyphicon glyphicon-කවය-ඊතලය-වමේ
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-කවය-ඊතලය-පහළ
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-කාර්යයන්
  • glyphicon glyphicon-පෙරහන
  • glyphicon glyphicon-briefcase
  • glyphicon glyphicon-පූර්ණ තිරය
  • glyphicon glyphicon-උපකරණ පුවරුව
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-හදවත-හිස්
  • glyphicon glyphicon-link
  • glyphicon glyphicon-දුරකථනය
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • 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-කඩා වැටීම-පහළට
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-නව-කවුළුව
  • glyphicon glyphicon-වාර්තාව
  • glyphicon glyphicon-සුරකින්න
  • glyphicon glyphicon-විවෘත
  • glyphicon glyphicon-සුරකින ලදී
  • glyphicon glyphicon-ආනයනය
  • glyphicon glyphicon-අපනයනය
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-ඉවත් කරන්න
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-විවෘත
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-මාරු කිරීම
  • glyphicon glyphicon-කට්ටල
  • glyphicon glyphicon-ශීර්ෂකය
  • glyphicon glyphicon-සම්පීඩිත
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-කුළුණ
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-උපසිරැසි
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-ලියාපදිංච් ලකුණ
  • glyphicon glyphicon-Cloud-download
  • 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-equalizer
  • glyphicon glyphicon-king
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-උකස්
  • glyphicon glyphicon-bishop
  • glyphicon glyphicon-knight
  • glyphicon glyphicon-baby-සූත්රය
  • glyphicon glyphicon-tent
  • glyphicon glyphicon-කළු පුවරුව
  • glyphicon glyphicon-ඇඳ
  • glyphicon glyphicon-apple
  • glyphicon glyphicon-මකන්න
  • glyphicon glyphicon-hourglass
  • glyphicon glyphicon-ලාම්පුව
  • glyphicon glyphicon-අනුපිටපත්
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-කතුර
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-රූබල්
  • glyphicon glyphicon-rub
  • glyphicon glyphicon පරිමාණය
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ice-lolly-tasted
  • glyphicon glyphicon-අධ්‍යාපනය
  • glyphicon glyphicon-විකල්ප-තිරස්
  • glyphicon glyphicon-විකල්ප-සිරස්
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-තෙල්
  • glyphicon glyphicon-grain
  • 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-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-menu-left
  • glyphicon glyphicon-menu-right
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

භාවිතා කරන ආකාරය

කාර්ය සාධන හේතූන් මත, සියලුම අයිකන සඳහා මූලික පන්තියක් සහ තනි නිරූපක පන්තියක් අවශ්‍ය වේ. භාවිතා කිරීමට, පහත කේතය ඕනෑම තැනක තබන්න. නිවැරදි පිරවුම සඳහා අයිකනය සහ පෙළ අතර ඉඩක් තැබීමට වග බලා ගන්න.

වෙනත් සංරචක සමඟ මිශ්ර නොකරන්න

අයිකන පන්ති අනෙකුත් සංරචක සමඟ කෙලින්ම ඒකාබද්ධ කළ නොහැක. එකම මූලද්රව්යයේ අනෙකුත් පන්ති සමඟ ඒවා භාවිතා නොකළ යුතුය. ඒ වෙනුවට, කැදැල්ලක් එක් <span>කර අයිකන පන්ති සඳහා යොදන්න <span>.

හිස් මූලද්‍රව්‍යවල භාවිතය සඳහා පමණි

නිරූපක පන්ති භාවිත කළ යුත්තේ පෙළ අන්තර්ගතයක් නොමැති සහ ළමා මූලද්‍රව්‍ය නොමැති මූලද්‍රව්‍ය මත පමණි.

අයිකන අකුරු පිහිටීම වෙනස් කිරීම

../fonts/Bootstrap උපකල්පනය කරයි අයිකන අකුරු ගොනු සම්පාදනය කරන ලද CSS ගොනු වලට සාපේක්ෂව නාමාවලියෙහි පිහිටා ඇත . එම අකුරු ගොනු ගෙනයාම හෝ නැවත නම් කිරීම යනු CSS ක්‍රම තුනෙන් එකකින් යාවත්කාලීන කිරීමයි:

  • මූලාශ්‍ර අඩු ගොනු වල @icon-font-pathසහ/හෝ විචල්‍ය වෙනස් කරන්න .@icon-font-name
  • අඩු සම්පාදකය විසින් සපයන ලද සාපේක්ෂ URL විකල්පය භාවිතා කරන්න.
  • url()සම්පාදනය කරන ලද CSS හි මාර්ග වෙනස් කරන්න .

ඔබගේ විශේෂිත සංවර්ධන සැකසුම සඳහා වඩාත් ගැලපෙන ඕනෑම විකල්පයක් භාවිතා කරන්න.

ප්‍රවේශ විය හැකි අයිකන

සහායක තාක්ෂණයන්හි නවීන අනුවාද CSS ජනනය කරන ලද අන්තර්ගතයන් මෙන්ම නිශ්චිත යුනිකෝඩ් අක්ෂර ද නිවේදනය කරනු ඇත. තිර කියවනයන් තුළ අනපේක්ෂිත සහ ව්‍යාකූල ප්‍රතිදානය වැළැක්වීම සඳහා (විශේෂයෙන් අයිකන තනිකරම සැරසිලි සඳහා භාවිතා කරන විට), අපි ඒවා ගුණාංගය සමඟ 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

අමතර ස්ථානගත කිරීම අවශ්ය විය හැකිය

පතනයන් ලේඛනයේ සාමාන්‍ය ප්‍රවාහය තුළ CSS හරහා ස්වයංක්‍රීයව ස්ථානගත වේ. මෙයින් අදහස් වන්නේ පහත වැටීම් ඇතැම් ගුණාංග සහිත මාපියන් විසින් කප්පාදු කළ හැකි overflowහෝ දර්ශන තොටේ සීමාවෙන් පිටත දිස් විය හැකි බවයි. මෙම ගැටළු පැනනගින විට ඔබම විසඳන්න.

අත්හරින ලද .pull-rightපෙළගැස්ම

v3.1.0 ලෙස, අපි .pull-rightපතන මෙනු මත අත්හරින ලදී. මෙනුවක් දකුණට පෙළගස්වීමට, භාවිතා කරන්න .dropdown-menu-right. නව තීරුවේ දකුණට පෙළගස්වන ලද nav සංරචක මෙනුව ස්වයංක්‍රීයව පෙළගැස්වීමට මෙම පන්තියේ මික්සින් අනුවාදයක් භාවිතා කරයි. එය අභිබවා යාමට, භාවිතා කරන්න .dropdown-menu-left.

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

සබැඳිය අක්‍රිය කිරීමට පතන තුළට .disabledඑක් කරන්න .<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>

බොත්තම් කණ්ඩායම්

බොත්තම් සමූහය සමඟ තනි පේළියක බොත්තම් මාලාවක් සමූහගත කරන්න. අපගේ බොත්තම් ප්ලගිනය සමඟ විකල්ප ජාවාස්ක්‍රිප්ට් රේඩියෝව සහ පිරික්සුම් කොටු විලාස හැසිරීමට එක් කරන්න .

බොත්තම් කණ්ඩායම්වල මෙවලම් ඉඟි සහ පොපෝවර් සඳහා විශේෂ සැකසුම අවශ්‍ය වේ

a තුළ ඇති මූලද්‍රව්‍ය මත මෙවලම් ඉඟි හෝ popover භාවිතා කරන විට .btn-group, ඔබට container: 'body'අනවශ්‍ය අතුරු ආබාධ වළක්වා ගැනීමේ විකල්පය සඳහන් කිරීමට සිදු වනු ඇත (මූලද්‍රව්‍යය පුළුල් වීම සහ/හෝ මෙවලම් ඉඟිය හෝ popover ප්‍රේරණය වූ විට එහි වටකුරු කොන් අහිමි වීම වැනි).

නිවැරදි බව සහතික 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">a කට්ටල ඒකාබද්ධ කරන්න.<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>

කූඩු කිරීම

ඔබට බොත්තම් මාලාවක් සමඟ මිශ්‍ර කර ඇති පතන මෙනු අවශ්‍ය විට .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 සහ මායිම්

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8 සාධාරණ බොත්තම් සමූහයක බොත්තම් මත මායිම් නොපෙන්වයි, එය ක්‍රියාත්මක <a>වුවත් <button>මූලද්‍රව්‍ය වුවත්. එය වටා යාමට, එක් එක් බොත්තම් තවත් එකකින් ඔතා .btn-group.

වැඩි විස්තර සඳහා #12476 බලන්න .

<a>මූලද්රව්ය සමඟ

.btnයන්තම් s මාලාවක් ඔතා .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නිසි මෙනු සලකුණු කිරීම ලබා දෙන්න.

ප්ලගින යැපීම

බොත්තම් පතන සඳහා ඔබගේ 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 විචලනය

.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-groupභාවිතා කරන්න ..input-group-addon.input-group-btn.form-control

පාඨමය <input>s පමණි

<select>WebKit බ්‍රවුසරවල ඒවා සම්පූර්ණයෙන්ම හැඩගස්වාගත නොහැකි බැවින් මෙහි මූලද්‍රව්‍ය භාවිතා කිරීමෙන් වළකින්න .

සමහර අවස්ථාවල දී ඒවායේ ගුණාංගවලට ගරු නොකරන බැවින් <textarea>මෙහි මූලද්‍රව්‍ය භාවිතා කිරීමෙන් වළකින්න .rows

ආදාන කණ්ඩායම්වල මෙවලම් ඉඟි සහ පොපෝවර් සඳහා විශේෂ සැකසුම අවශ්‍ය වේ

තුළ ඇති මූලද්‍රව්‍ය මත මෙවලම් ඉඟි හෝ popover භාවිතා කරන විට .input-group, ඔබට container: 'body'අනවශ්‍ය අතුරු ආබාධ වළක්වා ගැනීමේ විකල්පය සඳහන් කිරීමට සිදු වනු ඇත (මූලද්‍රව්‍යය පුළුල් වීම සහ/හෝ මෙවලම් ඉඟිය හෝ popover ක්‍රියාරම්භ කරන විට එහි වටකුරු කොන අහිමි වීම වැනි).

වෙනත් සංරචක සමඟ මිශ්ර නොකරන්න

ආකෘති කණ්ඩායම් හෝ ජාලක තීරු පන්ති සෘජුවම ආදාන කණ්ඩායම් සමඟ මිශ්‍ර නොකරන්න. ඒ වෙනුවට, පෝරම සමූහයේ හෝ ජාල සම්බන්ධ මූලද්‍රව්‍යයේ ඇතුළත ආදාන කණ්ඩායම කැදවන්න.

සෑම විටම ලේබල් එකතු කරන්න

ඔබ සෑම ආදානයක් සඳහාම ලේබලයක් ඇතුළත් නොකළහොත් තිර කියවනයට ඔබේ පෝරම සමඟ ගැටලු ඇති වේ. මෙම ආදාන කන්ඩායම් සඳහා, ඕනෑම අමතර ලේබලයක් හෝ ක්‍රියාකාරීත්වයක් සහායක තාක්ෂණයන් වෙත ලබා දෙන බවට සහතික වන්න.

භාවිතා කළ යුතු නිශ්චිත තාක්‍ෂණය (දෘශ්‍ය <label>මූලද්‍රව්‍ය, පන්තිය <label>භාවිතයෙන් සැඟවුණු මූලද්‍රව්‍ය , හෝ , , , හෝ උපලක්ෂණ භාවිතය) සහ ඔබ ක්‍රියාත්මක කරන නිශ්චිත අතුරුමුහුණත් විජට් වර්ගය අනුව ප්‍රකාශ කිරීමට අවශ්‍ය අමතර තොරතුරු වෙනස් වේ. මෙම කොටසේ උදාහරණ යෝජිත, සිද්ධි-විශේෂිත ප්‍රවේශයන් කිහිපයක් සපයයි..sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

මූලික උදාහරණය

ආදානයක දෙපස එක් ඇඩෝනයක් හෝ බොත්තමක් තබන්න. ඔබට ආදානයක දෙපැත්තේ එකක් තැබිය හැකිය.

අපි තනි පැත්තක බහු ඇඩෝන ( .input-group-addonහෝ ) සඳහා සහය නොදක්වමු..input-group-btn

අපි තනි ආදාන කණ්ඩායමක් තුළ බහු ආකෘති-පාලන සඳහා සහය නොදක්වමු.

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

ප්‍රමාණය කිරීම

සාපේක්ෂ පෝරම ප්‍රමාණ පන්ති .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 ටැබ් ප්ලගිනය අවශ්‍ය වේ

ටැබ් කළ හැකි ප්‍රදේශ සහිත ටැබ් සඳහා, ඔබ ටැබ් භාවිතා කළ යුතුය JavaScript ප්ලගිනය . සලකුණු කිරීම සඳහා අමතර roleසහ ARIA ගුණාංග ද අවශ්‍ය වනු ඇත - වැඩිදුර විස්තර සඳහා ප්ලගිනයේ උදාහරණ සලකුණු කිරීම බලන්න.

සංචාලනය ලෙස භාවිතා කරන navs වෙත ප්‍රවේශ විය හැකි බවට පත් කරන්න

ඔබ සංචාලන තීරුවක් සැපයීමට navs භාවිතා කරන්නේ නම්, 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. කුඩා තිරවල, nav සබැඳි ගොඩගැසී ඇත.

යුක්ති සහගත navbar nav සබැඳි දැනට සහය නොදක්වයි.

Safari සහ ප්‍රතිචාරාත්මක යුක්ති සහගත navs

v9.1.2 වන විට, Safari ඔබේ බ්‍රවුසරයේ ප්‍රතිප්‍රමාණය තිරස් අතට වෙනස් කිරීමේ දෝෂයක් ප්‍රදර්ශනය කරයි, එය ප්‍රබෝධමත් කිරීමෙන් පසු ඉවත් කරන ලද සාධාරණ nav හි විදැහුම්කරණ දෝෂ ඇති කරයි. මෙම දෝෂය යුක්ති සහගත nav උදාහරණයේ ද පෙන්වා ඇත .

<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 සහ dropdowns 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 යනු ඔබේ යෙදුම හෝ වෙබ් අඩවිය සඳහා සංචාලන ශීර්ෂයන් ලෙස සේවය කරන ප්‍රතිචාරාත්මක මෙටා සංරචක වේ. ඒවා ජංගම දසුන් තුළ බිඳ වැටීමට පටන් ගනී (සහ ටොගල් කළ හැකි) සහ පවතින දර්ශන තොටේ පළල වැඩි වන විට තිරස් වේ.

යුක්ති සහගත navbar nav සබැඳි දැනට සහය නොදක්වයි.

පිරී ඉතිරී යන අන්තර්ගතය

Bootstrap ඔබගේ navbar හි අන්තර්ගතයට කොපමණ ඉඩ ප්‍රමාණයක් අවශ්‍ය දැයි නොදන්නා බැවින්, ඔබ දෙවන පේළියකට අන්තර්ගත එතීම සමඟ ගැටලු ඇති විය හැක. මෙය විසඳීමට, ඔබට:

  1. navbar අයිතමවල ප්‍රමාණය හෝ පළල අඩු කරන්න.
  2. ප්‍රතිචාරාත්මක උපයෝගිතා පන්ති භාවිතයෙන් යම් යම් තිර ප්‍රමාණවලින් සමහර navbar අයිතම සඟවන්න .
  3. ඔබේ නව තීරුව කඩා වැටුණු සහ තිරස් මාදිලිය අතර මාරු වන ස්ථානය වෙනස් කරන්න. විචල්‍යය අභිරුචිකරණය කරන්න @grid-float-breakpointහෝ ඔබේම මාධ්‍ය විමසුමක් එක් කරන්න.

JavaScript ප්ලගිනය අවශ්‍යයි

ජාවාස්ක්‍රිප්ට් අක්‍රිය කර ඇත්නම් සහ නැව් තීරුව බිඳ වැටෙන තරමට දර්ශන තොට පටු නම්, නව තීරුව පුළුල් කිරීමට සහ තුළ ඇති අන්තර්ගතය බැලීමට නොහැකි වනු ඇත .navbar-collapse.

ප්‍රතිචාර දක්වන navbar හට ඔබේ Bootstrap හි අනුවාදයට කඩා වැටීමේ ප්ලගිනය ඇතුළත් කිරීමට අවශ්‍ය වේ.

කඩා වැටුණු ජංගම නව තීරු බිඳුම් ලක්ෂ්‍යය වෙනස් කිරීම

නැරඹුම් තීරුව ට වඩා පටු වූ විට නව තීරුව එහි සිරස් ජංගම දසුනට කඩා වැටෙන අතර , දර්ශන තොට අවම වශයෙන් පළල @grid-float-breakpointවූ විට එහි තිරස් ජංගම නොවන දර්ශනය දක්වා විහිදේ . @grid-float-breakpointනව තීරුව කඩා වැටෙන විට/ප්‍රසාරණය වන විට පාලනය කිරීමට මෙම විචල්‍යය අඩු මූලාශ්‍රය තුළ සකසන්න. පෙරනිමි අගය 768px(කුඩාම "කුඩා" හෝ "ටැබ්ලට්" තිරය) වේ.

navbars වෙත ප්‍රවේශ විය හැකි කරන්න

මූලද්‍රව්‍යයක් භාවිතා කිරීමට වග බලා ගන්න <nav>හෝ, a වැනි වඩාත් සාමාන්‍ය මූලද්‍රව්‍යයක් භාවිතා කරන්නේ නම් , සහායක තාක්‍ෂණ භාවිතා කරන්නන් සඳහා සන්ධිස්ථානයක් ලෙස එය පැහැදිලිව හඳුනා ගැනීමට සෑම navbar එකකටම <div>එක් කරන්න .role="navigation"

<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 අන්තර්ගතය තුළ වාසය කරන්නේ කොතැනද යන්න තීරණය කිරීමට පෙළගැස්වීමේ විකල්ප භාවිතා කරන්න.

ප්‍රධාන වශයෙන්, .navbar-formඑහි කේතයෙන් වැඩි කොටසක් .form-inlineමික්සින් හරහා බෙදා ගනී. ආදාන කන්ඩායම් වැනි සමහර පෝරම පාලනයන්, navbar එකක් තුළ නිවැරදි පළල පෙන්වීමට අවශ්‍ය විය හැක.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ජංගම උපාංග අනතුරු ඇඟවීම්

ජංගම උපාංගවල ස්ථාවර මූලද්‍රව්‍ය තුළ පෝරම පාලන භාවිතා කිරීම සම්බන්ධයෙන් යම් අනතුරු ඇඟවීම් තිබේ. විස්තර සඳහා අපගේ බ්‍රවුසර ආධාරක ලේඛනය බලන්න.

සෑම විටම ලේබල් එකතු කරන්න

ඔබ සෑම ආදානයක් සඳහාම ලේබලයක් ඇතුළත් නොකළහොත් තිර කියවනයට ඔබේ පෝරම සමඟ ගැටලු ඇති වේ. .sr-onlyමෙම පේළිගත පෝරම සඳහා, ඔබට පන්තිය භාවිතයෙන් ලේබල සැඟවිය හැක . උපකාරක තාක්ෂණයන් සඳහා ලේබලයක් සැපයීමේ තවත් විකල්ප ක්‍රම තිබේ, එනම් aria-label, aria-labelledbyහෝ titleගුණාංගය. මේවායින් කිසිවක් නොමැති නම්, තිර කියවනය තිබේ placeholderනම්, උපලක්ෂණ භාවිතා කිරීමට යොමු විය හැක, නමුත් placeholderවෙනත් ලේබල් කිරීමේ ක්‍රම සඳහා ආදේශකයක් ලෙස භාවිතා කිරීම උපදෙස් නොදෙන බව සලකන්න.

නව තීරුව තුළ සිරස්ව මැදට කිරීමට a හි නොමැති මූලද්‍රව්‍යවලට .navbar-btnපන්තිය එක් කරන්න .<button><form>

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

සන්දර්භය-විශේෂිත භාවිතය

සම්මත බොත්තම් පන්ති මෙන් , .navbar-btnමත <a>සහ <input>මූලද්රව්ය භාවිතා කළ හැක. කෙසේ වෙතත්, තුළ ඇති මූලද්‍රව්‍ය .navbar-btnමත සම්මත බොත්තම් පන්ති හෝ භාවිතා නොකළ යුතුය .<a>.navbar-nav

සමඟ මූලද්‍රව්‍යයක පෙළ නූල් ඔතා .navbar-text, සාමාන්‍යයෙන් <p>නිසි ප්‍රමුඛත්වය සහ වර්ණය සඳහා ටැගයක් මත.

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

සාමාන්‍ය navbar සංචාලන සංරචකය තුළ නොමැති සම්මත සබැඳි භාවිතා කරන .navbar-linkපුද්ගලයින් සඳහා, පෙරනිමි සහ ප්‍රතිලෝම navbar විකල්ප සඳහා නිසි වර්ණ එක් කිරීමට පන්තිය භාවිතා කරන්න.

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

.navbar-leftහෝ .navbar-rightඋපයෝගිතා පන්ති භාවිතයෙන් nav සබැඳි, පෝරම, බොත්තම්, හෝ පෙළ පෙළගස්වන්න . පන්ති දෙකම නියමිත දිශාවට CSS float එකක් එක් කරයි. උදාහරණයක් ලෙස, nav සබැඳි පෙළගැස්වීමට, <ul>අදාළ උපයෝගිතා පන්තිය සමඟ ඒවා වෙන වෙනම තබන්න.

මෙම පන්ති සහ හි මිශ්‍ර සංස්කරණ අනුවාද වේ .pull-left, .pull-rightනමුත් ඒවා උපාංග ප්‍රමාණයන් හරහා navbar සංරචක පහසු ලෙස හැසිරවීම සඳහා මාධ්‍ය විමසුම් වෙත යොමු කෙරේ.

බහු සංරචක නිවැරදිව පෙළගස්වීම

.navbar-rightNavbars දැනට බහු පන්ති සමග සීමාවක් ඇත . අන්තර්ගතය නිසි ලෙස ඉඩ තැබීමට, අපි අවසාන .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; }

Core Bootstrap CSS වලට පසුව මෙය ඇතුලත් කිරීමට වග බලා ගන්න .

මධ්‍යයට සහ පෑඩ් නැව්බාර් අන්තර්ගතයක් එක් කරන්න සහ .navbar-fixed-bottomඇතුළත් කරන්න..container.container-fluid

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

ශරීරය පිරවීම අවශ්ය වේ

paddingස්ථාවර navbar ඔබ පහළට එක් කරන්නේ නම් මිස, ඔබේ අනෙකුත් අන්තර්ගතය උඩින් තබනු ඇත <body>. ඔබගේම අගයන් උත්සාහ කරන්න හෝ පහත අපගේ ස්නිපටය භාවිතා කරන්න. ඉඟිය: පෙරනිමියෙන්, navbar 50px උසයි.

body { padding-bottom: 70px; }

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

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

පාන් කුඩු

සංචාලන ධුරාවලියක් තුළ වත්මන් පිටුවේ පිහිටීම දක්වන්න.

:beforeසහ හරහා CSS හි වෙන් කරන්නන් ස්වයංක්‍රීයව එකතු වේ 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>උදාහරණයක් ලෙස, සෙවුම් ප්‍රතිඵල සමූහයක් අතර සැරිසැරීමට pagination සංරචකය භාවිතා කරන්නේ නම්, සුදුසු ලේබලයක් විය හැක 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 navs, සහ තවත් දේ වෙත එක් කිරීමෙන් නව හෝ නොකියවූ අයිතම පහසුවෙන් උද්දීපනය කරන්න .

එන ලිපි42

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

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

ස්වයං කඩා වැටීම

නව හෝ නොකියවූ අයිතම නොමැති විට, ලාංඡන :emptyතුළ අන්තර්ගතයක් නොමැති නම් (CSS තේරීම්කාරකය හරහා) හුදෙක් බිඳ වැටේ.

හරස් බ්‍රවුසර ගැළපුම

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 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>

ජම්බෝට්‍රොන්

ඔබේ වෙබ් අඩවියේ ප්‍රධාන අන්තර්ගතය ප්‍රදර්ශනය කිරීම සඳහා සම්පූර්ණ දර්ශන තොටම විකල්ප වශයෙන් දිගු කළ හැකි සැහැල්ලු, නම්‍යශීලී සංරචකයකි.

හෙලෝ වර්ල්ඩ්!

මෙය සරල වීර ඒකකයකි, විශේෂාංගගත අන්තර්ගතය හෝ තොරතුරු වෙත අමතර අවධානයක් යොමු කිරීම සඳහා සරල ජම්බොට්‍රොන්-ශෛලිය සංරචකයකි.

තවත් හදාරන්න

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

ජම්බෝට්‍රෝනය සම්පූර්ණ පළල සහ වටකුරු කොනකින් තොරව සෑදීමට, එය සියලු .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 වැනි ඉදිරිපත් කිරීමක් සොයන්නේ නම්, ඔබට පෙදරේරු , සමස්ථානික , හෝ සැල්වටෝර් වැනි තෙවන පාර්ශවීය ප්ලගිනයක් භාවිතා කිරීමට අවශ්‍ය වනු ඇත.

පෙරනිමි උදාහරණය

පෙරනිමියෙන්, Bootstrap හි සිඟිති රූ නිර්මාණය කර ඇත්තේ අවම අවශ්‍ය සලකුණු සහිත සම්බන්ධිත රූප ප්‍රදර්ශනය කිරීමට ය.

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

අභිරුචි අන්තර්ගතය

අමතර සලකුණු ටිකක් සමඟින්, සිඟිති රූවලට මාතෘකා, ඡේද, හෝ බොත්තම් වැනි ඕනෑම ආකාරයක HTML අන්තර්ගතයක් එක් කිරීමට හැකිය.

100%x200

සිඟිති රූ ලේබලය

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.

බොත්තම බොත්තම

100%x200

සිඟිති රූ ලේබලය

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.

බොත්තම බොත්තම

100%x200

සිඟිති රූ ලේබලය

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 සමඟ ගැළපෙන පළල සැකසීම සඳහා විකල්ප ක්‍රම අතරට කුඩා අභිරුචි ජාවාස්ක්‍රිප්ට් (එම සකසයි element.style.width) භාවිතා කිරීම හෝ අභිරුචි CSS පන්ති භාවිතා කිරීම ඇතුළත් වේ.

මූලික උදාහරණය

පෙරනිමි ප්‍රගති තීරුව.

60% සම්පූර්ණයි
<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>සමඟ ඉවත් කරන්න ..sr-only

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>

සන්දර්භ විකල්ප

ප්‍රගති තීරු එකම බොත්තම් කිහිපයක් සහ ස්ථාවර මෝස්තර සඳහා අනතුරු ඇඟවීමේ පන්ති භාවිතා කරයි.

40% සම්පූර්ණයි (සාර්ථකයි)
20% සම්පූර්ණයි
60% සම්පූර්ණයි (අනතුරු ඇඟවීම)
80% සම්පූර්ණයි (අනතුර)
<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 සහ පහතින් ලබා ගත නොහැක.

40% සම්පූර්ණයි (සාර්ථකයි)
20% සම්පූර්ණයි
60% සම්පූර්ණයි (අනතුරු ඇඟවීම)
80% සම්පූර්ණයි (අනතුර)
<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කිරීමට to එකතු කරන්න . .progress-bar-stripedIE9 සහ පහතින් ලබා ගත නොහැක.

45% සම්පූර්ණයි
<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ඒවා ගොඩගැසීමට බහු බාර් එකකට දමන්න.

35% සම්පූර්ණයි (සාර්ථකයි)
20% සම්පූර්ණයි (අනතුරු ඇඟවීම)
10% සම්පූර්ණයි (අනතුර)
<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, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ෆවුසිබස් හි ඩොනෙක් ලැසීනියා කොන්ගු ෆෙලිස්.

මාධ්ය මාතෘකාව

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ෆවුසිබස් හි ඩොනෙක් ලැසීනියා කොන්ගු ෆෙලිස්.

කැදලි මාධ්‍ය ශීර්ෂකය

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ෆවුසිබස් හි ඩොනෙක් ලැසීනියා කොන්ගු ෆෙලිස්.

මාධ්ය මාතෘකාව

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

මාධ්ය මාතෘකාව

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in 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 ලෙස එම භාවිතය සඳහා අවලංගු කර ඇත. ඒවා html හි පසුව තැබිය යුතු .media-leftහැර .media-right, ආසන්න වශයෙන් සමාන වේ..media-right.media-body

මාධ්ය පෙළගැස්ම

රූප හෝ වෙනත් මාධ්‍ය ඉහළට, මැදට හෝ පහළට පෙළගැස්විය හැක. පෙරනිමිය ඉහළට පෙළගස්වා ඇත.

ඉහළ පෙළගැස්වූ මාධ්‍ය

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ෆවුසිබස් හි ඩොනෙක් ලැසීනියා කොන්ගු ෆෙලිස්.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. සමාජීය නැටෝක් පෙනාටිබස් සහ මැග්නිස් ඩිස් පාචුරියන්ට් මොන්ටෙස්, නස්කෙටූර් රිඩිකුලස් මුස්.

මැද පෙළගැස්වූ මාධ්‍ය

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ෆවුසිබස් හි ඩොනෙක් ලැසීනියා කොන්ගු ෆෙලිස්.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. සමාජීය නැටෝක් පෙනාටිබස් සහ මැග්නිස් ඩිස් පාචුරියන්ට් මොන්ටෙස්, නස්කෙටූර් රිඩිකුලස් මුස්.

පහළට පෙළගස්වන ලද මාධ්‍ය

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. ෆවුසිබස් හි ඩොනෙක් ලැසීනියා කොන්ගු ෆෙලිස්.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. සමාජීය නැටෝක් පෙනාටිබස් සහ මැග්නිස් ඩිස් පාචුරියන්ට් මොන්ටෙස්, නස්කෙටූර් රිඩිකුලස් මුස්.

<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, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    කැදලි මාධ්‍ය ශීර්ෂකය

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

    කැදලි මාධ්‍ය ශීර්ෂකය

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

    කැදලි මාධ්‍ය ශීර්ෂකය

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in 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 සමඟ එය ගොඩනඟන්න.

  • ක්‍රාස් ජස්ටෝ ඔඩියෝ
  • Dapibus ac පහසුකම ඇත
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum සහ eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

ලාංඡන

ඕනෑම ලැයිස්තු කණ්ඩායම් අයිතමයකට ලාංඡන සංරචකය එක් කරන්න, එය ස්වයංක්‍රීයව දකුණු පසින් ස්ථානගත වනු ඇත.

  • 14ක්‍රාස් ජස්ටෝ ඔඩියෝ
  • 2Dapibus ac පහසුකම ඇත
  • 1Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

සබැඳි අයිතම

ලැයිස්තු අයිතම වෙනුවට නැංගුරම් ටැග් භාවිතා කිරීමෙන් ලැයිස්තු කණ්ඩායම් අයිතම සම්බන්ධ කරන්න (එය <div>වෙනුවට මාපියෙකු අදහස් වේ <ul>). එක් එක් මූලද්රව්යය වටා තනි මාපියන් අවශ්ය නොවේ.

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

බොත්තම් අයිතම

ලැයිස්තු කණ්ඩායම් අයිතම ලැයිස්තු අයිතම වෙනුවට බොත්තම් විය හැක (එයින් අදහස් වන්නේ a <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>

ආබාධිත අයිතම

.disabledආබාධිත බව පෙන්වීමට .list-group-itemඑය අළු පැහැයට එක් කරන්න .

<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 පහසුකම ඇත
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum සහ eros
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

අභිරුචි අන්තර්ගතය

පහත දැක්වෙන ආකාරයේ සම්බන්ධිත ලැයිස්තු කණ්ඩායම් සඳහා වුවද, ඇතුළත ඕනෑම HTML පාහේ එක් කරන්න.

<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 ague. 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 ලැරී කුරුල්ලා @ට්විටර්
<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 ලැරී කුරුල්ලා @ට්විටර්
<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 ague. 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.

  • ක්‍රාස් ජස්ටෝ ඔඩියෝ
  • Dapibus ac පහසුකම ඇත
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum සහ eros
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

ප්‍රතිචාරාත්මක කාවැද්දීම

ඕනෑම උපාංගයක් මත නිසි ලෙස පරිමාණය කරන ආවේණික අනුපාතයක් නිර්මාණය කිරීමෙන් බ්‍රවුසරවලට ඒවායේ අඩංගු බ්ලොක් එකේ පළල මත පදනම්ව වීඩියෝ හෝ විනිවිදක දර්ශන මානයන් තීරණය කිරීමට ඉඩ දෙන්න.

රීති සෘජුවම <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>