قالب پایه (Basic Template)
می خواهی سریع شروع کنی؟ «قالب پایه بوتسترپ» یک شروع آماده است. قالب پایه یعنی اسکلت اولیه صفحه. با آن زود می سازی، بعد آرام آرام بخش ها را تغییر می دهی.
اسکلت واکنش گرا برای شروع
در این قالب از ظرف ها و ردیف ها استفاده می کنیم. «واکنش گرا (Responsive)» یعنی صفحه با عرض موبایل و لپ تاپ هماهنگ می شود.
<div class="container-fluid">
<header class="py-3 border-bottom">
<h1 class="h5 m-0">My Bootstrap Starter</h1>
</header>
<main class="py-4">
<div class="row">
<div class="col-12 col-md-8">
<h2 class="h6">Content</h2>
<p>Place your text, cards, or forms here.</p>
</div>
<div class="col-12 col-md-4">
<h2 class="h6">Sidebar</h2>
<p>Keep links or notes here.</p>
</div>
</div>
</main>
<footer class="py-3 border-top">
<small>© 2025 Your Name</small>
</footer>
</div>
گام های عملی
- یک ظرف با کلاس
containerیاcontainer-fluidبساز. - یک
rowاضافه کن تا سطر بسازی. - با
col-*ستون ها را تقسیم کن. - روی موبایل و دسکتاپ نتیجه را بررسی کن.
نکته: مجموع عرض ستون های هر ردیف از 12 بیشتر نشود. این قانون نظم گرید را حفظ می کند.
برای تمرین «قالب پایه بوتسترپ» را با ویرایشگر آنلاین تست کن. همچنین نمونه های آماده در مثال های گرید الهام بخش هستند.
جمع بندی سریع
- قالب پایه یعنی شروع سریع پروژه.
- از ظرف، ردیف، ستون استفاده کن.
- همیشه واکنش گرایی را بررسی کن.
- قانون 12 ستون را رعایت کن.