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-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 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-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 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-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" 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">

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

اندازه جعبه

For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

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

With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget.

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

  • Follow @getbootstrap on Twitter.
  • Read and subscribe to The Official Bootstrap Blog.
  • Chat with fellow Bootstrappers in IRC. On the irc.freenode.net server, in the ##bootstrap channel.
  • Implementation help may be found at Stack Overflow (tagged bootstrap-4).
  • توسعه‌دهندگان باید از کلمه کلیدی bootstrapروی بسته‌هایی استفاده کنند که عملکرد Bootstrap را هنگام توزیع از طریق npm یا مکانیزم‌های تحویل مشابه تغییر می‌دهند یا به آن اضافه می‌کنند تا حداکثر قابلیت شناسایی را داشته باشند.

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