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

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- قەلەم
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تىزىملىكى.

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

Divider

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

<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

بىز بىر كىرگۈزۈش گۇرۇپپىسىدا كۆپ خىل شەكىل كونترول قىلىشنى قوللىمايمىز.

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

Pills

ئوخشاش 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>

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

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

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

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

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

مىسال

يېڭى ماۋزۇ

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

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

بەلگىلەر Internet Explorer 8 دە ئۆزلۈكىدىن يىمىرىلمەيدۇ ، چۈنكى :emptyتاللىغۇچنى قوللىمايدۇ.

ئاكتىپ دېڭىز ھالىتىگە ماسلىشىدۇ

ئىچىگە ئورۇنلاشتۇرۇلغان ئۇسلۇبلار بەلگە يول باشلاشتا ئاكتىپ ھالەتكە بەلگە قويۇش ئۈچۈن كىرگۈزۈلگەن.

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

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

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

بۇ ئاددىي قەھرىمان بىرلىكى ، ئالاھىدە jumbotron ئۇسلۇبىدىكى تەركىب بولۇپ ، ئالاھىدە مەزمۇن ياكى ئۇچۇرغا ئالاھىدە ئەھمىيەت بېرىدۇ.

تەپسىلاتى

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

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

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

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

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

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

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

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

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

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

خاس مەزمۇن

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

كىچىك بەلگە

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

Button Button

كىچىك بەلگە

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

كىچىك بەلگە

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

سۈكۈتتىكى دەرس يوق

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

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

Heads up! بۇ ئاگاھلاندۇرۇش سىزنىڭ دىققىتىڭىزگە موھتاج ، ئەمما ئۇ بەك مۇھىم ئەمەس.

ئاگاھلاندۇرۇش! ئەڭ ياخشىسى ئۆزىڭىزنى تەكشۈرۈڭ ، بەك ياخشى كۆرۈنمەيسىز.

ئاھ! بىر قانچە نەرسىنى ئۆزگەرتىپ قايتا يوللاپ بېقىڭ.

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

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

Heads up! بۇ ئاگاھلاندۇرۇش سىزنىڭ دىققىتىڭىزگە موھتاج ، ئەمما ئۇ بەك مۇھىم ئەمەس.

ئاگاھلاندۇرۇش! ئەڭ ياخشىسى ئۆزىڭىزنى تەكشۈرۈڭ ، بەك ياخشى كۆرۈنمەيسىز .

ئاھ! بىر قانچە نەرسىنى ئۆزگەرتىپ قايتا يوللاپ بېقىڭ.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

ئاددىي ، ئەمما جانلىق ئىلگىرىلەش بالدىقى بىلەن خىزمەت ئېقىمى ياكى ھەرىكەتنىڭ ئىلگىرىلىشى ھەققىدە ئەڭ يېڭى تەكلىپ-پىكىر بىلەن تەمىنلەڭ.

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

ئىلگىرىلەش بالدىقى CSS3 ئۆتكۈنچى ۋە كارتون ئارقىلىق ئۇلارنىڭ بىر قىسىم ئۈنۈملىرىنى قولغا كەلتۈرىدۇ. بۇ ئىقتىدارلار Internet Explorer 9 ۋە Firefox نىڭ ئاستىدىكى ياكى كونا نەشرىدە قوللىمايدۇ. Opera 12 كارتوننى قوللىمايدۇ.

مەزمۇن بىخەتەرلىك سىياسىتى (CSP) ماسلىشىشچانلىقى

ئەگەر تور بېتىڭىزدە رۇخسەت قىلمايدىغان مەزمۇن بىخەتەرلىك سىياسىتى (CSP)style-src 'unsafe-inline' بولسا ، سىز styleتۆۋەندىكى مىساللاردا كۆرسىتىلگەندەك ، خاسلىق خاسلىقىنى ئىشلىتىپ ئىلگىرىلەش بالدىقىنىڭ كەڭلىكىنى بەلگىلىيەلمەيسىز. قاتتىق CSP غا ماس كېلىدىغان كەڭلىكنى تەڭشەشنىڭ باشقا ئۇسۇللىرى ئازراق خاسلاشتۇرۇلغان JavaScript (ئۇ تەڭشەلگەن element.style.width) ياكى خاس CSS سىنىپلىرىنى ئىشلىتىشنى ئۆز ئىچىگە ئالىدۇ.

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

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

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

بەلگە بىلەن

كۆرۈنەرلىك پىرسەنتنى كۆرسىتىش ئۈچۈن ئىلگىرىلەش ستونىنىڭ ئىچىدىن سىنىپنى <span>ئۆچۈرۈڭ ..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>

كونكېرت تاللاش

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

<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 ۋە ئۇنىڭدىن تۆۋەن.

<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-stripedIE9 ۋە ئۇنىڭدىن تۆۋەن.

<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ئورۇنغا قويۇڭ.

<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
Eros دىكى Vestibulum

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

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Eros دىكى Vestibulum

<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چەكلەنگەندەك قىلىدۇ.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Eros دىكى Vestibulum

<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
Eros دىكى Vestibulum

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Eros دىكى Vestibulum

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

خاس مەزمۇن

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

گۇرۇپپا تۈر ماۋزۇسىنى تىزىڭ

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

گۇرۇپپا تۈر ماۋزۇسىنى تىزىڭ

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

گۇرۇپپا تۈر ماۋزۇسىنى تىزىڭ

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

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

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

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

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

ئاساسىي تاختا مىسالى

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

تېما تاختىسى

تاختىسىغا ئاسانلا ماۋزۇ قاچىسى قوشۇڭ .panel-heading. سىز ئالدىن تەييارلانغان ماۋزۇ قوشۇش ئۈچۈن سىنىپ بىلەن ھەر <h1>قانداقسىنى ئۆز ئىچىگە ئالالايسىز. قانداقلا بولمىسۇن ، خەت نۇسخىسىنىڭ چوڭ - كىچىكلىكى قاپلاپ كەتتى .<h6>.panel-title<h1><h6>.panel-heading

مۇۋاپىق ئۇلىنىش رەڭگى ئۈچۈن ، ئۇلانمىلارنى ئىچىگە ماۋزۇ قويۇشقا كاپالەتلىك قىلىڭ .panel-title.

تېما ماۋزۇسى يوق

گۇرۇپپا مەزمۇنى

گۇرۇپپا ئىسمى

گۇرۇپپا مەزمۇنى

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

بەت ئاستى تاختىسى

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

گۇرۇپپا مەزمۇنى

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
Eros دىكى Vestibulum

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

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

زاپچاسلار

Glyphicons

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

قانداق ئىشلىتىش

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

پەقەت قۇرۇق ئېلېمېنتلارغا ئىشلىتىلىدۇ

سىنبەلگە خەت ئورنىنى ئۆزگەرتىش

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

مىساللار

تامچە

مىسال

توغرىلاش

قوشۇمچە ئورۇن بەلگىلەشنى تەلەپ قىلىشى مۇمكىن

ۋاقتى ئۆتكەن .pull-rightماسلىشىش

ماۋزۇلار

Divider

تىزىملىك ​​تۈرلىرى چەكلەنگەن

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

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

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

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

كۇنۇپكا قورال ستونى

Sizing

Nesting

ۋېرتىكال ئۆزگىرىش

يوللۇق كۇنۇپكا گۇرۇپپىلىرى

چېگرانى بىر تەرەپ قىلىش

IE8 ۋە چېگرا

<a>ئېلېمېنتلار بىلەن

كۇنۇپكا رولىنى ئوينايدىغان ئۇلىنىشلار

<button>ئېلېمېنتلار بىلەن

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

قىستۇرمىغا تايىنىش

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

كۇنۇپكا تاختىسىنى پارچىلاش

Sizing

تامچە ئۆزگىرىش

گۇرۇپپىلارنى كىرگۈزۈڭ

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

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

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

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

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

Sizing

تەكشۈرۈش ساندۇقى ۋە رادىئو خۇرۇچلىرى

Button addons

چۈشۈش كۇنۇپكىسى بار كۇنۇپكىلار

بۆلۈنگەن كۇنۇپكىلار

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

ناۋرىز

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

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

بەتكۈچ

Pills

يوللۇق

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

ئۇلانمىلارنى چەكلىدى

ئۇلىنىش ئىقتىدارى تەسىرگە ئۇچرىمىدى

تامچە ئىشلىتىش

تارتما تىزىملىكلەر

تۆۋەنگە چۈشكەن دورىلار

Navbar

كۆڭۈلدىكى navbar

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

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

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

دېڭىز ئارمىيىسىنى زىيارەت قىلغىلى بولىدۇ

ماركا سۈرىتى

جەدۋەل

كۆچمە ئۈسكۈنە ئۆڭكۈرى

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

كۇنۇپكىلار

مەزمۇنغا ماس ئىشلىتىش

تېكىست

غەيرى دېڭىز ئۇلىنىشى

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

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

ئۈستىگە مۇقىملاشتۇرۇلغان

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

ئاستىغا مۇقىملاشتۇرۇلغان

ۋاقتى ئۆتكەن `.pull-right`ماسلىشىش

تىزىملىك تۈرلىرى چەكلەنگەن

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

`<a>`ئېلېمېنتلار بىلەن

`<button>`ئېلېمېنتلار بىلەن

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