اجزاء

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

بٹن گروپس

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

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

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

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

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

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

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

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

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

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

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

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

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

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


سر اپ

بٹن گروپس کے لیے سی ایس ایس ایک علیحدہ فائل میں ہے، بٹن گروپس.لیس۔

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

ڈراپ ڈاؤن مینو کو متحرک کرنے کے لیے کسی بھی بٹن کو a کے اندر رکھ کر .btn-groupاور مناسب مینو مارک اپ فراہم کر کے استعمال کریں۔


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

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

بٹن گروپ کی طرح، ہمارا مارک اپ باقاعدہ بٹن مارک اپ کا استعمال کرتا ہے، لیکن انداز کو بہتر بنانے اور بوٹسٹریپ کے ڈراپ ڈاؤن 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>

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

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

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

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

  1. <div class = "btn-group" >
  2. <a class = "btn" href = "#" > ایکشن </a>
  3. <a class = "btn dropdown-toggle" data-toggle = "ڈراپ ڈاؤن" href = "#" >
  4. <span class = "caret" ></span>
  5. </a>
  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>

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

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

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

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

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

  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>

ہیرو یونٹ

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

مارک اپ

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

معیاری الرٹ پیغام کو دو اختیاری کلاسوں کے ساتھ آسانی سے بڑھائیں: .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" > × </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 = "progress" >
  2. <div کلاس = "بار"
  3. سٹائل = " چوڑائی : 60 " ></div>
  4. </div>

دھاری دار

ایک دھاری دار اثر بنانے کے لیے گریڈینٹ کا استعمال کرتا ہے۔

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

متحرک

دھاری دار مثال لیتا ہے اور اسے متحرک کرتا ہے۔

  1. <div class = "ترقی کی پیشرفت-خطرہ
  2. ترقی کی پٹی والا فعال" >
  3. <div کلاس = "بار"
  4. سٹائل = " چوڑائی : 40 " ></div>
  5. </div>

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

اضافی رنگ

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

  • .progress-info
  • .progress-success
  • .progress-danger

متبادل طور پر، آپ کم فائلوں کو اپنی مرضی کے مطابق بنا سکتے ہیں اور اپنے رنگ اور سائز کو رول کر سکتے ہیں۔

رویہ

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

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

براؤزر سپورٹ

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

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

ویلز

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

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

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

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

×

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