بوٹسٹریپ

شروع ہوا چاہتا ہے

پروجیکٹ کا جائزہ، اس کے مشمولات، اور ایک سادہ ٹیمپلیٹ کے ساتھ شروع کرنے کا طریقہ۔

ہیڈ اپ! یہ دستاویزات v2.3.2 کے لیے ہیں، جو اب سرکاری طور پر تعاون یافتہ نہیں ہے۔ بوٹسٹریپ کا تازہ ترین ورژن دیکھیں!

1. ڈاؤن لوڈ کریں۔

ڈاؤن لوڈ کرنے سے پہلے، اس بات کو یقینی بنائیں کہ ایک کوڈ ایڈیٹر (ہم سبلائم ٹیکسٹ 2 کی تجویز کرتے ہیں) اور HTML اور CSS کے بارے میں کچھ کام کرنے والی معلومات رکھیں۔ ہم یہاں سورس فائلوں کو نہیں دیکھیں گے، لیکن وہ ڈاؤن لوڈ کے لیے دستیاب ہیں۔ ہم مرتب کردہ بوٹسٹریپ فائلوں کے ساتھ شروعات کرنے پر توجہ مرکوز کریں گے۔

مرتب شدہ ڈاؤن لوڈ

شروع کرنے کا تیز ترین طریقہ: ہمارے CSS، JS، اور امیجز کے مرتب شدہ اور چھوٹے ورژن حاصل کریں۔ کوئی دستاویزات یا اصل ماخذ فائلیں نہیں ہیں۔

بوٹسٹریپ ڈاؤن لوڈ کریں۔

ماخذ ڈاؤن لوڈ کریں۔

GitHub سے براہ راست تازہ ترین ورژن ڈاؤن لوڈ کرکے دستاویزات کی مقامی کاپی کے ساتھ تمام CSS اور JavaScript کے لیے اصل فائلیں حاصل کریں۔

بوٹسٹریپ سورس ڈاؤن لوڈ کریں۔

2. فائل کا ڈھانچہ

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

ایک بار ڈاؤن لوڈ ہونے کے بعد، (مرتب کردہ) بوٹسٹریپ کی ساخت دیکھنے کے لیے کمپریسڈ فولڈر کو ان زپ کریں۔ آپ کو کچھ اس طرح نظر آئے گا:

  بوٹسٹریپ / ├── css / │ ├── بوٹسٹریپ ۔ css
   │ ├── بوٹسٹریپ ۔ منٹ _ css
   ├── js / │ ├── بوٹسٹریپ ۔ js
   │ ├── بوٹسٹریپ ۔ منٹ _ js
   └── img / ├── glyphicons - halflings . png
       └── glyphicons - halflings - white . png

یہ بوٹسٹریپ کی سب سے بنیادی شکل ہے: تقریبا کسی بھی ویب پروجیکٹ میں فوری ڈراپ ان استعمال کے لیے مرتب کردہ فائلیں۔ ہم مرتب کردہ CSS اور JS ( bootstrap.*) کے ساتھ ساتھ مرتب شدہ اور minified CSS اور JS ( bootstrap.min.*) فراہم کرتے ہیں۔ تصویری فائلوں کو ImageOptim کا استعمال کرتے ہوئے کمپریس کیا جاتا ہے، PNGs کو کمپریس کرنے کے لیے ایک میک ایپ۔

براہ کرم نوٹ کریں کہ تمام JavaScript پلگ انز کو jQuery شامل کرنے کی ضرورت ہوتی ہے۔

3. کیا شامل ہے۔

بوٹسٹریپ ہر قسم کی چیزوں کے لیے HTML، CSS، اور JS سے لیس ہے، لیکن ان کا خلاصہ بوٹسٹریپ دستاویزات کے اوپری حصے میں نظر آنے والے مٹھی بھر زمروں کے ساتھ کیا جا سکتا ہے ۔

دستاویزات کے حصے

سہاروں ۔

قسم اور پس منظر کو دوبارہ ترتیب دینے کے لیے باڈی کے لیے گلوبل اسٹائل، لنک اسٹائل، گرڈ سسٹم، اور دو سادہ لے آؤٹ۔

بیس سی ایس ایس

عام HTML عناصر جیسے ٹائپوگرافی، کوڈ، ٹیبلز، فارمز اور بٹن کے لیے طرزیں۔ اس میں Glyphicons بھی شامل ہے ، ایک چھوٹا سا آئیکن سیٹ۔

اجزاء

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

جاوا اسکرپٹ پلگ انز

اجزاء کی طرح، یہ JavaScript پلگ ان ٹول ٹپس، پاپ اوور، موڈلز اور مزید چیزوں کے لیے انٹرایکٹو اجزاء ہیں۔

اجزاء کی فہرست

ایک ساتھ، اجزاء اور جاوا اسکرپٹ پلگ ان سیکشن درج ذیل انٹرفیس عناصر فراہم کرتے ہیں:

  • بٹن گروپس
  • بٹن ڈراپ ڈاؤنز
  • نیویگیشنل ٹیبز، گولیاں اور فہرستیں۔
  • نوبار
  • لیبلز
  • بیجز
  • صفحہ ہیڈر اور ہیرو یونٹ
  • تھمب نیلز
  • انتباہات
  • ترقی کی سلاخیں
  • ماڈلز
  • ڈراپ ڈاؤن
  • ٹول ٹپس
  • پاپورز
  • ایکارڈین
  • Carousel
  • ٹائپ ہیڈ

مستقبل کی گائیڈز میں، ہم انفرادی طور پر ان اجزاء کے ذریعے مزید تفصیل سے چل سکتے ہیں۔ تب تک، ان میں سے ہر ایک کو دستاویزات میں تلاش کریں تاکہ ان کو کس طرح استعمال کیا جائے اور اپنی مرضی کے مطابق کیا جائے۔

4. بنیادی HTML ٹیمپلیٹ

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

اب، یہاں ایک عام HTML فائل پر ایک نظر ہے :

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title> بوٹسٹریپ 101 ٹیمپلیٹ </title>
  5.     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  6.   </head>
  7.   <body>
  8.     <h1> ہیلو، دنیا! </h1>
  9.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  10.   </body>
  11. </html>

اسے Bootstrapped ٹیمپلیٹ بنانے کے لیے ، صرف مناسب CSS اور JS فائلیں شامل کریں:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title> بوٹسٹریپ 101 ٹیمپلیٹ </title>
  5.     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  6.     <!-- بوٹسٹریپ -->
  7.     <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "screen" >   
  8.   </head>
  9.   <body>
  10.     <h1> ہیلو، دنیا! </h1>
  11.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  12.     <script src = "js/bootstrap.min.js" ></script> 
  13.   </body>
  14. </html>

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

5. مثالیں

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

  • سٹارٹر ٹیمپلیٹ

    تمام بوٹسٹریپ سی ایس ایس اور جاوا اسکرپٹ کے ساتھ ایک ننگی HTML دستاویز۔

  • بنیادی مارکیٹنگ سائٹ

    ایک بنیادی پیغام اور تین معاون عناصر کے لیے ہیرو یونٹ کی خاصیت۔

  • سیال لے آؤٹ

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

  • تنگ مارکیٹنگ

    چھوٹے پروجیکٹس یا ٹیموں کے لیے پتلا، ہلکا پھلکا مارکیٹنگ ٹیمپلیٹ۔

  • جائز nav

    ایک ترمیم شدہ نیوی بار میں مساوی چوڑائی والے نیویگیشن لنکس کے ساتھ مارکیٹنگ کا صفحہ۔

  • سائن ان

    بیئر بونز حسب ضرورت، بڑے فارم کنٹرولز اور لچکدار ترتیب کے ساتھ فارم میں سائن ان ہوتے ہیں۔

  • چسپاں فوٹر

    صارف کے ویو پورٹ کے نیچے ایک مقررہ اونچائی والے فوٹر کو پن کریں۔

  • کیروسل جمبوٹرون

    بنیادی مارکیٹنگ سائٹ پر ایک زیادہ انٹرایکٹو رِف جس میں نمایاں carousel شامل ہے۔

آگے کیا؟

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

بوٹسٹریپ دستاویزات دیکھیں بوٹسٹریپ کو اپنی مرضی کے مطابق بنائیں