ګلیفیکون

شته ګلیفونه

د ګلیفیکون هافلینګ سیټ څخه د فونټ فارمیټ کې له 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

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

ډراپ ډاونونه په اتوماتيک ډول د سند په نورمال جریان کې د CSS له لارې موقعیت لري. دا پدې مانا ده چې ډراپ ډاون ممکن د والدینو لخوا د ځانګړي overflowملکیتونو سره کرل شوي وي یا د لید پورټ له حد څخه بهر ښکاري. دا مسلې په خپله حل کړئ لکه څنګه چې دوی راپورته کیږي.

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

د v3.1.0 په څیر، موږ د ډراپ ډاون .pull-rightمینو څخه محروم کړی دی. د مینو د ښي اړخ تنظیم کولو لپاره، وکاروئ .dropdown-menu-right. په نوبار کې د ښي اړخ سره تړل شوي nav برخې د دې ټولګي مکسین نسخه کاروي ترڅو په اوتومات ډول مینو تنظیم کړي. د دې د پورته کولو لپاره، وکاروئ .dropdown-menu-left.

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

په هر ډراپ ډاون مینو کې د عملونو برخو لیبل کولو لپاره سرلیک اضافه کړئ.

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

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

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

د لینک غیر فعالولو لپاره په ډراپ ډاون کې .disabledاضافه کړئ .<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

د تڼۍ ډلې

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

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

کله چې په یو کې دننه عناصرو باندې د اوزار ټایپ یا پاپ اوور .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

موږ په یوه ان پټ ګروپ کې د ډیری فارم کنټرولونو ملاتړ نه کوو.

@

@example.com

ډالر .00

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

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

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

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

اندازه کول

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

@

@

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

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

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

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

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

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

تڼۍ اضافه

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

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

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

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

قطع شوي بټونه

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

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

څو تڼۍ

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

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

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

Navs

په بوټسټریپ کې موجود 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 لینکونه اوس مهال ملاتړ نه کوي.

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

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

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

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

که چیرې جاواسکریپټ غیر فعال وي او ویو پورټ دومره تنګ وي چې نوبار سقوط وکړي ، نو دا به ناشونې وي چې د نیوبار پراخول او مینځپانګې په .navbar-collapse.

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

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

نوبار په خپل عمودي ګرځنده لید کې سقوط کوي کله چې ویو پورټ له 8 څخه تنګ وي @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>

د نوببار برانډ د خپل عکس سره د متن په بدلولو سره بدل کړئ <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-btnکې کارول کیدی شي . په هرصورت، نه او نه هم د معیاري تڼۍ ټولګي باید په عناصرو کې وکارول شي .<a><input>.navbar-btn<a>.navbar-nav

د متن تارونه په یو عنصر کې لپاسه کړئ .navbar-text، معمولا <p>د مناسب مخکښ او رنګ لپاره په ټاګ کې.

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

د هغو خلکو لپاره چې معیاري لینکونه کاروي کوم چې د منظم نیویګ نیویګیشن برخې کې ندي، .navbar-linkد ډیفالټ او انورس نیوبار انتخابونو لپاره مناسب رنګونو اضافه کولو لپاره ټولګي وکاروئ.

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

.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 منځپانګې لکه سرلیکونه، پراګرافونه، یا تڼۍ په تمبیلونو کې اضافه کړئ.

100%x200

د تمبیل لیبل

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

تڼۍ تڼۍ

100%x200

د تمبیل لیبل

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

تڼۍ تڼۍ

100%x200

د تمبیل لیبل

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

تڼۍ تڼۍ

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

خبرتیاوې

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

مثالونه

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

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

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

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

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

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

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

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

<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 ټولګیو کارول شامل دي.

بنسټیز مثال

د ډیفالټ پرمختګ بار.

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

د لیبل سره

د لیدونکي فیصدي ښودلو لپاره د پرمختګ بار څخه د ټولګي <span>سره لرې کړئ ..sr-only

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

د دې لپاره چې ډاډ ترلاسه شي چې د لیبل متن حتی د ټیټ فیصدو لپاره د منلو وړ پاتې کیږي، min-widthد پرمختګ بار ته د اضافه کولو په اړه غور وکړئ.

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

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

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

40٪ بشپړ (بریالی)
20٪ بشپړ
60٪ بشپړ (خبرداری)
80٪ بشپړ (خطر)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

پټه

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

40٪ بشپړ (بریالی)
20٪ بشپړ
60٪ بشپړ (خبرداری)
80٪ بشپړ (خطر)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

متحرک

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

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

پټه شوې

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

35٪ بشپړ (بریالی)
20٪ بشپړ (خبرداری)
10٪ بشپړ (خطر)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

د رسنیو اعتراض

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

ډیفالټ رسنۍ

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

د رسنیو سرلیک

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. 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>). د هر عنصر شاوخوا انفرادي والدینو ته اړتیا نشته.

<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خړ شي چې معلول ښکاري.

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

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

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

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

پینلونه

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

بنسټیز مثال

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

بنسټیز پینل بیلګه
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

د سر سره پینل

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

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

پرته د سرلیک پینل
د پینل منځپانګې

د پینل سرلیک

د پینل منځپانګې
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

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

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

د پینل منځپانګې
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

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

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

د پینل سرلیک

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

د پینل سرلیک

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

د پینل سرلیک

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

د پینل سرلیک

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

د پینل سرلیک

د پینل منځپانګې
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

د میزونو سره

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

د پینل سرلیک

دلته ځینې ډیفالټ پینل مینځپانګه. Nulla vitae elit libero, a 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>