آموزش grid بوت استرپ | نکات تکمیلی سایز گریدها

اندازه ی grid در بوت استرپ 4

با سلام و عرض احترام به تمام همراهان گرامی روکسو، به آخرین قسمت از سری آموزشی بوت استرپ 4 خوش آمدید. در این قسمت به تکمیل آموزش grid در بوت استرپ می پردازیم و برخی از نکات جزئی و باقی مانده از جلسه ی قبل (در رابطه با سایز grid ها) را بررسی خواهیم کرد.

در قسمت قبلی در مورد اندازه های مختلف grid در بوت استرپ صحبت کرده و جدول زیر را به شما ارائه دادیم:

	بسیار کوچک	کوچک	متوسط	بزرگ	بسیار بزرگ
پیشوند کلاس	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
عرض صفحه	کمتر از 576px	بیشتر یا مساوی 576px	بیشتر یا مساوی 768px	بیشتر یا مساوی 992px	بیشتر یا مساوی 1200px

این جدول معنی کلمات «بسیار کوچک»، «کوچک»، «متوسط» و... را از نظر بوت استرپ مشخص می کند. بر اساس همین جدول می خواهیم چند مورد از مثال های مختلف را بررسی کنیم.

برای اندازه های کوچک از کلاس های خانواده ی *-col-sm. استفاده می کنیم:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

برای اندازه های متوسط از کلاس های خانواده ی *-col-md. استفاده می کنیم:

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

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

<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>

زمانی که به بوت استرپ کلاس sm (کوچک) را می دهیم و می گوییم صفحه را به نسبت 25 به 75 تقسیم کن یعنی این کار را برای عرض های کوچک، متوسط، بزرگ و بسیار بزرگ انجام بده. اگر کلاس md (متوسط) را به آن بدهیم و بگوییم صفحه را به نسبت 25 به 75 تقسیم کن یعنی این کار را برای عرض های متوسط، بزرگ و بسیار بزرگ انجام بده و همینطور الی آخر...

به زبان ساده تر بوت استرپ همیشه در Grid ها کلاس معرفی شده و کلاس های بالاتر را هدف می گیرد. برای مقایسه ی این مطلب یک بار از کلاس sm و بار دیگر از کلاس lg استفاده می کنیم:

کلاس sm:

<!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.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Small Grid</h1>
  <p>The following example will result in a 25%/75% split on small, medium, large and xlarge devices (<strong>576px and above</strong>). On extra small devices, it will stack (100% width).</p>
  <p>Resize the browser window to see the effect.</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 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-sm-9 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>

مشاهده ی خروجی در JSBin

کلاس lg:

<!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.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Large 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 and 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 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 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>

مشاهده ی خروجی در JSBin

در مثال بالا ما تنها از کلاس دسته ی lg استفاده کرده و دسته های دیگر مانند sm را کنار گذاشته ایم. برای همین در این مثال عرض های بزرگ یا lg و بسیار بزرگ یا xl به صورت %50 تقسیم می شوند اما عرض های متوسط، کوچک و بسیار کوچک روی هم قرار می گیرند (به حالت Stacked) چرا که بالاتر هم گفتیم که بوت استرپ به کلاس دریافتی و کلاس های بالاتر نگاه می‌کند. به این مثال توجه کنید:

<!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.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Large Grid</h1>
  <p>The following example will result in a 50%/50% split on large and xlarge devices (<strong>992px and above</strong>). On 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-lg-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-lg-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>

مشاهده ی خروجی در JSBin

تقسیم بندی خودکار ستون ها

در جلسه ی قبلی به شما مثالی ارائه دادیم که در آن بوت استرپ ستون ها را به صورت خودکار تقسیم می کرد. آن مثال برای تمامی عرض ها و کلاس های بوت استرپ اطلاق پذیر است. بنابراین برای کلاس های بزرگ (lg) نیز می توانیم به جای استفاده از *-col-lg. (عدد از 12 به جای ستاره) از کلاس col-lg. استفاده کنیم. بدین صورت تقسیم بندی ستون ها بر عهده ی خود بوت استرپ قرار گرفته و به صورت مساوی تقسیم می شوند:

<!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.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.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-lg</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 992px</strong>, the columns will stack horizontally.</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg bg-success">1 of 2</div>
      <div class="col-lg bg-warning">2 of 2</div>
    </div>  
  </div>
  <br>
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg bg-success">1 of 4</div>
      <div class="col-lg bg-warning">2 of 4</div>
      <div class="col-lg bg-success">3 of 4</div>
      <div class="col-lg bg-warning">4 of 4</div>
    </div>  
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

یادتان باشد برای مشاهده ی مثال های این جلسه باید قسمت خروجی jsbin (نیمه ی راست صفحه) را بزرگ و کوچک کنید تا متوجه تفاوت سایز ها بشوید.

امیدوارم این قسمت نیز مورد رضایت شما قرار گرفته باشد.

دیدگاه‌های شما (4 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

هدی

24 شهریور 1400

سلام، وقت بخیر سایت بسیار خوبی دارید ممنونم

محدثه

03 دی 1398

سلام ممنونم از شما بابت مطالب خوبتون. امکانش هست یک پروژه ساده با بوت استرپ رو در سایتتون منتشر کنید که ما بتونیم یک پروژه آماده ببینیم.مرسی

امیر زوارمی

06 دی 1398

سلام دوست عزیز، ان شاء الله در آینده ی نزدیک یک پروژه ی بوت استرپ رو آماده می کنم تا در سایت منتشر بشه. البته فعلا نمی تونم زمان دقیقش رو مشخص کنم

مینا

24 مرداد 1398

ممنون از مطالب خوبتون. من تمام مباحث این دوره رو مطالعه کردم. بسیار خوب و کاربردی بود. اگر امکانش هست دوره jquery هم منتشر کنید

25 مرداد 1398

سلام دوست عزیز، نظر لطف شما است. اگر نظر بنده رو بخواید بدونید، بهتر هست اصلا سمت جی کوئری نرید چون در حال حاضر تکنولوژی های خیلی پیشرفته تری مثل react و vue وجود داره که میتونید از اونها استفاده کنید. الان اکثر کار هایی که جی کوئری انجام میداد رو جاوااسکریپت ساده انجام میده و دیگه مشکلی نداریم. این مقاله رو پیشنهاد میدم بخونید: https://www.roxo.ir/javascript-vs-jquery/ در آینده یه دوره ی React در روکسو پلاس منتشر میشه که دوره ی جامعی هست پیشنهاد میکنم اون رو دنبال کنید. اگر هم دوست دارید میتونید از roxo.ir دوره های آموزش ویدیویی شون رو خریداری کنید.