Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
بوٹسٹریپ ٹویٹر کی طرف سے ایک ٹول کٹ ہے جسے ویب ایپس اور سائٹس کی ترقی شروع کرنے کے لیے ڈیزائن کیا گیا ہے۔
اس میں ٹائپوگرافی، فارمز، بٹنز، ٹیبلز، گرڈز، نیویگیشن اور مزید کے لیے بیس CSS اور HTML شامل ہیں۔
نیرڈ الرٹ: بوٹسٹریپ کم کے ساتھ بنایا گیا ہے اور جدید براؤزرز کو ذہن میں رکھتے ہوئے گیٹ سے باہر کام کرنے کے لیے ڈیزائن کیا گیا ہے۔
تیز ترین اور آسان ترین آغاز کے لیے، بس اس ٹکڑوں کو اپنے ویب پیج میں کاپی کریں۔
کم استعمال کرنے کے پرستار؟ کوئی مسئلہ نہیں، صرف ریپو کو کلون کریں اور یہ لائنیں شامل کریں:
Github پر آفیشل بوٹسٹریپ ریپو کے ساتھ ڈاؤن لوڈ، فورک، پل، فائل ایشوز اور بہت کچھ۔
ٹویٹر کے ابتدائی دنوں میں، انجینئرز فرنٹ اینڈ کی ضروریات کو پورا کرنے کے لیے تقریباً کسی بھی لائبریری کا استعمال کرتے تھے جس سے وہ واقف تھے۔ بوٹسٹریپ ان چیلنجوں کے جواب کے طور پر شروع ہوا جو ٹوئٹر کے پہلے ہیک ویک کے دوران پیش کیے گئے اور ترقی میں تیزی آئی۔
ٹویٹر پر بہت سے انجینئرز کی مدد اور آراء کے ساتھ، بوٹسٹریپ نے نہ صرف بنیادی طرزوں کو شامل کرنے کے لیے نمایاں طور پر ترقی کی ہے، بلکہ مزید خوبصورت اور پائیدار فرنٹ اینڈ ڈیزائن پیٹرن بھی شامل کیے ہیں۔
dev.twitter.com پر مزید پڑھیں ›
کروم، سفاری، انٹرنیٹ ایکسپلورر، اور فائر فاکس جیسے بڑے جدید براؤزرز میں بوٹسٹریپ کا تجربہ اور تعاون کیا جاتا ہے۔
بوٹسٹریپ مرتب شدہ سی ایس ایس، غیر مرتب شدہ، اور مثال کے سانچوں کے ساتھ مکمل آتا ہے۔
بوٹسٹریپ کے حصے کے طور پر فراہم کردہ ڈیفالٹ گرڈ سسٹم ایک 940px چوڑا 16 کالم گرڈ ہے۔ یہ مقبول 960 گرڈ سسٹم کا ذائقہ ہے، لیکن بائیں اور دائیں جانب اضافی مارجن/پڈنگ کے بغیر۔
جیسا کہ یہاں دکھایا گیا ہے، ایک بنیادی ترتیب دو "کالموں" کے ساتھ بنائی جا سکتی ہے، ہر ایک 16 بنیادی کالموں کی تعداد پر پھیلا ہوا ہے جسے ہم نے اپنے گرڈ سسٹم کے حصے کے طور پر بیان کیا ہے۔ مزید تغیرات کے لیے ذیل کی مثالیں دیکھیں۔
- <div class="row">
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
کسی بھی سائٹ یا صفحہ کے لیے ایک بنیادی 940px چوڑا، سینٹرڈ کنٹینر لے آؤٹ۔
- <body>
- <div class = "کنٹینر" >
- ...
- </div>
- </body>
کم سے کم اور زیادہ سے زیادہ چوڑائی اور بائیں طرف کی سائڈبار کے ساتھ ایک لچکدار سیال یا مائع صفحہ کا ڈھانچہ۔ ایپس کے لیے بہت اچھا ہے۔
- <body>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "content" >
- ...
- </div>
- </div>
- </body>
آپ کے ویب صفحات کی ساخت کے لیے ایک معیاری ٹائپوگرافک درجہ بندی۔
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id Nibh ultricies vehicula ut id elit.
زور، پتے، اور مخففات کا استعمال کرتے ہوئے
<strong>
<em>
<address>
<abbr>
زور والے ٹیگز ( <strong>
اور <em>
) کا استعمال کسی لفظ یا فقرے کی اضافی اہمیت یا اس کے ارد گرد کی نقل کے نسبت سے زور دینے کے لیے کیا جانا چاہیے۔ <strong>
اہمیت اور تناؤ<em>
پر زور دینے کے لیے استعمال کریں ۔
Fusce dapibus , tellus ac cursus commodo , Tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae elit libero، a pharetra augue.
نوٹ:<b>
HTML5 میں استعمال کرنا اور ٹیگ کرنا اب بھی ٹھیک ہے <i>
، لیکن وہ اب موروثی انداز کے ساتھ نہیں آتے ہیں۔ <b>
اضافی اہمیت کے بغیر الفاظ یا جملے کو نمایاں کرنا ہے، جبکہ <i>
زیادہ تر آواز، تکنیکی اصطلاحات وغیرہ کے لیے ہے۔
عنصر کو <address>
اس کے قریبی آباؤ اجداد، یا کام کے پورے جسم کے لیے رابطے کی معلومات کے لیے استعمال کیا جاتا ہے۔ یہاں یہ کیسا لگتا ہے:
نوٹ: مواد کی مناسب ساخت کے لیے ہر لائن کا <address>
اختتام لائن بریک ( <br />
) کے ساتھ ہونا چاہیے یا بلاک لیول ٹیگ (مثلاً، ) میں لپیٹا جانا چاہیے ۔<p>
مخففات اور مخففات کے لیے، <abbr>
ٹیگ استعمال کریں ( HTML5<acronym>
میں فرسودہ ہے )۔ شارٹ ہینڈ فارم کو ٹیگ کے اندر رکھیں اور مکمل نام کے لیے ایک ٹائٹل سیٹ کریں۔
<blockquote>
<p>
<small>
بلاک کوٹ شامل کرنے کے لیے، <blockquote>
ارد گرد لپیٹیں <p>
اور <small>
ٹیگ کریں۔ <small>
اپنے ماخذ کا حوالہ دینے کے لیے عنصر کا استعمال کریں اور آپ کو —
اس سے پہلے ایک ایم ڈیش ملے گا۔
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
ڈاکٹر جولیس ہیبرٹ
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
میزیں بہت اچھی ہیں — بہت سی چیزوں کے لیے۔ عظیم میزیں، تاہم، مفید، توسیع پذیر، اور پڑھنے کے قابل ہونے کے لیے (کوڈ کی سطح پر) تھوڑا سا مارک اپ محبت کی ضرورت ہے۔ مدد کے لیے یہاں چند تجاویز ہیں۔
اپنے کالم ہیڈر کو ہمیشہ <thead>
اس طرح لپیٹیں کہ درجہ بندی <thead>
> <tr>
> <th>
ہو ۔
کالم ہیڈر کی طرح، آپ کے ٹیبل کے تمام باڈی مواد کو ایک میں لپیٹنا چاہیے <tbody>
تاکہ آپ کا درجہ بندی <tbody>
> <tr>
> <td>
ہو۔
پڑھنے کی اہلیت کو یقینی بنانے اور ساخت کو برقرار رکھنے کے لیے تمام میزیں خود بخود صرف ضروری سرحدوں کے ساتھ اسٹائل کی جائیں گی۔ اضافی کلاس یا صفات شامل کرنے کی ضرورت نہیں ہے۔
# | پہلا نام | آخری نام | زبان |
---|---|---|---|
1 | کچھ | ایک | انگریزی |
2 | جو | چھ پیک | انگریزی |
3 | سٹو | ڈینٹ | کوڈ |
- <table class="common-table"> کلاس = "کامن ٹیبل" >
- ...
- </table>
زیبرا سٹرپنگ شامل کر کے اپنی ٹیبلز کے ساتھ تھوڑا سا فینسی حاصل کریں — بس .zebra-striped
کلاس شامل کریں۔
# | پہلا نام | آخری نام | زبان |
---|---|---|---|
1 | کچھ | ایک | انگریزی |
2 | جو | چھ پیک | انگریزی |
3 | سٹو | ڈینٹ | کوڈ |
نوٹ: زیبرا سٹرپنگ ایک ترقی پسند اضافہ ہے جو پرانے براؤزرز جیسے IE8 اور نیچے کے لیے دستیاب نہیں ہے۔
- <table class="common-table zebra-striped"> کلاس = "کامن ٹیبل زیبرا دھاری دار" >
- ...
- </table>
پچھلی مثال کو لے کر، ہم jQuery اور Tablesorter پلگ ان کے ذریعے ترتیب دینے کی فعالیت فراہم کرکے اپنے ٹیبل کی افادیت کو بہتر بناتے ہیں۔ ترتیب کو تبدیل کرنے کے لیے کسی بھی کالم کے ہیڈر پر کلک کریں۔
# | پہلا نام | آخری نام | زبان |
---|---|---|---|
1 | آپ کا | ایک | انگریزی |
2 | جو | چھ پیک | انگریزی |
3 | سٹو | ڈینٹ | کوڈ |
- <script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( فنکشن () {
- $ ( "table#sortTableExample" )۔ ٹیبلسورٹر ({ sortList : [[ 1 , 0 ]] })؛
- });
- </script>
- <ٹیبل کلاس = "کامن ٹیبل زیبرا دھاری دار" >
- ...
- </table>
تمام فارمز کو پڑھنے کے قابل اور قابل توسیع انداز میں پیش کرنے کے لیے پہلے سے طے شدہ انداز دیے گئے ہیں۔ طرزیں ٹیکسٹ ان پٹس، سلیکٹ لسٹ، ٹیکسٹیریاز، ریڈیو بٹن اور چیک باکسز اور بٹنوں کے لیے فراہم کی جاتی ہیں۔
اپنے فارم کے ایچ ٹی ایم ایل میں شامل کریں .form-stacked
اور آپ کے بائیں طرف کے بجائے ان کے فیلڈز کے اوپر لیبلز ہوں گے۔ یہ بہت اچھا کام کرتا ہے اگر آپ کے فارم چھوٹے ہیں یا آپ کے پاس بھاری فارمز کے لیے دو کالم ان پٹ ہیں۔
ایک کنونشن کے طور پر، بٹنوں کو اعمال کے لیے استعمال کیا جاتا ہے جبکہ لنکس اشیاء کے لیے استعمال کیے جاتے ہیں۔ مثال کے طور پر، "ڈاؤن لوڈ" ایک بٹن ہو سکتا ہے اور "حالیہ سرگرمی" ایک لنک ہو سکتا ہے۔
تمام بٹن پہلے سے ہلکے سرمئی طرز پر ہوتے ہیں، لیکن نیلی .primary
کلاس دستیاب ہے۔ اس کے علاوہ، آپ کے اپنے شیلیوں کو رول کرنا آسان ہے.
بٹن کی طرزیں کسی بھی چیز پر لگائی جا سکتی ہیں .btn
۔ <a>
عام طور پر آپ ان کو صرف ، <button>
اور منتخب <input>
عناصر پر لاگو کرنا چاہیں گے ۔ یہاں یہ کیسا لگتا ہے:
بڑے یا چھوٹے بٹن پسند ہیں؟ اس پر ہے!
ان بٹنوں کے لیے جو فعال نہیں ہیں یا کسی نہ کسی وجہ سے ایپ کے ذریعے غیر فعال ہیں، غیر فعال حالت کا استعمال کریں۔ یہ .disabled
روابط اور عناصر :disabled
کے لیے ہے۔<button>
ناکامی، ممکنہ ناکامی، یا کسی عمل کی کامیابی کو اجاگر کرنے کے لیے ایک سطری پیغامات۔ فارم کے لیے خاص طور پر مفید ہے۔
ایسے پیغامات کے لیے جن کے لیے تھوڑی وضاحت کی ضرورت ہوتی ہے، ہمارے پاس پیراگراف اسٹائل الرٹس ہیں۔ یہ لمبے لمبے خرابی کے پیغامات کو بلبلا کرنے، صارف کو زیر التواء کارروائی سے خبردار کرنے، یا صفحہ پر مزید زور دینے کے لیے صرف معلومات پیش کرنے کے لیے بہترین ہیں۔
موڈلز—ڈائیلاگز یا لائٹ بکس—ایسے حالات میں سیاق و سباق سے متعلق کارروائیوں کے لیے بہترین ہیں جہاں یہ ضروری ہے کہ پس منظر کے سیاق و سباق کو برقرار رکھا جائے۔
ایک ٹھیک جسم…
کنفیوزڈ صارف کی مدد کرنے اور انہیں صحیح سمت کی طرف اشارہ کرنے کے لیے Twipsies انتہائی مفید ہیں۔
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur، aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo، voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit، totam doloremque unde sunt sed dicta quae fugit quaevoltasuptum volutasuptium
لے آؤٹ کو متاثر کیے بغیر کسی صفحہ کو ذیلی متن کی معلومات فراہم کرنے کے لیے پاپ اوور کا استعمال کریں۔
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
بوٹسٹریپ کو Preboot کے ساتھ بنایا گیا تھا ، جو کہ تیز اور آسان ویب ڈویلپمنٹ کے لیے ایک CSS پری پروسیسر Less کے ساتھ مل کر استعمال کیے جانے والے مکسینز اور متغیرات کا ایک اوپن سورس پیک ہے ۔
چیک کریں کہ ہم نے بوٹسٹریپ میں پری بوٹ کا استعمال کیسے کیا اور اگر آپ اپنے اگلے پروجیکٹ پر کم چلانے کا انتخاب کرتے ہیں تو آپ اسے کیسے استعمال کر سکتے ہیں۔
اپنے براؤزر میں جاوا اسکرپٹ کے ذریعے بوٹسٹریپ کے کم متغیرات، مکسنس، اور سی ایس ایس میں نیسٹنگ کا مکمل استعمال کرنے کے لیے اس اختیار کا استعمال کریں۔
- <link rel="stylesheet/less" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" href = "less/bootstrap.less" میڈیا = "تمام" />
- <script src = "js/less-1.0.41.min.js" ></script>
.js حل محسوس نہیں کر رہے؟ کم میک ایپ آزمائیں یا جب آپ اپنا کوڈ لگاتے ہیں تو مرتب کرنے کے لیے Node.js استعمال کریں۔
بوٹسٹریپ کے حصے کے طور پر ٹویٹر بوٹسٹریپ میں کیا شامل ہے اس کی کچھ جھلکیاں یہ ہیں۔ ڈاؤن لوڈ کرنے اور مزید جاننے کے لیے بوٹسٹریپ ویب سائٹ یا گیتھب پروجیکٹ پیج پر جائیں۔
کم میں متغیرات آپ کے سی ایس ایس کے سر درد کو مفت برقرار رکھنے اور اپ ڈیٹ کرنے کے لیے بہترین ہیں۔ جب آپ رنگ کی قیمت یا اکثر استعمال ہونے والی قدر کو تبدیل کرنا چاہتے ہیں، تو اسے ایک جگہ پر اپ ڈیٹ کریں اور آپ سیٹ ہو جائیں۔
- // لنکس
- @linkColor : #8b59c2؛
- @linkColorHover : گہرا ( @linkColor ، 10 )؛
- // گرے
- سیاہ : #000؛
- گرے ڈارک : ہلکا ( @ سیاہ ، 25 ٪)؛
- گرے : ہلکا ( @ سیاہ ، 50 ٪)؛
- گرے لائٹ : ہلکا ( @ سیاہ ، 70 ٪)؛
- گرے لائٹر : ہلکا ( @ سیاہ ، 90 ٪)؛
- @white : #ffff;
- // لہجے کے رنگ
- @blue : #08b5fb;
- سبز : #46a546 ;
- @سرخ : #9d261d ;
- @yellow : #ffc40d;
- @اورنج : #f89406 ؛
- @pink : #c3325f;
- @جامنی : #7a43b6 ;
- // بیس لائن
- @baseline : 20px ;
/* ... */
کم سی ایس ایس کے عام نحو کے علاوہ تبصرہ کرنے کا ایک اور انداز بھی فراہم کرتا ہے۔
- // یہ ایک تبصرہ ہے۔
- /* یہ بھی ایک تبصرہ ہے*/
مکسینز بنیادی طور پر سی ایس ایس کے لیے شامل یا جزوی ہوتے ہیں، جو آپ کو کوڈ کے بلاک کو ایک میں جوڑنے کی اجازت دیتے ہیں۔ وہ وینڈر پریفکسڈ پراپرٹیز جیسے box-shadow
کراس براؤزر گریڈینٹ، فونٹ اسٹیک اور مزید کے لیے بہترین ہیں۔ ذیل میں مکسین کا ایک نمونہ ہے جو بوٹسٹریپ کے ساتھ شامل ہیں۔
- #فونٹ {
- . شارٹ ہینڈ ( @وزن : نارمل ، @ سائز : 14px ، @lineHeight : 20px ) {
- فونٹ سائز : @size ; _
- فونٹ وزن : @weight ; _
- لائن کی اونچائی : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- فونٹ فیملی : "Helvetica Neue " , Helvetica , Arial , sans - serif ؛
- فونٹ سائز : @size ; _
- فونٹ وزن : @weight ; _
- لائن کی اونچائی : @lineHeight ;
- }
- . سیرف ( @وزن : نارمل ، @ سائز : 14px ، @lineHeight : 20px ) {
- فونٹ فیملی : " جارجیا " ، ٹائمز نیو رومن ، ٹائمز ، سینز سیرف ؛
- فونٹ سائز : @size ; _
- فونٹ وزن : @weight ; _
- لائن کی اونچائی : @lineHeight ;
- }
- . مونو اسپیس ( @وزن : نارمل ، @ سائز : 12px ، @lineHeight : 20px ) {
- فونٹ فیملی : "موناکو" ، کورئیر نیو ، مونو اسپیس ؛
- فونٹ سائز : @size ; _
- فونٹ وزن : @weight ; _
- لائن کی اونچائی : @lineHeight ;
- }
- }
- #گریڈینٹ {
- . افقی ( @startColor : #555, @endColor: #333) {
- پس منظر - رنگ : @endColor ;
- پس منظر - دوبارہ : دوبارہ - x ;
- پس منظر - تصویر : - khtml - گریڈینٹ ( لکیری ، بائیں اوپر ، دائیں اوپر ، ( @startColor ) سے ( @endColor ) تک ؛ // کونکرر
- پس منظر - تصویر : - موز - لکیری - میلان ( بائیں , @startColor , @endColor )؛ // FF 3.6+
- پس منظر - تصویر : - ایم ایس - لکیری - گریڈینٹ ( بائیں , @startColor , @endColor )؛ // IE10
- پس منظر - تصویر : - ویب کٹ - میلان ( لکیری ، بائیں اوپر ، دائیں اوپر ، رنگ - سٹاپ ( 0 %، @startColor )، رنگ - سٹاپ ( 100 ٪، @endColor ))؛ // Safari 4+, Chrome 2+
- پس منظر - تصویر : - ویب کٹ - لکیری - میلان ( بائیں , @startColor , @endColor ) ؛ // Safari 5.1+, Chrome 10+
- پس منظر - تصویر : - o - لکیری - میلان ( بائیں , @startColor , @endColor )؛ // اوپیرا 11.10
- - ms - فلٹر : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- فلٹر : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 اور IE7
- پس منظر - تصویر : لکیری - میلان ( بائیں , @startColor , @endColor )؛ // لی معیاری
- }
- . عمودی ( @startColor : #555, @endColor: #333) {
- پس منظر - رنگ : @endColor ;
- پس منظر - دوبارہ : دوبارہ - x ;
- پس منظر - تصویر : - khtml - گریڈینٹ ( لکیری ، بائیں اوپر ، بائیں نیچے ، ( @startColor ) سے ( @endColor ) تک ؛ // کونکرر
- پس منظر - تصویر : - موز - لکیری - میلان ( @startColor , @endColor )؛ // FF 3.6+
- پس منظر - تصویر : - ایم ایس - لکیری - گریڈینٹ ( @startColor , @endColor )؛ // IE10
- پس منظر - تصویر : - ویب کٹ - میلان ( لکیری ، بائیں اوپر ، بائیں نیچے ، رنگ - سٹاپ ( %، @startColor )، رنگ - سٹاپ ( 100 ٪، @endColor ) )؛ // Safari 4+, Chrome 2+
- پس منظر - تصویر : - ویب کٹ - لکیری - میلان ( @startColor , @endColor )؛ // Safari 5.1+, Chrome 10+
- پس منظر - تصویر : - o - لکیری - میلان ( @startColor , @endColor )؛ // اوپیرا 11.10
- - ms - فلٹر : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- فلٹر : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 اور IE7
- پس منظر - تصویر : لکیری - میلان ( @startColor , @endColor )؛ // معیار
- }
- . سمتی ( @startColor : #555، @endColor: #333، @deg: 45deg) {
- ...
- }
- . عمودی - تین - رنگ ( @startColor : #00b3ee، @midColor: #7a43b6، @colorStop: 0.5، @endColor: #c3325f) {
- ...
- }
- }
فینسی حاصل کریں اور نیچے کی طرح لچکدار اور طاقتور مکسنس تیار کرنے کے لیے کچھ ریاضی انجام دیں۔
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // گرڈ سسٹم
- . کنٹینر {
- چوڑائی: @siteWidth ؛
- مارجن: خود 0 ؛
- . clearfix ()
- }
- . کالم ( @columnSpan : 1 ) {
- ڈسپلے: ان لائن؛
- تیرنا : بائیں؛
- چوڑائی: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1))؛
- مارجن-بائیں: @gridGutterWidth؛
- اور:پہلا بچہ {
- مارجن-بائیں: 0؛
- }
- }
- .offset(@columnOffset: 1) {
- مارجن-بائیں: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !اہم؛
- }