in English

مقدمه

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

شروع سریع

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

CSS

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

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

JS

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

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

دسته

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

جداگانه، مجزا

اگر تصمیم دارید راه حل اسکریپت های جداگانه را انتخاب کنید، ابتدا باید Popper (اگر از راهنمای ابزار یا پاپاور استفاده می کنید) و سپس پلاگین های جاوا اسکریپت ما بیاید.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

اجزاء

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

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

قالب استارتر

مطمئن شوید که صفحات خود را با آخرین استانداردهای طراحی و توسعه تنظیم کرده اید. این به معنای استفاده از یک 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-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

جهانی های مهم

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

HTML5 doctype

بوت استرپ به استفاده از 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 به روز باشید و با این منابع مفید به جامعه دسترسی پیدا کنید.

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

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

CSP ها و SVG های تعبیه شده

چندین مؤلفه بوت استرپ شامل SVGهای تعبیه شده در CSS ما برای استایل دادن به اجزای پیوسته و آسان در مرورگرها و دستگاه‌ها است. برای سازمان‌هایی با پیکربندی‌های CSP سخت‌گیرانه‌تر ، ما همه نمونه‌های SVGهای تعبیه‌شده خود را (که همه از طریق اعمال می‌شوند background-image) مستند کرده‌ایم تا بتوانید گزینه‌های خود را با دقت بیشتری بررسی کنید.

بر اساس مکالمه جامعه ، برخی از گزینه‌ها برای پرداختن به این موضوع در پایگاه کد شما شامل جایگزینی نشانی‌های اینترنتی با دارایی‌های میزبانی محلی، حذف تصاویر و استفاده از تصاویر درون خطی (در همه مؤلفه‌ها امکان‌پذیر نیست)، و تغییر CSP است. توصیه ما این است که سیاست های امنیتی خود را به دقت بررسی کنید و در صورت لزوم در مورد بهترین مسیر رو به جلو تصمیم بگیرید.