معرفی

با بوت استرپ، محبوب ترین فریمورک جهان برای ساخت سایت های واکنش گرا و اولین تلفن همراه، با jsDelivr و صفحه شروع قالب شروع کنید.

شروع سریع

به دنبال اضافه کردن سریع بوت استرپ به پروژه خود هستید؟از jsDelivr استفاده کنید که به صورت رایگان توسط کاربران jsDelivr ارائه شده است. از پکیج منیجر استفاده می کنید یا نیاز به دانلود فایل های منبع دارید؟به صفحه دانلودها سر بزنید

CSS

برای بارگذاری CSS ما، قبل از همه شیوه نامه های دیگر، شیوه نامه را در خود کپی کنید.

 rel="شیوه نامه" href="https://cdn. jsdelivr. net/npm/bootstrap@4. 0. 0/dist/css/bootstrap. min. css" یکپارچگی="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" متقاطع ="ناشناس">

JS

بسیاری از اجزای ما برای عملکرد به استفاده از جاوا اسکریپت نیاز دارند. به طور خاص، آنها به jQuery، Popper. js و پلاگین های جاوا اسکریپت خود ما نیاز دارند. علامت های زیر را دقیقاً قبل از بسته شدن در انتهای صفحات خود قرار دهیدرا تگ کنید تا آنها را فعال کنید. jQuery باید ابتدا بیاید، سپس Popper. js، و سپس پلاگین های جاوا اسکریپت ما.

ما از ساخت باریک jQuery استفاده می کنیم، اما نسخه کامل آن نیز پشتیبانی می شود.

 src="https://code. jquery. com/jquery-3. 2. 1. slim. min. js" یکپارچگی="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" متقاطع ="ناشناس">  src="https://cdn. jsdelivr. net/npm/popper. js@1. 12. 9/dist/umd/popper. min. js" یکپارچگی="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" متقاطع ="ناشناس">  src="https://cdn. jsdelivr. net/npm/bootstrap@4. 0. 0/dist/js/bootstrap. min. js" یکپارچگی="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" متقاطع ="ناشناس">

کنجکاو هستید که کدام مؤلفه ها به صراحت به jQuery، JS ما و Popper. js نیاز دارند؟روی پیوند نمایش اجزای زیر کلیک کنید. اگر در مورد ساختار کلی صفحه مطمئن نیستید، به مطالعه الگوی صفحه نمونه ادامه دهید.

• هشدار برای اخراج
• دکمه هایی برای تغییر وضعیت ها و چک باکس/عملکرد رادیویی
• چرخ فلک برای همه رفتارها، کنترل ها و نشانگرهای اسلاید
• کوچک کردن برای تغییر حالت مشاهده محتوا
• کشویی برای نمایش و موقعیت یابی (همچنین به Popper. js نیاز دارد)
• مدال هایی برای نمایش، موقعیت یابی و رفتار اسکرول
• نوار ناوبری برای گسترش افزونه Collapse برای اجرای رفتار پاسخگو
• راهنمای ابزار و پاپاور برای نمایش و موقعیت یابی (همچنین به Popper. js نیاز دارد)
• Scrollspy برای رفتار اسکرول و به روزرسانی های ناوبری

قالب استارتر

حتماً صفحات خود را با آخرین استانداردهای طراحی و توسعه تنظیم کنید. این بدان معناست که استفاده از یک Doctype HTML5 و از جمله برچسب متا Viewport برای رفتارهای پاسخگو مناسب. همه اینها را کنار هم قرار دهید و صفحات شما باید به این شکل باشد:

  لنگ ="en">   charset ="UTF-8">  نام ="نمای" محتوا ="عرض = عرض دستگاه ، مقیاس اولیه = 1 ، کوچک کردن به مناسب = نه">  rel="شیوه نامه" href="https://cdn. jsdelivr. net/npm/bootstrap@4. 0. 0/dist/css/bootstrap. min. css" یکپارچگی="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" متقاطع ="ناشناس"> سلام دنیا!   سلام دنیا!   src="https://code. jquery. com/jquery-3. 2. 1. slim. min. js" یکپارچگی="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" متقاطع ="ناشناس">  src="https://cdn. jsdelivr. net/npm/popper. js@1. 12. 9/dist/umd/popper. min. js" یکپارچگی="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" متقاطع ="ناشناس">  src="https://cdn. jsdelivr. net/npm/bootstrap@4. 0. 0/dist/js/bootstrap. min. js" یکپارچگی="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" متقاطع ="ناشناس">  

این تنها چیزی است که شما برای نیازهای کلی صفحه نیاز دارید. برای شروع مطالب و مؤلفه های سایت خود به اسناد طرح یا نمونه های رسمی ما مراجعه کنید.

گلوبال های مهم

Bootstrap تعداد انگشت شماری از سبک ها و تنظیمات مهم جهانی را به کار می برد که هنگام استفاده از آن باید از آن آگاه باشید ، که همه آنها تقریباً به طور انحصاری به سمت عادی سازی سبک های مرورگر متقاطع هستند. بیایید شیرجه بزنیم

Doctype HTML5

Bootstrap نیاز به استفاده از Doctype HTML5 دارد. بدون آن ، برخی از یک ظاهر طراحی ناقص بد بو را مشاهده خواهید کرد ، اما از جمله آن نباید باعث سکسکه قابل توجهی شود.

  لنگ ="en"> . 

برچسب متا پاسخگو

Bootstrap ابتدا موبایل ایجاد می شود ، استراتژی که در آن ابتدا کد را برای دستگاه های تلفن همراه بهینه می کنیم و سپس با استفاده از پرس و جوهای رسانه ای CSS ، اجزای لازم را در نظر می گیریم. برای اطمینان از ارائه مناسب و بزرگنمایی برای همه دستگاه ها ، برچسب متا Viewport را به خود اضافه کنید.

 نام ="نمای" محتوا ="عرض = عرض دستگاه ، مقیاس اولیه = 1 ، کوچک کردن به مناسب = نه">

می توانید نمونه ای از این را در عمل در الگوی استارت مشاهده کنید.

اندازه

برای اندازه ساده تر در CSS ، ما مقدار جهانی اندازه گیری را از جعبه محتوا به جعبه مرزی تغییر می دهیم. این تضمین می کند که بالشتک بر عرض محاسبه شده نهایی یک عنصر تأثیر نمی گذارد ، اما می تواند با برخی از نرم افزارهای شخص ثالث مانند Google Maps و Google Custom Search Good ایجاد شود.

به مناسبت نادر شما باید آن را نادیده بگیرید ، از موارد زیر استفاده کنید:

. انتخاب کننده برای-شخصی  اندازه: محتوای; >

با قطعه فوق ، عناصر تو در تو از جمله محتوا از طریق :: قبل و :: بعد از-همه اندازه جعبه مشخص شده را برای آن به ارث می برند.

راه اندازی مجدد

برای بهبود رندر مرورگر متقاطع ، ما از راه اندازی مجدد برای اصلاح ناسازگاری ها در مرورگرها و دستگاه ها استفاده می کنیم در حالی که بازنشانی کمی بیشتر به عناصر HTML مشترک ارائه می دهیم.

انجمن

در مورد توسعه bootstrap به روز باشید و با این منابع مفید به جامعه دسترسی پیدا کنید.

• getBootStrap را در توییتر دنبال کنید.
• در وبلاگ رسمی bootstrap بخوانید و مشترک شوید.
• با بوت استراپندگان دیگر در IRC گپ بزنید. در سرور irc. freenode. net ، در کانال ## bootstrap.
• کمک پیاده سازی ممکن است در Overflow Stack (Tagged Bootstrap-4) یافت شود.
• توسعه دهندگان باید هنگام توزیع از طریق NPM یا مکانیسم های تحویل مشابه برای حداکثر کشف ، از Bootstrap Word Word Bootstrap استفاده کنند که به عملکرد Bootstrap تغییر یا اضافه می کنند.

همچنین می توانید برای آخرین فیلم های شایعات و موسیقی جذاب ، GetBootStrap را در توییتر دنبال کنید.