www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫طرحبندی صفحات وب با بوت استرپ 4 - قسمت دوم


نویسنده: وحید نصیری
تاریخ: ۱۳۹۷/۰۷/۱۸ ۱۵:۳۰
آدرس: www.dntips.ir
امکان ایجاد ستون‌ها‌ی تو در تو در بوت استرپ 4

در اینجا امکان قرار دادن یک مجموعه‌ی کامل از ردیف‌ها و ستون‌ها، داخل یک ستون از پیش موجود نیز وجود دارد. برای اینکار ابتدا یک row جدید را داخل یک ستون موجود ایجاد می‌کنیم. با اینکار بلافاصله دسترسی به گرید 12 ستونه‌ی بوت استرپ را داخل آن ستون خواهیم داشت؛ به همراه تمام کلاس‌هایی که تاکنون آن‌ها را بررسی کردیم.

یک مثال: ایجاد ستون‌های تو در تو 
<head>
    <style>
        img {
          width: 100%;
          height: 200px;
          max-height: 200px;
        }
      </style>
</head>

<body>
    <div class="container" id="services">
        <div class="row">
            <section class="col-sm-8">
                <img src="images/image.png" alt="sample image">
                <h4>Exotic Pets</h4>
                <p>We offer <strong>specialized</strong> care for <em>reptiles,
                        rodents, birds,</em> and other exotic pets.</p>
            </section>
            <section class="col-sm-4">
                <div class="row no-gutters">
                    <div class="col-2 col-sm-4">
                        <img src="images/image.png" class="img-thumbnail" alt="sample image">
                        <p>Image 1</p>
                    </div>
                    <div class="col-2 col-sm-4">
                        <img src="images/image.png" class="img-thumbnail" alt="sample image">
                        <p>Image 2</p>
                    </div>
                    <div class="col-2 col-sm-4">
                        <img src="images/image.png" class="img-thumbnail" alt="sample image">
                        <p>Image 3</p>
                    </div>
                    <div class="col-2 col-sm-4">
                        <img src="images/image.png" class="img-thumbnail" alt="sample image">
                        <p>Image 4</p>
                    </div>
                    <div class="col-2 col-sm-4">
                        <img src="images/image.png" class="img-thumbnail" alt="sample image">
                        <p>Image 5</p>
                    </div>
                    <div class="col-2 col-sm-4">
                        <img src="images/image.png" class="img-thumbnail" alt="sample image">
                        <p>Image 6</p>
                    </div>
                </div>
            </section>
        </div>
    </div>
</body>
با این خروجی، در اندازه‌ی صفحه‌ی کوچک‌تر از sm:


و با اندازه‌ی صفحه‌ی بزرگ‌تر از sm:


توضیحات:
تعریف گرید تو در تو را در داخل دومین section تعریف شده، در کدهای فوق مشاهده می‌کنید:
<body>
    <div class="container" id="services">
        <div class="row">
            <section class="col-sm-8">
            </section>
            <section class="col-sm-4">
                <div class="row no-gutters">

                </div>
            </section>
        </div>
    </div>
</body>
داخل این section، یک row جدید تعریف شده‌است.
به صورت پیش‌فرض در بین ستون‌ها، یک فاصله‌ی 15px پیش‌فرض وجود دارد که به آن Gutter نیز گفته می‌شود. برای عدم نمایش و اعمال آن می‌توان از کلاس no-gutters استفاده کرد. به همین جهت در تصویر دوم، ستون‌های تعریف شده به هم چسبیده‌اند.
سپس هر ستون داخل این ردیف را به صورت زیر تعریف کرده‌ایم:
<div class="col-2 col-sm-4">
      <img src="images/image.png" class="img-thumbnail" alt="sample image">
      <p>Image 1</p>
</div>
به این معنا که اگر اندازه‌ی صفحه کمتر از sm باشد، تعریف col-2 مورد استفاده قرار می‌گیرد و هر ستون، 2 واحد از 12 واحد را به خود اختصاص می‌دهد. به همین جهت در تصویر اول، تمام تصاویر را در یک سطر مشاهده می‌کنید. پس از گذشتن از این break-point، تنظیم col-sm-4 مورد استفاده قرار می‌گیرد. یعنی هر ستون، 4 واحد از 12 واحد موجود را استفاده می‌کند. در این حالت در هر ردیف، سه تصویر نمایش داده خواهند شد.


امکان تغییر ترتیب نمایش ستون‌ها‌ی گرید بوت استرپ 4

امکان تغییر ترتیب نمایش ستون‌های گرید، در بوت استرپ 4 پیش بینی شده‌است و این مورد نیز بر اساس break-pointهای مختلف، قابل تنظیم است که فرمول کلاس‌های آن‌را در ذیل مشاهده می‌کنید:

در اینجا ذکر break-point اختیاری است و عدد ord بین یک تا 12 تغییر می‌کند.

یک مثال: تغییر ترتیب نمایش ستون‌های گرید 
<head>
    <style>
        img {
          width: 100%;
          height: 200px;
          max-height: 200px;
        }
    </style>
</head>

<body>
    <div class="container" id="services">
        <h2>Flex Order</h2>
        <div class="row">
            <section class="col order-2 d-flex flex-column">
                <img src="images/image.png" class="order-2" alt="sample image">
                <h4>1. Exotic Pets</h4>
                <p>We offer <strong>specialized</strong> care for <em>reptiles,
                        rodents, birds,</em> and other exotic pets.</p>
            </section>
            <section class="col order-1">
                <img src="images/image.png" alt="sample image">
                <h4>2. Grooming</h4>
                <p>Our therapeutic <span class="font-weight-bold">grooming</span>
                    treatments help battle fleas, allergic dermatitis, and
                    other challenging skin conditions.</p>
            </section>
            <section class="col order-3">
                <img src="images/image.png" alt="sample image">
                <h4>3. General Health</h4>
                <p>Wellness and senior exams, ultrasound, x-ray, and dental
                    cleanings are just a few of our general health services.</p>
            </section>
        </div>
    </div>
</body>
با این خروجی:


در این مثال توسط کلاس order، مکان ستون‌ها را تغییر داده و اولین ستون را در مکان دوم، دومی را در مکان اول و سومی را در همان مکان خودش نمایش داده‌ایم. باید دقت داشت که در حین تعریف کلاس order بهتر است برای تمام ستون‌ها این ترتیب را تعریف کرد تا با نتایج ناخواسته‌ای مواجه نشویم.
همچنین کلاس order را به سایر المان‌های صفحه نیز می‌توان اعمال کرد. برای مثال در تصویر فوق، در ستون دوم نمایش داده شده، متن در بالا و تصویر در پایین قرار گرفته‌است. اینکار را با تبدیل این ستون به یک flex column با افزودن کلاس‌های d-flex flex-column انجام داده‌ایم. سپس با اعمال کلاس order-2 به تصویر، این تصویر ذیل متن نمایش داده شده‌است.

یکی از کاربردهای تغییر ترتیب نمایش ستون‌ها در دنیای واقعی، افزودن break-point به آن‌ها (مطابق فرمول یاد شده) و سپس نمایش منوها، پیش از محتویات صفحه در اندازه‌های کوچکتر صفحه است. برای مثال اگر در حالت عادی، منوهای کنار صفحه نمایش داده می‌شوند و در ستون سوم قرار گرفته‌اند، شاید بخواهید در اندازه‌ی نمایش موبایل، ترتیب نمایش این منوها بالاتر از متن صفحه باشد و در ابتدا قرارگیرد و نه در ترتیب سوم.


امکان تغییر تراز ستون‌ها‌ی گرید بوت استرپ 4

چون طراحی گرید بوت استرپ 4 مبتنی بر Flexbox است، کلاس‌های قابل توجهی از آن جهت غنی سازی این سیستم طرحبندی قابل استفاده هستند:
- برای تغییر تراز عمودی ستون‌ها، کلاس align-items-ALN را می‌توان به «ردیف‌ها» اعمال کرد. در اینجا ALN یکی از مقادیر start ،center و end را می‌تواند داشته باشد.
- برای تغییر تراز خود ستون‌ها، کلاس align-self-ALN را می‌توان به «ستون‌ها» اعمال کرد. در اینجا نیز ALN یکی از مقادیر start ،center و end را می‌تواند داشته باشد.
- برای تغییر تراز افقی ستون‌ها، کلاس justify-content-ALN را می‌توان به «ردیف‌ها» اعمال کرد. البته ذکر عرض ستون‌ها در این حالت الزامی است. در اینجا ALN یکی از مقادیر start ،center ،around ،between و end را می‌تواند داشته باشد.

مثال: بررسی روش تغییر تراز ستون‌ها 
<head>
    <style>
        img {
          width: 100%;
          height: 100px;
          max-height: 100px;
        }
    </style>
</head>

<body>
    <div class="container" id="services">

        <div class="row bg-info align-items-center" style="height: 100vh;">
            <div class="col">
                <div class="row">
                    <section class="col">
                        <img src="images/image.png" alt="sample image">
                        <h4>Exotic Pets</h4>
                        <p>We offer specialized care for reptiles, rodents,
                            birds, and
                            other exotic pets.</p>
                    </section>
                    <section class="col">
                        <img src="images/image.png" alt="sample image">
                        <h4>Grooming</h4>
                        <p>Our therapeutic grooming treatments help battle
                            fleas,
                            allergic dermatitis, and other challenging skin
                            conditions.</p>
                    </section>
                    <section class="col">
                        <img src="images/image.png" alt="sample image">
                        <h4>General Health</h4>
                        <p>Wellness and senior exams, ultrasound, x-ray, and
                            dental
                            cleanings.</p>
                    </section>
                </div>
            </div>
        </div>

        <div class="row bg-success" style="height: 100vh;">
            <section class="col">
                <img src="images/image.png" alt="sample image">
                <h4>Exotic Pets</h4>
                <p>We offer specialized care for reptiles, rodents,
                    birds, and
                    other exotic pets.</p>
            </section>
            <section class="col align-self-center">
                <img src="images/image.png" alt="sample image">
                <h4>Grooming</h4>
                <p>Our therapeutic grooming treatments help battle
                    fleas,
                    allergic dermatitis, and other challenging skin
                    conditions.</p>
            </section>
            <section class="col align-self-end">
                <img src="images/image.png" alt="sample image">
                <h4>General Health</h4>
                <p>Wellness and senior exams, ultrasound, x-ray, and
                    dental
                    cleanings.</p>
            </section>
        </div>

        <div class="row bg-warning justify-content-center" style="height: 100vh;">
            <section class="col-4">
                <img src="images/image.png" alt="sample image">
                <h4>Exotic Pets</h4>
                <p>We offer specialized care for reptiles, rodents, birds, and
                    other exotic pets.</p>
            </section>
            <section class="col-4">
                <img src="images/image.png" alt="sample image">
                <h4>Grooming</h4>
                <p>Our therapeutic grooming treatments help battle fleas,
                    allergic dermatitis, and other challenging skin conditions.</p>
            </section>
        </div>

    </div><!-- container -->
</body>
توضیحات:
در اینجا برای هر ردیف یک height: 100vh درنظر گرفته شده‌است تا کل ارتفاع view-port را پر کند و همچنین برای هر ردیف نیز یک رنگ پس زمینه درنظر گرفته‌ایم تا تغییر ترازها، مشخص‌تر باشند.
ابتدا داخل container چنین تعریفی را مشاهده می‌کنید:
        <div class="row bg-info align-items-center" style="height: 100vh;">
            <div class="col">
                <div class="row">
                    <section class="col">
توسط کلاس align-items-center که به row اعمال شده، سه ستون تعریف شده‌ی آن‌را در میانه‌ی صفحه قرار داده‌ایم.
وجود row و col بعدی که داخل col اصلی تعریف شده‌است، سبب می‌شوند تا تمام آیتم‌ها در یک سطر و در یک تراز افقی نمایش داده شوند. اگر این row و col دوم را حذف کنیم، هر آیتم نسبت به محتوای آن در میانه‌ی صفحه قرار می‌گیرد و یکی بالاتر و دیگری پایین‌تر نمایش داده خواهند شد.


سپس در ردیف بعدی، کلاس‌های align-self-center و align-self-end را بر روی ستون‌ها آزمایش کرده‌ایم:


و در آخر تاثیر اعمال  justify-content-center را بر روی یک ردیف مشاهده می‌کنید:


همانطور که مشاهده می‌کنید، این کلاس‌های Flexbox، کار با ستون‌های بوت استرپ را بسیار انعطاف پذیر کرده‌اند.


روش‌های دیگری برای تعیین محل قرارگیری ستون‌های بوت استرپ 4

علاوه بر روش‌هایی که تاکنون آن‌ها را بررسی کردیم، کلاس‌های دیگری نیز برای تعیین محل قرارگیری ستون‌های بوت استرپ تدارک دیده شده‌اند:
- کلاس‌های تعیین محل ستون‌ها: fixed-top, fixed-bottom, sticky-top
fixed-top: ستون را در بالای صفحه قرار می‌دهد.
fixed-bottom: ستون و المان را در پایین صفحه قرار می‌دهد.
sticky-top: ستون و المان را در بالای صفحه قرار می‌دهد و با اسکرول صفحه به پایین، باز هم این المان در همان بالای صفحه قابل مشاهده‌است.

- کلاس‌های نمایشی برای شبیه سازی ویژگی‌های CSS:

این کلاس‌ها با d شروع می‌شوند؛ به همراه یک break-point اختیاری که هدف آن‌ها در اختیار گذاشتن توانمندی‌های نمایشی CSS در بوت استرپ است.
برای مثال کلاس d-md-none به این معنا است که پس از رد شدن از اندازه‌ی md، این المان دیگر نمایش داده نخواهد شد.

- کلاس‌های container مقدماتی Flex:

این کلاس‌ها که موارد داخل پرانتز آن‌ها اختیاری است، المان را تبدیل به یک المان Flexbox می‌کنند. حالت نمایشی پیش‌فرض آن‌ها block است؛ اما اگر نیاز بود می‌توان آن‌ها را تبدیل به in-line نیز کرد.

یک مثال: بررسی روش‌های متفاوت تعیین محل قرارگیری المان‌ها

اگر کلاس fixed-bottom را به المانی انتساب دهیم:
    <div class="container bg-success">
        <div class="bg-info fixed-bottom">
            <div class="item">Exotic Pets</div>
            <div class="item">Grooming</div>
            <div class="item">Health</div>
        </div>
آن‌را به طور کامل، از مکان اصلی آن از صفحه خارج کرده و در پایین آن، به صورت ثابت نمایش می‌دهد. در این حالت، این المان حتی با container نیز تراز نیست:


کلاس fixed-top نیز چنین کاری را انجام می‌دهد، فقط المان را بجای پایین صفحه، در بالای صفحه به صورت ثابت نمایش خواهد داد.
در اینجا اگر کلاس sticky-top را اعمال کنیم، هرچند شبیه به fixed-top عمل می‌کند، اما با container تراز است:



تاثیر کلاس‌های flex را در قسمت بعدی به تفصیل بررسی خواهیم کرد.


کدهای کامل این قسمت را از اینجا می‌توانید دریافت کنید: Bootstrap4_05.zip
مطالب مشابه