نیویگیشن، الرٹس، پاپ اوور اور بہت کچھ فراہم کرنے کے لیے درجنوں دوبارہ قابل استعمال اجزاء بوٹسٹریپ میں بنائے گئے ہیں۔
Rdio سے متاثر انتہائی سادہ اور کم سے کم اسٹائل والا صفحہ بندی، ایپس اور تلاش کے نتائج کے لیے بہترین ہے۔ بڑے بلاک کو کھونا مشکل ہے، آسانی سے توسیع پذیر ہے، اور بڑے کلک والے علاقے فراہم کرتا ہے۔
لنکس حسب ضرورت ہیں اور صحیح طبقے کے ساتھ متعدد حالات میں کام کرتے ہیں۔ .disabled
ناقابل کلک لنکس اور .active
موجودہ صفحہ کے لیے۔
صفحہ بندی کے لنکس کی سیدھ کو تبدیل کرنے کے لیے دو اختیاری کلاسوں میں سے کسی ایک کو شامل کریں: .pagination-centered
اور .pagination-right
۔
پہلے سے طے شدہ صفحہ بندی کا جزو لچکدار ہے اور متعدد تغیرات میں کام کرتا ہے۔
ایک میں لپیٹ <div>
، صفحہ بندی صرف ایک <ul>
ہے۔
- <div class = "صفحہ بندی" >
- <ul>
- <li><a href = "#" > پچھلا </a></li>
- <li class = "فعال" >
- <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 = "#" > اگلا </a></li>
- </ul>
- </div>
پیجر کا جزو ہلکے مارک اپ اور حتیٰ کہ ہلکے انداز کے ساتھ آسان صفحہ بندی کے نفاذ کے لیے لنکس کا ایک مجموعہ ہے۔ یہ سادہ سائٹس جیسے بلاگز یا میگزینز کے لیے بہت اچھا ہے۔
پہلے سے طے شدہ طور پر، پیجر لنکس کو مرکز بناتا ہے۔
- <ul class = "پیجر" >
- <li>
- <a href="#" > پچھلا </a> _ _
- </li>
- <li>
- <a href="#" > اگلا </a> _ _
- </li>
- </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
اپنے مواد کو اس طرح لپیٹیں :
- <div class = "ہیرو یونٹ" >
- <h1> سرخی </h1>
- <p> ٹیگ لائن </p>
- <p>
- <a کلاس = "btn btn-primary btn-large" >
- اورجانیے
- </a>
- </p>
- </div>
یہ ایک سادہ ہیرو یونٹ ہے، نمایاں مواد یا معلومات پر اضافی توجہ دینے کے لیے جمبوٹرون طرز کا ایک سادہ جزو ہے۔
h1
کسی صفحہ پر مناسب طریقے سے جگہ نکالنے اور مواد کے حصوں کو الگ کرنے کے لیے ایک سادہ شیل ۔ یہ h1
کے ڈیفالٹ small
، عنصر کے ساتھ ساتھ زیادہ تر دیگر اجزاء (اضافی طرزوں کے ساتھ) استعمال کر سکتا ہے۔
- <div class = "page-haeder" >
- <h1> مثال صفحہ ہیڈر </h1>
- </div>
پہلے سے طے شدہ طور پر، بوٹسٹریپ کے تھمب نیلز کو کم سے کم مطلوبہ مارک اپ کے ساتھ منسلک تصاویر کو دکھانے کے لیے ڈیزائن کیا گیا ہے۔
تھوڑا سا اضافی مارک اپ کے ساتھ، کسی بھی قسم کا HTML مواد جیسے عنوانات، پیراگراف، یا بٹن کو تھمب نیلز میں شامل کرنا ممکن ہے۔
تھمب نیلز (پہلے .media-grid
v1.4 تک) تصاویر یا ویڈیوز کے گرڈ، تصویری تلاش کے نتائج، خوردہ مصنوعات، پورٹ فولیوز اور بہت کچھ کے لیے بہترین ہیں۔ وہ لنکس یا جامد مواد ہوسکتے ہیں۔
تھمب نیل مارک اپ آسان ہے - جس میں عناصر ul
کی تعداد کی li
ضرورت ہوتی ہے۔ یہ انتہائی لچکدار بھی ہے، جو آپ کے مواد کو سمیٹنے کے لیے کسی بھی قسم کے مواد کو تھوڑا سا زیادہ مارک اپ کے ساتھ اجازت دیتا ہے۔
آخر میں، تھمب نیلز کا جزو موجودہ گرڈ سسٹم کلاسز کا استعمال کرتا ہے — جیسے .span2
یا .span3
— تھمب نیل کے طول و عرض کے کنٹرول کے لیے۔
جیسا کہ پہلے ذکر کیا گیا ہے، تھمب نیلز کے لیے مطلوبہ مارک اپ ہلکا اور سیدھا ہے۔ منسلک تصاویر کے لیے پہلے سے طے شدہ سیٹ اپ پر ایک نظر یہ ہے :
- <ul class = "تھمب نیلز" >
- <li class = "span3" >
- <a href = "#" کلاس = "تھمب نیل" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a>
- </li>
- ...
- </ul>
تھمب نیلز میں حسب ضرورت HTML مواد کے لیے، مارک اپ تھوڑا سا تبدیل ہوتا ہے۔ بلاک سطح کے مواد کو کہیں بھی اجازت دینے کے لیے، ہم اس طرح <a>
کے لیے تبدیل کرتے ہیں <div>
:
- <ul class = "تھمب نیلز" >
- <li class = "span3" >
- <div class = "تھمب نیل" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> تھمب نیل لیبل </h5>
- <p> تھمب نیل کیپشن یہیں... </p>
- </div>
- </li>
- ...
- </ul>
بوٹسٹریپ 2 کے ساتھ، ہم نے بیس کلاس کو آسان بنا دیا ہے: .alert
کے بجائے .alert-message
۔ ہم نے کم از کم مطلوبہ مارک اپ کو بھی کم کر دیا ہے — کوئی <p>
ڈیفالٹ کی ضرورت نہیں ہے، صرف بیرونی <div>
۔
کم کوڈ کے ساتھ زیادہ پائیدار جزو کے لیے، ہم نے بلاک الرٹس، زیادہ پیڈنگ اور عام طور پر زیادہ متن کے ساتھ آنے والے پیغامات کے لیے فرق کو ہٹا دیا ہے۔ کلاس بھی تبدیل کر دی گئی ہے .alert-block
۔
بوٹسٹریپ ایک زبردست jQuery پلگ ان کے ساتھ آتا ہے جو انتباہی پیغامات کو سپورٹ کرتا ہے، انہیں فوری اور آسان بناتا ہے۔
سادہ کلاس کے ساتھ ایک div میں اپنا پیغام اور اختیاری کلوز آئیکن لپیٹیں۔
- <div class = "انتباہ" >
- <a class = "close" data-dismiss = "alert" > × </a>
- <strong> انتباہ! </strong> بہترین خود کو چیک کریں، آپ زیادہ اچھے نہیں لگ رہے ہیں۔
- </div>
معیاری الرٹ پیغام کو دو اختیاری کلاسوں کے ساتھ آسانی سے بڑھائیں: .alert-block
مزید پیڈنگ اور ٹیکسٹ کنٹرولز .alert-heading
کے لیے اور مماثل سرخی کے لیے۔
خود کو چیک کریں، آپ زیادہ اچھے نہیں لگ رہے ہیں۔ Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div class = " الرٹ الرٹ بلاک" >
- <a class = "close" data-dismiss = "alert" > × </a>
- <h4 class = "alert-heading" > وارننگ! </h4>
- خود کو چیک کریں، آپ نہیں ہیں...
- </div>
- <div class = " الرٹ الرٹ - ایرر " >
- ...
- </div>
- <div class = "انتباہ الرٹ-کامیابی" >
- ...
- </div>
- <div class = "انتباہ الرٹ-معلومات" >
- ...
- </div>
عمودی میلان کے ساتھ ڈیفالٹ پروگریس بار۔
- <div class = "progress" >
- <div کلاس = "بار"
- سٹائل = " چوڑائی : 60 %؛ " ></div>
- </div>
ایک دھاری دار اثر بنانے کے لیے گریڈینٹ کا استعمال کرتا ہے۔
- <div class = "progress progress-info
- ترقی کی دھاری دار" >
- <div کلاس = "بار"
- سٹائل = " چوڑائی : 20 %؛ " ></div>
- </div>
دھاری دار مثال لیتا ہے اور اسے متحرک کرتا ہے۔
- <div class = "ترقی کی پیشرفت-خطرہ
- ترقی کی پٹی والا فعال" >
- <div کلاس = "بار"
- سٹائل = " چوڑائی : 40 %؛ " ></div>
- </div>
پروگریس بار اسی طرح کے کچھ کلاس کے ناموں کو بٹن اور انتباہات کے طور پر اسی طرح کے اسٹائل کے لیے استعمال کرتے ہیں۔
.progress-info
.progress-success
.progress-danger
متبادل طور پر، آپ کم فائلوں کو اپنی مرضی کے مطابق بنا سکتے ہیں اور اپنے رنگ اور سائز کو رول کر سکتے ہیں۔
پروگریس بارز CSS3 ٹرانزیشن کا استعمال کرتے ہیں، لہذا اگر آپ متحرک طور پر جاوا اسکرپٹ کے ذریعے چوڑائی کو ایڈجسٹ کرتے ہیں، تو یہ آسانی سے سائز تبدیل کر دے گا۔
اگر آپ .active
کلاس کا استعمال کرتے ہیں، تو آپ .progress-striped
کی پروگریس بارز پٹیوں کو بائیں سے دائیں متحرک کر دیں گی۔
پروگریس بار اپنے تمام اثرات کو حاصل کرنے کے لیے CSS3 گریڈینٹ، ٹرانزیشن، اور اینیمیشنز کا استعمال کرتے ہیں۔ یہ خصوصیات IE7-8 یا Firefox کے پرانے ورژن میں تعاون یافتہ نہیں ہیں۔
اوپیرا اس وقت متحرک تصاویر کو سپورٹ نہیں کرتا ہے۔
کسی عنصر کو انسیٹ اثر دینے کے لیے اس پر ایک سادہ اثر کے طور پر کنویں کا استعمال کریں۔
- <div class = "اچھا" >
- ...
- </div>
موڈلز اور الرٹس جیسے مواد کو مسترد کرنے کے لیے عام قریبی آئیکن کا استعمال کریں۔
- <a class = "close" > × </a>