بوت استرپ 3 چیست و چرا باید از آن استفاده کنیم؟
Bootstrap یکی از محبوبترین و پرکاربردترین فریم ورکهای front-end در دنیای توسعه وب است که توسط تیم توسعهدهندگان توییتر طراحی و منتشر شده است. این فریمورک قدرتمند، ابزارهای کاملی برای طراحی قالب وب سایتهای حرفهای در اختیار توسعهدهندگان قرار میدهد.
نسخه سوم این فریمورک (Bootstrap 3) با رویکرد Mobile First طراحی شده است. این بدان معناست که اولویت اصلی در طراحی، نمایش بهینه در دستگاههای موبایل و تبلت است. با توجه به رشد چشمگیر استفاده از دستگاههای قابل حمل برای دسترسی به اینترنت، این رویکرد اهمیت بسیار زیادی پیدا کرده است.
مزایای استفاده از بوت استرپ 3
- سازگاری کامل با مرورگرها: این فریمورک با تمامی مرورگرهای مدرن و حتی نسخههای قدیمیتر مانند Internet Explorer 8 سازگاری دارد.
- طراحی ریسپانسیو: قابلیتهای پیشرفته برای ایجاد طرحهای انعطافپذیر که در تمام اندازههای صفحه نمایش به درستی کار میکنند.
- سرعت توسعه: با استفاده از کلاسهای از پیش تعریف شده، سرعت طراحی سایت چند برابر میشود.
- مستندات جامع: داکیومنت کامل و نمونه کدهای فراوان برای یادگیری سریعتر.
- قابلیت سفارشیسازی: امکان تغییر و شخصیسازی کامل المانها و استایلها.
سیستم گرید بوت استرپ 3: قلب تپنده طراحی ریسپانسیو
در این مقاله قصد داریم به طور تخصصی سیستم گرید بندی بوت استرپ 3 و نحوه استفاده صحیح از آن را بررسی کنیم. سیستم گرید یکی از مهمترین و کاربردیترین بخشهای این فریمورک است که درک صحیح آن برای هر توسعهدهندهای ضروری است.
مفهوم پایه سیستم گرید در بوت استرپ
سیستم گرید بوت استرپ 3 بر اساس یک شبکه 12 ستونی طراحی شده است. این بدان معناست که فریمورک به طور پیشفرض عرض صفحه را به 12 قسمت مساوی تقسیم میکند. شما میتوانید این ستونها را به دلخواه ترکیب کنید تا لایهبندی مورد نظر خود را ایجاد کنید.
برای مثال، میتوانید:
- یک ستون 12 واحدی (تمام عرض صفحه)
- دو ستون 6 واحدی (نصف و نصف)
- سه ستون 4 واحدی (یک سوم برای هر کدام)
- چهار ستون 3 واحدی (یک چهارم برای هر کدام)
- ترکیبهای متنوع دیگر مثل 8+4، 9+3، 2+8+2 و...
این انعطافپذیری به شما امکان میدهد تا هر نوع چیدمانی که در ذهن دارید را پیادهسازی کنید.
کلاسهای گرید بوت استرپ برای صفحات مختلف
یکی از ویژگیهای برجسته بوت استرپ 3، ارائه کلاسهای مختلف برای اندازههای متفاوت صفحه نمایش است. این امکان به شما اجازه میدهد که رفتار متفاوتی برای دستگاههای مختلف تعریف کنید.
1. کلاس xs (Extra Small - فوق کوچک)
این کلاس برای صفحه نمایشهای بسیار کوچک طراحی شده است که عرض آنها کمتر از 768 پیکسل است. این دسته عمدتاً شامل گوشیهای موبایل میشود. استفاده از کلاس col-xs-* تضمین میکند که چیدمان شما حتی در کوچکترین صفحات هم حفظ میشود.
2. کلاس sm (Small - کوچک)
کلاس col-sm-* برای صفحه نمایشهای کوچک در نظر گرفته شده که عرض آنها بین 768 تا 991 پیکسل است. این محدوده معمولاً تبلتهای کوچک و گوشیهای بزرگ را در حالت landscape پوشش میدهد.
3. کلاس md (Medium - متوسط)
کلاس col-md-* برای صفحه نمایشهای متوسط مناسب است که عرض آنها بین 992 تا 1199 پیکسل قرار دارد. این اندازه معمولاً تبلتهای بزرگ و لپتاپهای کوچک را شامل میشود.
4. کلاس lg (Large - بزرگ)
کلاس col-lg-* برای صفحه نمایشهای بزرگ طراحی شده که عرض آنها 1200 پیکسل یا بیشتر است. این دسته شامل مانیتورهای دسکتاپ و لپتاپهای بزرگ میشود.
نحوه استفاده از سیستم گرید: مثالهای کاربردی
مثال 1: ایجاد چهار ستون در صفحات متوسط
فرض کنید میخواهید صفحه شما در نمایشگرهای متوسط (md) دارای چهار ستون مساوی باشد. از آنجا که 12 بر 4 مساوی 3 است، باید از کلاس col-md-3 استفاده کنید:
<div class="container">
<div class="row">
<div class="col-md-3">ستون اول</div>
<div class="col-md-3">ستون دوم</div>
<div class="col-md-3">ستون سوم</div>
<div class="col-md-3">ستون چهارم</div>
</div>
</div>
در این مثال، هر ستون 3 واحد از 12 واحد کل را اشغال میکند که در مجموع 12 واحد میشود (3+3+3+3=12).
مثال 2: ترکیب اندازههای مختلف
میتوانید ستونها را با اندازههای متفاوت ترکیب کنید. برای مثال، یک چیدمان محبوب شامل یک ستون اصلی (8 واحد) و یک نوار کناری (4 واحد) است:
<div class="container">
<div class="row">
<div class="col-md-8">محتوای اصلی</div>
<div class="col-md-4">نوار کناری</div>
</div>
</div>
مثال 3: استفاده از چند کلاس برای ریسپانسیو بودن کامل
قدرت واقعی سیستم گرید زمانی آشکار میشود که چند کلاس را با هم ترکیب کنید. این کار به شما امکان میدهد رفتار متفاوتی برای هر اندازه صفحه تعریف کنید:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">محتوا</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">محتوا</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">محتوا</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">محتوا</div>
</div>
</div>
در این مثال:
- در موبایل (xs): هر ستون تمام عرض صفحه را میگیرد (12 واحد)
- در تبلت کوچک (sm): دو ستون در هر ردیف (هر کدام 6 واحد)
- در لپتاپ (md): سه ستون در هر ردیف (هر کدام 4 واحد)
- در دسکتاپ (lg): چهار ستون در هر ردیف (هر کدام 3 واحد)
ساختار اصلی سیستم گرید بوت استرپ
برای استفاده صحیح از سیستم گرید، باید از ساختار سه لایهای آن پیروی کنید:
1. Container (محفظه اصلی)
کلاس container یا container-fluid لایه بیرونی و اصلی است. container عرض ثابت دارد و در مرکز صفحه قرار میگیرد، در حالی که container-fluid تمام عرض صفحه را میگیرد.
2. Row (ردیف)
کلاس row یک ردیف افقی ایجاد میکند که ستونها را در خود جای میدهد. هر row باید مستقیماً داخل یک container قرار گیرد.
3. Column (ستون)
کلاسهای ستونی مانند col-md-4 محتوای واقعی شما را نگه میدارند. ستونها باید مستقیماً داخل row قرار گیرند.
نکات کلیدی برای استفاده بهینه از سیستم گرید
- جمع ستونها باید 12 باشد: در هر row، مجموع واحدهای ستونها باید 12 باشد. اگر بیشتر شود، ستونهای اضافی به ردیف بعد میروند.
- استفاده از clearfix: برای کنترل بهتر رفتار ستونها در اندازههای مختلف، از کلاس clearfix استفاده کنید.
- تست در دستگاههای مختلف: همیشه طراحی خود را در اندازههای مختلف صفحه تست کنید.
- رویکرد موبایل اول: ابتدا برای موبایل طراحی کنید، سپس برای صفحات بزرگتر بهینهسازی انجام دهید.
- استفاده از offset: برای ایجاد فاصله بین ستونها، از کلاسهای offset مانند col-md-offset-2 استفاده کنید.
کاربردهای پیشرفته سیستم گرید
Nesting (تودرتو کردن گریدها)
میتوانید یک row جدید داخل یک ستون موجود ایجاد کنید. این تکنیک برای ایجاد چیدمانهای پیچیده بسیار مفید است:
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">زیرستون 1</div>
<div class="col-md-6">زیرستون 2</div>
</div>
</div>
<div class="col-md-4">نوار کناری</div>
</div>
Column Ordering (تغییر ترتیب ستونها)
با استفاده از کلاسهای push و pull میتوانید ترتیب نمایش ستونها را بدون تغییر ساختار HTML تغییر دهید. این قابلیت برای بهینهسازی SEO و بهبود تجربه کاربری بسیار مفید است.
نتیجهگیری
سیستم گرید بوت استرپ 3 ابزاری قدرتمند و انعطافپذیر برای ایجاد طرحهای ریسپانسیو است. با درک صحیح کلاسهای xs، sm، md و lg و نحوه ترکیب آنها، میتوانید وبسایتهایی بسازید که در تمام دستگاهها به بهترین شکل نمایش داده شوند.
کلید موفقیت در استفاده از این سیستم، تمرین مداوم و آزمون و خطا است. با تسلط بر مفاهیم پایه و استفاده از تکنیکهای پیشرفته، میتوانید طرحهای حرفهای و کاربرپسندی ایجاد کنید که هم از نظر ظاهری جذاب باشند و هم عملکرد بهینهای در تمام پلتفرمها داشته باشند.
نظرات
0دیدگاه خود را ثبت کنید
برای ارسال نظر و مشارکت در گفتگو، لطفا وارد حساب کاربری خود شوید.