شبکه‌بندی خیلی‌بزرگ

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
شبکه‌بندی
۱سیستم شبکه‌بندی
۲stacked/افقی
۳شبکه‌بندی خیلی‌کوچک
۴شبکه‌بندی کوچک
۵شبکه‌بندی متوسط
۶شبکه‌بندی بزرگ
۷شبکه‌بندی خیلی‌بزرگ
۸مثال‌های شبکه‌بندی
Theme
مرجع

مثال شبکه بندی خیلی بزرگ

خیلی کوچک کوچک بزرگ بزرگ خیلی بزرگ
پیشوند کلاس .col- .col-sm- .col-lg- .col-lg- .col-xl-
عرض صفحه نمایش <576px >=576px >=992px >=992px >=1200px

در بخش قبلی، مثالی از شبکه بندی با کلاس‌هایی برای دستگاه‌های کوچک و متوسط ارائه کردیم. از دو div (ستون) استفاده کرده و به آنها تقسیم‌بندی ۲۵٪-۷۵٪ در دستگاه‌های کوچک و تقسیم‌بندی ۵۰٪-۵۰٪ در دستگاه‌های متوسط و تقسیم‌بندی ۳۳٪-۶۶٪ در دستگاه‌های بزرگ دادیم:[۱]

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>


اما در دستگاه‌های خیلی بزرگ بهتر است تقسیم‌بندی ۲۰٪-۸۰٪ باشد.

دستگاه‌های خیلی بزرگ بعنوان صفحه نمایش‌هایی با عرض ۱۲۰۰ پیکسل و بیشتر تعریف می‌شوند.

برای دستگاه‌های خیلی بزرگ از کلاس‌های .col-xl-* استفاده می‌کنیم:

<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>

مثال زیر منجر به ایجاد تقسیم‌بندی ۷۵٪-۲۵٪ در دستگاه‌های کوچک و تقسیم‌بندی ۵۰٪-۵۰٪ در دستگاه‌های متوسط و تقسیم‌بندی ۳۳٪-۶۶٪ در دستگاه‌های بزرگ و تقسیم‌بندی ۲۰٪-۸۰٪ در دستگاه‌های خیلی بزرگ می‌شود. در دستگاه‌های بسیار کوچک، بطور خودکار به حالت بالای هم (stack) تبدیل می‌شود (۱۰۰٪):

مثال

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

مثال

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>XLarge Grid</h1>
  <p>The following example will result in a 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large devices and a 20%/80% on xlarge devices. On extra small devices, it will automatically stack (100%).</p>
  <p>Resize the browser window to see the effect.</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-success">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-warning">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      </div>
    </div>
  </div>
</div>
    
</body>
</html>


Responsive demo.svg


نکته: مطمئن شوید که مجموع کلی همیشه حداکثر ۱۲ باشد.

فقط از اندازه خیلی بزرگ استفاده کنید

در مثال پایین، فقط کلاس .col-xl-6 را به کار برده‌ایم (بدون استفاده از: .col-lg-*, .col-md-* و/یا .col-sm-*). این یعنی دستگاه‌های خیلی بزرگ تقسیم‌بندی ۵۰٪-۵۰٪ دارند. با این حال، برای دستگاه‌های بزرگ، متوسط، کوچک و خیلی کوچک، بطور عمودی بالای هم (stack vertically) قرار می‌گیرد (عرض ۱۰۰٪):

مثال

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-xl-6">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

مثال

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>XLarge Grid</h1>
  <p>The following example will result in a 50%/50% split on xlarge devices (<strong>1200px and above</strong>). On large, medium, small and extra small devices, it will automatically stack (100%).</p>
  <p>Resize the browser window to see the effect.</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xl-6 bg-success">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
      <div class="col-xl-6 bg-warning">
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      </div>
    </div>
  </div>
</div>

</body>
</html>


Responsive demo.svg


ستون‌هایی با چیدمان خودکار (Auto Layout)

در بوت استرپ ۴، روش ساده ای برای ایجاد ستون‌هایی با عرض مساوی در همهٔ دستگاه‌ها وجود دارد: تنها باید عدد را از .col-xl-* حذف کنید و فقط از کلاس .col-xl با تعداد مشخصی از عناصر col استفاده کنید. بوت استرپ تشخیص خواهد داد چند ستون وجود دارد و هر ستون عرض برابر می‌گیرد.

اگر سایز صفحه نمایش کمتر از ۱۲۰۰ پیکسل باشد، ستون‌ها بطور افقی بالای هم (Stack) قرار می‌گیرند:

مثال

<div class="row">
  <div class="col-xl">1 of 2</div>
  <div class="col-xl">2 of 2</div>
</div>

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

مثال

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Responsive Auto Layout Columns</h1>
  <p>In Bootstrap 4, there is an easy way to create equal width columns: just use the <code>.col-xl</code> class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.</p>
  <p>If the screen size is <strong>less than 1200px</strong>, the columns will stack horizontally.</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xl bg-success">1 of 2</div>
      <div class="col-xl bg-warning">2 of 2</div>
    </div>  
  </div>
  <br>
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-xl bg-success">1 of 4</div>
      <div class="col-xl bg-warning">2 of 4</div>
      <div class="col-xl bg-success">3 of 4</div>
      <div class="col-xl bg-warning">4 of 4</div>
    </div>  
  </div>
</div>

</body>
</html>


Responsive demo.svg



منابع آموزشی