با بوت استرپ شروع کنید

Bootstrap یک جعبه ابزار قدرتمند و پر از ویژگی های جلویی است. هر چیزی - از نمونه اولیه تا تولید - را در چند دقیقه بسازید.

در این صفحه

شروع سریع

با گنجاندن CSS و جاوا اسکریپت آماده برای تولید بوت استرپ از طریق CDN بدون نیاز به مراحل ساخت، شروع کنید. آن را در عمل با این نسخه ی نمایشی Bootstrap CodePen ببینید .

یک فایل جدید index.htmlدر ریشه پروژه خود ایجاد کنید. همچنین <meta name="viewport">برچسب را برای رفتار پاسخگوی مناسب در دستگاه های تلفن همراه اضافه کنید.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

شامل CSS و JS بوت استرپ. <link>قبل از بسته شدن، برچسب را در <head>CSS ما و برچسب را برای بسته جاوا اسکریپت (شامل Popper برای تعیین موقعیت کرکره‌ها <script>، popperها و نکات ابزار) قرار دهید </body>. درباره پیوندهای CDN ما بیشتر بیاموزید .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

شما همچنین می توانید Popper و JS ما را جداگانه اضافه کنید. اگر نمی‌خواهید از فهرست‌های بازشو، پاپ‌اور یا راهنمای ابزار استفاده کنید، با درج نکردن Popper، مقداری کیلوبایت ذخیره کنید.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

سلام دنیا! صفحه را در مرورگر انتخابی خود باز کنید تا صفحه بوت استرپ خود را ببینید. اکنون می توانید با ایجاد طرح بندی خود ، افزودن ده ها مؤلفه و استفاده از نمونه های رسمی ما ، ساختن با بوت استرپ را آغاز کنید .

پیوندهای CDN

به عنوان مرجع، در اینجا پیوندهای CDN اصلی ما هستند.

شرح	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

همچنین می‌توانید از CDN برای واکشی هر یک از ساخت‌های اضافی فهرست‌شده در صفحه محتوا استفاده کنید.

مراحل بعدی

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

اجزای JS

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

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

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

جهانی های مهم

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

نوع doctype HTML5

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

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

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