دستیاب گلائف

Glyphicon Halflings سیٹ سے فونٹ کی شکل میں 250 سے زیادہ گلائف شامل ہیں۔ Glyphicons Halflings عام طور پر مفت میں دستیاب نہیں ہوتے ہیں، لیکن ان کے خالق نے انہیں Bootstrap کے لیے مفت دستیاب کرایا ہے۔ آپ کے شکریہ کے طور پر، ہم صرف یہ کہتے ہیں کہ جب بھی ممکن ہو آپ سے Glyphicons کا لنک شامل کریں۔

glyphicon glyphicon-asterisk
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-Cloud
glyphicon glyphicon-لفافہ
glyphicon glyphicon-pencil
glyphicon glyphicon-glass
glyphicon glyphicon-موسیقی
glyphicon glyphicon-تلاش
glyphicon glyphicon-دل
glyphicon glyphicon-star
glyphicon glyphicon-star-empty
glyphicon glyphicon-صارف
glyphicon glyphicon-film
glyphicon glyphicon-th-large
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-remove
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon بند
glyphicon glyphicon-signal
glyphicon glyphicon-cog
glyphicon glyphicon- ردی کی ٹوکری
glyphicon glyphicon-گھر
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-download
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-دہرائیں۔
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon- پرچم
glyphicon glyphicon-headphones
glyphicon glyphicon-volum-off
glyphicon glyphicon-volum-down
glyphicon glyphicon-volum-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-barcode
glyphicon glyphicon-tag
glyphicon glyphicon-tags
glyphicon glyphicon-book
glyphicon glyphicon-بک مارک
glyphicon glyphicon-print
glyphicon glyphicon-camera
glyphicon glyphicon-font
glyphicon glyphicon بولڈ
glyphicon glyphicon-italic
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon کی فہرست
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-تصویر
glyphicon glyphicon-map-marker
glyphicon glyphicon-ایڈجسٹ
glyphicon glyphicon-tint
glyphicon glyphicon-ترمیم
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-move
glyphicon glyphicon-step-backward
glyphicon glyphicon-تیزی سے پیچھے کی طرف
glyphicon glyphicon-پسماندہ
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-آگے
glyphicon glyphicon-fast-forward
glyphicon glyphicon-step-forward
glyphicon glyphicon-Eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-سوال کا نشان
glyphicon glyphicon-info-sign
glyphicon glyphicon-اسکرین شاٹ
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-تیر-بائیں
glyphicon glyphicon-arrow-right
glyphicon glyphicon-ar-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-leaf
glyphicon glyphicon-fire
glyphicon glyphicon-آنکھیں کھولنا
glyphicon glyphicon- آنکھ بند
glyphicon glyphicon-انتباہی-سائن
glyphicon glyphicon-plane
glyphicon glyphicon-calendar
glyphicon glyphicon-random
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- hand- right
glyphicon glyphicon- ہاتھ سے بائیں
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-ar-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
glyphicon glyphicon-wrench
glyphicon glyphicon-tasks
glyphicon glyphicon-filter
glyphicon glyphicon-بریف کیس
glyphicon glyphicon-فل سکرین
glyphicon glyphicon-deshboard
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-shart-by-alphabet-alt
glyphicon glyphicon- ترتیب بہ ترتیب
glyphicon glyphicon- ترتیب بہ ترتیب- Alt
glyphicon glyphicon-صفات کے لحاظ سے ترتیب دیں۔
glyphicon glyphicon-sort-by-atributes-alt
glyphicon glyphicon-غیر نشان زد
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collaps-up
glyphicon glyphicon-log-in
glyphicon glyphicon-flash
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-ریکارڈ
glyphicon glyphicon-save
glyphicon glyphicon-اوپن
glyphicon glyphicon محفوظ شدہ
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-send
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-منتقلی
glyphicon glyphicon-cutlery
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-earphone
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-status
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-subtitles
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
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-equizer
glyphicon glyphicon-king
glyphicon glyphicon-queen
glyphicon glyphicon-pawn
glyphicon glyphicon-bishop
glyphicon glyphicon-night
glyphicon glyphicon-baby-formula
glyphicon glyphicon-tent
glyphicon glyphicon-بلیک بورڈ
glyphicon glyphicon-bed
glyphicon glyphicon-apple
glyphicon glyphicon-Erease
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-چکھا۔
glyphicon glyphicon-تعلیم
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon- oil
glyphicon glyphicon-grain
glyphicon glyphicon- دھوپ کے چشمے
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-مثلث-دائیں
glyphicon glyphicon-مثلث-بائیں
glyphicon glyphicon-مثلث-نیچے
glyphicon glyphicon-triangle-top
glyphicon glyphicon-console
glyphicon glyphicon-superscript
glyphicon glyphicon-subscript
glyphicon glyphicon-مینیو-بائیں
glyphicon glyphicon-menu- right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

استعمال کرنے کا طریقہ

کارکردگی کی وجوہات کی بناء پر، تمام آئیکنز کو بیس کلاس اور انفرادی آئیکن کلاس کی ضرورت ہوتی ہے۔ استعمال کرنے کے لیے، درج ذیل کوڈ کو کہیں بھی لگائیں۔ مناسب پیڈنگ کے لیے آئیکن اور ٹیکسٹ کے درمیان جگہ چھوڑنا یقینی بنائیں۔

دوسرے اجزاء کے ساتھ مکس نہ کریں۔

آئیکن کلاسز کو براہ راست دوسرے اجزاء کے ساتھ جوڑا نہیں جا سکتا۔ انہیں ایک ہی عنصر پر دوسری کلاسوں کے ساتھ استعمال نہیں کیا جانا چاہئے۔ اس کے بجائے، ایک نیسٹڈ شامل کریں <span>اور آئیکن کلاسز کو پر لاگو کریں <span>۔

صرف خالی عناصر پر استعمال کے لیے

آئیکن کلاسز صرف ان عناصر پر استعمال کی جانی چاہئیں جن میں کوئی متنی مواد نہ ہو اور ان میں بچوں کے عناصر نہ ہوں۔

آئیکن فونٹ کا مقام تبدیل کرنا

بوٹسٹریپ فرض کرتا ہے کہ آئیکن فونٹ فائلیں ../fonts/ڈائرکٹری میں موجود ہوں گی، مرتب کردہ سی ایس ایس فائلوں کے نسبت۔ ان فونٹ فائلوں کو منتقل کرنے یا ان کا نام تبدیل کرنے کا مطلب ہے CSS کو تین طریقوں میں سے ایک میں اپ ڈیٹ کرنا:

@icon-font-pathسورس کم فائلوں میں اور/یا @icon-font-nameمتغیرات کو تبدیل کریں۔
کم کمپائلر کے ذریعہ فراہم کردہ متعلقہ URLs کے آپشن کو استعمال کریں ۔
url()مرتب کردہ سی ایس ایس میں راستے تبدیل کریں ۔

جو بھی آپشن آپ کے مخصوص ڈیولپمنٹ سیٹ اپ کے مطابق ہو اسے استعمال کریں۔

قابل رسائی شبیہیں

معاون ٹیکنالوجیز کے جدید ورژن 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کرنے کے لیے a میں شامل کریں ۔.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>

بٹن گروپ کے ساتھ ایک لائن پر بٹنوں کی ایک سیریز کو ایک ساتھ گروپ کریں۔ ہمارے بٹن پلگ ان کے ساتھ اختیاری JavaScript ریڈیو اور چیک باکس طرز کا رویہ شامل کریں ۔

بٹن گروپس میں ٹول ٹپس اور پاپ اوور خاص ترتیب کی ضرورت ہوتی ہے۔

ٹول ٹِپ یا پاپ اوور کے اندر موجود عناصر پر استعمال کرتے وقت .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>

ڈراپ ڈاؤن مینو کو متحرک کرنے کے لیے کسی بھی بٹن کو a کے اندر رکھ کر .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>`s

یہاں عناصر کے استعمال سے گریز <select>کریں کیونکہ انہیں WebKit براؤزر میں مکمل طور پر اسٹائل نہیں کیا جا سکتا۔

<textarea>یہاں عناصر کے استعمال سے گریز کریں کیونکہ rowsبعض صورتوں میں ان کی صفت کا احترام نہیں کیا جائے گا۔

ان پٹ گروپس میں ٹول ٹپس اور پاپ اوور کو خاص ترتیب کی ضرورت ہوتی ہے۔

ٹول ٹِپ یا پاپ اوور کے اندر موجود عناصر پر استعمال کرتے وقت .input-group، آپ کو container: 'body'ناپسندیدہ ضمنی اثرات سے بچنے کے لیے آپشن کی وضاحت کرنی ہوگی (جیسے کہ ٹول ٹِپ یا پاپ اوور کے متحرک ہونے پر عنصر کا وسیع تر ہوتا جانا اور/یا اپنے گول کونوں کو کھو جانا)۔

دوسرے اجزاء کے ساتھ مکس نہ کریں۔

فارم گروپس یا گرڈ کالم کلاسز کو براہ راست ان پٹ گروپس کے ساتھ نہ ملا دیں۔ اس کے بجائے، ان پٹ گروپ کو فارم گروپ یا گرڈ سے متعلق عنصر کے اندر گھوںسلا کریں۔

ہمیشہ لیبلز شامل کریں۔

اگر آپ ہر ان پٹ کے لیے لیبل شامل نہیں کرتے ہیں تو اسکرین ریڈرز کو آپ کے فارمز میں پریشانی ہوگی۔ ان پٹ گروپس کے لیے، اس بات کو یقینی بنائیں کہ کوئی اضافی لیبل یا فعالیت معاون ٹیکنالوجیز تک پہنچائی جائے۔

استعمال کی جانے والی قطعی تکنیک (مرئی <label>عناصر، طبقے <label>کا استعمال کرتے ہوئے چھپے ہوئے عناصر ، یا , , یا انتساب کا استعمال ) اور کون سی اضافی معلومات پہنچانے کی ضرورت ہوگی اس بات پر منحصر ہے کہ آپ جس انٹرفیس ویجیٹ کو لاگو کر رہے ہیں اس کے مطابق مختلف ہوگی۔ اس سیکشن میں دی گئی مثالیں چند تجویز کردہ، کیس سے متعلق مخصوص نقطہ نظر فراہم کرتی ہیں۔.sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

بنیادی مثال

ان پٹ کے دونوں طرف ایک ایڈ آن یا بٹن رکھیں۔ آپ ان پٹ کے دونوں طرف ایک بھی رکھ سکتے ہیں۔

ہم ایک ہی طرف متعدد ایڈ آنز ( .input-group-addonیا .input-group-btn) کو سپورٹ نہیں کرتے ہیں۔

ہم ایک ان پٹ گروپ میں متعدد فارم کنٹرولز کی حمایت نہیں کرتے ہیں۔

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

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

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

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

سائز کرنا

متعلقہ فارم سائزنگ کلاسز کو .input-groupخود میں شامل کریں اور اندر موجود مواد کا خود بخود سائز تبدیل ہو جائے گا — ہر عنصر پر فارم کنٹرول سائز کلاسز کو دہرانے کی ضرورت نہیں ہے۔

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

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

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

چیک باکسز اور ریڈیو ایڈونز

ٹیکسٹ کی بجائے کسی بھی چیک باکس یا ریڈیو آپشن کو ان پٹ گروپ کے ایڈون میں رکھیں۔

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

بٹن ایڈونز

ان پٹ گروپس میں بٹن کچھ مختلف ہوتے ہیں اور ان کے لیے ایک اضافی لیول کی ضرورت ہوتی ہے۔ اس کے بجائے .input-group-addon، آپ کو .input-group-btnبٹنوں کو لپیٹنے کے لیے استعمال کرنے کی ضرورت ہوگی۔ یہ پہلے سے طے شدہ براؤزر اسٹائلز کی وجہ سے درکار ہے جسے اوور رائڈ نہیں کیا جاسکتا۔

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

ڈراپ ڈاؤن کے ساتھ بٹن

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

منقسم بٹن

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

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

متعدد بٹن

اگرچہ آپ کے پاس ہر طرف صرف ایک ایڈ آن ہو سکتا ہے، آپ کے پاس ایک ہی کے اندر متعدد بٹن ہو سکتے ہیں .input-group-btn۔

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

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

Bootstrap میں دستیاب Navs نے مشترکہ مارک اپ کیا ہے، جس کا آغاز بیس .navکلاس کے ساتھ ساتھ مشترکہ ریاستوں سے ہوتا ہے۔ ہر سٹائل کے درمیان سوئچ کرنے کے لیے موڈیفائر کی کلاسز کو تبدیل کریں۔

ٹیب پینلز کے لیے navs استعمال کرنے کے لیے JavaScript ٹیبز پلگ ان کی ضرورت ہوتی ہے۔

ٹیب ایبل ایریاز والے ٹیبز کے لیے، آپ کو ٹیبز JavaScript پلگ ان استعمال کرنا چاہیے ۔ مارک اپ کے لیے اضافی اور ARIA صفات کی بھی ضرورت ہوگی – مزید تفصیلات کے لیے roleپلگ ان کی مثال مارک اپ دیکھیں۔

نیویگیشن کے بطور استعمال ہونے والے 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>

گولیاں

وہی ایچ ٹی ایم ایل لیں، لیکن .nav-pillsاس کے بجائے استعمال کریں:

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

گولیاں بھی عمودی طور پر اسٹیک ایبل ہیں۔ بس شامل کریں .nav-stacked۔

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

جائز

کے ساتھ 768px سے زیادہ چوڑی اسکرینوں پر آسانی سے ٹیبز یا گولیوں کو ان کے والدین کے برابر چوڑائی بنائیں .nav-justified۔ چھوٹی اسکرینوں پر، نیوی لنکس اسٹیک ہوتے ہیں۔

جائز navbar nav لنکس فی الحال تعاون یافتہ نہیں ہیں۔

سفاری اور جوابدہ جائز نیوی

v9.1.2 کے مطابق، سفاری ایک ایسے بگ کی نمائش کرتا ہے جس میں آپ کے براؤزر کو افقی طور پر تبدیل کرنے سے جائز NAV میں رینڈرنگ کی خرابیاں پیدا ہوتی ہیں جو ریفریش ہونے پر صاف ہو جاتی ہیں۔ یہ بگ بھی جائز NAV مثال میں دکھایا گیا ہے ۔

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

غیر فعال لنکس

کسی بھی nav جزو (ٹیبز یا گولیوں) کے .disabledلیے، سرمئی لنکس کے لیے شامل کریں اور کوئی ہوور اثرات نہیں ہیں ۔

لنک کی فعالیت متاثر نہیں ہوئی۔

یہ کلاس صرف اس <a>کی ظاہری شکل کو تبدیل کرے گی، اس کی فعالیت کو نہیں۔ یہاں لنکس کو غیر فعال کرنے کے لیے حسب ضرورت JavaScript استعمال کریں۔

<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یا اپنا میڈیا استفسار شامل کریں۔

منہدم موبائل نیوبار بریک پوائنٹ کو تبدیل کرنا

جب ویو پورٹ سے تنگ ہوتا ہے تو نیوبار اپنے عمودی موبائل منظر میں سمٹ جاتا ہے ، اور جب ویو پورٹ کم از کم چوڑائی میں @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>

ایک کے لیے متن کو تبدیل کرکے navbar برانڈ کو اپنی تصویر سے تبدیل کریں <img>۔ چونکہ .navbar-brandاس کی اپنی پیڈنگ اور اونچائی ہے، اس لیے آپ کو اپنی تصویر کے لحاظ سے کچھ CSS کو اوور رائڈ کرنے کی ضرورت پڑ سکتی ہے۔

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

مناسب عمودی سیدھ کے لیے فارم کے مواد کو اندر رکھیں .navbar-formاور تنگ ویو پورٹس میں منہدم رویہ۔ یہ فیصلہ کرنے کے لیے الائنمنٹ کے اختیارات استعمال کریں کہ یہ navbar مواد میں کہاں رہتا ہے۔

بطور ہیڈ اپ، .navbar-formاپنے کوڈ کا زیادہ تر حصہ .form-inlineمکسین کے ذریعے شیئر کرتا ہے۔ کچھ فارم کنٹرولز، جیسے ان پٹ گروپس، کو نیوبار کے اندر مناسب طریقے سے ظاہر ہونے کے لیے مقررہ چوڑائی کی ضرورت پڑ سکتی ہے۔

<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>تاکہ انہیں navbar میں عمودی طور پر مرکز میں رکھیں۔

<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 نیویگیشن جزو کے اندر نہیں ہیں، .navbar-linkپہلے سے طے شدہ اور inverse navbar کے اختیارات کے لیے مناسب رنگ شامل کرنے کے لیے کلاس کا استعمال کریں۔

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

.navbar-leftیا .navbar-rightیوٹیلیٹی کلاسز کا استعمال کرتے ہوئے NAV لنکس، فارم، بٹن، یا ٹیکسٹ کو سیدھ میں کریں ۔ دونوں کلاسیں مخصوص سمت میں ایک CSS فلوٹ شامل کریں گی۔ مثال کے طور پر، nav لنکس کو سیدھ میں <ul>لانے کے لیے، متعلقہ یوٹیلیٹی کلاس کے ساتھ ان کو الگ میں رکھیں۔

یہ کلاسز .pull-leftاور کے مکس-ایڈ ورژن ہیں .pull-right، لیکن ان کا دائرہ میڈیا کے سوالات کے لیے ہے تاکہ آلے کے سائز میں navbar اجزاء کو آسانی سے ہینڈل کیا جا سکے۔

متعدد اجزاء کو دائیں سیدھ میں لانا

.navbar-rightNavbars کی فی الحال متعدد کلاسوں کے ساتھ ایک حد ہے۔ .navbar-rightمواد کو مناسب طریقے سے جگہ دینے کے لیے، ہم آخری عنصر پر منفی مارجن استعمال کرتے ہیں ۔ جب اس کلاس کو استعمال کرنے والے متعدد عناصر ہوتے ہیں، تو یہ مارجن حسب منشا کام نہیں کرتے ہیں۔

جب ہم اس جزو کو v4 میں دوبارہ لکھ سکتے ہیں تو ہم اس پر دوبارہ غور کریں گے۔

مرکز اور پیڈ نیوبار مواد .navbar-fixed-topمیں ایک .containerیا شامل کریں اور شامل کریں۔.container-fluid

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

باڈی پیڈنگ درکار ہے۔

فکسڈ نیوبار آپ کے دوسرے مواد کو اوورلے کر دے گا، جب تک کہ paddingآپ <body>. اپنی اقدار کو آزمائیں یا ذیل میں ہمارا ٹکڑا استعمال کریں۔ ٹپ: بطور ڈیفالٹ، navbar 50px اونچا ہے۔

body { padding-top: 70px; }

بنیادی بوٹسٹریپ CSS کے بعد اس کو شامل کرنا یقینی بنائیں ۔

مرکز اور پیڈ نیوبار مواد .navbar-fixed-bottomمیں ایک .containerیا شامل کریں اور شامل کریں۔.container-fluid

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

باڈی پیڈنگ درکار ہے۔

فکسڈ نیوبار آپ کے دوسرے مواد کو اوورلے کرے گا، جب تک کہ آپ paddingنچلے حصے میں شامل نہ کریں <body>۔ اپنی اقدار کو آزمائیں یا ذیل میں ہمارا ٹکڑا استعمال کریں۔ ٹپ: بطور ڈیفالٹ، navbar 50px اونچا ہے۔

body { padding-bottom: 70px; }

بنیادی بوٹسٹریپ CSS کے بعد اس کو شامل کرنا یقینی بنائیں ۔

ایک مکمل چوڑائی والا navbar بنائیں جو صفحہ کے ساتھ اسکرول کر کے .navbar-static-topa .containeror .container-fluidto center اور pad navbar کے مواد کو شامل کر لے۔

کلاسوں کے برعکس .navbar-fixed-*، آپ کو پر کوئی پیڈنگ تبدیل کرنے کی ضرورت نہیں ہے body۔

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

شامل کرکے navbar کی شکل میں ترمیم کریں .navbar-inverse۔

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

بریڈ کرمبس

نیویگیشنل درجہ بندی کے اندر موجودہ صفحہ کے مقام کی نشاندہی کریں۔

: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">لنکس، Bootstrap navs، اور مزید میں شامل کر کے آسانی سے نئی یا بغیر پڑھی ہوئی اشیاء کو نمایاں کریں۔

انباکس42

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

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

خود گرنا

جب کوئی نیا یا بغیر پڑھا ہوا آئٹم نہیں ہوتا ہے تو، بیجز آسانی سے گر جائیں گے (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 جیسی پیشکش تلاش کر رہے ہیں، تو آپ کو ایک فریق ثالث پلگ ان جیسے Masonry ، Isotope ، یا Salvattore استعمال کرنے کی ضرورت ہوگی ۔

پہلے سے طے شدہ مثال

پہلے سے طے شدہ طور پر، بوٹسٹریپ کے تھمب نیلز کو کم سے کم مطلوبہ مارک اپ کے ساتھ منسلک تصاویر کو دکھانے کے لیے ڈیزائن کیا گیا ہے۔

<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 ٹرانزیشن اور اینیمیشن کا استعمال کرتے ہیں۔ یہ خصوصیات Internet Explorer 9 اور Firefox کے نیچے یا پرانے ورژن میں تعاون یافتہ نہیں ہیں۔ اوپیرا 12 متحرک تصاویر کو سپورٹ نہیں کرتا ہے۔

مواد کی حفاظت کی پالیسی (CSP) مطابقت

اگر آپ کی ویب سائٹ میں مواد کی حفاظت کی پالیسی (CSP) ہے جو اجازت نہیں دیتی ہے style-src 'unsafe-inline'، تو آپ styleپیش رفت بار کی چوڑائی کو سیٹ کرنے کے لیے ان لائن انتسابات کا استعمال نہیں کر پائیں گے جیسا کہ ذیل کی ہماری مثالوں میں دکھایا گیا ہے۔ سخت CSPs کے ساتھ مطابقت رکھنے والی چوڑائیوں کو ترتیب دینے کے متبادل طریقوں میں تھوڑا سا حسب ضرورت JavaScript (جو سیٹ کرتا ہے element.style.width) یا حسب ضرورت CSS کلاسز کا استعمال شامل ہے۔

بنیادی مثال

ڈیفالٹ پروگریس بار۔

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

لیبل کے ساتھ

مرئی فیصد دکھانے کے لیے پروگریس بار کے اندر سے کلاس کے <span>ساتھ کو ہٹا دیں ۔.sr-only

60%

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

اس بات کو یقینی بنانے کے لیے کہ لیبل کا متن کم فیصد کے لیے بھی قابل مطالعہ رہے، min-widthپروگریس بار میں ایک شامل کرنے پر غور کریں۔

0%

2%

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

سیاق و سباق کے متبادل

پروگریس بارز مستقل انداز کے لیے کچھ ایک ہی بٹن اور الرٹ کلاسز کا استعمال کرتے ہیں۔

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

دھاری دار

ایک دھاری دار اثر بنانے کے لیے گریڈینٹ کا استعمال کرتا ہے۔ 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-stripedIE9 اور اس سے نیچے میں دستیاب نہیں ہے۔

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

ڈھیر لگا ہوا

ایک سے زیادہ سلاخوں .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. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔

میڈیا ہیڈنگ

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔

نیسٹڈ میڈیا ہیڈنگ

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔

میڈیا ہیڈنگ

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

میڈیا ہیڈنگ

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

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

کلاسز .pull-leftاور .pull-rightبھی موجود ہیں اور پہلے میڈیا جزو کے حصے کے طور پر استعمال ہوتے تھے، لیکن v3.3.0 کے طور پر اس استعمال کے لیے فرسودہ ہیں۔ وہ تقریباً .media-leftاور کے برابر ہیں .media-right، سوائے اس کے کہ html میں .media-rightکے بعد رکھا جائے ۔.media-body

میڈیا کی صف بندی

تصاویر یا دیگر میڈیا کو اوپر، درمیانی یا نیچے سیدھ میں کیا جا سکتا ہے۔ ڈیفالٹ سب سے اوپر منسلک ہے.

سب سے اوپر منسلک میڈیا

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. فوکیبس میں ڈونک لیسینیا کانگو فیلیس۔

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. 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 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 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
موربی لیو ریسس
پورٹا اے سی کنیکٹیٹور اے سی
ویسٹیبولم اور ایروز

<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 موربی لیو ریسس پورٹا اے سی کنیکٹیٹور اے سی ویسٹیبولم اور ایروز

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

بٹن اشیاء

فہرست گروپ کے آئٹمز فہرست آئٹمز کے بجائے بٹن ہو سکتے ہیں (اس کا مطلب ہے والدین <div>کی بجائے <ul>)۔ ہر عنصر کے ارد گرد انفرادی والدین کی ضرورت نہیں ہے. یہاں معیاری .btnکلاسز کا استعمال نہ کریں۔

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

غیر فعال اشیاء

غیر فعال ظاہر کرنے کے لیے اسے خاکستری .disabledکرنے کے لیے اس میں شامل کریں ۔.list-group-item

Cras justo odio Dapibus ac facilisis in موربی لیو ریسس پورٹا اے سی کنیکٹیٹور اے سی ویسٹیبولم اور ایروز

<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
پورٹا اے سی کنیکٹیٹور اے سی
ویسٹیبولم اور ایروز

Dapibus ac facilisis in Cras sit amet nibh libero پورٹا اے سی کنیکٹیٹور اے سی ویسٹیبولم اور ایروز

<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 pharetra 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 pharetra 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
موربی لیو ریسس
پورٹا اے سی کنیکٹیٹور اے سی
ویسٹیبولم اور ایروز

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

ان پٹ گروپس میں ٹول ٹپس اور پاپ اوور کو خاص ترتیب کی ضرورت ہوتی ہے۔

دوسرے اجزاء کے ساتھ مکس نہ کریں۔

ہمیشہ لیبلز شامل کریں۔

بنیادی مثال

سائز کرنا

چیک باکسز اور ریڈیو ایڈونز

بٹن ایڈونز

ڈراپ ڈاؤن کے ساتھ بٹن

منقسم بٹن

متعدد بٹن

نیوس

ٹیب پینلز کے لیے navs استعمال کرنے کے لیے JavaScript ٹیبز پلگ ان کی ضرورت ہوتی ہے۔

نیویگیشن کے بطور استعمال ہونے والے navs کو قابل رسائی بنائیں

ٹیبز

گولیاں

جائز

سفاری اور جوابدہ جائز نیوی

غیر فعال لنکس

لنک کی فعالیت متاثر نہیں ہوئی۔

ڈراپ ڈاؤن استعمال کرنا

ڈراپ ڈاؤن کے ساتھ ٹیبز

ڈراپ ڈاؤن کے ساتھ گولیاں

نوبار

ڈیفالٹ navbar

بہتا ہوا مواد

جاوا اسکرپٹ پلگ ان کی ضرورت ہے۔

منہدم موبائل نیوبار بریک پوائنٹ کو تبدیل کرنا

نیوبارز کو قابل رسائی بنائیں

برانڈ کی تصویر

فارمز

موبائل ڈیوائس کی انتباہات

ہمیشہ لیبلز شامل کریں۔

بٹن

سیاق و سباق کے ساتھ مخصوص استعمال

متن

غیر نیوی لنکس

اجزاء کی سیدھ

متعدد اجزاء کو دائیں سیدھ میں لانا

اوپر سے طے شدہ

باڈی پیڈنگ درکار ہے۔

نیچے سے طے شدہ

فرسودہ `.pull-right`سیدھ

درست کو یقینی بنائیں `role`اور لیبل فراہم کریں۔

`<a>`عناصر کے ساتھ

`<button>`عناصر کے ساتھ

صرف متنی `<input>`s