چینش تگ های دیو در صفحه با لی اوت بوتسترپ bootstrap layout

با بوتسترپ لی اوت میتوان یک صفحه از وب را صفحه ارایی کرد. لی اوت یا همان layout صفحه – چینش قسمت های داخلی صفحه – با استفاده از بوتسترپ کاری ساده تر است. اینجا به چند کلاس از ان اشاره میشود که وقتی در تگ div از ان بهره میبریم باعث میشود با ستون بندی خاصی در صفحه قرار گیرد.

میتوانید ویدیو بالا را تمام صفحه تماشا کنید! کافیست روی ایکون چهارگوشه کلیک کنید!

انچه در این مقاله میخوانید بصورت کامل در ویدیو بالا بصورت یک ویدیوی بیصدا اجرا شده است. پنج گام دارد:

گام اول: ایجاد index.html

گام دوم: تمپلیت starter بوتسترپ (کپی پیست میکنیم!)

گام سوم: ایجاد دو ستون به نسبت 8 به 4 (با کلاس های col-8 و col-4)

گام  چهارم: رسپانسیو کردن ستون ها (با کلاس های col-lg-9 و col-lg-3 و …)

گام پنجم: عدم نمایش یک ستون در عرض کوچک صفحه (با کلاس های d-none و d-sm-block و …)

میتوانید با کلیک روی گام دوم ، گام سوم ، گام چهارم و گام پنجم ، به محتوای مربوطه در سایت bootstrap بروید!

گام اول: ایجاد index.html

در گام اول یک پوشه به نام junior ایجاد کردیم و داخل ان یک فایل به نام index.html ایجاد شد. کار خاصی انجام ندادیم. سپس با ویرایشگر اتم ان را باز کردیم. یک برگه خالی بود که در گام بعدی میخواهیم قطعه کدی را به داخلش کپی پیست کنیم.

نکته: اگر Atom را نصب نکرده اید میتوانید با ویرایشگر های دیگر این کار را بکنید یا آن را از وبسایتش دانلود و نصب کنید.

بوتسترپ لی اوت >> گام دوم: تمپلیت starter بوتسترپ

در گام دوم به سایت بوتسترپ میرویم و با کلیک روی دکمه get started به صفحه ای میرویم که در میانه های ان starter template را مشاهده میکنیم. حالا کافیست قطعه کد را کپی کنیم و به داخل index.html خودمان بریزیم. سپس تغییرات را در ویرایشگر کد ذخیره میکنیم. به پوشه junior میرویم. روی index.html دبل کلیک میکنیم. در بروزر Hello World را میبینیم.

گام سوم: ایجاد دو ستون به نسبت 8 به 4

به گام سوم خوش آمدید! در این گام میخواهیم ستون بندی کنیم. کافیست یک تگ div ایجاد کنیم و داخل اتریبیوت class ان بنویسیم container ! دوباره داخل این تگ یک تگ div جدید ایجاد میکنیم. کلاس row را به ان نسبت میدهیم. در داخل دیو کلاس row دو تا <div> ایجاد میکنیم. کلاس های col-8 و col-4 را به ان نسبت میدهیم. کمی استایل به هرکدام نیز میدهیم که نتیجه کدهای زیر میشود:

<div class="container">
       <h1>Hello, world!</h1>
       <div class="row">
         <!-- ستون اول -->
         <div style='background-color: green'
         class="col-6 ">
           column
         </div>
         <!-- ستون دوم -->
         <div style='background-color: gray'
         class="col-6">
           column
         </div>

       </div>
     </div>

بوتسترپ لی اوت >> گام  چهارم: رسپانسیو کردن ستون ها

در این گام میتوانیم با نسبت دادن کلاس های col-lg-9 و col-lg-3 به دو دیو بچه در داخل دیو مادر با کلاس row ، دیو بچه ها برای ابعاد صفحه بزرگ صفحه ارایی میشوند. وقتی عرض بروزر را با موس تغییر سایز میدهید متوجه تغییرات میشوید. از عرض مشخصی به بعد دو ستون به نسبت 8 به 4 دیده میشود. بخاطر همین به ان background-color داده شد تا نمایان شود.

<!-- ستون اول -->
<div style='background-color: green'
class="col-sm-6 col-md-8 col-lg-9">
column
</div>
<!-- ستون دوم -->
<div style='background-color: gray'
class="col-sm-6 col-md-4 col-lg-3">
column
</div>

بوتسترپ لی اوت >> گام پنجم: عدم نمایش در عرض کوچک

در گام پنجم میخواهیم کاری کنیم که یک ستون در ابعاد بزرگ نمایش داده میشود در ابعاد موبایل نمایش داده نشود. بدین منظور از کلاس های d-none و d-sm-block بهره برده شد. وقتی این دو کلاس می اید تفسیرش این میشود: این دیو را هرگز نشان نده ولی در ابعاد sm و بزرگتر مثل md و lg نمایش بده!

<!-- ستون اول -->
<div style='background-color: green'
class="col-sm-6 col-md-8 col-lg-9">
column
</div>
<!-- ستون دوم -->
<div style='background-color: gray'
class="d-none d-sm-block col-sm-6 col-md-4 col-lg-3">
column
</div>

اگر هدف نمایش یک دیو در ابعاد بزرگ صفحه بود مثلا ابعاد lg انگاه از دو کلاس d-none و d-lg-block استفاده میشد. کلاس های بیشتر در این رابطه را در سایت اصلی بخوانید. کافیست در گوگل سرچ کنید bootstrap display یا روی عنوان همین پاراگراف کلیک نمایید.