آموزش
آموزش بوت استرپ 4 (قسمت اول)
شروع کار با بوت استرپ 4
آماده سازی صفحه برای شروع کار با بوت استرپ
اضافه کردن کلمه کلیدی !DOCTYPE به ابتدای تگ html به منظور اعلام به مرورگر که ما داریم از html5 استفاده می کنیم.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
</head>
</html>
اضافه کردن اعلان مقدار زوم پیش فرض به صفحه داخل تگ Head و فعال کردن قابلیت های Mobile First مانند کار با صفحات لمسی و قابلیت های واکنشگرایی مرورگر.
<meta name="viewport" content="width=device-width, initial-scale=1">
مقدار initial-scale=1 مقدار پیشفرض زوم در صفحه توسط مروگر را اعلام میکند هر چه این عدد کوچکتر از 1 باشد (مثلا 0.8) باشد مرورگر زوم را عقب تر بوده و هرچی بیشتر باشد در توی صفحه زوم خواهد کرد و مقدار 1 یعنی هیچ زومی نکن و همچنین مقدار width=device-width به مرورگر میگوید که پهنای صفحه وب را اندازه پنهای صفحه نمایشگر کن.
انواع Container ها
در بوت استرپ باید تمامی عناصر در داخل یک کانتینتر محصور شوند این شی یک تگ Div می باشد که مانند یک کامیون یا کانتینر بقیه اجزا را در خود محصور می کند.
در بوت استرپ دو مدل Container داریم
- Container با کلاس .container با حاشیه هایی در کنار
- Container-fluid با کلاس .container-fluid بدون حاشیه که کل پهنای نمایشگر پوشش می دهد
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
یا
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
برای تست این دو کانتینتر می توانید به این دو صفحه مراجعه کنید
Container: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_gs_container&stacked=h
Container-fluid :
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_gs_container-fluid&stacked=h
