آموزش بوت استرپ ، (سیستم grid در بوت استرپ )

آموزش gridدر بوت استرپ ، (سیستم گرید grid در بوت استرپ)

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

این سیستم به شما اجازه میدهد که شما بر مبنای 12 ستون صفحه خود را طراحی کنید. اگر شما نمی خواهید از 12 ستون به طور مشخص استفاده کنید. میتوانید ستون ها را با هم ترکیب کرده و ستون های عریض تری ایجاد کنید.

ستون ها عبارتند از . col-1 / . col-2 / . col-3 / . col-4 / . col-5 / . col-6 / . col-7 / . col-8 / . col-9 / . col-10 / . col-11 / . col-12

عکس 1

<div class="container">
        
            <div class="row">
                <span class="col-1"> col-1</span>
                <span class="col-1"> col-1</span>
                <span class="col-1"> col-1</span>
                <span class="col-1"> col-1</span>
                <span class="col-1"> col-1</span>
                <span class="col-1"> col-1</span>
                <span class="col-1"> col-1</span>
                <span class="col-1"> col-1</span>
                <span class="col-1"> col-1</span>
                <span class="col-1"> col-1</span>
                <span class="col-1"> col-1</span>
                <span class="col-1"> col-1</span>
            </div>
            <div class="row">
                <span class="col-2">col-2</span>
                <span class="col-2">col-2</span>
                <span class="col-2">col-2</span>
                <span class="col-2">col-2</span>
                <span class="col-2">col-2</span>
                <span class="col-2">col-2</span>
            </div>
            <div class="row">
                <span class="col-3">col-3</span>
                <span class="col-3">col-3</span>
                <span class="col-3">col-3</span>
                <span class="col-3">col-3</span>
            </div>
            <div class="row">
                <span class="col-4">col-4</span>
                <span class="col-4">col-4</span>
                <span class="col-4">col-4</span>
            </div>
            <div class="row">
                <span class="col-5"> col-5</span>
                <span class="col-5"> col-5</span>
                <span class="col-2"> col-2</span>
            </div>
            <div class="row">
                <span class="col-6">col-6</span>
                <span class="col-6">col-6</span>
            </div>
            <div class="row">
                <span class="col-7">col-7</span>
                <span class="col-3">col-3</span>
                <span class="col-2">col-2</span>
            </div>
            <div class="row">
                <span class="col-8">col-8</span>
                <span class="col-4">col-4</span>
            </div>
            <div class="row">
                <span class="col-9">col-9</span>
                <span class="col-3">col-3</span>
            </div>
            <div class="row">
                <span class="col-10">col-10</span>
                <span class="col-2">col-2</span>
            </div>
            <div class="row">
                <span class="col-11">col-11</span>
                <span class="col-1">col-1</span>
            </div>
            <div class="row">
                <span class="col-12">col-12</span>
            </div>
        </div>

سیستم Grid در بوت استرپ ۴ نوع کلاس دارد :

col- ( کلاس کول و جای خالی  (که ما یکی از اعداد مورد نظرمان را قرار میدهیم) برای عرض های مناسب گوشی است . در واقع این کلاس با عددی که شما به آن میدهید به طور خودکار با عرض قرار میگیرد.(

col-sm- (برای تبلت ها – صفحه نمایش هایی با عرضی برابر یا بزرگتر 768 پیکسل)

col-md- ( برای لپ تاب های کوچک – صفحه نمایش هایی با عرضی برابر یا بزرگتر 992 پیکسل)

col-lg- (برای لپ تاب ها و دسکتاپ ها – صفحه نمایش هایی با عرضی برابر یا بزرگتر از 1200 پیکسل )

کلاس های بالا میتوانند باهم ترکیب شده و صفحاتی پویاتر و قابل انعطاف تر را ایجاد کنند.

ساختار استفاده از کلاس های مذکور رو میتوانید در کد زیر بررسی کنید.

<div class="container">
            <div class="row">
                <div class="col-4 col-sm-3 col-md-3 col-lg-3"></div>
            </div>
        </div>

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

برای آشنا شدن با مبحث سئو بر روی لینک کلیک کنید

کلمات کلیدی:سیستم grid در بوت استرپ،grid در بوت استرپ،آموزش gridدر بوت استرپ