آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

شروع سریع

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

 

css

کپی کردن سبک <link> به <head> خود قبل از اینکه همه شیوه های دیگر برای بارگیری CSS ما کپی شود.
 
 <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

 

JS

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

 

 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script> 

 

starter template(قالب شروع کننده)

 
اطمینان حاصل کنید که صفحات خود را با آخرین استانداردهای طراحی و توسعه تنظیم کرده اید. این بدان معنی است که با استفاده از یک doctype HTML5 که شامل یک meta tag 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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script> </body> </html>

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

 

Important global

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

 

HTML5 doctype

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

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

 

Responsive meta tag

بوت استرپ برای اولین بار موبایل را توسعه داده است، استراتژی که در آن ما برای اولین بار کد را برای دستگاه های تلفن همراه را بهینه سازی می کنیم و سپس با افزایش استفاده از اجزای سازنده CSS، با استفاده از CSS media queries. برای اطمینان از تفسیر مناسب و لمس زوم برای همه دستگاهها، meta tag viewport را به <head> اضافه کنید.

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

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

 

Box-sizing

برای اندازه گیری دقیق تر در CSS، مقدار کلی جعبه اندازه را از محتویات جعبه به جعبه مرزی تغییر می دهیم. این تضمین می کند که padding بر روی محدوده نهایی عنصر تاثیر نمی گذارد، اما می تواند با برخی از نرم افزارهای شخص ثالث مانند Google Maps و Google Custom Search Engine مشکلی ایجاد کند.

در موارد خاص شما باید آن را نادیده بگیرید و از چیزی مانند موارد زیر استفاده کنید:

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

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

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

 

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

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

 

community

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

دنبال کنید getbootstrap on Twitter@

به اشتراک بگذارید  The Official Bootstrap Blog

عضو شوید در  the official Slack room

 با همکارهای Bootstrappers در IRC بر روی سرور irc.freenode.net و در کانال bootstrap## چت کنید.

کمک برای پیاده سازی ممکن است در stack overflow یافت شود.

توسعه دهندگان باید از کلمه کلیدی بوت استرپ در بسته ها، که تغییر یا اضافه شدن به قابلیت بوت استرپ هنگام توزیع از طریق npm های تحویل مشابه مکانیزم برای حداکثر قابلیت کشف شدن استفاده می کنند.