رفتن به محتوای اصلی به پیمایش اسناد بروید
in English

مقدمه

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

در این صفحه

شروع سریع

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

CSS

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

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

JS

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

دسته

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

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

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

ماژول ها

اگر استفاده می کنید <script type="module">، لطفاً به بخش استفاده از بوت استرپ به عنوان ماژول مراجعه کنید .

اجزاء

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

نمایش مؤلفه هایی که به جاوا اسکریپت نیاز دارند
  • هشدار برای اخراج
  • دکمه هایی برای تغییر وضعیت ها و چک باکس/عملکرد رادیویی
  • چرخ فلک برای همه رفتارها، کنترل‌ها و نشانگرهای اسلاید
  • کوچک کردن برای تغییر حالت مشاهده محتوا
  • کشویی برای نمایش و موقعیت یابی (همچنین به Popper نیاز دارد )
  • مدال هایی برای نمایش، موقعیت یابی و رفتار اسکرول
  • نوار ناوبری برای گسترش افزونه Collapse برای اجرای رفتار پاسخگو
  • Offcanvases برای نمایش، موقعیت‌یابی و رفتار اسکرول
  • نان تست برای نمایش و رد کردن
  • راهنمای ابزار و پاپاور برای نمایش و موقعیت یابی (همچنین به Popper نیاز دارد )
  • 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">

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

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

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

برای گام‌های بعدی، از اسناد طرح‌بندی یا نمونه‌های رسمی ما دیدن کنید تا محتوای و اجزای سایت خود را چیدمان کنید.

جهانی های مهم

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

HTML5 doctype

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

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

متا تگ پاسخگو

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

<meta name="viewport" content="width=device-width, initial-scale=1">

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

اندازه جعبه

برای اندازه‌گیری ساده‌تر در 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-5) پیدا کنید.
  • توسعه‌دهندگان باید از کلمه کلیدی bootstrapدر بسته‌هایی استفاده کنند که عملکرد Bootstrap را در هنگام توزیع از طریق npm یا مکانیسم‌های تحویل مشابه تغییر می‌دهند یا به آن اضافه می‌کنند تا حداکثر قابلیت شناسایی را داشته باشند.

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