آموزش کانتینرها در بوت استرپ (Containers)

0 دیدگاه

در این بخش به آموزش کانتینر در بوت استرپ می‌پردازیم. کانتینرها عناصری هستند که برای ایجاد فضای داخلی (padding) در اطراف محتوای درون خود به کار می‌روند.

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

استفاده از کانتینر برای استفاده از سیستم گرید (Grid System) در بوت استرپ ضروری است. این سیستم از ترکیب کانتینرها، ردیف‌ها (rows) و ستون‌ها (columns) برای چینش و نظم‌دهی به محتوا استفاده می‌کند. کانتینرها مسئول نگهداری، ایجاد فاصله داخلی (padding) و همچنین وسط چین کردن محتوا هستند. همچنین می‌توان از کانتینرهای تو در تو (nested containers) استفاده کرد، گرچه در اغلب طرح‌بندی‌ها نیازی به آن نیست.

بوت استرپ سه نوع اصلی از کلاس‌های کانتینر را ارائه می‌دهد:

.container: کانتینری با عرض حداکثری واکنش گرا (responsive max-width).
.container-{breakpoint}: این کلاس‌ها تا زمانی که به نقطه شکست مشخص شده برسند، دارای عرض 100 درصد هستند.
.container-fluid: این نوع کانتینر همیشه در تمام نقاط شکست (breakpoints) دارای عرض 100 درصد است.

جدول زیر نحوه تغییر عرض حداکثری کانتینرها در مقایسه بین .container و .container-fluid را در نقاط شکست مختلف نشان می‌دهد:

نوع کانتینر	<576px	576px (sm)	768px (md)	992px (lg)	1200px (xl)	1400px (xxl)
`.container`	100%	540px	720px	960px	1140px	1320px
`.container-sm`	100%	540px	720px	960px	1140px	1320px
`.container-md`	100%	100%	720px	960px	1140px	1320px
`.container-lg`	100%	100%	100%	960px	1140px	1320px
`.container-xl`	100%	100%	100%	100%	1140px	1320px
`.container-xxl`	100%	100%	100%	100%	100%	1320px
`.container-fluid`	100%	100%	100%	100%	100%	100%

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

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

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Container</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container mt-4">
        <div class="bg-light">
          <h2 class="text-success text-center">Tutorialspoints</h2>
          <h5 class="text-primary text-center">Bootstrap - Container</h5>
          <p>Container is used to set the margin of the content. It contains row elements and the row elements are containers of columns. This is known as the grid system.
            Container is used to set the margin of the content. It contains row elements and the row elements are containers of columns.</p>
        </div>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Container</title>

</head>

<body>

<h2 class="text-success text-center">Tutorialspoints</h2>

<h5 class="text-primary text-center">Bootstrap - Container</h5>

<p>Container is used to set the margin of the content. It contains row elements and the row elements are containers of columns. This is known as the grid system.

Container is used to set the margin of the content. It contains row elements and the row elements are containers of columns.</p>

</div>

</body>

</html>

آنلاین امتحان کنید

کانتینرهای واکنش گرا

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

از کلاس‌های .container-sm، .container-md، .container-lg یا .container-xl استفاده کنید تا مشخص شود آیا کانتینر باید واکنش گرا باشد یا نه.

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Container</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container-sm text-success  border mt-2">Tutorialspoints breakpoint-sm</div>
      <div class="container-md text-success  border mt-2">Tutorialspoints breakpoint-md</div>
      <div class="container-lg text-success  border mt-2">Tutorialspoints breakpoint-lg</div>
      <div class="container-xl text-success  border mt-2">Tutorialspoints breakpoint-xl</div>
      <div class="container-xxl text-success border mt-2">Tutorialspoints breakpoint-xxl</div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Container</title>

</head>

<body>

<div class="container-sm text-success border mt-2">Tutorialspoints breakpoint-sm</div>

<div class="container-md text-success border mt-2">Tutorialspoints breakpoint-md</div>

<div class="container-lg text-success border mt-2">Tutorialspoints breakpoint-lg</div>

<div class="container-xl text-success border mt-2">Tutorialspoints breakpoint-xl</div>

<div class="container-xxl text-success border mt-2">Tutorialspoints breakpoint-xxl</div>

</body>

</html>

آنلاین امتحان کنید

کانتینرهای تمام عرض (Fluid Containers) در بوت استرپ

در آموزش طراحی سایت با بوت استرپ، یکی از نکات پایه‌ای استفاده از کلاس .container-fluid است. این کلاس به شما اجازه می‌دهد کانتینری با عرض کامل بسازید که تمام عرض صفحه را پوشش می‌دهد.

<!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Container</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <div class="container-fluid">
        <h2 class="text-success text-center">Tutorialspoints</h2>
        <h5 class="text-primary text-center">Bootstrap - Container</h5>
        <p>Container is used to set the margin of the content. It contains row elements and the row elements are containers
          of columns. This is known as the grid system.
          Container is used to set the margin of the content. It contains row elements and the row elements are containers
          of columns.</p>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Container</title>

</head>

<body>

<h2 class="text-success text-center">Tutorialspoints</h2>

<h5 class="text-primary text-center">Bootstrap - Container</h5>

<p>Container is used to set the margin of the content. It contains row elements and the row elements are containers

of columns. This is known as the grid system.

Container is used to set the margin of the content. It contains row elements and the row elements are containers

of columns.</p>

</div>

</body>

</html>

آنلاین امتحان کنید

به این مطلب امتیاز دهید

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

دوره آموزش طراحی وب سایت مدرسه با PHP و MySql

انتشار: ۲۵ اردیبهشت ۱۴۰۴

آموزش کانتینرها در بوت استرپ (Containers)

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

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

کانتینرهای واکنش گرا

کانتینرهای تمام عرض (Fluid Containers) در بوت استرپ

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط