Bootstrap یکی از محبوب‌ترین فریم‌ورک‌های طراحی وب است که ابزارهایی برای طراحی سریع و واکنش‌گرا ارائه می‌دهد. در این مقاله، به بررسی برخی از ویژگی‌ها و اصول استفاده از این فریم‌ورک می‌پردازیم.
شروع کار با bootstrap
پس از دانلود و نصب این ابزار، دو پوشه‌ی اصلی CSS و JS خواهید داشت. فایل bootstrap.css برای طراحی استفاده می‌شود، اما در محیط‌های واقعی بهتر است از نسخه کم‌حجم یعنی bootstrap.min.css بهره ببرید. فایل‌های لازم را به پروژه اضافه کرده و به شکل زیر لینک کنید:
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.bundle.js"></script>
کار با کلاس‌ها در bootstrap
این ابزار مجموعه‌ای از کلاس‌های از پیش تعریف‌شده ارائه می‌دهد که با افزودن آن‌ها به تگ‌های HTML، ویژگی‌های مختلفی را به عناصر اضافه می‌کنید. چند نمونه از کلاس‌های پرکاربرد:
- حاشیه و فاصله‌ها: برای تنظیم margin و padding، از کلاس‌هایی مانند
m-3(برای همه جهات) یاms-2وme-2(برای چپ و راست) استفاده کنید. نام چپ و راست به صورت start و end است و جهت آن بر اساس زبان سایت شما تنظیم می‌شود. - رنگ‌بندی: می‌توانید از پالت رنگی آماده مانند
bg-primary(پس‌زمینه)،text-bg-info(متن و پس‌زمینه هماهنگ) یاbg-light(رنگ روشن) استفاده کنید. - نمایش: کلاس‌هایی مانند
d-flexبرای ایجاد Flexbox، وflex-rowیاflex-columnبرای جهت‌دهی افقی یا عمودی به عناصر داخلی کاربرد دارند.
دکمه‌ها
برای طراحی دکمه‌های زیبا، کلاس‌های متنوعی در اختیار شماست:
- از
btn-primaryبرای تنظیم رنگ اصلی دکمه استفاده کنید. - کلاس
btn-outline-successمرز دکمه را رنگی می‌کند و برای طراحی ساده‌تر مناسب است. - با
btn-smیاbtn-lgمی‌توانید اندازه دکمه را تغییر دهید.
همچنین کلاس‌هایی مثل w-50 و h-25 به ترتیب عرض و ارتفاع دکمه را کنترل می‌کنند.
ریسپانسیو با Breakpointها
برای تطبیق طراحی با اندازه‌های مختلف صفحه، از Breakpointها استفاده می‌شود. مقادیر پرکاربرد:
- Small (sm): از 576 پیکسل بزرگ‌تر.
- Medium (md): از 768 پیکسل بزرگ‌تر.
- Large (lg): از 992 پیکسل بزرگ‌تر.
- Extra Large (xl): از 1200 پیکسل بزرگ‌تر.
- Extra Extra Large (xxl): از 1400 پیکسل بزرگ‌تر.
مثلاً، d-sm-block نمایش یک تگ را در اندازه‌های بزرگ‌تر از 576 پیکسل به حالت Block تنظیم می‌کند.
شبکه‌بندی (Grid System)
این ابزار صفحه را به 12 ستون تقسیم می‌کند که می‌توانید با کلاس‌های col و تغییر مقیاس آن‌ها برای هر دستگاه، ستون‌بندی‌های متنوعی ایجاد کنید. برای مثال، col-md-6 عرض عنصر را در دستگاه‌های با عرض متوسط به بالا به 6 ستون محدود می‌کند.
ادامه دارد…
در بخش‌های بعدی، به مباحث پیشرفته‌تر این فریم‌ورک مانند کار با کامپوننت‌ها و پلاگین‌ها خواهیم پرداخت. برای مقالات بیشتر، به codebalad.com مراجعه کنید.
