بوٹسٹریپ

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

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

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

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

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

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

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

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

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

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

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

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

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

  بوٹسٹریپ / ├── css / │ ├── بوٹسٹریپ ۔ css
   │ ├── بوٹسٹریپ ۔ منٹ _ css
   ├── js / │ ├── بوٹسٹریپ ۔ js
   │ ├── بوٹسٹریپ ۔ منٹ _ js
   ├── img / │ ├── glyphicons - ہافلنگز _ png
   │ ├── glyphicons - halflings - white . png
  
  
        
        
        └── README . md

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

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

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

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

سہاروں ۔

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

بیس سی ایس ایس

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

اجزاء

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

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

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

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

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

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

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

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

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

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

  1. <html>
  2.   <head>
  3.     <title> بوٹسٹریپ 101 ٹیمپلیٹ </title>
  4.   </head>
  5.   <body>
  6.     <h1> ہیلو، دنیا! </h1>
  7.   </body>
  8. </html>

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

  1. <html>
  2.   <head>
  3.     <title> بوٹسٹریپ 101 ٹیمپلیٹ </title>
  4.     <!-- بوٹسٹریپ -->
  5.     <link href = "css/bootstrap.min.css" rel = "stylesheet" >  
  6.   </head>
  7.   <body>
  8.     <h1> ہیلو، دنیا! </h1>
  9.     <script src = "js/bootstrap.min.js" ></script> 
  10.   </body>
  11. </html>

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

5. مثالیں

Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.

  • Basic marketing site

    Featuring a hero unit for a primary message and three supporting elements.

  • Fluid layout

    Uses our new responsive, fluid grid system to create a seamless liquid layout.

  • Starter template

    A barebones HTML document with all the Bootstrap CSS and javascript included.

What next?

Head to the docs for information, examples, and code snippets, or take the next leap and customize Bootstrap for any upcoming project.

Visit the Bootstrap docs Customize Bootstrap