دوره آموزشی طراحی قالب با استفاده از Bootstrap

بازدید57.2kپست ها5آخرین فعالیت9 سال پیش
2

[color=#A52A2A]آموزش طراحی قالب با Bootstrap- قسمت اول[/color]
Bootstrap یک فریم ورک HTML,CSS,JavaScrtip است که به شما این توانایی رو میده به راحتی وب سایت های خودتون رو رسپانسیو و انعطاف پذیر طراحی کنید.

رسپانسیو (Responsive) یعنی چی؟! وقتی وب سایت شما با توجه به سایز صفحه نمایشگر تغییر سایز بده و در عرض دارای اسکرول نباشه رسپانسیو کقته میشه و به عبارت دیگه وب سایت ها در قدیم برای سایز نمایشگر های لپ تاپ و کامپیوتر ها طراحی میشد و در سایر پلتفرم ها مثل تبلت و گوشی موبایل به درستی نمایش داده نمی شدند و یا قالب سایت بهم میریخت ولی با استفاده از بوت استرپ قادرید وب سایت رو طوری طراحی و کدنویسی کنید که در تبلت و گوشی موبایل به راحتی قابل نمایش باشه و با این کار شما بخش عظیمی از کابرانی رو که از تبلت و گوشی موبایل استفاده میکنند رو به وب سایت خودتون جذب می کنید.

قابلیت Responsive شدن وب سایت با استفاده از Bootstrap تنها مربوط به بخش HTML و CSS می شه اما بوت استرپ علاوه بر این امکان یک ویژگی بارز دیگه هم داره و اون آماده سازی Component ها و ابزارهای ساخته شده با JavaScript برای کاربران است که شما میتونید هر کدام از این ابزارها رو در قالب خودتون با کپی کردن کد اون بکار ببرید. توضیح بیشتر برای این بخش نمیدم برای آشنایی بیشتر به لینک های زیر در سایت Bootstrap مراجعه کنید و با این ابزارها آشنا بشین:

Components

ابزارهای JavaScript

خب تا این قسمت به نظرم از بوت استرپ خوشتون اومده…
برای شروع کار اول به وب سایت بوت استرپ میریم به قسمت Getting started. در این بخش توضیح مختصری در مورد ورژن فعلی بوت استرپ ۳٫۲٫۰ و نحوه استفاده از این ورژن گفته شده است. در این قسمت مشاهده می کنید که سه pack بوت استرپ برای دانلود قرار داده شده است:

برای شروع کار اول به وب سایت بوت استرپ میریم به قسمت Getting started. در این بخش توضیح مختصری در مورد ورژن فعلی بوت استرپ ۳٫۲٫۰ و نحوه استفاده از این ورژن گفته شده است. در این قسمت مشاهده می کنید که سه pack بوت استرپ برای دانلود قرار داده شده است:

بخش اول از سمت چت سورس کدهای اصلی Bootstrap هست یعنی کدهای css , js و fonts هستند که دارای کدهای minified شده css هم هستند. اگر از این بسته برای طراحی قالب سایت استفاده کنید برای ایجاد تغییرات در هر بخش کد باید قسمت های زیادی از کد css رو تغییر بدین و وقت زیادی رو میگیره!

اگر در css قادر بودین مانند PHP متغییر تعریف کنید و یا از دستورات شرطی و حلقه ها استفاده کنید و یا تابعی رو بنویسید خیلی کار استایل دهی قالب به سرعت پیش می رفت و نیاز به تکرار برخی از کدها و بازنویسی در جاهایی که لازم هست نداشتین! مثلا میتونستید یک تابع تعریف کنید و کدهایی مثل font,color,size,border,border-radius رو داخلش قرار بدین و هرکجا تابع رو فرخوانی کردین این دستورات اجرا بشه به سرعت میتونستید یک استایل رو آماده کنید! تمامی این امکانات در زبان های Less و Sass آورده شده و بسته های دوم و سوم بوت استرپ مخصوص کسانی هست که حرفه ای کار می کنند و میخوان زودتر و شیک تر برنامه خودشون رو بنویسند.

زبان های Less و Sass تقریبا شبیه به هم عمل میکنند یعنی با استفاده variables, mixins, functions در این زبان ما میتونیم کدهای CSS رو به راحتی آماده کنیم. مهم ترین تفاوت بین LESS و SASS این است که LESS یک library از جاوااسکریپت است و یک زبان کلاینت – ساید (client-side) و در طرفی دیگر SASS فقط روی Ruby اجرا میشود و زبان سمت سرور یا (Server-side) است. توتال دیزاین ترجیح داده از زبان شیرین Sass برای توسعه قالب ها استفاده کنه و در آموزش های بعد نحوه استفاده از این زبان اسکریپتی رو بیان میکنیم…

تا این قسمت با بوت استرپ آشنا شدیم. در قسمت بعد نحوه استفاده از بوت استرپ در [color=#FF8C00]طراحی قالب شماره ۱ توتال دیزاین[/color] برای شما عزیزان منتشر خواهد شد. سعی میکنیم آموزش ها رو به صورت مرتب منتشر کنیم.
[COLOR="#FF0000"][SIZE=6]دوستان لطف کنید اگر سوالی دارید در تاپیک جداگانه مطرح کنید و در این تاپیک اسپم نیز ارسال نشود بهتر است تا موضوع تاپیک تنها آموزش بوت استرپ باشد
دوستان برای افزایش کیفیت آموزش ها پیشنهادات خودتون رو پ.خ کنید
تشکر از همه دوستان
[/SIZE]
[/COLOR]پایان قسمت اول

منبع: توتال دیزاین

آخرین ویرایش: 15-09-2014 ???? 11:27، توسط rockstar
1

[color=#B22222]آموزش طراحی قالب با Bootstrap- قسمت دوم[/color]
[align=center]

[/align]
سلام دوستان

در قسمت قبل با بوت استرپ در حد کفایت آشنا شدیم. در این قسمت نحوه شروع به کار با فریم ورک بوت استرپ و نصب نرم افزار های لازم رو با هم شروع می کنیم. بسم الله…

در مرحله اول به وب سایت بوت استرت و قسمت Getting started مراجعه می کنیم و بسته مربوط به Sass رو دانلود می کنیم. بسته ای که در تصویر زیر مشاهده می کنید.
[align=center]

[/align]
حالا چرا Sass رو دانلود کنیم؟! در قسمت قبل در مورد این بسته ها کمی توضیح دادیم و گفتیم توتال دیزاین با این بسته بیشتر حال میکنه البته نظر شخصی بنده هست و شاید سایر دوستان مایل به استفاده از سایر بسته ها باشند در هر حال تفاوتی نداره تنها در کد نویسی راحت تر خواهیم بود و سریع تر…
استفاده از Sass مقداری نیاز به آموزش داره که این آموزش رو در هنگام کار در هرجا لازم باشه ارائه میدیم و زمان جدا گانه ای رو برای آموزش sass نمیگذارم تا دوستان از طولانی شدن مطالب خسته نشن. مطمئن باشید ابزار مورد نیاز sass رو با هم کار میکنم و نیازی آموزش جداگانه آن نیست.
پس از دانلود بسته مروبوط به sass اونو از حالت فشرده Extract میکنیم، محتویات این فولدر در تصویر زیر نمایش داده شده است فایل های sass در فولدر assets این مجموعه قرار دارند.
[align=center]

[/align]
وارد فولدر assets میشیم داخل آن فولدری به نام project ایجاد می کنیم تا فایل های مربوط به قالب خودمون رو در این فولدر بنویسیم و آماده کنیم.
[align=center]

[/align]
فایل های sass مربوط به style بوت استرپ در فولدر stylesheets قرار دارند. فرمت این فایل ها css نیست بلکه scss هست در این syntax نحوه نوشتن کد شبیه css است و تفاوت هایی که داره رو در حین آموزش یاد میگیریم و توضیحاتش ارئه میشه.
کدهای sass توسط یک کامپایلر به css تفسیر میشه و مورد استفاده در قالب های HTML قرار میگیره یعنی اینکه ما فایل های scss این syntax رو به کامپایلر میدیم و از اون خروجی با فرمت css دریافت می کنیم. به داخل فولدر stylesheets میریم و بعد از اون به فولدر bootstrap وارد میشیم، مشابه تصویر زیر فایل های sass رو مشاهده می کنید.
[color=#0000FF]از این پس اگر قصد ویرایش فایل sass ی رو داشتم حواستون باشه که به این مسیر مراجعه میکنیم.[/color]
[align=center]

[/align]
فولدر mixins رو در ابتدا مشاهده می کنید که مربوط به توابع و mixin هایی هستند که توسط sass برای استفاده در بوت استرپ نوشته شده اند. (در این آموزش ها ما فرض رو بر این گذاشتیم که دوستان با مفاهیمی چون تابع و متغییر آشنایی دارند و به توضیح این موارد نمی پردازیم در غیر این صورت با یک جستجوی کوچک در گوگل می توانید با این مفاهیم آنایی پیدا کنید هرچند در طی آموزش توضیحات لازم داده میشه و نیاز به استفاده از سایر منابع رو کمرنگ تر خواهیم کرد.)

دومین فایل در این قسمت فایل bootstrap.scss است. که با یک مربع قرمز رنگ مشخص شده است ما به این فایل نیازی نداریم فایل مورد مهمی با همین نام در مسیر قبلی یعنی در فولدر stylesheets قرار داره که ما با اون فایل کار میکنیم در ادامه توضیح داده میشه پس دقت کنید از این پس هرگاه نام فایل bootstrap.scss رو آوردیم منظور فایل موجود در فولدر stylesheets هست!

توجه کنید فایل های دیگر قبل از نام خود دارای یک underline هستند! تمامی فایل هایی که دارای این underline هستند در فایل bootstrap.scss در فولدر stylesheets پیوست شده اند با استفاده از کدهایی با شکل زیر:
@import "bootstrap/variables";
به کلمه import در ابتدای کد دقت کنید از پس بجای پیوست از کلمه import استفاده می کنیم. همونطور که می بینید تمامی فایل هایی که نام آنها با underline شروع میشه در فایل bootstrap.scss ایمپورت شده اند و underline اول اسامی فایل ها به معنی اینه که فایل مخصوص ایمورت شدن در یک فایل دیگه هست. نکته قابل توجه اینجاست که compiler های زبان sass هم این فایل ها رو شناسایی میکنن که در ادامه آشنا میشیم.

برای طراحی این قالب ما حتما نیاز به یک سری کدهای اضافه داریم که باید خودمون بنویسیم. به همین دلیل یک فایل sass به نام mycodes.scss_ در کنار سایر فایل های sass در مسیر stylesheets/bootstrap ایجاد می کنیم تا از پراکندگی کدهامون در سایر فایل های scss جلوگیری کنیم. دقت کنید underline اول نام فایل mycodes رو قرار بدین چون این فایل رو باید در آخر فایل bootstrap.scss با استفاده از کد زیر import بشه. پس فایل bootstrap.scss رو با editor مورد علاقمون باز می کنیم و کد زیر رو در آخرین خط قرار میدیم.
@import "bootstrap/mycodes";
اجازه بدین مقداری در مورد فایل bootstrap.scss توضیح بدم. این فایل توسط compiler زبان sass استفاده میشه و به فایلی با فرمت css تبدیل میشه در هر خط فایل های مربوط به یکی از ابزارهای بوت استرپ import شده است و این ایمپورت شدن فایل در این قسمت باعث فراخوانی کدهای موجود در اون فایل به داخل فایل bootstrap.scss میشه. یکی از مزیت های این روش اینه که شما شاید نیاز به استفاده یکی از ابزارهای bootstrap نداشته باشین پس به طور متقابل نیازی به وجود کدهای استایل اون ابزار در بین کدهای قالب نیست شما وقتی در این فایل دستور import کردن کدهای اون ابزار رو حذف کنید کدهای اون به داخل فایل استایل اضافه نمیشه بسیار خوبه چون باعث کاهش حجم کدهای ما میشه. البته پیشنهاد میکنم دستور import های موجود در فایل bootstrap.scss رو حذف پاک نکنید و اگر نمیخواین از کدهای یکی از ابزارهای بوت استرپ رو استفاده نکنید تنها کافیه قبل از دستور ایمپورت آن // اضافه کنید به صورت زیر:
//@import "bootstrap/mycodes";
[color=#0000CD]خب دیگه تا این قسمت در حد لازم درباره sass صحبت شد میریم به سوراغ مراحل بعدی در این قسمت آموزش که عبارتند از: دانلود و نصب compiler زبان sass ، دانلود و نصب یک editor خوب اگر نصب ندارین برای ویرایش و نوشتن کدهای HTML و CSS[/color]

[color=#DAA520]اقلام مورد نیاز برای ادامه کار:[/color]

  1. دانلود و نصب Prepros که ابزار و کامپایلری قدرتمند برای کار با زبان Sass می باشد. این نرم افزار دارای دو نسخه رایگان و pro هست که می تونید به سایتش مراجعه کنید و نسخه دلخواه خودتون رو دانلود کنید: لینک سایت Prepros
  2. دانلود و نصب یک ویرایشگر برای کار با کدهای HTML و CSS و Sass در این آموزش ما از ویرایشگر محبوب Sublime Text 2 استفاده می کنیم که بسیار حرفه ای است و پیشنهاد میکنم این ویرایشگر رو دانلود کنید پشیمون نمیشید: لینک دانلود ویرایشگر
  3. مشاهده و دریافت طرح قالب آموزشی اول وب سایت توتال دیزاین
  4. علاقه و حوصله برای پیگیری ادامه آموزش

ابتدا نرم افزار Prepros و ویرایشگر Sublime Text 2 رو نصب می کنیم که نصب این دو نرم افزار رو به دوستان میسپاریم اگر مشکلی داشتیند در بخش پشتیبانی وب سایت مطرح کنید.
نرم افزار Prepros برای شروع کار نیاز به تنظیماتی داره که روند کار ما رو راحت تر کنه میحیط نرم افزار Prepros رو در تصویر زیر مشاهده می کنید.
[align=center]

[/align]
ما باید فایل sass مربوطه را با نرم افزار باز کنیم برای این کار می تونید از دکمه ADD NEW PROJECT در سمت چپ و پایین پنجره نرم افزار استفاده کنید و یا اینکه فایل رو با Drag کردن به داخل نرم افزار اضافه کنیم. هدف ما اضافه کردن فایل bootstrap.scss به نرم افزار Prepros است و فولدر stylesheets به داخل نرم افزار Prepros با استفاده از Drag کردم اضافه می کنیم در ضمن میتونید از دکمه ADD NEW PROJECT استفاده کنید و فولدر stylesheets رو انتخاب کنید. به تصویر زیر دقت کنید همونطور که می بینید در سمت چپ نرم افزار Prepros فولدری رو که اضافه کرده ایم مشاهده می کنید پس از افزون فولدر stylesheets دو فایل scss به نرم افزار اضافه می شود که فایل بالایی که در فولدر stylesheets/bootstrap قرار دارد را بایستی از حالت compile خودکار خارج کنیم که نحوه این کار در تصویر زیر به خوبی نمایش داده شده است. بر روی فایل دوم کلیک کرده تا پنل تنظیمات مربوط به فایل در سمت راست پنجره نرم افزار باز شود و گزینه Auto Compile را فعال می کنیم. این گزینه به ما این اجازه را می دهد هرگاه در فایل های sass تغییری ایجاد کردیم نرم افزار Prepros به صورت خودکار خروجی css را بروزرسانی می کند و نیازی نیست که ما پس از هر بار تغییر دکمه Compile این نرم افزار را بزنیم.
[align=center]

[/align]
با استفاده از این نرم افزار شما می تونید چهار نوع خروجی css دریافت کنید که انواع این خروجی ها عبارتند از: Compressed, Compact, Nested, Expanded

اگر علاقه دارین متوجه تفاوت این نوع خروجی ها بشین به مثال های زیر دقت کنید:
خروجی نوع Expanded:

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}
 
.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

خروجی نوع Nested:

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }
 
.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

خروجی نوع Compact:

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

خروجی نوع Compressed:

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

خب به نظرم به خوبی به نوع هر خروجی پی برده باشید. :21: شروع کار+طرح قالب من از بین این چهار نوع خروجی استفاده از Compressed رو پیشنهاد میکنم چون در این نوع کدها به صورت فشرده و پی در پی نوشته شده اند که باعث کم حجم شدن فایل css و در نتیجه افزایش سرعت بارگزاری قالب وب سایت میشه.
خب پس از این باید مسیر ذخیره شدن خروجی نرم افزار رو مشخص کنیم یعنی تعیین کنیم فایل css خروجی کجا ذخیره بشه برای این امر بر روی فایل scss دوم که فایل اصلی ما هست کلیک راست کرده و گزینه Change Output رو انتخاب می کنیم، در پنجره باز شده مسیر ذخیره فایل css رو در فولدر project که فایل های پروژه قرار در این مسیر ذخیره بشه تعیین می کنیم. نام فایل خروجی رو style.css تعیین کنید و سپس دکمه save رو بزنید. پس از این کار برای اولین بار دکمه compile نرم افزار رو میزنیم تا فایل style.css ساخته بشه و از این به بعد چون تیک Auto Compile روشن هست نیازی به compile مجدد نیست.

هربار که compile با موفقیت انجام بشه در گوشه دسکتاپ سمت راست شکل زیر رو مشاهده می کنید و اگر شما در کد خودتون خطایی داشته باشید مثلا اشتباهی در کدهای sass رخ داده باشه تصویر پایین نمایش داده میشه پس در صورت مشاهده هر کدوم از تصاویر به کدنویسی صحیح و یا اشتباه خودتون پی می برید برای رفع خطا باید آخرین قسمت هایی از کد رو که اضافه کردین بررسی کنید.
[align=center]

[/align]
تا این بخش تنظیمات نرم افزار Prepros به پایان رسید و میریم به سراغ نصب و راه اندازی نرم افزار ویرایشگر Sublime Text 2 که کمک خوبی قراره در طی پروژه برامون باشه.

میریم به سراغ تصویر و طرح قالبی رو که قصد داریم در قالب پروژه در این آموزش آماده کنیم میتونید در بخش نمونه کارها مشاهده کنید: لینک تصویر قالب

تا اینجا نرم افزارهای لازم رو نصب کردیم و طرح اولیه قالب رو هم دیدم برای اینکه مطالب آموزشی هر پست طولانی و خسته کننده نشه ادامه آموزش رو میذاریم برای جلسه با موضوع نحوه Grid بندی در Bootstrap آماده سازی اولیه فایل index قالب
[color=#DAA520]پایان قسمت دوم آموزش [/color]
منبع: توتال دیزاین

آخرین ویرایش: 15-09-2014 ???? 11:29، توسط rockstar
2

[color=#B22222]آموزش طراحی قالب با استفاده از Bootstrap–قسمت۳-سیستم Grid[/color]
با سلام خدمت تمامی دوستان در ابتدا با عرض پوزش به دلیل تاخیر...تاخیر ایجاد شده به دلیل دریافت سفارش طراحی سایت بود که بعدا تصویر قالب رو میزارم دوستان نظر بدن

در این بخش نحوه کار با سیستم Grid بندی بوت استرت رو آموزش میدیم. در قسمت قبل نرم افزارهای مورد نیازمون رو نصب کردیم و… در این بخش قصد داریم با نحوه استفاده از Grid در ستون بندی در بوت استرپ آشنا بشیم! شاید بپرسید Grid چیه؟!

سیستم Grid برای قالب بندی صفحه مورد نظر شما استفاده میشه که در اون از ردیف (row) و ستون ها (columns) استفاده میشه. هر row در بوت استرپ از ۱۲ ستون تشکیل میشه (شکل زیر).

این سیستم به روش زیر کار میکنه:

  • بوت استرپ دارای دو نوع کلاس برای عرض صفحه است. نوع اول کلاس container. که برای عرض ثابت صفحه (fixed-width) استفاده میشه و نوع دوم کلاس container-fluid. که برای عرض کامل (full-width) صفحه و padding استفاده میشه.
  • برای ساخت یک ردیف افقی از کلاس row استفاده میشه هر row در برگیرنده تعدادی از ستون ها است. تگ دارای کلاس row باید در داخل کلاس container و یا container-fluid قرار بگیره.
  • محتوا در داخل ستون ها columns قرار میگیره و هر ستون در واقع فرزند یک row به حساب میاد.
  • کلاس های Grid بندی مثل row و col-xs-4. به ما برای قالب بندی سریع صفحه کمک میکنه و با استفاده از این کلاس ها میتونیم قالب مورد نظر خودمون رو پیاده کنیم.
  • بین ستون ها و row یک فضای خالی وجود داره که بهش gutter گفته میشه و این gutter توسط padding ایجاد شده است. مقدار پیش فرض gutter برای ایجاد فاصله ۳۰px است که این مقدار در دو طرف راست و چپ ستون ها قرار میگیره یعنی ۱۵px در سمت راست و ۱۵px در سمت چپ برای ایجاد فاصله استفاده میشه. این مقدار پیش فرض رو میتونید در فایل variables.scss_ قرار داره و میتونید با تغییر مقدار متغییر grid-columns$ ای مقدار رو تغییر بدین. ( در این آموزش این مقدار رو تغییر نمیدیم).
  • در بوت استرپ ۴ نقطه شکست (break point) اصلی وجود داره این چهار نقطه large و medium و small و extra small نام دارند. منظور از نقطه شکست عرض مرورگر و یا صفحه نمایش است که با استفاده از media query در css تعیین شده و هنگامی که عرض صفحه به مقدار مشخصی برسه تعداد ستون هایی که در هر ردیف قرار میگیره تغییر میکنه و قالب بندی صفحه عوض میشه.( در ادامه بیشتر با این موضوع آشنا میشیم)
  • تصویر زیر رو ببینید. خط های صورتی همون ۱۲ستون پیشفرض بوت استرپ هستند. فضاهای خالی بین این خطوط صورتی رنگ همون gutter هست. تو خط اول یک row داریم که داخل این row باید ستون ها قرار بگیرند. خط دوم هم دو تا بلاک داریم که بلاک سمت راستی ۸ ستون از اون ۱۲ستون رو اشغال کرده و بلاک سمت چپی ۴ستون از اون ۱۲ستون رو اشغال کرده. البته اینجا من این دو تا بلاک رو داخل سطر نذاشتم که بیشتر مشخص باشه.

در جدول زیر میتونید با وضعیت سیستم Grid بندی بوت استرپ آشنا بشین:

در جدول بالا میبینید که بوت استرپ چه از چه کلاس هایی برای قالب بندی صفحه استفاده می کنه (Class prefix) این عبارات در واقع پیشوندهای کلاس ها است که ازشون برای قالب بندی صفحه در موبایل ها، تبلت ها و دسکتاپ های کوچک و بزرگ استفاده میشه.

برای مثال وقتی سایز صفحه Extra small هست از کلاس *-col-xs استفاده میکنیم و یا وقتی سایز صفحه نمایش small باشه یعنی عرضی بین ۷۶۸px و ۹۹۲px داشته باشه از کلاس *-col-sm استفاده میشه. به همین صورت در عرض های بین ۹۹۲px و ۱۲۰۰px از کلاس *-col-md استفاده میشه و در عرض های بالاتر از ۱۲۰۰px باید از کلاس *-col-lg استفاده کنیم.

در کلاس های بالا به جای علامت * باید مقدار ستون های مورد نظرمون رو قرار بدیم.

به عنوان مثال قصد طراحی وب سایتی را داریم که بر روی دستگاه های Extra small,Small,Medium و Large پشتیبانی و قابل نمایش باشد و همچنین در دستگاه های Extra small یک ستونه باشد، در دستگاه های small دو ستوه باشد، در دستگاه های Medium سه ستونه و در دستگاه های Large چهارستونه باشد. برای اینکار به شکل زیر کد را می نویسیم:

<"div class="row>
    <"div class="col-xs-12 col-sm-6 col-md-4 col-lg-3>
        <p>ستون شماره 1</p>
    <div/>
    <"div class="col-xs-12 col-sm-6 col-md-4 col-lg-3>
        <p>ستون شماره 2</p>
    <div/>
    <"div class="col-xs-12 col-sm-6 col-md-4 col-lg-3>
        <p>ستون شماره 3</p>
    <div/>
    <"div class="col-xs-12 col-sm-6 col-md-4 col-lg-3>
        <p>ستون شماره 4</p>
    <div/>
    <"div class="col-xs-12 col-sm-6 col-md-4 col-lg-3>
        <p>ستون شماره 5</p>
    <div/>
    <"div class="col-xs-12 col-sm-6 col-md-4 col-lg-3>
        <p>ستون شماره 6</p>
    <div/>
<div/>

توضیح کد بالا را شروع می کنیم: در کد بالا همونطور که گفتیم برای پلتفرم های Extra small تک ستونه می باشد یعنی هر بلوک و یا div تعداد ۱۲ ستون را در خود جای می دهد که از کلاس col-xs-12 استفاده کردیم. برای پلتفرم های Small گفتیم که دو ستون در کنار هم نمایش داده شود یعنی هر بلوک دارای ۶ ستون باشد که از کلاس col-sm-6 استفاده شد. برای پلتفرم های Medium کلاسی را استفاده کردیم که سه ستون در کنار هم نمایش داده شوند و برای این کار از کلاس col-md-4 استفاده کردیم یعنی در هر بلوک ۴ ستون قرار بگیرد و در پایان برای پلتفرم های Large تعیین کردیم که چهار ستون در کنار هم نمایش داده شود و یعنی در هر بلوک و یا div تعداد ۳ ستون قرار بگیرد. چنانچه بخواهیم تصویری از این کد را ارائه دهیم به شکل زیر می باشد:

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

مبحث دیگه ای که داریم Nesting هست. گفتیم هر ستون باید حتما بلافاصله فرزند یک row. باشه. طبق این گفته، سمت راست تصویر زیر شکل صحیح کدنویسی و سمت چپ اون، شکل غلط کدنویسی به صورت تو در تو هست.

کد تصویر سمت راستی یه همچین شکلی داره:

بلاکی که کلاس col-md-9. داره خودش دوباره به ۱۲ستون تقسیم میشه و ضمنا شامل یه row و دو تا بلاک دیگه هست که هرکدوم از این بلاک ها دوباره ۶ستون از این ۱۲ستون جدید رو اشغال میکنه.

سیستم گرید بوت استرپ مباحث دیگه ای از جمله Offsetting columns و Column ordering داره که چون داخل این قالب ازینها استفاده نشده دیگه توضیحشون نمیدم ولی اگر علاقه دارید بدونید چی هست میتونید یه سر به اینجا بزنید.

بحث دیگه که داریم به اسم Responsive utilities که در واقع باعث میشه یه سری از بلاک هاتون رو در سایز های مختلف یا مثلا برای حالت print خیلی راحت بتونید Hidden یا Visible کنید. دو جدول زیر گویای همین ویژگی هست:

دوستان در این قسمت توضیحات سیستم Grid بوت استرپ به پایان رسید.
<br>

اگر از sublime text استفاده میکنید یه package برای کار با بوت استرپ ۳ درست کردند. کافیه از Package Control پکیج snippets bootstrap 3 رو نصب کنید. روش استفاده از این package هم به این صورت هست که شما هرجایی که میخواید عبارت -bs3 رو مینویسید و کلیدهای ctrl+space رو میزنید یه لیستی باز میشه که آیتم مورد نظرتون رو انتخاب و Enter رو کلیک میکنید تا براتون کد کاملش رو بنویسه. اگر هم sublime text استفاده نمیکنید مشکلی نیست از سایت بوت استرپ استفاده کنید. درهر صورت من کدها رو همراه با تغییرات لازم مینویسم.

<br> [منبع آموزش: توتال دیزاین ](http://www.totaldesign.ir/tutorials/bootstrap-tutorial-part3-grid-system.html)
2

[size=small][color=#333333][font=nassim-bold]آموزش طراحی قالب با استفاده از Bootstrap–قسمت۴-شروع طراحی قالب[/font][/color][color=#333333][font=nassim-regular, 'Open Sans', tahoma] [/font][/color]
[/size]
[size=small][color=#333333][font='Open Sans', nassim-regular, tahoma]با سلام خدمت تمام دوستان[/font][/color]
[/size]

[align=justify][size=small][color=#333333][font='Open Sans', nassim-regular, tahoma]قبل از همه چیز به خاطر تاخیر در ارائه آموزش ها عذرخواهم، امیدوارم از این پس بتونم آموزش ها رو مطالب رو با سرعت بیشتری ارائه بدم. جلسات قبل توضیحاتی در مورد بوت استرپ و معرفی این سیستم ارائه شد در این بخش میریم به سراغ طراحی اولیه قالب با استفاده از بوت استرپ. ابزارهایی که از این پس استفاده میشه ویرایشگر sublime text و ++Notepad خواهند بود. در ضمن بر روی sublime text پلاگینی که در پایان جلسه قبل معرفی شد رو اضافه کردم تا بتونیم در کد نویسی سرعت بیشتری داشته باشیم. ابتدا به وب سایت Bootstrap مراجعه میکنیم و نسخه sass بوت استرپ رو دانلود می کنیم.[/font][/color]
[/size][/align]
[align=justify][size=small][color=#333333][font='Open Sans', nassim-regular, tahoma][img=871x350]http://www.totaldesign.ir/wp-content/uploads/2014/10/dl-sass-bootstrap.jpg?d1b7b4[/img][/font][/color]
[/size][/align]
[align=justify][size=small][color=#333333][font='Open Sans', nassim-regular, tahoma]نسخه دانلود شده رو از حالت فشرده خارج می کنیم. سپس به داخل فولدر assets میریم و در اینجا یک پوشه به نام mytheme ایجاد میکنیم که داخل این پوشه تمامی فایل های قالب رو طراحی می کنیم و قرار میدیم. داخل پوشه mytheme چند پوشه دیگه هم باید اضافه کنیم، که عبارتند از: پوشه images برای تصاویری که در قالب استفاده میشه، پوشه fonts برای فونت های قالب، پوشه css برای فایل های استایل قالب و پوشه js برای فایل های جاوا اسکریپت قالب![/font][/color]
[/size][/align]
[align=justify][size=small][color=#333333][font='Open Sans', nassim-regular, tahoma]پس از اینکار در پوشه mytheme فایل index.html رو ایجاد میکنیم.[/font][/color]
[/size][/align]
[align=justify][size=small][color=#333333][font='Open Sans', nassim-regular, tahoma][color=#ff0000]** نکته ۱:** قابل توجه در ایجاد فایل های html و یا php وجود داره و اونم رعایت encode در فایل ها هستند. encode فایل ها رو باید بر روی Encode UTF-8 without BOM ذخیره کنیم تا در نوشته های قالب دچار مشکل نشیم. برای اینکار دوتا روش داریم اول استفاده از ++Notepad که فایل رو با نوت پد باز میکنیم و مثل تصویر زیر عمل میکنیم:[/color][/font][/color]
[/size][/align]
[align=justify][size=small][color=#333333][font='Open Sans', nassim-regular, tahoma][img=871x359]http://www.totaldesign.ir/wp-content/uploads/2014/10/encode-utf-8.jpg?d1b7b4[/img][/font][/color]
[/size][/align]
[align=justify][size=small][color=#333333][font='Open Sans', nassim-regular, tahoma]روش دوم استفاده از sublime text است. فایل را با ویرایشگر باز کرده و مطابق تصویر زیر عمل میکنیم:[/font][/color]
[/size][/align]
[align=justify][size=small][color=#333333][font='Open Sans', nassim-regular, tahoma][img=871x728]http://www.totaldesign.ir/wp-content/uploads/2014/10/encode-utf-8-2.jpg?d1b7b4[/img][/font][/color]
[/size][/align]
[size=small][color=#333333][font='Open Sans', nassim-regular, tahoma]در ادامه ابتدا کدهای زیر اولیه قالب رو مینویسیم به صورت زیر:[/font][/color]
[/size]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>قالب شماره 1 توتال دیزاین</title>
 
    <link href="style.css" rel="stylesheet">
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
 
  </body>
</html>

[size=small][color=#333333][font='Open Sans', nassim-regular, tahoma]در کد بالا مشاهده می کنید فایل style.css به قالب لینک شده است ولی هنوز ما این فایل رو آماده نکردیم!! برای آماده سازی فایل نرم افزار (کامپایلر) prepros رو که برای کار با فایل های sass هست رو باز می کنیم (در جلسات قبل در مورد این نرم افزار توضیح داده شده است.) سپس پوشه stylesheets موجود در پوشه assets رو به نرم افزار با Drag کردن اضافه میکنیم. ادامه مراحل رو طبق توضیحات تصاویر زیر به ترتیب انجام بدین:[/font][/color]
[/size]

[align=justify][size=small][color=#333333][font='Open Sans', nassim-regular, tahoma][img=871x680]http://www.totaldesign.ir/wp-content/uploads/2014/10/prepros-1.jpg?d1b7b4[/img][/font][/color]
[/size][/align]
[align=justify][size=small][color=#333333][font='Open Sans', nassim-regular, tahoma][img=871x680]http://www.totaldesign.ir/wp-content/uploads/2014/10/prepros-2.jpg?d1b7b4[/img][/font][/color]
[/size][/align]
[align=justify][size=small][color=#333333][font='Open Sans', nassim-regular, tahoma]سپس کامپایلر prepros رو Minimize کنید تا در صورت ایجاد تغییرات در فایل های استایل موجود در stylesheets به صورت خودکار فایل style.css در پوشه قالب ذخیره شود و تغییرات اعمال گردد.[/font][/color]
[/size][/align]
[size=small][color=#333333][font='Open Sans', nassim-regular, tahoma]تصاویر قالبی رو که قصدداریم طراحی کنیم [color=#555555]در اینجا (لینک)[/color] میتونید مشاهده کنید. بعد از ایجاد فایل style.css به مسیر stylesheets > bootstrap میریم و یک فایل به نام mycode.scss_ در این مسیر ایجاد میکنیم تا کدهای css و sass خودمون رو در این فایل بنویسیم. آدرس این فایل رو باید به فایل bootstrap.scss در پوشه stylesheets اضاه کنیم برای اینکار دستور زیر رو در این فایل کپی کنید:[/font][/color]
[/size]

@import "bootstrap/mycode";

[size=small][color=#333333][font='Open Sans', nassim-regular, tahoma]این دستور باعث میشه هر وقت شما فایل css رو ذخیره میکنید کدهایی که در این فایل اضافه کرده ایم به فایل css هم اضافه بشه. برای تفهیم بهتر توضیحات به تصاویر زیر دقت کنید.[/font][/color]
[/size]

[align=justify][size=small][color=#333333][font='Open Sans', nassim-regular, tahoma][img=864x668]http://www.totaldesign.ir/wp-content/uploads/2014/10/sass-1.jpg?d1b7b4[/img][/font][/color]
[/size][/align]
[align=justify][size=small][color=#333333][font='Open Sans', nassim-regular, tahoma][img=871x424]http://www.totaldesign.ir/wp-content/uploads/2014/10/sass-2.jpg?d1b7b4[/img][/font][/color]
[/size][/align]
[align=justify][size=small][color=#333333][font='Open Sans', nassim-regular, tahoma][img=453x552]http://www.totaldesign.ir/wp-content/uploads/2014/10/sass-3.jpg?d1b7b4[/img][/font][/color]
[/size][/align]
[size=small][color=#333333][font='Open Sans', nassim-regular, tahoma]بعد از اینکار باید Background قالب رو تغییر بدیم، برای اینکار کد زیر رو در فایل mycode.scss قرار میدیم و ctrl+s رو میزنیم تا فایل ذخیره بشه و تغییرات توسط کامپایلر به فایل style.css منتقل بشه.[/font][/color]
[/size]

body {
  background-image: url(images/bg.png);
  direction: rtl;
}

[size=small][color=#333333][font='Open Sans', nassim-regular, tahoma]کد direction در بالا به منظور راست به چپ شدن نوشته ها در قالب اضافه شده است.
[/font][/color]
[/size]
[align=justify][size=small][color=#333333][font='Open Sans', nassim-regular, tahoma][color=#ff0000]نکته ۲: تصویر bg.png که در کد بالا استفاده شد به همراه تمامی فایل هایی که تا پایان این جلسه آماده میشه در پایان برای دانلود قرار داده میشه به پایین صفحه مراجعه کنید.[/color][/font][/color]
[/size][/align]
[size=small][color=#333333][font='Open Sans', nassim-regular, tahoma]اگر فایل index.html رو توسط مرورگر باز کیند مشاهده می کنید که تغییرات اعمال شده است. نوبت به طراحی قسمت بالای قالب یعنی header سایت میرسه در تصویر زیر مشاهده می کنید که هدر سایت به سه قسمت تقسیم شده است که به ترتیب شماره گذاری شده است، سمت راست لوگوی سایت قرار گرفته است، در بخش میانی قسمتی برای درج پیام به کاربران سایت مانند پیام تبریک سال نو و در قسمت سمت چپ بنرهای تبلیغاتی سایت قرار می گیره. برای ایجاد این سه قسمت من کد زیر رو با توجه به اندازه ی هر قسمت آماده کرده ام.
[/font][/color]
[/size]

   <div class="container">
      <div class="row">
        <section class="col-md-3">
 
        </section>
 
        <section class="col-md-3">
 
        </section>
 
        <section class="col-md-6">
 
        </section>
      </div><!--/row-->
    </div><!--/container-->

[size=small][color=#333333][font='Open Sans', nassim-regular, tahoma][color=#333333][font='Open Sans', nassim-regular, tahoma]اگر پلاگینی را که در آموزش قبلی معرفی شد رو بر روی sublime text اضافه کرده اید. برای نوشتن کد بالا ابتدا بنویسید bs3.container و سپس tab رو بزنید تا کد زیر به صورت خودکار نوشته شود:[/font][/color]
[/font][/color]
[/size]

<div class="container">
 
</div>

[size=small][color=#333333][font='Open Sans', nassim-regular, tahoma][color=#333333][font='Open Sans', nassim-regular, tahoma][color=#333333][font='Open Sans', nassim-regular, tahoma]سپس بنویسید bs3.row و tab رو بزنید تا تگ های زیر اضافه شود:[/font][/color]
[/font][/color][/font][/color]
[/size]

<div class="row">
 
</div>

[color=#333333][font='Open Sans', nassim-regular, tahoma][color=#333333][font='Open Sans', nassim-regular, tahoma][color=#333333][size=small][font='Open Sans', nassim-regular, tahoma][color=#333333][font='Open Sans', nassim-regular, tahoma][color=#ff0000] **نکته ۳: **نسخه های بوت استرپ rtl نمی باشند و خودمون باید زحمت راست چین کردن بوت استرپ رو بکشیم. اگر اینکار رو انجام ندهیم باکس هایی که توسط html ایجاد مکنیم از چپ به راست در قالب چیده میشوند! برای راست چین کردن Grid های بوت استرپ به پوشه mixins رفته و در دو فایل _grid.scss و _grid-framework.scss هرچه float: left وجود داره رو به float:right تبدیل می کنیم. در فایل grid.scss چهار کد float:left وجود داره که باید تغییر کنه و در فایل _grid-framework.scss یک کد float:left وجود داره و باید به float:right تغییر کنه.[/color][/font][/color]

[color=#333333][font='Open Sans', nassim-regular, tahoma]تا این قسمت کار رو انجام دادیم. جهت جلوگیری از زیادی مطلالب هر آموزش و خسته کننده بودن آموزش ها ادامه آموزش در جلسه آینده ارائه میشود. موفق باشید.[/font][/color]
منبع آموزش: توتال دیزاین[/font][/size][/color][/font][/color][/font][/color]

سوال برنامه نویسی دارید؟

ندونستن عیب نیست، نپرسیدن چرا!

خوش آمدید

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