اجزاء

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

بٹن گروپس

ایک جامع جزو کے طور پر متعدد بٹنوں کو ایک ساتھ جوڑنے کے لیے بٹن گروپس کا استعمال کریں۔ انہیں ایک سیریز <a>یا <button>عناصر کے ساتھ بنائیں۔

بہترین طریقوں

ہم بٹن گروپس اور ٹول بار استعمال کرنے کے لیے درج ذیل رہنما خطوط تجویز کرتے ہیں:

  • ہمیشہ ایک ہی عنصر کو ایک بٹن گروپ میں استعمال کریں، <a>یا <button>.
  • ایک ہی بٹن گروپ میں مختلف رنگوں کے بٹنوں کو نہ ملائیں۔
  • متن کے علاوہ یا اس کے بجائے آئیکنز کا استعمال کریں، لیکن جہاں مناسب ہو وہاں Alt اور ٹائٹل ٹیکسٹ شامل کرنے کو یقینی بنائیں۔

ڈراپ ڈاؤن کے ساتھ متعلقہ بٹن گروپس (نیچے دیکھیں) کو الگ سے بلایا جانا چاہیے اور مطلوبہ رویے کی نشاندہی کرنے کے لیے ہمیشہ ڈراپ ڈاؤن کیریٹ شامل کرنا چاہیے۔

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

اینکر ٹیگ بٹنوں کے ساتھ بنائے گئے ایک معیاری بٹن گروپ کو ایچ ٹی ایم ایل کیسا لگتا ہے:

  1. <div class = "btn-group" >
  2. <بٹن کلاس = "btn" > 1 </ بٹن>
  3. <بٹن کلاس = "btn" > 2 </ بٹن>
  4. <بٹن کلاس = "btn" > 3 </ بٹن>
  5. </div>

ٹول بار کی مثال

زیادہ پیچیدہ اجزاء کے لیے سیٹوں کو <div class="btn-group">a میں جوڑیں۔<div class="btn-toolbar">

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

چیک باکس اور ریڈیو فلیور

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

جاوا اسکرپٹ حاصل کریں »

بٹن گروپس میں ڈراپ ڈاؤن

سنو! ڈراپ ڈاؤن والے بٹنوں کو مناسب رینڈرنگ کے لیے انفرادی طور پر اپنے .btn-groupاندر لپیٹنا چاہیے۔.btn-toolbar

بٹن ڈراپ ڈاؤنز

مارک اپ کی مثال

بٹن گروپ کی طرح، ہمارا مارک اپ باقاعدہ بٹن مارک اپ کا استعمال کرتا ہے، لیکن انداز کو بہتر بنانے اور بوٹسٹریپ کے ڈراپ ڈاؤن jQuery پلگ ان کو سپورٹ کرنے کے لیے مٹھی بھر اضافے کے ساتھ۔

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "ڈراپ ڈاؤن" href = "#" >
  3. عمل
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "ڈراپ ڈاؤن مینو" >
  7. <!-- ڈراپ ڈاؤن مینو لنکس -->
  8. </ul>
  9. </div>

تمام بٹن سائز کے ساتھ کام کرتا ہے۔

بٹن ڈراپ ڈاؤن کسی بھی سائز پر کام کرتے ہیں۔ آپ کے بٹن کا سائز .btn-large, .btn-smallیا .btn-mini.

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

بٹن ڈراپ ڈاؤن کو کام کرنے کے لیے بوٹسٹریپ ڈراپ ڈاؤن پلگ ان کی ضرورت ہوتی ہے۔

کچھ صورتوں میں—جیسے موبائل—ڈراپ ڈاؤن مینو ویو پورٹ سے باہر پھیل جائیں گے۔ آپ کو دستی طور پر یا حسب ضرورت جاوا اسکرپٹ کے ساتھ صف بندی کو حل کرنے کی ضرورت ہے۔


اسپلٹ بٹن ڈراپ ڈاؤنز

جائزہ اور مثالیں۔

بٹن گروپ سٹائل اور مارک اپ کی بنیاد پر، ہم آسانی سے اسپلٹ بٹن بنا سکتے ہیں۔ اسپلٹ بٹن میں بائیں طرف معیاری ایکشن اور سیاق و سباق کے لنکس کے ساتھ دائیں طرف ڈراپ ڈاؤن ٹوگل ہوتا ہے۔

سائز

اضافی بٹن کلاسز .btn-mini، .btn-smallیا .btn-largeسائز کے لیے استعمال کریں۔

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "ڈراپ ڈاؤن مینو پل دائیں" >
  4. <!-- ڈراپ ڈاؤن مینو لنکس -->
  5. </ul>
  6. </div>

مارک اپ کی مثال

ہم عام بٹن کے ڈراپ ڈاؤن پر توسیع کرتے ہیں تاکہ دوسرا بٹن ایکشن فراہم کیا جا سکے جو ایک علیحدہ ڈراپ ڈاؤن ٹرگر کے طور پر کام کرتا ہے۔

  1. <div class = "btn-group" >
  2. <بٹن کلاس = "btn" > ایکشن </ بٹن>
  3. <بٹن کلاس = "بی ٹی این ڈراپ ڈاؤن ٹوگل" ڈیٹا ٹوگل = "ڈراپ ڈاؤن" >
  4. <span class = "caret" ></span>
  5. </ بٹن>
  6. <ul class = "ڈراپ ڈاؤن مینو" >
  7. <!-- ڈراپ ڈاؤن مینو لنکس -->
  8. </ul>
  9. </div>

ڈراپ اپ مینو

ڈراپ ڈاؤن مینو کو بھی نیچے سے اوپر تک ٹوگل کیا جا سکتا ہے کے فوری والدین میں ایک کلاس شامل کر کے .dropdown-menu۔ .caretیہ اوپر سے نیچے کی بجائے نیچے سے اوپر جانے کے لیے مینو کی سمت کو پلٹائے گا اور خود مینو کی جگہ لے لے گا۔

  1. <div class = "btn-گروپ ڈراپ اپ" >
  2. <بٹن کلاس = "btn" > ڈراپ اپ </ بٹن>
  3. <بٹن کلاس = "بی ٹی این ڈراپ ڈاؤن ٹوگل" ڈیٹا ٹوگل = "ڈراپ ڈاؤن" >
  4. <span class = "caret" ></span>
  5. </ بٹن>
  6. <ul class = "ڈراپ ڈاؤن مینو" >
  7. <!-- ڈراپ ڈاؤن مینو لنکس -->
  8. </ul>
  9. </div>

ملٹی کون پیج صفحہ بندی

کب استعمال کرنا ہے۔

Rdio سے متاثر انتہائی سادہ اور کم سے کم اسٹائل والا صفحہ بندی، ایپس اور تلاش کے نتائج کے لیے بہترین ہے۔ بڑے بلاک کو کھونا مشکل ہے، آسانی سے توسیع پذیر ہے، اور بڑے کلک والے علاقے فراہم کرتا ہے۔

اسٹیٹفول پیج لنکس

لنکس حسب ضرورت ہیں اور صحیح طبقے کے ساتھ متعدد حالات میں کام کرتے ہیں۔ .disabledناقابل کلک لنکس اور .activeموجودہ صفحہ کے لیے۔

لچکدار سیدھ

صفحہ بندی کے لنکس کی سیدھ کو تبدیل کرنے کے لیے دو اختیاری کلاسوں میں سے کسی ایک کو شامل کریں: .pagination-centeredاور .pagination-right۔

مثالیں

پہلے سے طے شدہ صفحہ بندی کا جزو لچکدار ہے اور متعدد تغیرات میں کام کرتا ہے۔

مارک اپ

ایک میں لپیٹ <div>، صفحہ بندی صرف ایک <ul>ہے۔

  1. <div class = "صفحہ بندی" >
  2. <ul>
  3. <li><a href = "#" > پچھلا </a></li>
  4. <li class = "فعال" >
  5. <a href="#" > 1 </a> _ _
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > اگلا </a></li>
  11. </ul>
  12. </div>

فوری پچھلے اور اگلے لنکس کے لیے پیجر

پیجر کے بارے میں

پیجر کا جزو ہلکے مارک اپ اور حتیٰ کہ ہلکے انداز کے ساتھ صفحہ بندی کے سادہ نفاذ کے لیے لنکس کا ایک مجموعہ ہے۔ یہ سادہ سائٹس جیسے بلاگز یا میگزینز کے لیے بہت اچھا ہے۔

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

پیجر لنکس بھی .disabledصفحہ بندی سے جنرل کلاس کا استعمال کرتے ہیں۔

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

پہلے سے طے شدہ طور پر، پیجر لنکس کو سینٹر کرتا ہے۔

  1. <ul class = "پیجر" >
  2. <li>
  3. <a href="#" > پچھلا </a> _ _
  4. </li>
  5. <li>
  6. <a href="#" > اگلا </a> _ _
  7. </li>
  8. </ul>

منسلک لنکس

متبادل طور پر، آپ ہر ایک لنک کو اطراف میں سیدھ کر سکتے ہیں:

  1. <ul class = "پیجر" >
  2. <li کلاس = "پچھلا" >
  3. <a href="#" > & larr ; پرانا </a>
  4. </li>
  5. <li کلاس = "اگلا" >
  6. <a href = "#" > جدید تر → </a>
  7. </li>
  8. </ul>
لیبلز مارک اپ
طے شدہ <span class="label">Default</span>
کامیابی <span class="label label-success">Success</span>
وارننگ <span class="label label-warning">Warning</span>
اہم <span class="label label-important">Important</span>
معلومات <span class="label label-info">Info</span>
الٹا <span class="label label-inverse">Inverse</span>

کے بارے میں

بیجز چھوٹے، سادہ اجزاء ہیں جو کسی قسم کے اشارے یا شمار کو ظاہر کرنے کے لیے ہوتے ہیں۔ وہ عام طور پر Mail.app جیسے ای میل کلائنٹس میں یا پش اطلاعات کے لیے موبائل ایپس پر پائے جاتے ہیں۔

دستیاب کلاسز

نام مثال مارک اپ
طے شدہ 1 <span class="badge">1</span>
کامیابی 2 <span class="badge badge-success">2</span>
وارننگ 4 <span class="badge badge-warning">4</span>
اہم 6 <span class="badge badge-important">6</span>
معلومات 8 <span class="badge badge-info">8</span>
الٹا 10 <span class="badge badge-inverse">10</span>

ہیرو یونٹ

بوٹسٹریپ آپ کی سائٹ پر مواد کی نمائش کے لیے ایک ہلکا پھلکا، لچکدار جزو فراہم کرتا ہے جسے ہیرو یونٹ کہتے ہیں۔ یہ مارکیٹنگ اور مواد سے بھرپور سائٹس پر اچھی طرح کام کرتا ہے۔

مارک اپ

divاپنے مواد کو اس طرح لپیٹیں :

  1. <div class = "ہیرو یونٹ" >
  2. <h1> سرخی </h1>
  3. <p> ٹیگ لائن </p>
  4. <p>
  5. <a کلاس = "btn btn-primary btn-large" >
  6. اورجانیے
  7. </a>
  8. </p>
  9. </div>

ہیلو، دنیا!

یہ ایک سادہ ہیرو یونٹ ہے، نمایاں مواد یا معلومات پر اضافی توجہ دینے کے لیے جمبوٹرون طرز کا ایک سادہ جزو ہے۔

اورجانیے

صفحہ کا ہیڈر

h1صفحہ پر مواد کے حصوں کو مناسب طریقے سے خالی کرنے اور سیکشن کرنے کے لیے ایک سادہ شیل ۔ یہ h1کے ڈیفالٹ small، عنصر کے ساتھ ساتھ زیادہ تر دیگر اجزاء (اضافی طرزوں کے ساتھ) استعمال کر سکتا ہے۔

  1. <div class = "page-header" >
  2. <h1> مثال صفحہ ہیڈر </h1>
  3. </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.

    عمل عمل

تھمب نیلز کیوں استعمال کریں۔

تھمب نیلز (پہلے .media-gridv1.4 تک) تصاویر یا ویڈیوز کے گرڈ، تصویری تلاش کے نتائج، خوردہ مصنوعات، پورٹ فولیوز اور بہت کچھ کے لیے بہترین ہیں۔ وہ لنکس یا جامد مواد ہوسکتے ہیں۔

سادہ، لچکدار مارک اپ

تھمب نیل مارک اپ آسان ہے - جس میں عناصر ulکی تعداد کی liضرورت ہوتی ہے۔ یہ انتہائی لچکدار بھی ہے، جو آپ کے مواد کو سمیٹنے کے لیے کسی بھی قسم کے مواد کو تھوڑا سا زیادہ مارک اپ کے ساتھ اجازت دیتا ہے۔

گرڈ کالم سائز استعمال کرتا ہے۔

آخر میں، تھمب نیلز کا جزو موجودہ گرڈ سسٹم کلاسز کا استعمال کرتا ہے — جیسے .span2یا .span3— تھمب نیل کے طول و عرض کے کنٹرول کے لیے۔

مارک اپ

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

  1. <ul class = "تھمب نیلز" >
  2. <li class = "span3" >
  3. <a href = "#" کلاس = "تھمب نیل" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

تھمب نیلز میں حسب ضرورت HTML مواد کے لیے، مارک اپ تھوڑا سا تبدیل ہوتا ہے۔ بلاک سطح کے مواد کو کہیں بھی اجازت دینے کے لیے، ہم اس طرح <a>کے لیے تبدیل کرتے ہیں <div>:

  1. <ul class = "تھمب نیلز" >
  2. <li class = "span3" >
  3. <div class = "تھمب نیل" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> تھمب نیل لیبل </h5>
  6. <p> تھمب نیل کیپشن یہیں... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

مزید مثالیں۔

آپ کے لیے دستیاب مختلف گرڈ کلاسز کے ساتھ اپنے تمام اختیارات کو دریافت کریں۔ آپ مختلف سائز کو مکس اور میچ بھی کر سکتے ہیں۔

ہلکے وزن کے ڈیفالٹس

دوبارہ لکھی گئی بیس کلاس

بوٹسٹریپ 2 کے ساتھ، ہم نے بیس کلاس کو آسان بنا دیا ہے: .alertکے بجائے .alert-message۔ ہم نے کم از کم مطلوبہ مارک اپ کو بھی کم کر دیا ہے — کوئی <p>ڈیفالٹ کی ضرورت نہیں ہے، صرف بیرونی <div>۔

سنگل الرٹ پیغام

کم کوڈ کے ساتھ زیادہ پائیدار جزو کے لیے، ہم نے بلاک الرٹس، زیادہ پیڈنگ اور عام طور پر زیادہ متن کے ساتھ آنے والے پیغامات کے لیے فرق کو ہٹا دیا ہے۔ کلاس بھی تبدیل کر دی گئی ہے .alert-block۔


جاوا اسکرپٹ کے ساتھ بہت اچھا ہے۔

بوٹسٹریپ ایک زبردست jQuery پلگ ان کے ساتھ آتا ہے جو انتباہی پیغامات کو سپورٹ کرتا ہے، انہیں فوری اور آسان بناتا ہے۔

پلگ ان حاصل کریں »

مثال کے انتباہات

سادہ کلاس کے ساتھ ایک div میں اپنا پیغام اور اختیاری کلوز آئیکن لپیٹیں۔

وارننگ! خود کو چیک کریں، آپ زیادہ اچھے نہیں لگ رہے ہیں۔
  1. <div class = "انتباہ" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> انتباہ! </strong> بہترین خود کو چیک کریں، آپ زیادہ اچھے نہیں لگ رہے ہیں۔
  4. </div>

سنو! iOS آلات href="#"کو الرٹس کی برخاستگی کے لیے ایک کی ضرورت ہوتی ہے۔ اینکر کلوز آئیکنز کے لیے اسے اور ڈیٹا انتساب کو شامل کرنا یقینی بنائیں۔ متبادل طور پر، آپ <button>ڈیٹا انتساب کے ساتھ ایک عنصر استعمال کر سکتے ہیں، جسے ہم نے اپنے دستاویزات کے لیے منتخب کیا ہے۔ استعمال کرتے وقت <button>، آپ کو لازمی طور پر شامل کرنا چاہیے type="button"ورنہ آپ کے فارم جمع نہیں ہو سکتے۔

معیاری الرٹ پیغام کو دو اختیاری کلاسوں کے ساتھ آسانی سے بڑھائیں: .alert-blockمزید پیڈنگ اور ٹیکسٹ کنٹرولز .alert-headingکے لیے اور مماثل سرخی کے لیے۔

وارننگ!

خود کو چیک کریں، آپ زیادہ اچھے نہیں لگ رہے ہیں۔ Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = " الرٹ الرٹ بلاک" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > وارننگ! </h4>
  4. خود کو چیک کریں، آپ نہیں ہیں...
  5. </div>

سیاق و سباق کے متبادلات الرٹ کا مفہوم تبدیل کرنے کے لیے اختیاری کلاسیں شامل کریں۔

غلطی یا خطرہ

اوہ سنیپ! کچھ چیزیں تبدیل کریں اور دوبارہ جمع کرانے کی کوشش کریں۔
  1. <div class = " الرٹ الرٹ - ایرر " >
  2. ...
  3. </div>

کامیابی

بہت اچھے! آپ نے اس اہم انتباہی پیغام کو کامیابی سے پڑھ لیا۔
  1. <div class = "انتباہ الرٹ-کامیابی" >
  2. ...
  3. </div>

معلومات

سنو! اس الرٹ کو آپ کی توجہ کی ضرورت ہے، لیکن یہ زیادہ اہم نہیں ہے۔
  1. <div class = "انتباہ الرٹ-معلومات" >
  2. ...
  3. </div>

مثالیں اور مارک اپ

بنیادی

عمودی میلان کے ساتھ ڈیفالٹ پروگریس بار۔

  1. <div class = "ترقی" >
  2. <div کلاس = "بار"
  3. سٹائل = " چوڑائی : 60 " ></div>
  4. </div>

دھاری دار

دھاری دار اثر (کوئی IE نہیں) بنانے کے لیے میلان کا استعمال کرتا ہے۔

  1. <div class = "progress progress-striped" >
  2. <div کلاس = "بار"
  3. سٹائل = " چوڑائی : 20 " ></div>
  4. </div>

متحرک

دھاری دار مثال لیتا ہے اور اسے متحرک کرتا ہے (کوئی IE نہیں)۔

  1. <div class = "progress پروگریس سٹرپڈ
  2. فعال" >
  3. <div کلاس = "بار"
  4. سٹائل = " چوڑائی : 40 " ></div>
  5. </div>

اختیارات اور براؤزر سپورٹ

اضافی رنگ

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

دھاری دار سلاخیں

ٹھوس رنگوں کی طرح، ہمارے پاس مختلف دھاری دار پروگریس بارز ہیں۔

رویہ

پروگریس بارز CSS3 ٹرانزیشن کا استعمال کرتے ہیں، لہذا اگر آپ متحرک طور پر جاوا اسکرپٹ کے ذریعے چوڑائی کو ایڈجسٹ کرتے ہیں، تو یہ آسانی سے سائز تبدیل کر دے گا۔

اگر آپ .activeکلاس کا استعمال کرتے ہیں، تو آپ .progress-stripedکی پروگریس بارز پٹیوں کو بائیں سے دائیں متحرک کر دیں گی۔

براؤزر سپورٹ

پروگریس بار اپنے تمام اثرات کو حاصل کرنے کے لیے CSS3 گریڈیئنٹس، ٹرانزیشن، اور اینیمیشنز کا استعمال کرتے ہیں۔ یہ خصوصیات IE7-9 یا Firefox کے پرانے ورژن میں تعاون یافتہ نہیں ہیں۔

اوپیرا اور IE اس وقت متحرک تصاویر کو سپورٹ نہیں کرتے ہیں۔

ویلز

کسی عنصر کو انسیٹ اثر دینے کے لیے اس پر سادہ اثر کے طور پر کنویں کا استعمال کریں۔

دیکھو، میں کنویں میں ہوں!
  1. <div class = "اچھا" >
  2. ...
  3. </div>

آئیکن بند کریں۔

موڈلز اور الرٹس جیسے مواد کو مسترد کرنے کے لیے عام قریبی آئیکن کا استعمال کریں۔

  1. <بٹن کلاس = "بند" > × </ بٹن>

اگر آپ اینکر استعمال کرنے کے بجائے iOS ڈیوائسز کو کلک ایونٹس کے لیے ایک href="#" کی ضرورت ہوتی ہے۔

  1. <a class = "close" href = "#" > × </a>