شته ګلیفونه

د ګلیفیکون هافلینګ سیټ څخه د فونټ فارمیټ کې له 250 څخه ډیر ګلیفونه شامل دي. Glyphicons Halflings معمولا په وړیا توګه شتون نلري، مګر د دوی جوړونکي دوی د بوټسټریپ لپاره وړیا چمتو کړي. ستاسو د مننې په توګه، موږ یوازې دا غوښتنه کوو چې تاسو هرکله چې امکان ولري ګلیفیکون ته یو لینک شامل کړئ.

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-Cloud
glyphicon glyphicon- لفافه
glyphicon glyphicon-پنسل
glyphicon glyphicon-glass
glyphicon glyphicon-موسيقۍ
glyphicon glyphicon - لټون
glyphicon glyphicon- زړه
glyphicon glyphicon-star
glyphicon glyphicon-star-خالي
glyphicon glyphicon- کاروونکی
glyphicon glyphicon-فلم
glyphicon glyphicon-th-لوی
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon- لیرې کول
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom out
glyphicon glyphicon-off
glyphicon glyphicon-سګنال
glyphicon glyphicon-cog
glyphicon glyphicon-Trash
glyphicon glyphicon - کور
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon - دانلود
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-sircle
glyphicon glyphicon - تکرار
glyphicon glyphicon - تازه کول
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon - بيرغ
ګلیفیکون ګلیفیکون - هیډفونونه
glyphicon glyphicon-volum-off
glyphicon glyphicon-volum-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
glyphicon glyphicon- بک مارک
glyphicon glyphicon- چاپ
glyphicon glyphicon- کیمره
glyphicon glyphicon-font
glyphicon glyphicon-بولډ
glyphicon glyphicon-italic
glyphicon glyphicon-text-hight
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 - سمون
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon- check
glyphicon glyphicon - حرکت
glyphicon glyphicon- ګام- شاته
glyphicon glyphicon - چټک شاته
glyphicon glyphicon- شاته
glyphicon glyphicon-play
glyphicon glyphicon - وقفه
glyphicon glyphicon- stop
glyphicon glyphicon - مخکې
glyphicon glyphicon - ګړندی مخکی
glyphicon glyphicon - ګام په ګام
glyphicon glyphicon-eject
ګلیفیکون ګلیفیکون-شیورون-کیڼ
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-sircle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-sircle
glyphicon glyphicon-تیر-کیڼ
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 پاڼی
glyphicon glyphicon- اور
glyphicon glyphicon- سترګې خلاصې
glyphicon glyphicon- سترګې تړل
glyphicon glyphicon-خبرداری-نښه
glyphicon glyphicon-plane
ګلیفیکون ګلیفیکون-کلنډر
glyphicon glyphicon- تصادفي
glyphicon glyphicon - تبصره
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
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-thumbs up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon- لاس ښي
glyphicon glyphicon-لاس-کیڼ
glyphicon glyphicon لاس پورته کول
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon - دندې
glyphicon glyphicon-filter
glyphicon glyphicon-بریفکیس
glyphicon glyphicon-پوره سکرین
glyphicon glyphicon-ډشبورډ
glyphicon glyphicon-paperclip
glyphicon glyphicon - زړه - خالي
glyphicon glyphicon-link
glyphicon glyphicon-phone
glyphicon glyphicon-pushpin
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-ډول
glyphicon glyphicon- ترتیب-د الفبا
glyphicon glyphicon-ډول-ډول-حروف-alt
glyphicon glyphicon - په ترتیب سره
glyphicon glyphicon- ترتیب-په ترتیب-alt
glyphicon glyphicon-څېړنه-په واسطه-صفات
glyphicon glyphicon-sort-by-Atributes-alt
glyphicon glyphicon- unchecked
glyphicon glyphicon- پراخول
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon - نوې کړکۍ
glyphicon glyphicon-ریکارډ
glyphicon glyphicon - خوندي کول
glyphicon glyphicon- خلاص
glyphicon glyphicon خوندي شوی
glyphicon glyphicon- واردول
glyphicon glyphicon - صادرات
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-فلاپي-ژغورل شوی
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-کریډیټ کارت
glyphicon glyphicon - لیږد
glyphicon glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-برج
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon- فرعي سرلیکونه
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-د کاپی حق نښه
glyphicon glyphicon-registration-mark
glyphicon glyphicon-Cloud-download
glyphicon glyphicon-Cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon- د ونې-پرنزي
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-کاپي
glyphicon glyphicon - پیسټ
glyphicon glyphicon - خبرتیا
glyphicon glyphicon- equalizer
glyphicon glyphicon-king
glyphicon glyphicon-queen
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-نایټ
glyphicon glyphicon-baby-formula
glyphicon glyphicon-خیمه
glyphicon glyphicon-توربورډ
glyphicon glyphicon-بستر
glyphicon glyphicon- مڼه
glyphicon glyphicon- پاکول
glyphicon glyphicon-hourglass
glyphicon glyphicon- چراغ
glyphicon glyphicon - نقل
glyphicon glyphicon-piggy-bank
glyphicon glyphicon- کینچی
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-ruble
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-tated
glyphicon glyphicon-تعلیم
glyphicon glyphicon-اختیار-افقی
glyphicon glyphicon-اختیار-عمودی
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-تیل
glyphicon glyphicon- دانه
glyphicon glyphicon - لمر ګلاسونه
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-څيز-ساده-پورته
glyphicon glyphicon-څيز-سازي-لږ کې
glyphicon glyphicon-څيز-ساده-افقي
glyphicon glyphicon-څيز-ساده-کيڼ
glyphicon glyphicon-څيز-ساده-عمودي
glyphicon glyphicon-څيز-ساده-ښي
glyphicon glyphicon-مثلث-ښي
glyphicon glyphicon-مثلث-کیڼ اړخ
glyphicon glyphicon-مثلث-لاندې
glyphicon glyphicon-Trangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon - subscript
glyphicon glyphicon-مینو-کیڼ اړخ ته
glyphicon glyphicon-مینو-ښي
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

څنګه یی استعمال کړو

د فعالیت دلایلو لپاره ، ټول عکسونه د بیس کلاس او انفرادي آئیکون ټولګي ته اړتیا لري. د کارولو لپاره، لاندې کوډ په هر ځای کې ځای په ځای کړئ. ډاډ ترلاسه کړئ چې د سم پیډینګ لپاره د عکس او متن ترمینځ ځای پریږدئ.

د نورو برخو سره مخلوط مه کوئ

د آیکون ټولګي په مستقیم ډول د نورو برخو سره یوځای نشي. دوی باید په ورته عنصر کې د نورو ټولګیو سره ونه کارول شي. پرځای یې، یو نیسټ اضافه کړئ <span>او د آئیکون ټولګي په کې پلي کړئ <span>.

یوازې په خالي عناصرو کې د کارولو لپاره

د آیکون ټولګي باید یوازې په هغه عناصرو کې وکارول شي چې د متن مینځپانګه نلري او د ماشومانو عناصر نلري.

د آیکون فونټ موقعیت بدلول

بوټسټریپ ګومان کوي چې د آیکون فونټ فایلونه به په ../fonts/لارښود کې موقعیت ولري ، د ترتیب شوي CSS فایلونو سره تړاو لري. د دې فونټ فایلونو لیږدول یا نوم بدلول پدې معنی دي چې CSS له دریو لارو څخه یوه کې تازه کول:

@icon-font-pathد سرچینې لږ فایلونو کې او/یا @icon-font-nameتغیرات بدل کړئ .
د لږ کمپیلر لخوا چمتو شوي اړونده URLs اختیار وکاروئ.
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>

د بدلولو وړ، د لینکونو لیست ښودلو لپاره متناسب مینو. د ډراپ ډاون جاواسکریپټ پلگ ان سره متقابل جوړ شوی .

بېلګه

د ډراپ ډاون محرک او د ډراپ ډاون مینو دننه وتړئ .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>

ویشونکی

په ډراپ ډاون مینو کې د لینکونو جلا لړۍ ته ویشونکی اضافه کړئ.

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

د تڼۍ ګروپ سره په یوه کرښه کې د بټونو لړۍ یوځای کړئ. زموږ د بټونو پلگ ان سره اختیاري جاواسکریپټ راډیو او د چیک باکس سټایل چلند اضافه کړئ .

د تڼۍ ګروپونو کې اوزار او پاپور ځانګړي ترتیب ته اړتیا لري

کله چې په یو کې دننه عناصرو باندې د اوزار ټایپ یا پاپ اوور .btn-groupکاروئ، نو تاسو باید د container: 'body'ناغوښتل شوي اړخیزو اغیزو څخه د مخنیوي لپاره اختیار مشخص کړئ (لکه عنصر پراخیږي او/یا خپل ګردي کونجونه له لاسه ورکوي کله چې د اوزار ټایپ یا پاپ اوور پیل شي).

ډاډ ترلاسه کړئ چې سمه ده `role`او لیبل چمتو کړئ

د مرستندویه ټیکنالوژیو لپاره - لکه د سکرین لوستونکي - د دې لپاره چې د بټونو لړۍ ډله ایز وي، یو مناسب roleځانګړتیا ته اړتیا لري. د تڼۍ ګروپونو لپاره، دا به وي role="group"، په داسې حال کې چې اوزار بارونه باید یو ولري role="toolbar".

یو استثنا هغه ډلې دي چې یوازې یو واحد کنټرول لري (د مثال په توګه د عناصرو سره د توجیه شوي بټن ګروپونه ) یا ډراپ ډاؤن.<button>

برسېره پر دې، ګروپونو او وسیلو بارونو ته باید واضح لیبل ورکړل شي، ځکه چې ډیری مرستندویه ټیکنالوژي به د صحیح roleځانګړتیا شتون سره سره دوی اعلان نه کړي. په مثالونو کې چې دلته ورکړل شوي، موږ کاروو aria-label، مګر بدیلونه لکه څنګه aria-labelledbyچې کارول کیدی شي.

بنسټیز مثال

د تڼیو یو لړ لړۍ د دننه سره .btnوتړئ .btn-group.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

د ډیرو پیچلو اجزاوو لپاره <div class="btn-group">په a کې سیټونه یوځای کړئ.<div class="btn-toolbar">

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

اندازه کول

په ګروپ کې هرې تڼۍ ته د تڼۍ اندازه کولو ټولګیو پلي کولو پرځای، یوازې .btn-group-*هر یو ته اضافه کړئ .btn-group، په شمول کله چې ډیری ګروپونه ځړول.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

ځړول

یو .btn-groupپه بل کې ځای په ځای .btn-groupکړئ کله چې تاسو غواړئ د ډراپ ډاون مینو د بټونو لړۍ سره مخلوط کړئ.

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

عمودی توپیر

د تڼیو یو سیټ د افقی پر ځای په عمودی ډول ډک کړئ. د سپلیټ تڼۍ ډراپ ډاونونه دلته نه ملاتړ کیږي.

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

د توجیه شوي تڼۍ ډلې

د تڼیو یوه ډله جوړه کړئ چې په مساوي اندازې کې پراخ کړئ ترڅو د هغې د پلر ټول پلنوالی پراخ کړي. د تڼۍ ګروپ کې د تڼۍ ډراپ ډاونونو سره هم کار کوي.

د سرحدونو اداره کول

د ځانګړي HTML او CSS له امله چې د بټونو توجیه کولو لپاره کارول کیږي (یعنې display: table-cell) ، د دوی ترمینځ پولې دوه چنده شوي. په منظمه تڼۍ ګروپونو کې، margin-left: -1pxد لیرې کولو پر ځای د سرحدونو ډکولو لپاره کارول کیږي. په هرصورت، marginسره کار نه کوي display: table-cell. د پایلې په توګه، بوټسټریپ ته ستاسو د اصلاح کولو پورې اړه لري، تاسو ممکن غواړئ سرحدونه لرې یا بیا رنګ کړئ.

IE8 او سرحدونه

د انټرنیټ اکسپلورر 8 په توجیه شوي بټن ګروپ کې بټن باندې سرحدونه نه وړاندې کوي، که دا فعال <a>وي یا <button>عناصر. د دې شاوخوا ترلاسه کولو لپاره، هر تڼۍ په بل کې لپ کړئ .btn-group.

د نورو معلوماتو لپاره #12476 وګورئ .

د `<a>`عناصرو سره

یوازې د .btns لړۍ وتړئ .btn-group.btn-group-justified.

کیڼ منځنی سمه ده

کیڼ منځنی

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

لینکونه د بټونو په توګه کار کوي

که چیرې <a>عناصر د بټونو په توګه کار کولو لپاره کارول کیږي - د پاڼې دننه فعالیت هڅوي، د دې پرځای چې په اوسني پاڼه کې بل سند یا برخې ته لاړ شي - دوی ته هم باید یو مناسب ورکړل شي role="button".

د `<button>`عناصرو سره

<button>د عناصرو سره د توجیه شوي تڼۍ ګروپونو کارولو لپاره ، تاسو باید هره تڼۍ د تڼۍ ګروپ کې لپاس کړئ . ډیری براوزرونه عناصرو ته د توجیه کولو لپاره زموږ CSS په سمه توګه نه پلي <button>کوي، مګر ځکه چې موږ د تڼۍ ډراپ ډاون ملاتړ کوو، موږ کولی شو د هغې شاوخوا کار وکړو.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

د ډراپ ډاون مینو د متحرک کولو لپاره هره تڼۍ وکاروئ دا په دننه کې ځای په ځای .btn-groupکولو او مناسب مینو مارک اپ چمتو کولو سره.

د پلگ ان انحصار

د بټن ډراپ ډاونونه د ډراپ ډاون پلگ ان ته اړتیا لري ترڅو ستاسو د بوټسټریپ نسخه کې شامل شي.

د واحد تڼۍ ښکته کول

د ځینې لومړني مارک اپ بدلونونو سره یو تڼۍ په ډراپ ډاون ټګل کې بدل کړئ.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

د ویشلو تڼۍ ډراپ ډاون

په ورته ډول، د ورته مارک اپ بدلونونو سره د سپلایټ تڼۍ ډراپ ډاونونه جوړ کړئ، یوازې د جلا تڼۍ سره.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

اندازه کول

د تڼۍ ښکته کول د ټولو اندازو بټونو سره کار کوي.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

د ډراپ اپ توپیر

.dropupد والدینو په اضافه کولو سره پورته عناصرو ته د ډراپ ډاون مینو محرک کړئ .

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

د هر متن پر بنسټ مخکې، وروسته، یا دواړو خواوو ته د متن یا بټونو په اضافه کولو سره د فارم کنټرول پراخ کړئ <input>. .input-groupد یو سره وکاروئ .input-group-addonیا .input-group-btnیو واحد ته عناصر پری پینډ یا ضمیمه کړئ .form-control.

`<input>`یوازې متن

د کارولو څخه ډډه وکړئ<select> ځکه چې دوی د ویب کیټ براوزرونو کې په بشپړ ډول سټایل نشي کیدی.

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

اندازه کول

په خپل ځان کې د اړونده فارم اندازه کولو ټولګي اضافه کړئ .input-groupاو دننه مینځپانګې به په اوتومات ډول بیا اندازه شي — په هر عنصر کې د فارم کنټرول اندازې ټولګیو تکرارولو ته اړتیا نشته.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

چک بکسونه او د راډیو اډون

د متن پر ځای د ان پټ ګروپ اډون کې د چیک باکس یا راډیو اختیار ځای په ځای کړئ.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

تڼۍ اضافه

د ان پټ ګروپونو تڼۍ یو څه توپیر لري او د ځنځیر یوه اضافي کچې ته اړتیا لري. د دې پرځای .input-group-addon، تاسو به .input-group-btnد تڼیو د لپاس کولو لپاره کارولو ته اړتیا ولرئ. دا د ډیفالټ براوزر سټایلونو له امله اړین دی چې نشي ردیدلی.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

د ښکته کولو سره تڼۍ

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

قطع شوي بټونه

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

څو تڼۍ

پداسې حال کې چې تاسو کولی شئ په هر اړخ کې یوازې یو اضافه ولرئ، تاسو کولی شئ په یو واحد کې ډیری تڼۍ ولرئ .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

په بوټسټریپ کې موجود Navs شریک مارک اپ لري ، د بیس .navکلاس سره پیل کیږي ، او همدارنګه شریک ریاستونه. د هر سټایل تر مینځ د بدلولو لپاره د ترمیم کونکي ټولګي بدل کړئ.

د ټب پینلونو لپاره د navs کارول د JavaScript tabs پلگ ان ته اړتیا لري

د ټب کولو وړ ساحو سره د ټبونو لپاره، تاسو باید د جاوا سکریپټ پلگ ان tabs وکاروئ . مارک اپ به اضافي roleاو ARIA ځانګړتیاو ته هم اړتیا ولري - د نورو توضیحاتو لپاره د پلگ ان مثال مارک اپ وګورئ.

د نیویګیشن په توګه کارول شوي navs د لاسرسي وړ کړئ

که تاسو د نیویګیشن بار چمتو کولو لپاره navs کاروئ ، نو ډاډه اوسئ چې role="navigation"د خورا منطقي اصلي کانټینر کې یو اضافه کړئ <ul>، یا <nav>د ټول نیویګیشن شاوخوا یو عنصر وپلټئ. په خپل ځان کې رول مه اضافه کړئ <ul>، ځکه چې دا به د مرستندویه ټیکنالوژیو لخوا د حقیقي لیست په توګه د اعلان کیدو مخه ونیسي.

ټبونه

په یاد ولرئ چې .nav-tabsټولګی اساسی ټولګی ته اړتیا لری .nav.

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

ګولۍ

ورته HTML واخلئ، مګر .nav-pillsپرځای یې وکاروئ:

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

ګولۍ هم په عمودي توګه د سټیک وړ دي. یوازې اضافه کړئ .nav-stacked.

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

بس

په اسانۍ سره د 768px څخه پراخه سکرینونو کې د دوی د والدینو سره مساوي پلن ټبونه یا ګولۍ جوړ کړئ.nav-justified . په کوچنیو سکرینونو کې، د نیوی لینکونه پټ شوي دي.

جواز شوي navbar nav لینکونه اوس مهال ملاتړ نه کوي.

سفاري او ځواب ویونکي توجیه شوي navs

د v9.1.2 پورې، سفاري یوه بګ څرګندوي چې ستاسو د براوزر په افقی ډول بدلول په توجیه شوي نیوی کې د ریډرینګ تېروتنې لامل کیږي چې د تازه کولو وروسته پاکیږي. دا بګ په توجیه شوي نیوی مثال کې هم ښودل شوی .

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

غیر فعال شوي لینکونه

د هرې نیوی برخې (ټابونو یا ګولیو) لپاره ، د خړ لینکونو.disabled لپاره اضافه کړئ او هیڅ هوور اغیزې نلري .

د لینک فعالیت اغیزه نلري

دا ټولګي به یوازې <a>بڼه بدله کړي، نه فعالیت. دلته د لینکونو غیر فعالولو لپاره دودیز جاوا سکریپټ وکاروئ.

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

د ښکته کولو کارول

د یو څه اضافي HTML او ډراپ ډاون جاواسکریپټ پلگ ان سره د ډراپ ډاون مینو اضافه کړئ .

ټبونه د ښکته کیدو سره

<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 لینکونه اوس مهال ملاتړ نه کوي.

له مینځه تلونکي مینځپانګې

څرنګه چې بوټسټریپ نه پوهیږي چې ستاسو په نیوبار کې مینځپانګې څومره ځای ته اړتیا لري ، تاسو ممکن په دوهم قطار کې د مینځپانګې پوښلو سره مسلې سره مخ شئ. د دې حل کولو لپاره، تاسو کولی شئ:

د نوبار توکو اندازه یا عرض کم کړئ.
د ځواب ویونکي یوټیلټي ټولګیو په کارولو سره د نیوبار ځینې ځانګړي توکي د سکرین اندازې کې پټ کړئ .
هغه نقطه بدل کړئ چیرې چې ستاسو نوبار د سقوط او افقی حالت ترمینځ تیریږي. متغیر تنظیم @grid-float-breakpointکړئ یا خپل د رسنیو پوښتنې اضافه کړئ.

د سقوط شوي ګرځنده نیوبار بریک پواینټ بدلول

نوبار په خپل عمودي ګرځنده لید کې سقوط کوي کله چې ویو پورټ له 8 څخه تنګ وي @grid-float-breakpoint، او په افقی غیر ګرځنده لید کې پراخیږي کله چې ویو پورټ لږترلږه @grid-float-breakpointپه عرض کې وي. دا متغیر په لږ سرچینه کې تنظیم کړئ ترڅو کنټرول کړئ کله چې نوبار سقوط/پراخیږي. ډیفالټ ارزښت دی 768px(کوچنی "کوچنی" یا "ټابلیټ" سکرین).

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

د نوببار برانډ د خپل عکس سره د متن په بدلولو سره بدل کړئ <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>عناصرو کې اضافه کړئ چې په a کې نه وي <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>

.navbar-leftد یا .navbar-rightیوټیلټي ټولګیو په کارولو سره د نوي لینکونو، فورمو، بټونو، یا متن سره سمون ورکړئ . دواړه ټولګي به په ټاکل شوي لوري کې د CSS فلوټ اضافه کړي. <ul>د مثال په توګه، د نیوی لینکونو تنظیم کولو لپاره، دوی د اړونده یوټیلټي کلاس سره په جلا کې واچوئ .

.pull-leftدا ټولګي د او د مخلوط ایډ نسخې دي .pull-right، مګر دوی د وسیلو په سایزونو کې د نیوبار اجزاوو اسانه اداره کولو لپاره د رسنیو پوښتنو ته محدود شوي.

د ډیری اجزاوو په سمه توګه ترتیب کول

Navbars اوس مهال د ډیری .navbar-rightټولګیو سره محدودیت لري. .navbar-rightد منځپانګې په سمه توګه د ځای کولو لپاره، موږ په وروستي عنصر کې منفي حاشیه کاروو . کله چې د دې ټولګي په کارولو سره ډیری عناصر شتون ولري، دا حاشیې د هدف په توګه کار نه کوي.

موږ به دا بیا وګورو کله چې موږ کولی شو دا برخه په v4 کې بیا ولیکو.

د مرکز او پیډ نوبار منځپانګې ته .navbar-fixed-topیو .containerیا شامل کړئ ..container-fluid

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

د بدن پیډنګ ته اړتیا ده

ثابت نوبار به ستاسو نور محتويات پوښي، پرته لدې چې تاسو paddingد <body>. خپل ارزښتونه هڅه وکړئ یا لاندې زموږ ټوټه وکاروئ. لارښوونه: په ډیفالټ ډول، نوبار 50px لوړ دی.

body { padding-top: 70px; }

ډاډ ترلاسه کړئ چې دا د اصلي Bootstrap CSS وروسته شامل کړئ.

د مرکز او پیډ نوبار منځپانګې ته .navbar-fixed-bottomیو .containerیا شامل کړئ ..container-fluid

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

د بدن پیډنګ ته اړتیا ده

ثابت نوبار به ستاسو نور مینځپانګه پوښي ، پرته لدې چې تاسو 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>

breadcrumbs

په یوه نیویګیشنل درجه بندي کې د اوسني مخ موقعیت په ګوته کړئ.

جلا کونکي په اتوماتيک ډول په CSS کې :beforeاو له لارې اضافه کیږي content.

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

پاڼه کول

د خپل سایټ یا اپلیکیشن لپاره د څو مخونو پاڼې کولو برخې، یا د ساده پیجر بدیل سره د پاڼې کولو لینکونه چمتو کړئ .

ډیفالټ پاڼه کول

ساده صفحه کول د Rdio لخوا هڅول شوي، د ایپسونو او لټون پایلو لپاره عالي. لوی بلاک له لاسه ورکول سخت دي، په اسانۍ سره د توزیع وړ، او لوی کلک ساحې چمتو کوي.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

د پاڼې کولو برخې لیبل کول

د مخ کولو برخه باید په یو <nav>عنصر کې وتړل شي ترڅو دا د سکرین لوستونکو او نورو مرستندویه ټیکنالوژیو لپاره د نیویګیشن برخې په توګه وپیژني. برسېره پر دې، لکه څنګه چې یوه پاڼه احتمال لري چې مخکې له دې یو څخه زیات د نیویګیشن برخه ولري (لکه په سر کې ابتدايي نیویګیشن، یا د سائډبار نیویګیشن)، نو دا مشوره ورکول کیږي چې د دې هدف منعکس کولو aria-labelلپاره تشریح چمتو کړئ. <nav>د مثال په توګه، که د پاڼې کولو اجزا د لټون پایلو د یوې سیټ ترمنځ د تګ کولو لپاره کارول کیږي، یو مناسب لیبل کیدی شي aria-label="Search results pages".

معلول او فعال ریاستونه

لینکونه د مختلف شرایطو لپاره د تنظیم وړ دي. .disabledد نه کلیک کولو وړ لینکونو لپاره وکاروئ او .activeد اوسني مخ په نښه کولو لپاره.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

موږ وړاندیز کوو چې تاسو د دې لپاره فعال یا غیر فعال شوي اینکرونه بدل کړئ <span>، یا د مخکینۍ/راتلونکو تیرونو په حالت کې لنگر له مینځه یوسي، ترڅو د ټاکل شوي سټایلونو ساتلو پرمهال د کلک فعالیت لرې کړي.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

اندازه کول

لوی یا کوچنی پاڼه کول خوښوي؟ اضافه کړئ .pagination-lgیا .pagination-smد اضافي اندازو لپاره.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

پیجر

د سپک مارک اپ او سټایلونو سره د ساده مخ کولو پلي کولو لپاره ګړندي مخکیني او راتلونکي لینکونه. دا د ساده سایټونو لکه بلاګونو یا مجلو لپاره خورا ښه دی.

ډیفالټ مثال

د ډیفالټ په واسطه، پیجر مرکزونه لینکونه لري.

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

تړل شوي لینکونه

په بدیل سره، تاسو کولی شئ هر لینک د اړخونو سره سم کړئ:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

اختیاري معلول حالت

د پیجر لینکونه هم .disabledد صفحې څخه د عمومي کارونې ټولګي کاروي.

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

بېلګه

د نوي سرلیک بیلګه

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

شته تغیرات

د لیبل بڼه بدلولو لپاره لاندې ذکر شوي ترمیم کونکي ټولګي شامل کړئ.

د ابتدايي بریالیتوب معلوماتو د خطر خبرداری

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

ټن لیبل لرئ؟

د رینډینګ ستونزې رامینځته کیدی شي کله چې تاسو په یوه تنګ کانټینر کې لسګونه انلاین لیبلونه ولرئ ، هر یو خپل inline-blockعنصر لري (لکه د عکس په څیر). د دې شاوخوا لاره ترتیب کول display: inline-block;دي. د شرایطو او مثال لپاره، # 13219 وګورئ .

په لینکونو کې د اضافه کولو سره نوي یا نه لوستل شوي توکي په اسانۍ سره روښانه کړئ <span class="badge">، بوټسټریپ نیوایز او نور ډیر څه.

انباکس۴۲

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

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

د ځان سقوط

کله چې هیڅ نوي یا نا لوستل شوي توکي شتون نلري، بیجونه به په ساده ډول سقوط وکړي (د CSS :emptyانتخاب کونکي له لارې) په دې شرط چې هیڅ مینځپانګه شتون نلري.

د کراس براوزر مطابقت

:emptyبیجونه به په انټرنیټ اکسپلورر 8 کې پخپله سقوط ونه کړي ځکه چې دا د انتخاب کونکي لپاره ملاتړ نلري .

د فعال بحری ریاستونو سره تطابق

په ګولیو نیویګیشنونو کې په فعال حالتونو کې د بیجونو ځای په ځای کولو لپاره جوړ شوي سټایلونه شامل دي.

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

یو لږ وزن لرونکی، انعطاف وړ برخه چې کولی شي په اختیاري توګه ستاسو په سایټ کې کلیدي مینځپانګې ښودلو لپاره ټول لید پورټ پراخ کړي.

سلام نړی!

دا یو ساده هیرو واحد دی، یو ساده جمبوټرون سټایل برخه ده چې د ځانګړو مینځپانګو یا معلوماتو ته د اضافي پاملرنې غوښتنه کوي.

نور زده کړئ

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

د دې لپاره چې جمبوټرون بشپړ پلنوالی او پرته له ګردي کونجونو څخه جوړ شي، دا د ټولو .containers بهر کېږدئ او پرځای یې .containerدننه اضافه کړئ.

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

یو ساده شیل د دې لپاره چې h1په یوه پاڼه کې د مینځپانګې برخې په مناسبه توګه ځای په ځای کړي او برخې برخې کړي. دا کولی شي h1د ډیفالټ smallعنصر او همدارنګه ډیری نورې برخې (د اضافي سټایلونو سره) وکاروي.

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

د بوټسټریپ گرډ سیسټم د تمبنیل برخې سره پراخ کړئ ترڅو د عکسونو ، ویډیوګانو ، متن او نور ډیر څه په اسانۍ سره ښکاره شي.

که تاسو د مختلف لوړوالی او/یا عرضونو تمبنیلز د Pinterest په څیر پریزنټشن په لټه کې یاست، نو تاسو به د دریمې ډلې پلگ ان کارولو ته اړتیا ولرئ لکه معمار ، اسوټوپ ، یا سالواټور .

ډیفالټ مثال

د ډیفالټ په واسطه، د بوټسټریپ تمبیلونه د لږترلږه اړین مارک اپ سره تړل شوي عکسونو ښودلو لپاره ډیزاین شوي.

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

دودیز منځپانګې

د یو څه اضافي مارک اپ سره، دا ممکنه ده چې هر ډول HTML منځپانګې لکه سرلیکونه، پراګرافونه، یا تڼۍ په تمبیلونو کې اضافه کړئ.

د تمبیل لیبل

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

تڼۍ تڼۍ

د تمبیل لیبل

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

تڼۍ تڼۍ

د تمبیل لیبل

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

تڼۍ تڼۍ

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

د لاسي موجود او انعطاف وړ خبرتیا پیغامونو سره د عادي کارونکي عملونو لپاره د متناسب فیډبیک پیغامونه چمتو کړئ.

مثالونه

د لومړني خبرتیا پیغامونو لپاره هر متن او د اختیاري برطرف کولو تڼۍ .alertاو د څلورو متناسب ټولګیو څخه یوه (د مثال په توګه ) لپاسه کړئ..alert-success

هیڅ ډیفالټ ټولګي نشته

خبرتیاوې ډیفالټ ټولګي نلري، یوازې بیس او ترمیم کونکي ټولګي. د ډیفالټ خړ خبرتیا ډیر معنی نه لري، نو تاسو اړتیا لرئ چې د اړونده ټولګي له لارې یو ډول مشخص کړئ. د بریالیتوب، معلوماتو، خبرتیا، یا خطر څخه غوره کړئ.

ډیر ښه! تاسو دا مهم خبرتیا پیغام په بریالیتوب سره ولولئ.

پورته شه! دا خبرتیا ستاسو پام ته اړتیا لري، مګر دا خورا مهم نه دی.

خبرتیا! غوره ده چې خپل ځان وګورئ، تاسو ډیر ښه نه ښکاري.

اوه ټویټ! یو څو شیان بدل کړئ او بیا د سپارلو هڅه وکړئ.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

د ردولو وړ خبرتیاوې

د اختیاري .alert-dismissibleاو نږدې تڼۍ په اضافه کولو سره په هر ډول خبرتیا کې جوړ کړئ.

د JavaScript خبرتیا پلگ ان ته اړتیا لري

د بشپړ کار کولو لپاره، د ردولو وړ خبرتیاوې، تاسو باید د جاوا سکریپټ پلگ ان خبرتیا وکاروئ .

خبرتیا! غوره ده چې خپل ځان وګورئ، تاسو ډیر ښه نه ښکاري.

<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 لیږدونه او متحرکات کاروي. دا ځانګړتیاوې په انټرنیټ اکسپلورر 9 او د فایرفوکس لاندې یا پخوانیو نسخو کې نه ملاتړ کیږي. اوپیرا 12 د متحرکاتو ملاتړ نه کوي.

د مینځپانګې امنیت پالیسي (CSP) مطابقت

که ستاسو ویب پاڼه د منځپانګې امنیت پالیسي (CSP) ولري چې اجازه نه ورکوي style-src 'unsafe-inline'، نو تاسو به د دې وړتیا ونلرئ چې د انلاین styleځانګړتیاوو څخه کار واخلئ ترڅو د پرمختګ بار پلنوالی تنظیم کړئ لکه څنګه چې زموږ په لاندې مثالونو کې ښودل شوي. د پلنوالی ترتیب کولو لپاره بدیل میتودونه چې د سخت CSPs سره مطابقت لري د لږ دودیز جاوا سکریپټ کارول (هغه سیټ 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د پرمختګ بار ته د اضافه کولو په اړه غور وکړئ.

۰٪

2%

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

متناسب بدیلونه

د پرمختګ بارونه د ورته سټایلونو لپاره ځینې ورته تڼۍ او خبرتیا ټولګي کاروي.

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

پټه

د پټو اغیزو رامینځته کولو لپاره تدریجي کارول کیږي. په IE9 او لاندې کې شتون نلري.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

متحرک

د ښي څخه کیڼ اړخ ته د پټو متحرک .activeکولو لپاره اضافه کړئ . .progress-bar-stripedپه IE9 او لاندې کې شتون نلري.

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

پټه شوې

ډیری بارونه په ورته ځای کې ځای په ځای .progressکړئ ترڅو دوی ذخیره کړي.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

د مختلف ډولونو اجزاو جوړولو لپاره د خلاصې څیز سټایلونه (لکه د بلاګ تبصرې ، ټویټونه ، او داسې نور) چې د متن مینځپانګې تر څنګ کیڼ یا ښي اړخ عکس لري.

ډیفالټ رسنۍ

ډیفالټ میډیا د مینځپانګې بلاک چپ یا ښیې ته د میډیا څیز (انځورونه ، ویډیو ، آډیو) ښیې.

د رسنیو سرلیک

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

د رسنیو سرلیک

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

د رسنیو سرلیک

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

د رسنیو سرلیک

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

د رسنیو سرلیک

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

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

ټولګي .pull-leftاو .pull-rightهم شتون لري او پخوا د میډیا برخې برخې په توګه کارول کیده، مګر د v3.3.0 په توګه د دې کارونې لپاره محروم شوي. دوی تقریبا د .media-leftاو سره مساوي دي .media-right، پرته له دې چې .media-rightباید .media-bodyپه html کې وروسته ځای پرځای شي.

د رسنیو سمون

انځورونه یا نورې رسنۍ کیدای شي پورته، منځنی یا ښکته سره سمون ولري. ډیفالټ پورته سره سمون لري.

د لوړ تنظیم شوي رسنۍ

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec 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 ridiculus mus.

منځنی مربوط رسنۍ

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec 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 ridiculus mus.

لاندینۍ برخه میډیا

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec 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 ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

د رسنیو لیست

د یو څه اضافي مارک اپ سره ، تاسو کولی شئ د لیست دننه میډیا وکاروئ (د تبصرو موضوعاتو یا مقالو لیستونو لپاره ګټور).

د رسنیو سرلیک

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

د رسنیو سرلیک
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

د رسنیو سرلیک
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

د رسنیو سرلیک
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

د لیست ګروپونه نه یوازې د عناصرو ساده لیستونو ښودلو لپاره انعطاف وړ او ځواکمن اجزا دي ، بلکه د دودیز مینځپانګې سره پیچلي.

بنسټیز مثال

ترټولو بنسټیز لیست ګروپ په ساده ډول د لیست توکو، او مناسبو ټولګیو سره یو غیر منظم لیست دی. په دې باندې د هغه اختیارونو سره جوړ کړئ چې پیروي کوي، یا ستاسو خپل CSS د اړتیا سره سم.

Cras justo odio
Dapibus ac facilisis in
موربي لیو ریسس
Porta ac consectetur ac
Vestibulum په eros

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

برجونه

د هر لیست ګروپ توکي ته د بیج اجزا اضافه کړئ او دا به په اوتومات ډول ښي خوا ته موقعیت ولري.

14Cras justo odio
2Dapibus ac facilisis in
1موربي لیو ریسس

<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 موربي لیو ریسس Porta ac consectetur ac Vestibulum په eros

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

تڼۍ توکي

د لیست ګروپ توکي ممکن د لیست توکو پرځای تڼۍ وي (دا د مور <div>پر ځای د والدین معنی هم لري <ul>). د هر عنصر شاوخوا انفرادي والدینو ته اړتیا نشته. دلته معیاري ټولګي مه کاروئ ..btn

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

معیوب شوي توکي

.disabledA ته اضافه کړئ ترڅو .list-group-itemخړ شي چې معلول ښکاري.

Cras justo odio Dapibus ac facilisis in موربي لیو ریسس Porta ac consectetur ac Vestibulum په eros

<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
Vestibulum په eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum په eros

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

دودیز منځپانګې

په دننه کې نږدې هر HTML اضافه کړئ، حتی د تړل شوي لیست ګروپونو لپاره لکه لاندې یو.

د ګروپ توکي سرلیک لیست کړئ

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

د ګروپ توکي سرلیک لیست کړئ

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

د ګروپ توکي سرلیک لیست کړئ

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

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

پداسې حال کې چې تل اړین نه وي، ځینې وختونه تاسو اړتیا لرئ چې خپل DOM په یوه بکس کې واچوئ. د دې حالتونو لپاره، د پینل برخې هڅه وکړئ.

بنسټیز مثال

د ډیفالټ په واسطه، ټول کارونه د .panelځینې منځپانګې درلودو لپاره ځینې بنسټیز سرحد او پیډینګ پلي کوي.

بنسټیز پینل بیلګه

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

د سر سره پینل

په اسانۍ سره خپل پینل ته د سرلیک کانټینر اضافه کړئ .panel-heading. تاسو ممکن هر یو هم شامل کړئ <h1>- <h6>د .panel-titleټولګي سره د مخکې سټایل شوي سرلیک اضافه کولو لپاره. <h1>په هرصورت، د - د فونټ اندازه <h6>د .panel-heading.

د مناسب لینک رنګ کولو لپاره، ډاډ ترلاسه کړئ چې لینکونه په سرلیکونو کې دننه کړئ .panel-title.

پرته د سرلیک پینل

د پینل منځپانګې

د پینل سرلیک

د پینل منځپانګې

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

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

د فوټر سره پینل

تڼۍ یا ثانوي متن په کې وتړئ .panel-footer. په یاد ولرئ چې د پینل فوټرونه رنګونه او سرحدونه په میراث نه لري کله چې د شرایطو تغیرات کاروي ځکه چې دوی په مخکینۍ برخه کې ندي.

د پینل منځپانګې

د پینل فوټر

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

متناسب بدیلونه

د نورو اجزاوو په څیر، په اسانۍ سره یو پینل په ځانګړي شرایطو کې د هرډول شرایطو ریاست ټولګیو اضافه کولو سره ډیر معنی لرونکی کړئ.

د پینل سرلیک

د پینل منځپانګې

د پینل سرلیک

د پینل منځپانګې

د پینل سرلیک

د پینل منځپانګې

د پینل سرلیک

د پینل منځپانګې

د پینل سرلیک

د پینل منځپانګې

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

د میزونو سره

.tableد بې پولې ډیزاین لپاره په پینل کې هر ډول بې سرحده اضافه کړئ . که چیرې شتون ولري .panel-body، موږ د جلا کولو لپاره د میز په سر کې اضافي سرحد اضافه کوو.

د پینل سرلیک

دلته ځینې ډیفالټ پینل مینځپانګه. Nulla vitae elit libero, a pharatra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	لومړی نوم	تخلص	کارن نوم
1	مارک	اوټو	@mdo
2	یعقوب	تورټن	@ غوړ
3	لاري	مرغۍ	@ټویټر

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

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

که چیرې د پینل بدن شتون ونلري، اجزا پرته له خنډ څخه د پینل سرلیک څخه میز ته حرکت کوي.

د پینل سرلیک

#	لومړی نوم	تخلص	کارن نوم
1	مارک	اوټو	@mdo
2	یعقوب	تورټن	@ غوړ
3	لاري	مرغۍ	@ټویټر

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

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

د لیست ګروپونو سره

په اسانۍ سره په هر پینل کې د بشپړ چوکۍ لیست ګروپونه شامل کړئ .

د پینل سرلیک

دلته ځینې ډیفالټ پینل مینځپانګه. Nulla vitae elit libero, a pharatra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

Cras justo odio
Dapibus ac facilisis in
موربي لیو ریسس
Porta ac consectetur ac
Vestibulum په eros

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

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

براوزرانو ته اجازه ورکړئ چې د ویډیو یا سلایډ شو ابعادونه د دوی د بلاک د عرض پراساس د داخلي تناسب رامینځته کولو سره وټاکي چې په هر وسیله به په سمه توګه اندازه کړي.

قواعد په مستقیم ډول په <iframe>, <embed>, <video>, او <object>عناصرو باندې پلي کیږي؛ .embed-responsive-itemکله چې تاسو غواړئ د نورو ځانګړتیاو لپاره سټایل سره سمون ولرئ په اختیاري توګه د واضح نسل ټولګي وکاروئ.

پرو ټیک! تاسو اړتیا نلرئ 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>

اجزا

ګلیفیکون

شته ګلیفونه

څنګه یی استعمال کړو

د نورو برخو سره مخلوط مه کوئ

یوازې په خالي عناصرو کې د کارولو لپاره

د آیکون فونټ موقعیت بدلول

د لاسرسي وړ شبیهونه

مثالونه

ښکته کول

بېلګه

السلیک

ممکن اضافي موقعیت ته اړتیا ولري

تخریب شوی .pull-rightسمون

سرلیکونه

ویشونکی

غیر فعال مینو توکي

د تڼۍ ډلې

د تڼۍ ګروپونو کې اوزار او پاپور ځانګړي ترتیب ته اړتیا لري

ډاډ ترلاسه کړئ چې سمه ده roleاو لیبل چمتو کړئ

بنسټیز مثال

د تڼۍ وسیلې

اندازه کول

ځړول

عمودی توپیر

د توجیه شوي تڼۍ ډلې

د سرحدونو اداره کول

IE8 او سرحدونه

د <a>عناصرو سره

لینکونه د بټونو په توګه کار کوي

د <button>عناصرو سره

تڼۍ ښکته کول

د پلگ ان انحصار

د واحد تڼۍ ښکته کول

د ویشلو تڼۍ ډراپ ډاون

اندازه کول

د ډراپ اپ توپیر

د ننوتلو ګروپونه

<input>یوازې متن

په ان پټ ګروپونو کې وسیلې او پاپور ځانګړي ترتیب ته اړتیا لري

د نورو برخو سره مخلوط مه کوئ

تل لیبلونه اضافه کړئ

بنسټیز مثال

اندازه کول

چک بکسونه او د راډیو اډون

تڼۍ اضافه

د ښکته کولو سره تڼۍ

قطع شوي بټونه

څو تڼۍ

Navs

د ټب پینلونو لپاره د navs کارول د JavaScript tabs پلگ ان ته اړتیا لري

د نیویګیشن په توګه کارول شوي navs د لاسرسي وړ کړئ

ټبونه

ګولۍ

بس

سفاري او ځواب ویونکي توجیه شوي navs

غیر فعال شوي لینکونه

د لینک فعالیت اغیزه نلري

د ښکته کولو کارول

ټبونه د ښکته کیدو سره

ګولۍ د ښکته کیدو سره

نوبار

ډیفالټ نوبار

له مینځه تلونکي مینځپانګې

جاواسکریپټ پلگ ان ته اړتیا لري

د سقوط شوي ګرځنده نیوبار بریک پواینټ بدلول

نوبارونه د لاسرسي وړ کړئ

د برانډ انځور

فورمې

د ګرځنده وسیلو خبرداری

تل لیبلونه اضافه کړئ

تڼۍ

د شرایطو ځانګړي کارول

متن

غیر نیوی لینکونه

د اجزاو سمون

د ډیری اجزاوو په سمه توګه ترتیب کول

په سر کې ټاکل شوی

د بدن پیډنګ ته اړتیا ده

لاندې ته ټاکل شوی

تخریب شوی `.pull-right`سمون

ډاډ ترلاسه کړئ چې سمه ده `role`او لیبل چمتو کړئ

د `<a>`عناصرو سره

د `<button>`عناصرو سره

`<input>`یوازې متن