به قسمت دوم مجموعه استایل من خوش آمدید، جایی که من به بررسی برخی از کتابخانه ها/فریم ورک های سبک محبوب می پردازم. در این وبلاگ به بررسی بوت استرپ می پردازیم. بوت استرپ یک فریم ورک قدرتمند و منبع باز است که با ارائه یک سیستم شبکه ای بصری، اجزای رابط کاربری و مجموعه وسیعی از ابزارها، ساخت وب سایت ها را سریع تر و آسان تر می کند.
راه اندازی
البته قبل از ورود به برخی از ویژگی ها، باید در مورد راه اندازی بوت استرپ در یک پروژه صحبت کنیم. در زمان نوشتن، نسخه فعلی بوت استرپ 5.3.3 است و این همان چیزی است که من برای هر نمونه از آن استفاده خواهم کرد.
بوت استرپ از طریق CDN
بوت استرپ را می توان خیلی سریع با استفاده از CDN یا شبکه تحویل محتوا راه اندازی کرد. این روش نیازی به نصب ندارد، فقط لینک های CSS و جاوا اسکریپت بوت استرپ را به فایل HTML خود اضافه کنید و به مسابقه بروید!
شما پیوند CSS زیر را در داخل آن قرار می دهید tag of your HTML:
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
پس از آن، اسکریپت زیر را قبل از بسته شدن قرار می دهید tag:
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
از طریق Package Manager
اگر در پروژه‌ای بزرگتر کار می‌کنید یا با ابزارهای جلویی مدرن کار می‌کنید، ممکن است بخواهید از طریق مدیر پروژه نصب کنید. خوشبختانه برای ما، این نیز ساده است! در ترمینال خود، فقط بنویسید npm install bootstrap در صورت استفاده از npm، یا yarn add bootstrap در صورت استفاده از نخ پس از نصب، می خواهید CSS و جاوا اسکریپت بوت استرپ را به ترتیب به فایل های CSS و JS اصلی خود وارد کنید:
// Import Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';
// Import Bootstrap JavaScript
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
سیستم شبکه
یکی از قدرتمندترین ویژگی های بوت استرپ، سیستم شبکه آن است. این به شما امکان می دهد طرح بندی های واکنش گرا ایجاد کنید که به طور خودکار با اندازه های مختلف صفحه تنظیم شوند.
ساختار
این شبکه بر اساس یک ساختار 12 ستونی برای سازماندهی محتوا است. ساختار اصلی آن می تواند چیزی شبیه به این باشد:
class="container">
class="row">
class="col">Column 1
class="col">Column 2
class="col">Column 3
- Container: کانتینر ستون ها و ردیف ها را در حین تراز کردن آنها نگه می دارد
- ردیف: ردیف ها ستون ها را به صورت افقی نگه می دارند و با هم گروه بندی می کنند
- Col: ستون ها جایی هستند که محتوای شما در آن قرار می گیرد، هر ردیف می تواند دارای 12 باشد
اندازه ها
ستون ها نیز می توانند اندازه های خاص خود را داشته باشند! این می تواند برای ارائه طرح های مختلف استفاده شود. آنها با تعداد ستون هایی که روی سطر می گیرند مشخص می شوند.
class="container">
class="row">
class="col-12">100% Width
class="row">
class="col-6">50% Width
class="col-6">50% Width
class="row">
class="col-4">33.33% Width
class="col-4">33.33% Width
class="col-4">33.33% Width
نقاط شکست
شبکه بوت استرپس ابتدا تلفن همراه است، به این معنی که قبل از اینکه به دستگاه های بزرگتر تبدیل شود، برای دستگاه های تلفن همراه ساخته شده است. به همین دلیل، Bootstrap دارای کلاس هایی است که نحوه عملکرد ستون ها در اندازه های مختلف صفحه نمایش را مشخص می کند. اینها عبارتند از:
- xs: برای نمایشگرهای کمتر از 576 پیکسل
- sm: برای نمایشگرهای بیشتر از 576 پیکسل
- md: برای صفحه نمایش های بیش از 768 پیکسل
- lg: برای نمایشگرهای بیش از 992 پیکسل
- xl: برای نمایشگرهای بیش از 1200 پیکسل
به عنوان مثال:
class="container">
class="row">
class="col-12 col-md-8">Wide on medium and larger screens
class="col-6 col-md-4">Narrower on medium and larger screens
در این مثال، ستون اول تمام عرض را در صفحه‌های کوچک اشغال می‌کند، اما تنها هشت واحد شبکه را در صفحه‌های متوسط یا بزرگتر می‌گیرد. دومی نیمی از عرض را در صفحه نمایش های کوچک و تنها چهار واحد را در صفحه های متوسط یا بزرگتر اشغال می کند.
اجزای مشترک
بوت استرپ انواع مختلفی از اجزای از پیش ساخته شده را در اختیار ما قرار می دهد که به ایجاد وب سایت های جذاب و کاربر پسند با حداقل CSS سفارشی کمک می کند. اجزای زیادی وجود دارد، بنابراین من به برخی از رایج‌ترین مواردی که احتمالاً با آنها کار می‌کنید، می‌پردازم.
تایپوگرافی
ما با صحبت در مورد متن شروع می کنیم، زیرا کاربران شما باید بخوانند تا باور کنند. کلاس‌های تایپوگرافی، تعریف سبک‌های متن ثابت، از سرفصل‌ها، متن اصلی و فهرست‌ها را آسان می‌کنند. به عنوان مثال، عنوان های مختلف با کلاس نمایش آنها نشان داده می شوند:
class="display-2">Heading 2
class="display-3">Heading 3
class="lead">This is lead text, which stands out from regular paragraph text.
This is regular paragraph text.
class="small">This is small text, which stands out from regular paragraph text.
همچنین می توانید متن پاراگراف را با کلاس های کاربردی تعریف کنید تا متن بدنه را همانطور که در بالا مشاهده می کنید تغییر دهید.
دکمه ها
هر وب سایت یا برنامه ای نیاز به دکمه دارد! بوت استرپ انواع مختلفی از استایل های دکمه را در جعبه ارائه می دهد. کلاس های آنها به این صورت تعریف می شود:
نوار نوار
کامپوننت نوار ناوبری بوت استرپ با کلاس‌های داخلی برای تراز، کشویی و موارد دیگر ارائه می‌شود!
در این مثال، نوار ناوبری در صفحه های کوچکتر جمع می شود.
کلاس های کاربردی
بوت استرپ همچنین شامل طیف گسترده ای از کلاس های کاربردی برای کمک به سرعت بخشیدن به توسعه و کاهش نیاز به CSS سفارشی است. فقط با چند نام کلاس، می توانید فاصله، تراز، ویژگی های نمایش و موارد دیگر را تنظیم کنید!
فاصله گذاری
فاصله گذاری در توسعه برای خوانایی کاربر بسیار مهم است. خوشبختانه، Bootstrap به ما کلاس هایی برای تنظیم حاشیه ها و padding عناصر می دهد. همه آنها از یک قالب مشابه پیروی می کنند {property}{sides}-{size}.
- اموال:
mبرای حاشیه،pبرای لایی - طرفین:
tبالا،bپایین،lچپ،rدرستهxچپ و راست،yبالا و پایین، یا خالی برای همه طرف - اندازه:
0،1،2، …، یاauto
به عنوان مثال:
class="mt-3">Margin Top of 3
class="p-5">Padding of 5
class="mx-auto" style="width: 300px">Horizontally Centered with Auto Margin
نمایش
ابزارهای نمایش به کنترل دید و چیدمان عناصر کمک می کنند. از اینها می توان برای نشان دادن، پنهان کردن یا تغییر نحوه رفتار عناصر استفاده کرد. کلاس های نمایش عبارتند از:
-
d-block: نمایش به عنوان یک عنصر بلوک -
d-inline: نمایش به عنوان یک عنصر درون خطی -
d-none: عنصر را پنهان کنید -
d-flex: Flexbox را فعال کنید -
d-inline-block: نمایش به عنوان یک بلوک درون خطی
بوت استرپ همچنین نسخه‌های واکنش‌گرای این کلاس‌ها را ارائه می‌کند که برای نقاط شکست، مانند d-none d-md-block، این یک عنصر را در صفحه نمایش های کوچک پنهان می کند.
class="d-none d-md-block">Visible on medium and larger screens
class="d-flex justify-content-center">Centered with Flexbox
ابزارهای متن
بوت استرپ مقدار زیادی سفارشی سازی متن را با کلاس هایی مانند:
ترازبندی متن
-
text-start: متن را در سمت چپ تراز می کند -
text-end: متن را در سمت راست تراز می کند -
text-center: متن را در مرکز تراز می کند
بسته بندی متن
-
text-nowrap: از بسته بندی متن به خط بعدی جلوگیری کنید -
text-truncate: متن را در صورت طولانی بودن با بیضی کوتاه کنید
رنگ متن
-
text-primary: متن با رنگ اصلی (پیش‌فرض: آبی) -
text-success: متن با رنگ موفقیت آمیز (پیش فرض: سبز) -
text-danger: متن با رنگ خطرناک (پیش‌فرض: قرمز)
class="text-center text-success">This text is centered and green
class="text-end text-primary">This text is right-aligned and blue
نتیجه گیری
بوت استرپ یک چارچوب قدرتمند و انعطاف پذیر است که به توسعه دهندگان اجازه می دهد تا وب سایت های واکنش گرا را به طور کارآمد بسازند. با تسلط بر این مفاهیم اساسی، می‌توانید گردش کار خود را ساده کنید و به جای CSS سفارشی و مدیریت طرح‌بندی، بیشتر بر طراحی و عملکرد سایت خود تمرکز کنید. پس شیرجه بزنید! با برخی از نمونه ها آزمایش کنید و یک برنامه شگفت انگیز بسازید!
منابع
بوت استرپ
