بوٽ اسٽريپ

شروع ٿيڻ

پروجيڪٽ جو جائزو، ان جو مواد، ۽ هڪ سادي ٽيمپليٽ سان ڪيئن شروع ڪجي.

1. ڊائون لوڊ ڪريو

ڊائون لوڊ ڪرڻ کان پهريان، پڪ ڪريو ته هڪ ڪوڊ ايڊيٽر (اسان سفارش ڪريون ٿا Sublime Text 2 ) ۽ HTML ۽ CSS جي ڪجهه ڪم ڪندڙ ڄاڻ. اسان هتي سورس فائلن جي ذريعي نه هلنداسين، پر اهي ڊائون لوڊ لاءِ موجود آهن. اسان اسان جي مرتب ڪيل بوٽ اسٽراپ فائلن سان شروع ڪرڻ تي ڌيان ڏينداسين.

ڊائون لوڊ مرتب ٿيل

شروع ڪرڻ جو تيز ترين طريقو: اسان جي CSS، JS، ۽ تصويرن جا مرتب ڪيل ۽ منجھيل ورجن حاصل ڪريو. ڪابه دستاويز يا اصل ماخذ فائلون نه آهن.

ڊائون لوڊ ڪريو Bootstrap

ڊائون لوڊ جو ذريعو

سڀني CSS ۽ Javasript لاءِ اصل فائلون حاصل ڪريو، ڊاڪس جي مقامي ڪاپي سان گڏ جديد نسخو ڊائون لوڊ ڪري سڌو GitHub مان.

ڊائون لوڊ ڪريو Bootstrap ذريعو

2. فائل جي جوڙجڪ

ڊائون لوڊ جي اندر توھان ھيٺ ڏنل فائل جي ڍانچي ۽ مواد کي ڳوليندا، منطقي طور تي عام اثاثن کي گروپ ڪرڻ ۽ مرتب ڪيل ۽ گھٽ ۾ گھٽ متغيرات مهيا ڪرڻ.

هڪ دفعو ڊائون لوڊ ٿيڻ بعد، ڪمپريس ٿيل فولڊر کي ان زپ ڪريو (مرتب ٿيل) بوٽ اسٽريپ جي ساخت کي ڏسڻ لاءِ. توھان ڪجھھ ھن وانگر ڏسندا:

  بوٽ اسٽريپ / ├── css / │ ├── بوٽ اسٽريپ . css
   │ ├── بوٽ اسٽريپ . منٽ _ css
   ├── js / │ ├── بوٽ اسٽريپ . js
   │ ├── بوٽ اسٽريپ . منٽ _ js
   ├── img / │ ├── glyphicons - اڌ . png
   │ ├── glyphicons - halflings - سفيد . png
  
  
        
        
        └── پڙهو . ايم ڊي

هي بوٽ اسٽريپ جو سڀ کان بنيادي روپ آهي: تقريبن ڪنهن به ويب پروجيڪٽ ۾ جلدي ڊراپ ان استعمال لاءِ مرتب ڪيل فائلون. اسان مرتب ڪيل CSS ۽ JS ( ) مهيا ڪندا آهيون bootstrap.*، گڏوگڏ مرتب ڪيل ۽ گھٽ ڪيل CSS ۽ JS ( bootstrap.min.*). تصويري فائلون استعمال ڪندي ڪمپريس ڪيون ويون آهن ImageOptim , PNGs کي ڪمپريس ڪرڻ لاءِ هڪ ميڪ ايپ.

3. ڇا شامل آهي

بوٽ اسٽريپ سڀني قسمن جي شين لاءِ HTML، CSS ۽ JS سان ليس اچي ٿو، پر انهن کي اختصار ڪري سگهجي ٿو مٿئين ڀاڱن سان جيڪي نظر اچن ٿا بوٽ اسٽريپ دستاويزن جي چوٽي تي .

دستاويز جا حصا

ڇڪڻ

قسم ۽ پس منظر کي ريٽ ڪرڻ لاء جسم لاء گلوبل انداز، لنڪ انداز، گرڊ سسٽم، ۽ ٻه سادي ترتيب.

بنيادي CSS

عام HTML عناصر لاءِ طرزون جهڙوڪ ٽائپوگرافي، ڪوڊ، ٽيبل، فارم، ۽ بٽڻ. Glyphicons پڻ شامل آھي ، ھڪڙو ننڍڙو آئڪن سيٽ.

اجزاء

بنيادي اسلوب عام انٽرفيس حصن لاءِ جيئن ته ٽيب ۽ گوليون، نيوبار، الرٽ، صفحو هيڊر، ۽ وڌيڪ.

جاوا اسڪرپٽ پلگ ان

اجزاء سان ملندڙ جلندڙ، اهي جاوا اسڪرپٽ پلگ ان شين جي ٽول ٽائپس، پاپ اوور، ماڊلز ۽ وڌيڪ لاءِ انٽرايڪٽو اجزا آهن.

اجزاء جي فهرست

گڏو گڏ، اجزاء ۽ جاوا اسڪرپٽ پلگ ان سيڪشن ھيٺ ڏنل انٽرفيس عناصر مهيا ڪن ٿا:

  • بٽڻ گروپ
  • بٽڻ دٻائڻ
  • نيويگيشنل ٽيب، گوليون، ۽ فهرستون
  • نوبار
  • ليبلز
  • بيج
  • صفحو هيڊر ۽ هيرو يونٽ
  • ٺٺوليون
  • خبرداري
  • ترقي بار
  • ماڊلز
  • ڊراپ ڊائونز
  • ٽول ٽِپ
  • پاپورز
  • اڪارڊون
  • ڪارونجهر
  • ٽائيپ هيڊ

مستقبل جي ھدايتن ۾، اسان انفرادي طور تي وڌيڪ تفصيل سان انھن اجزاء ذريعي ھلندا سين. ان وقت تائين، انهن مان هر هڪ کي ڏسو دستاويزن ۾ معلومات لاءِ ته انهن کي ڪيئن استعمال ڪجي ۽ ڪسٽمائيز ڪجي.

4. بنيادي HTML ٽيمپليٽ

مواد جي مختصر تعارف سان، اسان استعمال ڪرڻ لاء بوٽ اسٽراپ کي استعمال ڪرڻ تي ڌيان ڏئي سگھون ٿا. ائين ڪرڻ لاءِ، اسان هڪ بنيادي HTML ٽيمپليٽ استعمال ڪنداسين جنهن ۾ هر شيءِ شامل آهي جنهن جو ذڪر اسان فائل ڍانچي ۾ ڪيو آهي .

هاڻي، هتي هڪ عام HTML فائل تي هڪ نظر آهي :

  1. <html>
  2.   <سر>
  3.     <title> Bootstrap 101 Template </title>
  4.   </head>
  5.   <جسم>
  6.     <h1> هيلو، دنيا! </h1>
  7.   </body>
  8. </html>

هن کي بوٽ اسٽريپ ٿيل ٽيمپليٽ ٺاهڻ لاءِ ، صرف مناسب CSS ۽ JS فائلون شامل ڪريو:

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

۽ توهان مقرر آهيو! انهن ٻن فائلن کي شامل ڪرڻ سان، توهان بوٽ اسٽراپ سان ڪنهن به سائيٽ يا ايپليڪيشن کي ترقي ڪرڻ شروع ڪري سگهو ٿا.

5. مثال

ڪجھ مثالن جي ترتيب سان بنيادي ٽيمپليٽ کان اڳتي وڌو. اسان ماڻهن کي حوصلا افزائي ڪريون ٿا ته انهن مثالن تي ٻيهر ورجائي ۽ نه صرف انهن کي آخري نتيجو طور استعمال ڪريو.

  • بنيادي مارڪيٽنگ سائيٽ

    بنيادي پيغام ۽ ٽن معاون عناصر لاءِ هيرو يونٽ جي خاصيت.

  • فلاڻي ترتيب

    اسان جو نئون جوابي، فلو گرڊ سسٽم استعمال ڪري ٿو هڪ بيحد مائع ترتيب ٺاهڻ لاءِ.

  • شروعاتي ٽيمپليٽ

    ھڪڙو بيئر بون HTML دستاويز سڀني بوٽ اسٽراپ سي ايس ايس ۽ جاوا اسڪرپٽ شامل آھي.

ٻيو ڇا؟

معلومات، مثالن، ۽ ڪوڊ جي ٽڪڙن لاءِ دستاويزن ڏانهن وڃو، يا ايندڙ ليپ وٺو ۽ ڪنهن به ايندڙ منصوبي لاءِ بوٽ اسٽريپ کي ترتيب ڏيو.

Bootstrap دستاويزن جو دورو ڪريو بوٽ اسٽريپ کي ترتيب ڏيو