مردان وردپرس آموزش بوت استرپ آموزش Bootstrap بخش دوم – ساختار کلی بوت استرپ

آموزش Bootstrap بخش دوم – ساختار کلی بوت استرپ

در این بخش قصد داریم توضیحی در مورد ساختار کلی فریمورک bootstrap ارائه نماییم.

همانطور که می دانید، بوت استرپ محبوب ترین فریمورک HTML، CSS وJavaScript برای طراحی و توسعه وب سایت های واکنشگرا می باشد. طراحی وب واکنشگرا به معنای ساخت وب سایت هایی می باشد که بصورت خودکار خودشان را برای خوب به نظر رسیدن در همه دستگاه ها از موبایل های کوچک تا دسکتاپ های بزرگ، تنظیم می کنند. 

در بوت استرپ ۳، استایل های mobile-first بخشی از هسته فریمورک  می باشند. همچنین بوت استرپ با همه مرورگرهای مدرن مانند Chorme, Firefox, Internet Explorer, Safari و Opera سازگار می باشد.

با توجه به مطالب بخش اول از مقالات مردان وردپرس، بعد از آماده سازی بوت استرپ که می تواند دانلود آن از سایت getbootstrap.com باشد یا از طریق یک CDN، به سراغ آشنایی با ساختار کلی آن می رویم. سیستم grid (یا همان سیستم تقسیم بندی و شبکه بندی یک صفحه) در بوت استرپ به ما اجازه ۱۲ ستون در عرض صفحه را می دهد.

اگر شما نخواهید از همه ۱۲ ستون استفاده کنید، می توانید ستونها را با یکدیگر در یک گروه قرار داده و ستونهای عریض تری را ایجاد کنید. برای روشن شدن مطلب به تصویر زیر توجه کنید:

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 1

span 4

span 4

span 4

span 8

span 4

span 6

span 6

span 12

 

کلاس های grid:
سیستم grid در بوت استرپ واکنشگرا می باشد و ستونها وابسته به سایز صفحه، چیدمان شان تغییر خواهد کرد. به عبارتی ممکن است در یک صفحه بزرگ سازمان دهی محتوا در سه ستون بهتر به نظر بیاید، اما در یک صفحه کوچک اگر محتوا پشت سرهم و بالای یکدیگر قرارگیرند بهتر خواهد بود. 

سیستم grid در بوت استرپ دارای چهار کلاس می باشد:

xs: برای موبایل ها

sm: برای تبلت ها

md: برای دسکتاپ ها

lg: برای دسکتاپ های بزرگتر

این کلاس ها می توانند با یکدیگر ترکیب شوند تا چیدمان داینامیک تر و منعطف تری را ایجاد کنیم.

نکته: اگر می خواهید یک عرض را برای xs و sm تنظیم کنید، تنها نیاز است که xs را تعیین نمایید.

قوانین سیستم grid :

برخی از قوانین سیستم grid بدین شرح می باشد:

  • Row ها برای ترازبندی مناسب، باید درون کلاس container یا container-fluid قرار بگیرند.
  • از Row ها برای ایجاد گروه های افقی از ستون ها استفاده می شود.
  • محتوا باید درون ستون ها قرار گیرند و تنها ستون ها می توانند بلاواسطه بعد از Row ها قرار گیرند.
  • ستون ها بواسطه padding، یک فضای خالی بین محتوا و ستون ایجاد می کنند. این فضای خالی در یک Row را می توان با دادن margin منفی برای آن Row در اولین ستون و آخرین ستون جبران کرد.
  • ستون ها بصورت ۱۲ ستون موجود می باشند. برای مثال، برای داشتن سه ستون مساوی باید از سه کلاس col-sm-4 استفاده نمود. 

در زیر یک مثال از ساختار پایه ای از یک grid بوت استرپ را مشاهده می کنید:

به این نکته حتما دقت داشته باشید که، تعداد ستون ها در * – * –  col در هر Row باید حداکثر ۱۲ باشد.

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

 

تاریخ آخرین بروزرسانی : ۲۴ بهمن ۱۳۹۵
منبع :‌ مردان وردپرس
Advertising MiSaCo.

نظرات خود را اینجا بنویسید

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.