بوت استرپی شو! 2#

بوت استرپی شو! 2#
در آموزش قبل با طراحی رسپانسیو آشنا شدیم و فهمیدیم که با بوت استرپ می تونیم یک سایت رو به صورت رسپانسیو طراحی کنیم. اونم فقط با HTML و CSS و در آخر این فریمورک محبوب رو نصب کردیم. امروز میخوایم با ستون بندی در بوت استرپ آشنا شیم. مهمترین نکته و مفهوم در بوت استرپ... با مجیدآنلاین همراه باشید.
خرید شارژ ایرانسل
خرید شارژ ایرانسل، همراه اول، رایتل | خرید بسته های اینترنت ایرانسل | etore.ir
خرید سرور مجازی
ارائه سرور مجازی SSD NVMe برای اولین بار در ایران ؛ نهایت سرعت را تجربه کنید.
خرید شارژ ایرانسل
خرید شارژ ایرانسل، همراه اول، رایتل | خرید بسته های اینترنت ایرانسل | etore.ir
خودتان را اینجا معرفی کنید

امیدوارم از آموزش جلسه اول راضی بوده باشین و با انرژی اومده باشین تا بریم سراغ مرحله بعدی در آموزش بوت استرپ.
خب وارد بحث اصلیمون بشیم. مهمترین اساس در بوت استرپ و بقیه فریمورک های رسپانسیو, ستون بندیه. در واقع عرض صفحه به تعداد مشخصی ستون تقسیم میشه که بسته به فریمورک های مختلف, این تقسیم بندی متفاوته. 
منظورمون از ستون بندی اینه که برای مثال ببینیم هر المان ما در صفحه, چند ستون رو به خودش اختصاص میده. یعنی چی؟ تصویر زیر رو ببینید:
فرض کنید طرح کلی ما به این صورتِ؛ یه هدر, یه سایدبار در سمت راست, یه ساید بار کوچکتر در سمت چپ و در نهایت محتوای اصلی ما.
حالا همونطور که گفته شد باید ببینیم هر کدوم از اِلِمان های ما چند ستون رو در بر میگیره.

اگر عرض صفحمون رو به 12 ستون مساوی تقسیم کنیم خیلی راحت می تونید تشخیص بدیم که هر المان در صفحه چند ستون رو در بر میگیره. چرا 12؟
خب ساختار بوت استرپ به این صورته که عرض صفحه رو به 12 ستون با عرض مساوی به همراه میزان کمی فاصله بین این ستون ها , تقسیم می کنه.
در فریمورک های دیگه این تقسیم بندی متفاوته. بعضی از فریمورک ها هم هستن که 16 ستونه هستن اما 12 ستون مناسبه چون بر اعداد زیادی تقسیم میشه. این زمانی برامون مفیده که بخوایم چند المان با سایز های یکسان رو در کنار هم بچینیم.
میتونیم 6 المان به عرض دو ستون رو در کنار هم جای بدیم یا 4 المان با عرض 3 ستون و و و ...

اصلا چرا ستون بندی می کنیم؟

معیار و اساس کار بوت استرپ بر پایه ستون بندیه. یعنی برای مثال میخواد بدونه که ساید بار ما در نمایشگر با عرض بزرگ (مثل لپتاپ), چند ستون از 12 ستون رو در بر میگیره و همین ساید بار در عرض کوچکتر (برای مثال تبلت) چند ستون از 12 ستون ممکن رو اشغال می کنه.
مشخصه که عرض این ستون ها متناسب با عرض نمایشگر تغییر می کنه. نسخه شماره سه بوت استرپ, 4 بازه رو برای عرض صفحات نمایشگر در نظر گرفته و به هر کدوم از این ها یک اسم خاص اختصاص داده.


در بوت استرپ 4 کلمه کلیدی برای عرض صفحه نمایش تخصیص داده شده که هیچوقت نباید فراموششون کنیم.
  • xs - Extra Small Devices - ( <768px )
  • sm - Small Devices - ( ≥768px & <992px )
  • md - Medium Devices - ( ≥992px & <1200px )
  • lg - Large Devices - ( ≥1200px )
پس در بوت استرپ ما برای این 4 سایز طراحی می کنیم. در واقع بوت استرپ برای این 4 سایز مدیا کوئری نوشته و ما با تخصیص این کلمات کلیدی در قالب یک کلاس می توانیم به راحتی از مدیاکوئری های نوشته شده استفاده کنیم.
ساختار این کلاس ها به شکل زیر تعریف میشه.
یعنی برای مثال اگر به یک المان کلاس col-sm-4 رو بدیم, اندازه این المان در سایز کوچک برابر با 4/12 عرض والدش میشه. پس در واقع ما برای هر کدوم از المان های خودمون باید 4 کلاس رو مشخص کنیم. مشخص کنیم که در سایز xs چند ستون رو به خودشون اختصاص میدن! در سایز sm چطور؟ سایز md؟ و همچنین سایز lg؟
نکته مهم دیگه اینه که ساختار بوت استرپ mobile-first هست. یعنی اول باید برای سایز xs شروع به طراحی کنید و به هر تگ ابتدا کلاس متناظر با xs رو اختصاص بدین.
چرا باید اینکار رو انجام بدیم؟ برای ساختار مدیا کوئری های بوت استرپ.
همون طور که مییبینید مدیا کوئری های بوت استرپ در 4 حالت مختلف نوشته شده.


پس در نتیجه باید ابتدا برای xs تعداد ستون ها رو مشخص کنیم سپس sm و بعد md و در نهایت lg. این رو بدونید که اگر برای هرکدوم از این سایزها, تعداد ستون رو مشخص نکنید, اندازه رو از سایز کوچکتر خودش به ارث میبره. برای مثال کد زیر رو در نظر بگیرید.
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">1</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">2</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">3</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">4</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">5</div>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-2">6</div>
در کد بالا برای هر تگ, در هر سایز, تعداد ستون ها رو مشخص کردیم. یعنی هر کدام از تگ ها فوق در حالت xs تمام 12 ستون ممکن رو اشغال می کنن (یک سطر کامل) و در سایز sm نصف یک سطر رو اشغال می کنن و در نتیجه دو تا دو تا در هر سطر قرار می گیرند. پس طبیعتا با این شرایط در سایز md در هر سطر 4 تگ داریم و در سایز lg تمام این 6 تگ در کنار هم قرار می گیرند.
میتونید برای تست و مشاهده کد, فایل تمرین رو از لینک زیر دانلود کنید. خب اگر فایل تمرین رو مشاهده کنید به یه نکته جدیدی میرسیم. اگر دقت کنید میبینید که تمامی تگ های ستون بندی (اونایی که کلاس هایی با پیشوند -col بهشون اختصاص داده شده) فرزند مستقیم تگی با کلاس row. هستن. 
پس تا اینجای کار متوجه شدیم که ستون ها فرزند مستقیم سطرها هستن. درست مثل <table> که <td> فرزند مستقیم <tr> هست. نکته دیگه اینه که سطرها هم باید فرزند مستقیم کلاسی به نام container. یا container-fluid. باشن.
container و container-fluid یه جور در بر گیرنده یا wrapper هستن. container-fluid در تمام 4 حالت , تمام عرض صفحه رو در بر میگیره اما container در حالت lg عرض 1170px و در حالت md دارای عرض 970px و در حالت sm دارای عرض 750px می باشد.
پس در نهایت تمام ستون های ما در داخل سطرها (با کلاس row) و تمام سطرها فرزند مستقیم container یا container-fluid هستن. محتویات ما هم درون ستون ها قرار میگیرن.
.container>.row>.col-*-*

یه نکته رو در نظر بگیرین. اونم این که اگر اولین تگ ما 8 ستون باشه و تگ بعدی 5 ستون, تگ دوم به خط بعد منتقل میشه چون در هر سطر فقط امکان وجود 12 ستون وجود داره. دقت کنید که در هر سطر نیازی نیست حتما 12 ستون قرار بگیره!!

خب تا اینجا در مورد ستون بندی در بوت استرپ صحبت کردیم. در جلسه بعدی با کلاس هایی آشنا میشیم که میتونن چیدمان ستون ها رو به طرز جالب تغییر داده و طرح مورد نظر ما رو ایجاد کنن. همچنین چند کلاس مهم بوت استرپ رو معرفی و در آخر پروژه ای رو برای طراحی انتخاب میکنیم.
پس همراه من باشید wink

رضا مدیر وبسایت مجید آنلاین و عضو تیم طراحی در آرتیمان استودیو می باشد. از سال 87 برنامه نویسی را با زبان های خانواده C شروع کرد و بعد از 4 سال به سمت طراحی و برنامه نویسی تحت وب رفت. وی همزمان با تحصیل در مقطع کارشناسی رشته مهندسی کامپیوتر به امر ترجمه کتاب در حوزه برنامه نویسی مشغول بود که کتاب او در مرحله ویراستاری قرار دارد. به روز بودن و افزایش مستمر اطلاعات شخصی در زمینه وب دغدغه ی اصلی و همیشگی رضاست.

نظرات و سوالات کاربران

ارسال پاسخ رضا مجیدی
رضا مجیدی
سه شنبه ۳۱ شهریور ۱۳۹۴ ۱۰:۰۲
در پاسخ به دیدگاه honarvar ارسال شده در دوشنبه ۳۰ شهریور ۱۳۹۴ ۱۶:۳۸

متشکرم از توضیحتون

خواهش میکنم دوست عزیز

ارسال پاسخ honarvar
honarvar
دوشنبه ۳۰ شهریور ۱۳۹۴ ۱۶:۳۸
در پاسخ به دیدگاه رضا مجیدی ارسال شده در دوشنبه ۳۰ شهریور ۱۳۹۴ ۱۶:۲۵

خب برای تشخیص سایز صفحه که sm هست یا xs المان های مختلفی دخیل هستن. از جمله رزولوشن. اکثر گوشی عملکردشون در سایز sm هست.

متشکرم از توضیحتون

ارسال پاسخ رضا مجیدی
رضا مجیدی
دوشنبه ۳۰ شهریور ۱۳۹۴ ۱۶:۲۵
در پاسخ به دیدگاه honarvar ارسال شده در دوشنبه ۳۰ شهریور ۱۳۹۴ ۱۴:۰۹

honarvar.comyr.com

خب برای تشخیص سایز صفحه که sm هست یا xs المان های مختلفی دخیل هستن. از جمله رزولوشن. اکثر گوشی عملکردشون در سایز sm هست.

ارسال پاسخ honarvar
honarvar
دوشنبه ۳۰ شهریور ۱۳۹۴ ۱۴:۰۹
در پاسخ به دیدگاه رضا مجیدی ارسال شده در دوشنبه ۳۰ شهریور ۱۳۹۴ ۰۹:۲۸

میتونید لینک سایت رو بنویسید؟

honarvar.comyr.com" rel="nofollow">honarvar.comyr.com

ارسال پاسخ رضا مجیدی
رضا مجیدی
دوشنبه ۳۰ شهریور ۱۳۹۴ ۰۹:۲۸
در پاسخ به دیدگاه honarvar ارسال شده در شنبه ۲۸ شهریور ۱۳۹۴ ۲۰:۱۹

سلام. فایل تمرین پیوست شده رو روی یک هاست آپلود کردم.
گوشی من 4.3 اینچ هست که تقریبا میشه 480 پیکسل (یعنی extra small device) اما وقتی با گوشیم سایت رو باز میکنم به جای اینکه هر سطر(12 ستون) رو به یک تگ div اختصاص بده، هر سطر رو به دو تگ div اختصاص میده
مشکل کجاست؟
thanks in advance

میتونید لینک سایت رو بنویسید؟

ارسال پاسخ honarvar
honarvar
شنبه ۲۸ شهریور ۱۳۹۴ ۲۰:۱۹

سلام. فایل تمرین پیوست شده رو روی یک هاست آپلود کردم.
گوشی من 4.3 اینچ هست که تقریبا میشه 480 پیکسل (یعنی extra small device) اما وقتی با گوشیم سایت رو باز میکنم به جای اینکه هر سطر(12 ستون) رو به یک تگ div اختصاص بده، هر سطر رو به دو تگ div اختصاص میده
مشکل کجاست؟
thanks in advance

ارسال پاسخ رضا مجیدی
رضا مجیدی
سه شنبه ۲۴ شهریور ۱۳۹۴ ۰۸:۵۲
در پاسخ به دیدگاه مجید ارسال شده در دوشنبه ۲۳ شهریور ۱۳۹۴ ۱۱:۳۳

ممنون از پاسختون. که علمتون رو بی منت و ریا اون رو در خدمت بقیه قرار میدید.سپاس

ممنونم دوست عزیز. هر کمکی از دستم بر بیاد در خدمت دوستان هستم... ;-)

ارسال پاسخ مجید
مجید
دوشنبه ۲۳ شهریور ۱۳۹۴ ۱۱:۳۳
در پاسخ به دیدگاه رضا مجیدی ارسال شده در شنبه ۲۱ شهریور ۱۳۹۴ ۰۹:۰۶

کافیه به سایدبارتون بگید که در سایز کوچیک 12 ستون رو اشغال کنه. چون 12 ستون میشه یک سطر کامل برای همین میره به سطر دیگه(پایین تر)
در تصویر زیر توضیح دادم. اگر سوالی بود در خدمتم :-)

ممنون از پاسختون. که علمتون رو بی منت و ریا اون رو در خدمت بقیه قرار میدید.سپاس

ارسال پاسخ رضا مجیدی
رضا مجیدی
شنبه ۲۱ شهریور ۱۳۹۴ ۰۹:۰۶
در پاسخ به دیدگاه مجید ارسال شده در دوشنبه ۱۶ شهریور ۱۳۹۴ ۲۳:۱۱

شاید یه خورده زود باشه سوالم.. اینکه هیمن سایت مجید آنلاین رو با فایرفاکس(ctrl+shift+m ) از 720px پایین تر میاریم، ستون سمت مطالب سمت چپ میره پایین ستون اصلی قرار میگیره! چطوره میشود آیا؟!

کافیه به سایدبارتون بگید که در سایز کوچیک 12 ستون رو اشغال کنه. چون 12 ستون میشه یک سطر کامل برای همین میره به سطر دیگه(پایین تر)
در تصویر زیر توضیح دادم. اگر سوالی بود در خدمتم :-)

ارسال پاسخ رضا مجیدی
رضا مجیدی
شنبه ۲۱ شهریور ۱۳۹۴ ۰۸:۵۲
در پاسخ به دیدگاه مجید ارسال شده در سه شنبه ۱۷ شهریور ۱۳۹۴ ۱۰:۱۹

ببخشید ذوقسمتی شد سوالم.. مثلا همین سایت مجید آنلاین دوسومش ستون اصلی (سمت راست)، و یک سوم اون ستون سمت چپ هست.. بعضی از سایت ها هم وقتی نمایشگر از یک ابعادی کوچیکتر میشه (مثلا ستون سمت چپ سایت) کلا نمایش داده نمیشه؟!! به چه صورت می شود آیا؟

سلام دوست عزیز. در آموزش سوم این مبحث رو کامل توضیح دادم. لطفا یه نگاهی کن و اگر باز هم سوالی بود کامنت بزار تا با هم حلش کنیم ;-)

ارسال پاسخ مجید
مجید
سه شنبه ۱۷ شهریور ۱۳۹۴ ۱۰:۱۹
در پاسخ به دیدگاه مجید ارسال شده در دوشنبه ۱۶ شهریور ۱۳۹۴ ۲۳:۱۱

شاید یه خورده زود باشه سوالم.. اینکه هیمن سایت مجید آنلاین رو با فایرفاکس(ctrl+shift+m ) از 720px پایین تر میاریم، ستون سمت مطالب سمت چپ میره پایین ستون اصلی قرار میگیره! چطوره میشود آیا؟!

ببخشید ذوقسمتی شد سوالم.. مثلا همین سایت مجید آنلاین دوسومش ستون اصلی (سمت راست)، و یک سوم اون ستون سمت چپ هست.. بعضی از سایت ها هم وقتی نمایشگر از یک ابعادی کوچیکتر میشه (مثلا ستون سمت چپ سایت) کلا نمایش داده نمیشه؟!! به چه صورت می شود آیا؟

ارسال پاسخ مجید
مجید
دوشنبه ۱۶ شهریور ۱۳۹۴ ۲۳:۱۱

شاید یه خورده زود باشه سوالم.. اینکه هیمن سایت مجید آنلاین رو با فایرفاکس(ctrl+shift+m ) از 720px پایین تر میاریم، ستون سمت مطالب سمت چپ میره پایین ستون اصلی قرار میگیره! چطوره میشود آیا؟!

ارسال پاسخ رضا مجیدی
رضا مجیدی
دوشنبه ۱۶ شهریور ۱۳۹۴ ۰۸:۴۱
در پاسخ به دیدگاه مجید ارسال شده در دوشنبه ۱۶ شهریور ۱۳۹۴ ۰۲:۰۳

عالی و کامل ممنون جناب مجیدی

خواهش میکنم دوست عزیز...
ممنون بابت نظرت :-)

ارسال پاسخ مجید
مجید
دوشنبه ۱۶ شهریور ۱۳۹۴ ۰۲:۰۳

عالی و کامل ممنون جناب مجیدی