Glyphicons

ئىشلەتكىلى بولىدىغان گىلفلار

Glyphicon Halflings يۈرۈشلۈكىدىن خەت شەكلىدىكى 250 دىن ئارتۇق گلىفنى ئۆز ئىچىگە ئالىدۇ. Glyphicons Halflings ئادەتتە ھەقسىز ئىشلەتكىلى بولمايدۇ ، ئەمما ئۇلارنىڭ ئىجادچىسى ئۇلارنى Bootstrap ئۈچۈن ھەقسىز تەمىنلىدى. رەھمەت سىزگە ، بىز ئىمكانقەدەر Glyphicons غا ئۇلىنىشنى قوشۇشىڭىزنى سورايمىز .

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glyphicon glyphicon- بۇلۇت
  • glyphicon glyphicon- كونۋېرت
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-music
  • glyphicon glyphicon-search
  • glyphicon glyphicon-heart
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-قۇرۇق
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-ئەخلەت
  • glyphicon glyphicon-home
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-Circle
  • glyphicon glyphicon- تەكرار
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon- تىڭشىغۇچ
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon- كامېرا
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • 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-adjust
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • glyphicon glyphicon-step-back
  • glyphicon glyphicon-fast-back
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-fast-forward
  • glyphicon glyphicon-step-forward
  • 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-remove-Circle
  • glyphicon glyphicon-ok-Circle
  • glyphicon glyphicon-ban-Circle
  • glyphicon glyphicon-arrow-left
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon- سوۋغات
  • گىلىكون گىلىكون يوپۇرمىقى
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-eye-open
  • glyphicon glyphicon-eye-close
  • glyphicon glyphicon- ئاگاھلاندۇرۇش بەلگىسى
  • glyphicon glyphicon- ئايروپىلان
  • glyphicon glyphicon- كالېندار
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon- مال سېتىۋېلىش ھارۋىسى
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon- گۇۋاھنامىسى
  • glyphicon glyphicon-thumb-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-hand-left
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-Circle-right-right
  • glyphicon glyphicon-Circle-left-left
  • glyphicon glyphicon-Circle-arrow-up
  • glyphicon glyphicon-Circle-arrow-down
  • گىلىكون گىلىكون-يەر شارى
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon- ۋەزىپە
  • glyphicon glyphicon-filter
  • glyphicon glyphicon- سومكا
  • glyphicon glyphicon- تولۇق ئېكران
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-heart-قۇرۇق
  • 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-collaps-down
  • glyphicon glyphicon- يىمىرىلىش
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon- يېڭى كۆزنەك
  • glyphicon glyphicon-record
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon-saved
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-saved
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon- ئىناۋەتلىك كارتا
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • گىلىكون گلىكفونىك پرېسلانغان
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon- مۇنار
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitles
  • 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- نەشر ھوقۇقى بەلگىسى
  • glyphicon glyphicon- تىزىملاش بەلگىسى
  • glyphicon glyphicon- بۇلۇت چۈشۈرۈش
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • گىلىكون گىلىكون دەرىخى يوپۇرماقلىق
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-level-up
  • glyphicon glyphicon-copy
  • glyphicon glyphicon-paste
  • glyphicon glyphicon-alert
  • glyphicon glyphicon-equizer
  • glyphicon glyphicon-king
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-Bishop
  • glyphicon glyphicon-knight
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-tent
  • glyphicon glyphicon-blackboard
  • glyphicon glyphicon- كارىۋات
  • glyphicon glyphicon-alma
  • glyphicon glyphicon-erase
  • glyphicon glyphicon-hourglass
  • glyphicon glyphicon-lamp
  • glyphicon glyphicon-duplicate
  • glyphicon glyphicon-piggy-bank
  • گىلىكون گىلىكون قايچا
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-ruble
  • glyphicon glyphicon-rub
  • glyphicon glyphicon-scale
  • گىلىكون گىلىكون-مۇز
  • گىلىكون گىلىكون-مۇز-لۆڭگە تەمى
  • glyphicon glyphicon-education
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • گلىكفېكون گلىكفېكون مېيى
  • گىلىكون گىلىكون-دان
  • glyphicon glyphicon-sunlass
  • 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-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-triangle-right
  • glyphicon glyphicon-triangle-left
  • glyphicon glyphicon-triangle-bottom
  • 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
  • Less compiler تەمىنلىگەن نىسپىي 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-rightئوڭغا ئوڭغا قوشۇش .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>

كۇنۇپكا گۇرۇپپىلىرى

بىر قاتار كۇنۇپكىلارنى بىر گۇرۇپپا كۇنۇپكا گۇرۇپپىسى بىلەن گۇرۇپپىلاش. ئىختىيارىي JavaScript رادىئوسى ۋە تەكشۈرۈش رامكىسى ئۇسلۇبىدىكى ھەرىكەتلەرنى بىزنىڭ كۇنۇپكا قىستۇرمىمىز بىلەن قوشۇڭ .

كۇنۇپكا گۇرۇپپىسىدىكى قورال قوراللىرى ۋە كۆزنەكلەر ئالاھىدە تەڭشەشنى تەلەپ قىلىدۇ

A ئىچىدىكى ئېلېمېنتلارغا قورال كۆرسەتكۈچى ياكى پوپايكا ئىشلەتكەندە .btn-group، كېرەكسىز ئەكىس تەسىرلەردىن ساقلىنىش ئۈچۈن تاللاشنى بەلگىلىشىڭىز container: 'body'لازىم (مەسىلەن ، قورالنىڭ كېڭىيىشى ۋە ياكى قوزغاتقۇچ قوزغالغاندا ئېلېمېنتنىڭ كېڭىيىشى ۋە ياكى يۇمىلاق بۇلۇڭىدىن ئايرىلىشى دېگەندەك).

توغرا roleۋە بەلگە بىلەن تەمىنلەشكە كاپالەتلىك قىلىڭ

ئېكران ئوقۇغۇچىلىرىغا ئوخشاش ياردەمچى تېخنىكىلار ئۈچۈن بىر يۈرۈش كۇنۇپكىلارنىڭ گۇرۇپپىلانغانلىقىنى يەتكۈزۈش ئۈچۈن ، مۇۋاپىق roleخاسلىق بىلەن تەمىنلەش كېرەك. كۇنۇپكا گۇرۇپپىلىرىغا نىسبەتەن بۇ بولىدۇ role="group"، قورالبالدىقىدا a بولۇشى كېرەك 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>

Sizing

بىر گۇرۇپپىدىكى ھەر بىر كۇنۇپكىغا كۇنۇپكا چوڭلۇقتىكى دەرسلەرنى ئىشلىتىشنىڭ ئورنىغا ، ھەر بىر گۇرۇپپىغا قوشۇڭ .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>

Nesting

تارتما تىزىملىكلەرنى بىر قاتار كۇنۇپكىلار بىلەن ئارىلاشتۇرماقچى بولغاندا ، .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 ۋە چېگرا

<a>Internet Explorer 8 مەيلى ئۇ ياكى <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>

كۇنۇپكا چۈشۈش

ھەر قانداق كۇنۇپكىنى ئىشلىتىپ تىزىملىك ​​تىزىملىكىنى قوزغىتىپ .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>

Sizing

كونۇپكا تاختىلىرى ھەر خىل چوڭلۇقتىكى كۇنۇپكىلار بىلەن ئىشلەيدۇ.

<!-- 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-groupياكى يەككە ئېلېمېنتلارنى ئالدىن تەييارلاڭ ياكى .input-group-addonقوشۇڭ ..input-group-btn.form-control

پەقەت تېكىستلىك <input>s

بۇ يەردىكى ئېلېمېنتلارنى ئىشلىتىشتىن ساقلىنىڭ <select>، چۈنكى ئۇلار WebKit توركۆرگۈلىرىدە تولۇق ئۇسلۇبقا ئىگە بولالمايدۇ.

بۇ يەردىكى ئېلېمېنتلارنى ئىشلىتىشتىن ساقلىنىڭ <textarea>، چۈنكى ئۇلارنىڭ rowsخاسلىقى بەزى ئەھۋاللاردا ھۆرمەت قىلىنمايدۇ.

كىرگۈزۈش گۇرۇپپىسىدىكى قورال قوراللىرى ۋە كۆزنەكلەر ئالاھىدە تەڭشەشنى تەلەپ قىلىدۇ

قورال ئىچىدىكى ئېلېمېنتلار ياكى ئېلېكترونلۇق كۆزنەكلەرنى ئىشلەتكەندە ، لازىملىق ئەكىس تەسىرلەردىن ساقلىنىش ئۈچۈن .input-groupتاللاشنى بەلگىلىشىڭىز container: 'body'لازىم (مەسىلەن ، قورال كېڭەيتىش ۋە ياكى قوزغاتقۇچ قوزغالغاندا ئېلېمېنتنىڭ كېڭىيىشى ۋە ياكى يۇمىلاق بۇلۇڭلىرىنى يوقىتىش دېگەندەك).

باشقا زاپچاسلار بىلەن ئارىلاشماڭ

شەكىل گۇرۇپپىلىرى ياكى كاتەكچە ئىستون سىنىپلىرىنى بىۋاسىتە كىرگۈزۈش گۇرۇپپىلىرى بىلەن ئارىلاشتۇرماڭ. ئەكسىچە ، گۇرۇپپا ياكى تورغا مۇناسىۋەتلىك ئېلېمېنتنىڭ ئىچىگە كىرگۈزۈش گۇرۇپپىسىنى ئۇۋا قىلىڭ.

ھەمىشە بەلگە قوشۇڭ

ئەگەر ھەر بىر كىرگۈزۈش بەلگىسىنى ئۆز ئىچىگە ئالمىسىڭىز ، ئېكران ئوقۇرمەنلىرى جەدۋەللىرىڭىزدە ئاۋارىچىلىققا ئۇچرايدۇ. بۇ كىرگۈزۈش گۇرۇپپىلىرىغا قوشۇمچە بەلگە ياكى ئىقتىدارلارنىڭ ياردەمچى تېخنىكىلارغا يەتكۈزۈلۈشىگە كاپالەتلىك قىلىڭ.

ئىشلىتىشكە بولىدىغان ئېنىق تېخنىكا (كۆرۈنگەن <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>

Sizing

ئۆزىگە مۇناسىۋەتلىك جەدۋەل چوڭلۇقتىكى دەرسلەرنى قوشسىڭىز ، .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 -->

Button addons

كىرگۈزۈش گۇرۇپپىسىدىكى كۇنۇپكىلار بىر ئاز ئوخشىمايدۇ ، يەنە بىر دەرىجىدىكى ئۇۋا تەلەپ قىلىدۇ. ئۇنىڭ ئورنىغا ، كۇنۇپكىلارنى ئوراپ .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 دىكى دېڭىز ئارمىيىسى ئاساسى .navسىنىپتىن باشلاپ ئورتاق بەھرىلىنىشتىن ئورتاق بەھرىلىنىدۇ. ھەر بىر ئۇسلۇب ئارىسىدا ئالماشتۇرۇش ئۈچۈن ئالماشتۇرغۇچ سىنىپى ئالماشتۇرۇڭ.

بەتكۈچ تاختىسى ئۈچۈن nav نى ئىشلىتىش JavaScript بەتكۈچ قىستۇرمىسىنى تەلەپ قىلىدۇ

جەدۋەل رايونى بار بەتكۈچلەرگە چوقۇم JavaScript قىستۇرمىسىنى ئىشلىتىڭ . بۇ بەلگە يەنە قوشۇمچە roleۋە ARIA خاسلىقىنى تەلەپ قىلىدۇ - تېخىمۇ كۆپ تەپسىلاتلار ئۈچۈن قىستۇرمىنىڭ ئۈلگە بەلگىسىنى كۆرۈڭ.

يول باشلاش ئۈچۈن ئىشلىتىلىدىغان دېڭىز ئارمىيىسىنى ئىشلىتىڭ

ناۋادا يولباشچى بالداق بىلەن تەمىنلىمەكچى بولسىڭىز 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. كىچىك ئېكرانلاردا ، دېڭىز ئۇلانمىلىرى تىزىپ قويۇلغان.

يوللۇق navbar nav ئۇلىنىشى ھازىرچە قوللىمايدۇ.

سافارى ۋە ئىنكاسچان يوللۇق دېڭىز ئارمىيىسى

V9.1.2 دىن باشلاپ ، Safari توركۆرگۈڭىزنىڭ توغرىسىغا توغرىلىنىپ ، يېڭىلانغاندىن كېيىن تازىلانغان يوللۇق يولدا خاتالىق سادىر قىلىدىغان كەمتۈكنى كۆرسىتىپ بېرىدۇ. بۇ خاتالىق يوللۇق 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 ۋە ئېسىلما 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>

Navbar

Navbars سىزنىڭ قوللىنىشچان پروگراممىڭىز ياكى تور بېتىڭىزنىڭ يول باشلاش ماۋزۇسى سۈپىتىدە ئىنكاس قايتۇرىدىغان مېتا زاپچاسلىرى. ئۇلار كۆچمە كۆرۈنۈشتە يىمىرىلىشكە باشلايدۇ (ۋە ئالماشتۇرغىلى بولىدۇ) ھەمدە بار بولغان كۆرۈنۈش كەڭلىكىنىڭ چوڭىيىشىغا ئەگىشىپ توغرىسىغا ئايلىنىدۇ.

يوللۇق navbar nav ئۇلىنىشى ھازىرچە قوللىمايدۇ.

تولۇپ تاشقان مەزمۇن

Bootstrap توربېتىڭىزدىكى مەزمۇننىڭ قانچىلىك بوشلۇققا ئېھتىياجلىق ئىكەنلىكىنى بىلمىگەچكە ، مەزمۇننى ئىككىنچى قۇرغا قاچىلاش مەسىلىسىگە يولۇقۇشىڭىز مۇمكىن. بۇنى ھەل قىلىش ئۈچۈن:

  1. يولباشچى تۈرلىرىنىڭ مىقدارى ياكى كەڭلىكىنى ئازايتىڭ.
  2. ئىنكاسچان ئەمەلىي دەرسلەر ئارقىلىق مەلۇم ئېكران چوڭلۇقىدىكى مەلۇم يولباشچى تۈرلەرنى يوشۇرۇڭ .
  3. يولباشچىڭىزنىڭ يىمىرىلگەن ۋە توغرىسىغا توغرىلانغان نۇقتىنى ئۆزگەرتىڭ. ئۆزگەرگۈچى مىقدارنى خاسلاشتۇرۇڭ @grid-float-breakpointياكى ئۆزىڭىزنىڭ مېدىيا سوئالىڭىزنى قوشۇڭ.

JavaScript قىستۇرمىسىنى تەلەپ قىلىدۇ

ئەگەر JavaScript چەكلەنگەن بولسا ھەمدە كۆرۈنۈش ئېغىزى تار بولۇپ ، يولباشچى يىمىرىلىدۇ ، يولباشچىنى كېڭەيتىپ ، ئىچىدىكى مەزمۇننى كۆرۈش مۇمكىن ئەمەس .navbar-collapse.

ئىنكاسچان يولباشچى يىمىرىلىش قىستۇرمىسىنى Bootstrap نەشرىڭىزگە كىرگۈزۈشنى تەلەپ قىلىدۇ.

ئۆرۈلۈپ چۈشكەن كۆچمە يولباشچى بۆلىكىنى ئۆزگەرتىش

كۆرۈنۈش كۆزنىكى تار بولغاندا تىك بالداق ئۇنىڭ تىك كۆچمە كۆرۈنۈشىگە يىمىرىلىدۇ ، كۆرۈنۈش ئېغىزى كەم دېگەندە كەڭلىكتە @grid-float-breakpointبولغاندا ئۇدۇلسىز كۆچمە كۆرۈنۈشكە كېڭىيىدۇ . @grid-float-breakpointبۇ مەنبە ئۆزگەرگۈچى مىقدارنى مەنبەدىن تەڭشەپ ، يولباشچى يىمىرىلگەندە / كېڭەيگەندە كونترول قىلىڭ. سۈكۈتتىكى قىممىتى 768px(ئەڭ كىچىك «كىچىك» ياكى «تاختا كومپيۇتېر» ئېكرانى).

ناۋايخانىلارنى زىيارەت قىلىڭ

بىر ئېلېمېنتنى ئىشلىتىشكە كاپالەتلىك قىلىڭ <nav>ياكى ئەگەر a غا ئوخشاش تېخىمۇ ئومۇمىي ئېلېمېنتنى ئىشلەتسىڭىز ، ھەر بىر يولباشچىغا <div>a قوشۇپ ، 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>

Nwarbar ماركىسىنى ئۆزىڭىزنىڭ سۈرىتى بىلەن ئالماشتۇرۇڭ <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-inlineئارىلاشتۇرۇش ئارقىلىق ھەمبەھىرلەيدۇ. كىرگۈزۈش گۇرۇپپىلىرىغا ئوخشاش بەزى شەكىل كونتروللىرى مۇقىم كەڭلىكتىكى يولباشچى ئىچىدە مۇۋاپىق كۆرسىتىلىشىنى تەلەپ قىلىشى مۇمكىن.

<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>تۇرمايدىغان ئېلېمېنتلارغا قوشۇڭ .<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-linkسىنىپتىن پايدىلىنىپ سۈكۈتتىكى ۋە تەتۈر يۆنىلىشلىك يولباشچى تاللانمىلىرىغا مۇۋاپىق رەڭ قوشۇڭ.

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

Nav ئۇلانمىلىرى ، شەكىللەر ، كۇنۇپكىلار ياكى تېكىستلەرنى .navbar-leftتوغرىلاڭ .navbar-right. ھەر ئىككى سىنىپ بەلگىلەنگەن يۆنىلىشكە CSS لەيلىمە قوشىدۇ. مەسىلەن ، nav ئۇلانمىلىرىنى توغرىلاش ئۈچۈن <ul>، مۇناسىۋەتلىك قوللىنىشچان سىنىپلار بىلەن ئايرىم قويۇڭ.

بۇ دەرسلەر ئارىلاشما نەشىر نۇسخىسى بولۇپ .pull-left، .pull-rightئەمما ئۇلار ئۈسكۈنىنىڭ چوڭ-كىچىكلىكىدىكى ناۋاي زاپچاسلىرىنى بىر تەرەپ قىلىش ئۈچۈن مېدىيا سوئاللىرىغا ماس كېلىدۇ.

كۆپ زاپچاسنى توغرا توغرىلاش

Navbars نىڭ ھازىر بىر قانچە .navbar-rightسىنىپ بىلەن چەكلىمىسى بار. بوشلۇق بوشلۇقىنى مۇۋاپىق ئىشلىتىش ئۈچۈن ، ئاخىرقى .navbar-rightئېلېمېنتتا مەنپىي پەرق ئىشلىتىمىز. بۇ سىنىپنى ئىشلىتىدىغان نۇرغۇن ئېلېمېنتلار بولغاندا ، بۇ گىرۋەكلەر كۆڭۈلدىكىدەك ئىشلىمەيدۇ.

بىز بۇ زاپچاسنى v4 دا قايتا يازالايمىز.

مەركىزى ياكى pad navbar مەزمۇنىنى قوشۇڭ .navbar-fixed-topۋە قوشۇڭ..container.container-fluid

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

بەدەنگە چاپلاش تەلەپ قىلىنىدۇ

مۇقىم يولباشچى باشقا مەزمۇنلىرىڭىزنى قاپلايدۇ ، ئەگەر سىز paddingئۇنىڭ ئۈستىگە قوشۇلمىسىڭىز <body>. ئۆزىڭىزنىڭ قىممىتىنى سىناپ بېقىڭ ياكى تۆۋەندىكى ئۈزۈندىمىزنى ئىشلىتىڭ. تەكلىپ: سۈكۈتتىكى ھالەتتە ، يولباشچى ئېگىزلىكى 50px.

body { padding-top: 70px; }

يادرولۇق Bootstrap CSS دىن كېيىن بۇنى جەزملەشتۈرۈڭ .

مەركىزى ياكى pad navbar مەزمۇنىنى قوشۇڭ .navbar-fixed-bottomۋە قوشۇڭ..container.container-fluid

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

بەدەنگە چاپلاش تەلەپ قىلىنىدۇ

paddingمۇقىم يولباشچى باشقا مەزمۇنلارنى قاپلايدۇ ، پەقەت ئاستىغا قوشمىسىڭىز <body>. ئۆزىڭىزنىڭ قىممىتىنى سىناپ بېقىڭ ياكى تۆۋەندىكى ئۈزۈندىمىزنى ئىشلىتىڭ. تەكلىپ: سۈكۈتتىكى ھالەتتە ، يولباشچى ئېگىزلىكى 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-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>

Pagination

تور بېتىڭىز ياكى ئەپىڭىزگە كۆپ بەتلىك بەتكۈچ زاپچاسلىرى ياكى ئاددىيراق قەغەز تاللاش ئورنى بىلەن ئۇلىنىش ئۇلانمىسى تەمىنلەڭ .

سۈكۈتتىكى بەت

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>

Sizing

چوڭ ياكى كىچىكرەك تەسەۋۋۇرمۇ؟ قوشۇمچە .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>

Pager

يېنىك بەلگە ۋە ئۇسلۇب بىلەن ئاددىي كىچىكلىتىش ئەمەلگە ئاشۇرۇش ئۈچۈن تېز ۋە كېيىنكى ئۇلىنىشلار. بىلوگ ياكى ژۇرنال قاتارلىق ئاددىي تور بېكەتلەر ئۈچۈن ناھايىتى ياخشى.

سۈكۈتتىكى مىسال

سۈكۈتتىكى ھالەتتە ، قەغەز مەركىزى ئۇلىنىدۇ.

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

ئىختىيارىي چەكلەنگەن ھالەت

Pager ئۇلانمىلىرى يەنە ئادەتتىكى .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>

Labels

مىسال

يېڭى ماۋزۇ

يېڭى ماۋزۇ

يېڭى ماۋزۇ

يېڭى ماۋزۇ

يېڭى ماۋزۇ
يېڭى ماۋزۇ
<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 گە قاراڭ .

Badges

<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 تاللىغۇچ ئارقىلىق) يىمىرىلىدۇ.

تور كۆرگۈچنىڭ ماسلىشىشچانلىقى

بەلگىلەر 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

يېنىك ، ئەۋرىشىم زاپچاسلار پۈتكۈل كۆرۈنۈشنى خالىغانچە كېڭەيتىپ تور بېتىڭىزدىكى مۇھىم مەزمۇنلارنى كۆرسىتەلەيدۇ.

ياخشىمۇسىز ، دۇنيا!

بۇ ئاددىي قەھرىمان بىرلىكى ، ئالاھىدە 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>

Thumbnails

كىچىك كۆرۈنۈش زاپچاسلىرى بىلەن Bootstrap نىڭ تور سىستېمىسىنى كېڭەيتىپ ، رەسىم ، سىن ، تېكىست ۋە باشقا تورلارنى ئاسانلا كۆرسىتىدۇ.

ئوخشىمىغان ئېگىزلىك ۋە ياكى كەڭلىكتىكى كىچىك كۆرۈنۈشلەرنى Pinterest غا ئوخشاش كۆرسەتمەكچى بولسىڭىز ، ماسونرىي ، 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 مەزمۇنلىرىنى قوشقىلى بولىدۇ.

100% x200

كىچىك بەلگە

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ئۇلترا ماشىنىلىرى ut id elit.

Button Button

100% x200

كىچىك بەلگە

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ئۇلترا ماشىنىلىرى ut id elit.

Button Button

100% x200

كىچىك بەلگە

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida eget metus. Nullam id dolor id nibh ئۇلترا ماشىنىلىرى ut id elit.

Button Button

<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 سىنىپلىرىنى ئىشلىتىشنى ئۆز ئىچىگە ئالىدۇ.

ئاساسلىق مىسال

كۆڭۈلدىكى ئىلگىرىلەش بالدىقى.

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، ئىلگىرىلەش بالدىقىغا قوشۇشنى ئويلاڭ.

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>

Striped

گىرافىك ئىشلىتىپ سىزىقلىق ئۈنۈم ھاسىل قىلىدۇ. 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>

Animated

.activeسىزىقلارنى ئوڭدىن .progress-bar-stripedسولغا جانلاندۇرۇشقا قوشۇڭ . IE9 ۋە ئۇنىڭدىن تۆۋەن.

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>

Stacked

ئوخشاش بىر قانچە بالداقنى ئوخشاش .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>

مېدىيا ئوبيېكتى

تېكىست مەزمۇنى بىلەن بىللە سول ياكى ئوڭغا توغرىلانغان رەسىمنى ئۆز ئىچىگە ئالغان ھەر خىل زاپچاسلارنى قۇرۇشنىڭ ئابستراكت ئوبيېكت ئۇسلۇبى (بىلوگ باھالىرى ، Tweets قاتارلىقلار).

كۆڭۈلدىكى مېدىيا

سۈكۈتتىكى مېدىيا مەزمۇن توپىنىڭ سول ياكى ئوڭ تەرىپىگە مېدىيا ئوبيېكتى (رەسىم ، سىن ، ئاۋاز) كۆرسىتىدۇ.

مېدىيا ماۋزۇسى

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

مېدىيا ماۋزۇسى

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Nested media head

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

مېدىيا ماۋزۇسى

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis.

مېدىيا ماۋزۇسى

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، 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

Media alignment

رەسىم ياكى باشقا مېدىيانى ئۈستى ، ئوتتۇرىسى ياكى ئاستىغا توغرىلىغىلى بولىدۇ. سۈكۈتتىكىسى توغرىلىنىدۇ.

ماسلاشتۇرۇلغان مېدىيا

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in 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 مەسخىرە مۇس.

ئوتتۇرا تۈزلەڭلىك تاراتقۇ

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in 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 مەسخىرە مۇس.

ئاستىدىكى تاراتقۇلار

Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in 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 مەسخىرە مۇس.

<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. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis.

    Nested media head

    Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis.

    Nested media head

    Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، tempus viverra turpis.

    Nested media head

    Cras sit amet nibh libero, gravida nulla. Nulla vel metus scelerisque ante sollicitudin تاۋار. Cras purus odio ، تومۇردىكى تومۇر ئۆسمىسى ، 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
  • Vosibulum at 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>

Badges

بەلگە زاپچاسلىرىنى ھەر قانداق تىزىملىك ​​گۇرۇپپىسىنىڭ تۈرىگە قوشۇڭ ، ئۇ ئاپتوماتىك ھالدا ئوڭ تەرەپكە ئورۇنلاشتۇرۇلىدۇ.

  • 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>). ھەر بىر ئېلېمېنت ئەتراپىدىكى ئاتا-ئانىلارنىڭ ھاجىتى يوق.

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

چەكلەنگەن تۈرلەر

كۈلرەڭگە قوشۇلۇپ .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 facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vosibulum at 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>

Panels

ھەمىشە زۆرۈر بولمىسىمۇ ، بەزىدە 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يوچۇقسىز لايىھىلەش ئۈچۈن تاختاينىڭ ئىچىگە چېگراسىز قوشۇڭ . ئەگەر a بولسا .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 ئۇلترا ماشىنىلىرى ut id elit.

# بىرىنچى ئىسمى فامىلىسى ئىشلەتكۈچى ئىسمى
1 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry قۇش @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 Mark Otto @mdo
2 ياقۇپ Thornton @fat
3 Larry قۇش @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 ئۇلترا ماشىنىلىرى ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vosibulum at 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>

Responsive embed

توركۆرگۈچلەرنىڭ ئۆز ئىچىگە ئالغان بۆلەكنىڭ كەڭلىكىگە ئاساسەن سىن ياكى تام تەسۋىرنىڭ چوڭ-كىچىكلىكىنى ئېنىقلىشىغا يول قويۇڭ.

قائىدىلەر <iframe>، <embed>ۋە ئېلېمېنتلارغا بىۋاسىتە قوللىنىلىدۇ <video>. باشقا خاسلىقلارنىڭ ئۇسلۇبىنى ماسلاشتۇرماقچى بولغاندا <object>، ئېنىق ئەۋلاد سىنىپىنى ئىشلىتىڭ ..embed-responsive-item

Pro-Tip! frameborder="0"بىز ئۇنى ئۆز ئىچىگە ئالغان بولغاچقا ، ئۇنى ئۆز ئىچىگە ئېلىشىڭىزنىڭ ھاجىتى يوق <iframe>.

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

Wells

كۆڭۈلدىكى ياخشى

قۇدۇققا ئاددىي تەسىر قىلىپ ، ئېلېمېنتقا ئاددىي ئۈنۈم بېرىدۇ.

قاراڭ ، مەن بىر قۇدۇقتا!
<div class="well">...</div>

ئىختىيارى دەرسلەر

ئىككى تاللاشچان ئۆزگەرتىش سىنىپى بار تاختا ۋە يۇمىلاق بۇلۇڭنى كونترول قىلىڭ.

قاراڭ ، مەن چوڭ قۇدۇقتا!
<div class="well well-lg">...</div>
قاراڭ ، مەن بىر كىچىك قۇدۇقتا!
<div class="well well-sm">...</div>