راهنمای سیستم شبکه بندی بوت استرپ

راهنمای سیستم شبکه بندی بوت استرپ

شبکه بندی grid بوت استرپ در هسته اصلی این چارچوب است و  سیستم شبکه آن زیر بنای همه چیز است. از آنجا که شبکه بندی Bootstrap پایه آن است ، هر زمان بخواهیم از بوت استرپ استفاده کنیم مجبوریم از شبکه بندی آن استفاده کنیم. در یک کلام ، شبکه بندی grid جایی است که همه چیز آغاز می شود. اگر می خواهید قدرت Bootstrap را بکار بگیرید ، باید شبکه بندی آن را به خوبی آموخته باشید.

وقتی نوبت به شبکه بندی  grid بوت استرپ می رسد ، هیچ چیز پیچیده ای در مورد آن وجود ندارد. مانند هر چیز دیگری ، از قوانین کلی پیروی می کند و بر اساس اصولی ثابتی ساخته می شود. البته حتماً می دانید که 12 ستون و ردیف های نامحدود دارد و برای ساخت یک طرح اولیه به کلاس container نیاز دارد. با این حال ، هنوز مواردی وجود دارد که ممکن است گیج کننده باشند. برای از بین بردن این ابهام ، بگذارید کمی مسائل را روشن کنم.

فهرست مطالب

• معنی اعداد در کلاسهای اصلی شبکه بوت استرپ
• تراز عمودی در شبکه بندی بوت استرپ ۳ و ۴
• نحوه ایجاد 5 ستون هم اندازه در شبکه بوت استرپ
  • منابع مفیدی برای شبکه بوت استرپ
  • تولید کننده های شبکه بوت استرپ - گرید سازها
  • Layutit
• بوت استرپ سازها
  • Startup
  • Mbirise
  • Botstrap Studio
• الگوهای شبکه بوت استرپ برای طراحان

معنی اعداد در کلاسهای اصلی شبکه بوت استرپ

در حالی که اصول شبکه Bootstrap مشهود است ، درک معنای پشت اعداد می تواند کمی گیج کننده باشد. بیایید کد پشت کلاس col-sm-3 را بشکافیم. این کلاس یک ستون در شبکه grid بوت استرپ را مشخص می کند که در آن:

• col در نام کلاس col-sm-3 - به معنی ستون است
• sm در نام کلاس col-sm-3 - به معنی نوعی اندازه صفحه است. چهار نوع مختلف اندازه صفحه وجود دارد که بر اساس عرض آنها دسته بندی می شوند:
  • sm - صفحه نمایش های کوچک (small): اکثر تلفن های همراه متوسط با عرض مانیتور بین 576 پیکسل و 767 پیکسل قرار دارند
  • md - صفحه های متوسط (medium): دسک تاپ هایی با عرض مانیتور بین 768 پیکسل و 991 پیکسل
  • lg - صفحه های بزرگ (large): نمایشگرهای استاندارد با عرضی بین 992 پیکسل و 1199 پیکسل.
  • xl - خیلی بزرگ (extra large): صفحه هایی که عرضی بزرگتر از 1200 پیکسل دارند.

• عدد ۳ در نام کلاس col-sm-3 - به معنی تعداد ستون های شبکه Bootstrap برای ادغام و تشکیل یک منطقه است. می توانید هر عددی را از 1 تا 12 قرار دهید

توجه داشته باشید که در بوت استرپ 4 ، "xs" ، نقطه انفصال تلفنهای همراه که مانیتورهای آنها کمتر از 768 پیکسل است را حذف می کند. در عوض ، شما باید از -col استفاده کنید. برای طرح هایی با عرض کمتر از 576 پیکسل نیز قابل استفاده است.

در حالی که یک عدد در انتهای کلاس به خودی خود اندازه ستون را مشخص می کند ، اختصار "sm" ممکن است برخی را گیج کند. پس چرا به آن نیاز دارید؟ این طبقه بندی مانیتورها یا به عبارت دیگر طیف وسیعی از نقاط انفصال ، به توسعه دهندگان این امکان را می دهد تا طرح را کنترل کرده و رفتار آن را تغییر دهند تا وب سایت درست همانطور که می خواهند جلوه کند. این مکانیسم دلیل انعطاف پذیری در واکنش گرایی بوت استرپ است. برای مثال:

<div class="col-6 col-sm-4">ستون ۱</div>

چون این تگ دارای کلاس col-6 است ، در تلفن های همراه عرض 1/2 اما چون دارای کلاس col-sm-4 است ، در تبلت ها و مانیتورهای رومیزی بزرگ و حتی تلفن های همراه با مانیتورهای بالاتر از 576 پیکسل عرض 1/3 خواهد داشت. همچنین ، توجه به این نکته ضروری است که شما ملزم نیستید تمام کلاسهای grid را لیست کنید زیرا کلاسهایی که رفتار را در صفحات کوچکتر تعریف می کنند ، این رفتار را در صفحه های بزرگتر نیز تنظیم می کنند تا زمانی که لغو شوند. در مورد کد بالا ، از آنجا که col-sm-4 این کار را انجام داده است ، نیازی به تعیین .col-md-4 ، .col-lg-4 و col-xl-4 نیست.

تراز عمودی در شبکه بندی بوت استرپ ۳ و ۴

اگر با بوت استرپ 3 کار می کنید ، هم ترازی عمودی هنوز هم می تواند یک کابوس باشد. در بوت استرپ ۳ اگر می خواهید یک ستون را در مرکز محور عمودی قرار دهید، دو روش وجود دارد.

ابتدا می توانید از کلاس های آفست استفاده کنید. نشانه گذاری ممکن است به این شکل باشد:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

روش دوم به معنای استفاده از روش معمول margin: auto است. نشانه گذاری به صورت زیر است:

.col-centered{
    float: none;
    margin: 0 auto;
}

اگر از نسخه جدیدتر و به روز شده و پیشرفته تر بوت استرپ (نسخه چهارم به بعد) استفاده می کنید ،  به لطف Flexbox همه کارها فقط با چند کد کوتاه انجام می شود. یکی از این دو روش را می توانید استفاده کنید:

• از align-self-center مثل این استفاده کنید:

<div class="row">
           <div class="col-8 align-self-center">
                <div> 
                    Center
                </div>
           </div>
           <div class="col-4 align-self-center">
                <div> 
                    Center
                </div>
           </div>
</div>

• شما همچنین می توانید از کلاس های کمکی Display مانند display:table, display:table-cell, display:inline برای در مرکز قرار دادن استفاده کنید. برای این منظور نشانه گذاری می تواند به شکل زیر باشد:

<div class="row">
    <div class="col-sm-12 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

نحوه ایجاد 5 ستون هم اندازه در شبکه بوت استرپ

برای این کار باید یک ترفند خلاقانه به کار برد. گرچه شبکه Bootstrap بر اساس 12 ستون ساخته شده است ، هنوز هم می توان ساختاری ایجاد کرد که از تعداد ستون های فرد استفاده کند. اگر از نسخه ۴ بوت استرپ استفاده می کنید ، همه چیز آسان است. با کمک Flexbox ، شما پنج ستون را تعریف می کنید ، و آنها منطقه را به قسمت های مساوی تقسیم می کنند. قطعه کد آن به این شکل است:

<div class="row">
   <div class="col">
      1 of 5
   </div>
   <div class="col">
      2 of 5
   </div>
   <div class="col">
      3 of 5
   </div>
   <div class="col">
      4 of 5
   </div>
   <div class="col">
      5 of 5
   </div>
</div>

با این حال ، اگر هنوز با نسخه سوم بوت استرپ کار می کنید ، باید یک کلاس خاص ایجاد کنید که عرض مشخص را برای هر ستون تنظیم کند و آن را به شیوه نامه استایل کلی خود اضافه کنید. این کلاس باید به شکل زیر باشد:

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
 
.col-xs-5ths {
    width: 20%;
    float: left;
}
 
@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}
 
@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}
 
@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

سپس ، می توانید به راحتی از آن در سند استفاده کنید:

<div class="row">
    <div class="col-md-5ths">
       ...
    </div>
</div>

منابع مفیدی برای شبکه بوت استرپ

اگرچه شبکه grid در Bootstrap مسئولیتی در قبال قسمت تزئینی وب سایت ندارد زیرا وظیفه آن پشتیبانی در پشت صحنه از کل رابط کاربری است ، اما با این وجود هنوز ابزارهای ارزشمندی وجود دارد که به مدیریت موثر آن کمک می کند.

تولید کننده های شبکه بوت استرپ

Shoelace ابزاری محبوب برای ساخت شبکه های Bootstrap است. برای ویرایش هر یک از این نسخه های چیدمان ، ردیف ها و ستون ها را دستکاری کنید و همچنین بین پیش نمایش های صفحه در تلفن ، رایانه لوحی ، دسک تاپ جابجا شوید تا هر کدام از این چیدمان ها را ویرایش کنید.

Layoutit

برخلاف مثال قبلی ، تیم پشت Layoutit به روزرسانی های بوت استرپ را بیشتر دنبال می کند. بنابراین ، سازنده بصری آنها حول نسخه جدید بوت استرپ متمرکز شده است. در اینجا علاوه بر اینکه می توانید grid را بسازید ، همچنین می توانید آن را با مولفه های پایه نیز پر کنید ، هم ایستا و هم پویا ، و طرحی از وب سایت نهایی را بدست آورید.

اگر تولید کننده های شبکه grid بوت استرپ برای شما کافی نیستند ، توصیه می کنیم نگاهی به بوت استرپ ساز ها بیندازید. آنها نه تنها به ایجاد پایه ای محکم برای وب سایت نهایی کمک می کنند بلکه امکان طراحی کامل ظاهر سایت با استفاده از اجزای زیبا و دست ساز را نیز فراهم می کنند.

بوت استرپ سازها - Startup

Startup یک سازنده محبوب و رایگان بوت استرپ برای تم ها است. این سازنده ، شامل تعداد زیادی از اجزای برجسته با طراحی مدرن ، مناسب برای کار های تجاری و تجربه کاربری دلپذیر است. باوجود استفاده از عناصر از پیش تعریف شده ، توسعه دهندگان می توانند هر اینچ رابط کاربری را شخصی سازی کنند. بنابراین ، ساخت طرح های کاملاً کاربردی که انتظارات آنها را بدون دردسر زیادی برآورده کند ، امکان پذیر است.

بوت استرپ سازها - Mobiris

Mobirise یکی دیگر از بوت استرپ سازها است که روی رایانه محلی شما اجرا می شود. برای کاربران ویندوز و مک در دسترس است. دقیقاً مانند Startup ، به مهارت کد نویسی نیز نیاز ندارد. یک رابط کاربری مفید دارد که در آن همه چیز را می توان با کشیدن و رها کردن ایجاد کرد.

بوت استرپ سازها – Bootstrap Studio

Bootstrap Studio یک برنامه دسک تاپی است که روی ساخت وب سایت ها با استفاده از شبکه گرید Bootstrap تمرکز دارد. دقیقاً مانند Startup ، این ویرایشگر بصری به طور مداوم به روز می شود تا بتوانید از جدیدترین پیشرفت های موجود در چارچوب بوت استرپ بهره مند شوید. این مجموعه با مولفه های بی شماری همراه است که با طراحی  های سفارشی شما را راضی خواهد کرد.

الگوهای گرید بوت استرپ برای طراحان

در حالی که برای توسعه دهندگان همه چیز با مخلوط و تطبیق کردن کلاس ها و ابزارها شروع می شود ، برای طراحان همه چیز با یک بوم خالی در یکی از محبوب ترین برنامه های طراحی گرافیک شروع می شود. و اگر می خواهید یک الگوی سازگار با بوت استرپ ایجاد کنید ، به یک ترسیم گر مناسب تنظیم شده نیاز دارید که شامل تمام اجزای کوچک مانند gutter ها ، اندازه های viewport و غیره باشد. در اینجا یک لیست کوچک از نسخه های رایگان برای حل این مسئله:

• الکساندر رچشتاینر برای کسانی که فتوشاپ را ترجیح می دهند یک الگوی PSD Bootstrap 4 Grid با ویژگی های مختلف مفید در داخل آن ایجاد کرده است. فایل های با فرمت یا پسوند psd را می توانید با فتوشاپ باز و ویرایش کنید.
• برای طرفداران برنامه Sketch ، توماس پاژوت یک مدل منحصر به فرد دارد.
• اگر از برنامه Figma استفاده می کنید ، یک نسخه رایگان ایجاد شده توسط الکس مارتینوف را امتحان کنید که شامل فایل هایی برای نسخه های سه و چهار بوت استرپ است.

نتیجه

شناخت کامل شبکه grid بوت استرپ یک مهارت حیاتی است. این شبکه زیربنایی است که ممکن است با چشم غیر مصلح قابل مشاهده نباشد ، اما وجود دارد و پایه ای برای همه چیز در بوت استرپ است. اگر اشتباهی در آن ایجاد شود ، برای حل این مشکل ، وقت ، تلاش و هزینه زیادی لازم است. چه کسی آن را می خواهد؟ پس قبل از شروع کردن به کار با طراحی و تزئین وب سایت ، ابتدا باید با شبکه grid بوت استرپ آشنا شده باشید.

اطمینان حاصل کنید که یک طرح در تمام اندازه های صفحه نمایش کار می کند و ساختاری مطابق با الزامات دارد. و اگر هنوز در مورد کار با این شبکه grid احساس ترس می کنید ، همیشه می توانید از سازندگان بصری (گرید ساز ها) مانند Startup کمک بگیرید که مشکلات را سریع و کارآمد برطرف می کند.