اجزاء
آئیکنوگرافی، ڈراپ ڈاؤن، ان پٹ گروپس، نیویگیشن، الرٹس، اور بہت کچھ فراہم کرنے کے لیے بنائے گئے ایک درجن سے زیادہ دوبارہ قابل استعمال اجزاء۔
آئیکنوگرافی، ڈراپ ڈاؤن، ان پٹ گروپس، نیویگیشن، الرٹس، اور بہت کچھ فراہم کرنے کے لیے بنائے گئے ایک درجن سے زیادہ دوبارہ قابل استعمال اجزاء۔
Glyphicon Halflings سیٹ سے فونٹ کی شکل میں 250 سے زیادہ گلائف شامل ہیں۔ Glyphicons Halflings عام طور پر مفت میں دستیاب نہیں ہوتے ہیں، لیکن ان کے خالق نے انہیں Bootstrap کے لیے مفت دستیاب کرایا ہے۔ آپ کے شکریہ کے طور پر، ہم صرف یہ کہتے ہیں کہ جب بھی ممکن ہو آپ سے Glyphicons کا لنک شامل کریں۔
کارکردگی کی وجوہات کی بناء پر، تمام آئیکنز کو بیس کلاس اور انفرادی آئیکن کلاس کی ضرورت ہوتی ہے۔ استعمال کرنے کے لیے، درج ذیل کوڈ کو کہیں بھی لگائیں۔ مناسب پیڈنگ کے لیے آئیکن اور ٹیکسٹ کے درمیان جگہ چھوڑنا یقینی بنائیں۔
آئیکن کلاسز کو براہ راست دوسرے اجزاء کے ساتھ جوڑا نہیں جا سکتا۔ انہیں ایک ہی عنصر پر دوسری کلاسوں کے ساتھ استعمال نہیں کیا جانا چاہئے۔ اس کے بجائے، ایک نیسٹڈ شامل کریں <span>
اور آئیکن کلاسز کو پر لاگو کریں <span>
۔
آئیکن کلاسز صرف ان عناصر پر استعمال کی جانی چاہئیں جن میں کوئی متنی مواد نہ ہو اور ان میں بچوں کے عناصر نہ ہوں۔
بوٹسٹریپ فرض کرتا ہے کہ آئیکن فونٹ فائلیں ../fonts/
ڈائرکٹری میں موجود ہوں گی، مرتب کردہ سی ایس ایس فائلوں کے نسبت۔ ان فونٹ فائلوں کو منتقل کرنے یا ان کا نام تبدیل کرنے کا مطلب ہے CSS کو تین طریقوں میں سے ایک میں اپ ڈیٹ کرنا:
@icon-font-path
اور/یا کو تبدیل کریں۔@icon-font-name
متغیرات کو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
۔.dropdown-menu
ڈراپ ڈاؤنز خود بخود سی ایس ایس کے ذریعے دستاویز کے عام بہاؤ کے اندر رکھے جاتے ہیں۔ اس کا مطلب ہے کہ والدین کی طرف سے کچھ خاص خصوصیات کے ساتھ ڈراپ ڈاؤنز کاٹا جا سکتا ہے overflow
یا ویو پورٹ کی حدود سے باہر ظاہر ہو سکتا ہے۔ ان مسائل کو اپنے طور پر حل کریں جیسے ہی وہ پیدا ہوتے ہیں۔
.pull-right
سیدھv3.1.0 تک، ہم نے .pull-right
ڈراپ ڈاؤن مینو کو فرسودہ کر دیا ہے۔ مینو کو دائیں سیدھ میں کرنے کے لیے، استعمال کریں .dropdown-menu-right
۔ navbar میں دائیں سیدھ والے nav اجزاء مینو کو خود بخود سیدھ میں لانے کے لیے اس کلاس کے مکس ورژن کا استعمال کرتے ہیں۔ اسے اوور رائڈ کرنے کے لیے، استعمال کریں .dropdown-menu-left
۔
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
کسی بھی ڈراپ ڈاؤن مینو میں کارروائیوں کے سیکشن کو لیبل کرنے کے لیے ایک ہیڈر شامل کریں۔
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
ڈراپ ڈاؤن مینو میں لنکس کی الگ سیریز میں ایک ڈیوائیڈر شامل کریں۔
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
لنک کو غیر فعال کرنے کے لیے ڈراپ ڈاؤن میں .disabled
شامل کریں ۔<li>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
بٹن گروپ کے ساتھ ایک لائن پر بٹنوں کی ایک سیریز کو ایک ساتھ گروپ کریں۔ ہمارے بٹن پلگ ان کے ساتھ اختیاری JavaScript ریڈیو اور چیک باکس طرز کا رویہ شامل کریں ۔
ٹول ٹِپ یا پاپ اوور کے اندر موجود عناصر پر استعمال کرتے وقت .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
۔ نتیجے کے طور پر، بوٹسٹریپ میں آپ کی تخصیصات پر منحصر ہے، آپ بارڈرز کو ہٹانا یا دوبارہ رنگ کرنا چاہتے ہیں۔
انٹرنیٹ ایکسپلورر 8 کسی جواز والے بٹن گروپ میں بٹنوں پر بارڈرز نہیں رینڈر کرتا ہے، چاہے وہ آن ہو <a>
یا <button>
عناصر۔ اس کے ارد گرد حاصل کرنے کے لئے، ہر بٹن کو دوسرے میں لپیٹ .btn-group
دیں۔
مزید معلومات کے لیے نمبر 12476 دیکھیں ۔
<a>
عناصر کے ساتھبس میں .btn
s کی ایک سیریز لپیٹیں .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>
sیہاں عناصر کے استعمال سے گریز <select>
کریں کیونکہ انہیں WebKit براؤزر میں مکمل طور پر اسٹائل نہیں کیا جا سکتا۔
<textarea>
یہاں عناصر کے استعمال سے گریز کریں کیونکہ rows
بعض صورتوں میں ان کی صفت کا احترام نہیں کیا جائے گا۔
ٹول ٹِپ یا پاپ اوور کے اندر موجود عناصر پر استعمال کرتے وقت .input-group
، آپ کو container: 'body'
ناپسندیدہ ضمنی اثرات سے بچنے کے لیے آپشن کی وضاحت کرنی ہوگی (جیسے کہ ٹول ٹِپ یا پاپ اوور کے متحرک ہونے پر عنصر کا وسیع تر ہوتا جانا اور/یا اپنے گول کونوں کو کھو جانا)۔
فارم گروپس یا گرڈ کالم کلاسز کو براہ راست ان پٹ گروپس کے ساتھ نہ ملا دیں۔ اس کے بجائے، ان پٹ گروپ کو فارم گروپ یا گرڈ سے متعلق عنصر کے اندر گھوںسلا کریں۔
اگر آپ ہر ان پٹ کے لیے لیبل شامل نہیں کرتے ہیں تو اسکرین ریڈرز کو آپ کے فارمز میں پریشانی ہوگی۔ ان پٹ گروپس کے لیے، اس بات کو یقینی بنائیں کہ کوئی اضافی لیبل یا فعالیت معاون ٹیکنالوجیز تک پہنچائی جائے۔
استعمال کی جانے والی قطعی تکنیک (مرئی <label>
عناصر، طبقے <label>
کا استعمال کرتے ہوئے چھپے ہوئے عناصر ، یا , , یا انتساب کا استعمال ) اور کون سی اضافی معلومات پہنچانے کی ضرورت ہوگی اس بات پر منحصر ہے کہ آپ جس انٹرفیس ویجیٹ کو لاگو کر رہے ہیں اس کے مطابق مختلف ہوگی۔ اس سیکشن میں دی گئی مثالیں چند تجویز کردہ، کیس سے متعلق مخصوص نقطہ نظر فراہم کرتی ہیں۔.sr-only
aria-label
aria-labelledby
aria-describedby
title
placeholder
ان پٹ کے دونوں طرف ایک ایڈ آن یا بٹن رکھیں۔ آپ ان پٹ کے دونوں طرف ایک بھی رکھ سکتے ہیں۔
ہم ایک ہی طرف متعدد ایڈ آنز ( .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
کلاس کے ساتھ ساتھ مشترکہ ریاستوں سے ہوتا ہے۔ ہر سٹائل کے درمیان سوئچ کرنے کے لیے موڈیفائر کی کلاسز کو تبدیل کریں۔
نوٹ کریں کہ .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 لنکس فی الحال تعاون یافتہ نہیں ہیں۔
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
کسی بھی nav جزو (ٹیبز یا گولیوں) کے .disabled
لیے، سرمئی لنکس کے لیے شامل کریں اور کوئی ہوور اثرات نہیں ہیں ۔
<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 لنکس فی الحال تعاون یافتہ نہیں ہیں۔
<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>
.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-fixed-top
میں ایک .container
یا شامل کریں اور شامل کریں۔.container-fluid
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
مرکز اور پیڈ نیوبار مواد .navbar-fixed-bottom
میں ایک .container
یا شامل کریں اور شامل کریں۔.container-fluid
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
ایک مکمل چوڑائی والا navbar بنائیں جو صفحہ کے ساتھ اسکرول کر کے .navbar-static-top
a .container
or .container-fluid
to 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">«</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">»</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">«</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">«</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">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
پیجر لنکس .disabled
صفحہ بندی سے عام یوٹیلیٹی کلاس بھی استعمال کرتے ہیں۔
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</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، اور مزید میں شامل کر کے آسانی سے نئی یا بغیر پڑھی ہوئی اشیاء کو نمایاں کریں۔
<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>
جمبوٹرون کو پوری چوڑائی، اور گول کونوں کے بغیر بنانے کے لیے، اسے تمام .container
s کے باہر رکھیں اور اس کے بجائے .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 مواد جیسے عنوانات، پیراگراف، یا بٹن کو تھمب نیلز میں شامل کرنا ممکن ہے۔
<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">×</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) ہے جو اجازت نہیں دیتی ہے 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
<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
پروگریس بار میں ایک شامل کرنے پر غور کریں۔
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
پروگریس بارز مستقل انداز کے لیے کچھ ایک ہی بٹن اور الرٹ کلاسز کا استعمال کرتے ہیں۔
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
ایک دھاری دار اثر بنانے کے لیے گریڈینٹ کا استعمال کرتا ہے۔ IE9 اور اس سے نیچے میں دستیاب نہیں ہے۔
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
دائیں سے بائیں پٹیوں کو متحرک کرنے کے لیے میں .active
شامل کریں ۔ .progress-bar-striped
IE9 اور اس سے نیچے میں دستیاب نہیں ہے۔
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
ایک سے زیادہ سلاخوں .progress
کو اسٹیک کرنے کے لیے ایک ہی جگہ پر رکھیں۔
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
مختلف قسم کے اجزاء (جیسے بلاگ کے تبصرے، ٹویٹس، وغیرہ) بنانے کے لیے تجریدی آبجیکٹ کی طرزیں جو متنی مواد کے ساتھ بائیں یا دائیں سیدھ والی تصویر کو نمایاں کرتی ہیں۔
ڈیفالٹ میڈیا مواد کے بلاک کے بائیں یا دائیں طرف میڈیا آبجیکٹ (تصاویر، ویڈیو، آڈیو) دکھاتا ہے۔
<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.
<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۔
<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>
بیجز کے اجزاء کو کسی بھی فہرست گروپ آئٹم میں شامل کریں اور یہ خود بخود دائیں طرف کھڑا ہو جائے گا۔
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
لسٹ آئٹمز کے بجائے اینکر ٹیگز استعمال کرکے لسٹ گروپ آئٹمز کو لنک کریں (اس کا مطلب ہے کہ والدین <div>
کی بجائے <ul>
)۔ ہر عنصر کے ارد گرد انفرادی والدین کی ضرورت نہیں ہے.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
فہرست گروپ آئٹمز فہرست آئٹمز کے بجائے بٹن ہو سکتے ہیں (اس کا مطلب ہے کہ والدین <div>
کی بجائے ایک <ul>
)۔ ہر عنصر کے ارد گرد انفرادی والدین کی ضرورت نہیں ہے. یہاں معیاری .btn
کلاسیں استعمال نہ کریں۔
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
غیر فعال ظاہر کرنے کے لیے اسے خاکستری .disabled
کرنے کے لیے a میں شامل کریں ۔.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
ہے۔
<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.
<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>