Source

مقدمه

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

شروع سریع

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

CSS

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

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

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

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

ما bootstrap.bundle.jsو bootstrap.bundle.min.jsشامل Popper , اما نه jQuery . برای اطلاعات بیشتر در مورد آنچه در Bootstrap گنجانده شده است، لطفاً به بخش محتویات ما مراجعه کنید .

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

قالب استارتر

مطمئن شوید که صفحات خود را با آخرین استانداردهای طراحی و توسعه تنظیم کرده اید. این به معنای استفاده از یک doctype HTML5 و شامل یک متا تگ viewport برای رفتارهای پاسخگوی مناسب است. همه اینها را کنار هم بگذارید و صفحات شما باید به این شکل باشند:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

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

جهانی های مهم

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

نوع doctype HTML5

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

<!doctype html>
<html lang="en">
  ...
</html>

متا تگ پاسخگو

بوت استرپ ابتدا برای تلفن همراه توسعه داده می شود ، استراتژی که در آن ابتدا کد را برای دستگاه های تلفن همراه بهینه می کنیم و سپس با استفاده از پرس و جوهای رسانه ای CSS، اجزا را در صورت لزوم مقیاس می کنیم. برای اطمینان از رندر مناسب و بزرگ‌نمایی لمسی برای همه دستگاه‌ها، متا تگ نمای واکنش‌گرا را به خود اضافه کنید <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

اندازه جعبه

برای اندازه‌گیری ساده‌تر در CSS، box-sizingمقدار جهانی را از content-boxبه تغییر می‌دهیم border-box. این تضمین paddingمی‌کند که بر عرض محاسبه‌شده نهایی یک عنصر تأثیر نمی‌گذارد، اما می‌تواند در برخی از نرم‌افزارهای شخص ثالث مانند Google Maps و موتور جستجوی سفارشی Google مشکلاتی ایجاد کند.

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

.selector-for-some-widget {
  box-sizing: content-box;
}

با قطعه بالا، عناصر تودرتو - از جمله محتوای تولید شده از طریق ::beforeو - همه موارد مشخص شده برای آن ::afterرا به ارث خواهند برد .box-sizing.selector-for-some-widget

در ترفندهای CSS درباره مدل جعبه و اندازه آن بیشتر بدانید .

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

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

انجمن

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

  • getbootstrap@ را در توییتر دنبال کنید .
  • وبلاگ رسمی بوت استرپ را بخوانید و در آن مشترک شوید .
  • با Bootstrappers در IRC چت کنید. روی irc.freenode.netسرور، در ##bootstrapکانال.
  • راهنمای پیاده‌سازی را می‌توانید در Stack Overflow (برچسب شده bootstrap-4) پیدا کنید.
  • توسعه‌دهندگان باید از کلمه کلیدی bootstrapروی بسته‌هایی استفاده کنند که عملکرد Bootstrap را هنگام توزیع از طریق npm یا مکانیزم‌های تحویل مشابه تغییر می‌دهند یا به آن اضافه می‌کنند تا حداکثر قابلیت شناسایی را داشته باشند.

همچنین می‌توانید getbootstrap@ را در توییتر دنبال کنید تا جدیدترین شایعات و موزیک ویدیوهای عالی را دریافت کنید.