با سلام خدمت تمام دوستان

قبل از همه چیز به خاطر تاخیر در ارائه آموزش ها عذرخواهم، امیدوارم از این پس بتونم آموزش ها رو مطالب رو با سرعت بیشتری ارائه بدم. جلسات قبل توضیحاتی در مورد بوت استرپ و معرفی این سیستم ارائه شد در این بخش میریم به سراغ طراحی اولیه قالب با استفاده از بوت استرپ. ابزارهایی که از این پس استفاده میشه ویرایشگر sublime text و ++Notepad خواهند بود. در ضمن بر روی sublime text پلاگینی که در پایان جلسه قبل معرفی شد رو اضافه کردم تا بتونیم در کد نویسی سرعت بیشتری داشته باشیم. ابتدا به وب سایت Bootstrap مراجعه میکنیم و نسخه sass بوت استرپ رو دانلود می کنیم.

dl-sass-bootstrap

نسخه دانلود شده رو از حالت فشرده خارج می کنیم. سپس به داخل فولدر assets میریم و در اینجا یک پوشه به نام mytheme ایجاد میکنیم که داخل این پوشه تمامی فایل های قالب رو طراحی می کنیم و قرار میدیم. داخل پوشه mytheme چند پوشه دیگه هم باید اضافه کنیم، که عبارتند از: پوشه images برای تصاویری که در قالب استفاده میشه، پوشه fonts برای فونت های قالب، پوشه css برای فایل های استایل قالب و پوشه js برای فایل های جاوا اسکریپت قالب!

پس از اینکار در پوشه mytheme فایل index.html رو ایجاد میکنیم.

 نکته ۱: قابل توجه در ایجاد فایل های html و یا php وجود داره و اونم رعایت encode در فایل ها هستند. encode فایل ها رو باید بر روی Encode UTF-8 without BOM ذخیره کنیم تا در نوشته های قالب دچار مشکل نشیم. برای اینکار دوتا روش داریم اول استفاده از ++Notepad که فایل رو با نوت پد باز میکنیم و مثل تصویر زیر عمل میکنیم:

encode-utf-8

روش دوم استفاده از sublime text است. فایل را با ویرایشگر باز کرده و مطابق تصویر زیر عمل میکنیم:

encode-utf-8-2

در ادامه ابتدا کدهای زیر اولیه قالب رو مینویسیم به صورت زیر:

در کد بالا مشاهده می کنید فایل style.css به قالب لینک شده است ولی هنوز ما این فایل رو آماده نکردیم!! برای آماده سازی فایل نرم افزار (کامپایلر) prepros رو که برای کار با فایل های sass هست رو باز می کنیم (در جلسات قبل در مورد این نرم افزار توضیح داده شده است.) سپس پوشه stylesheets موجود در پوشه assets رو به نرم افزار با Drag کردن اضافه میکنیم. ادامه مراحل رو طبق توضیحات تصاویر زیر به ترتیب انجام بدین:

prepros-1

prepros-2

سپس کامپایلر prepros رو Minimize کنید تا در صورت ایجاد تغییرات در فایل های استایل موجود در stylesheets به صورت خودکار فایل style.css در پوشه قالب ذخیره شود و تغییرات اعمال گردد.

تصاویر قالبی رو که قصدداریم طراحی کنیم در اینجا (لینک) میتونید مشاهده کنید. بعد از ایجاد فایل style.css به مسیر stylesheets > bootstrap میریم و یک فایل به نام mycode.scss_ در این مسیر ایجاد میکنیم تا کدهای css و sass خودمون رو در این فایل بنویسیم. آدرس این فایل رو باید به فایل bootstrap.scss در پوشه stylesheets اضاه کنیم برای اینکار دستور زیر رو در این فایل کپی کنید:

این دستور باعث میشه هر وقت شما فایل css رو ذخیره میکنید کدهایی که در این فایل اضافه کرده ایم به فایل css هم اضافه بشه. برای تفهیم بهتر توضیحات به تصاویر زیر دقت کنید.

sass-1

sass-2

sass-3

بعد از اینکار باید Background قالب رو تغییر بدیم، برای اینکار کد زیر رو در فایل mycode.scss قرار میدیم و ctrl+s رو میزنیم تا فایل ذخیره بشه و تغییرات توسط کامپایلر به فایل style.css منتقل بشه.

کد direction در بالا به منظور راست به چپ شدن نوشته ها در قالب اضافه شده است.

اگر فایل index.html رو توسط مرورگر باز کیند مشاهده می کنید که تغییرات اعمال شده است. نوبت به طراحی قسمت بالای قالب یعنی header سایت میرسه در تصویر زیر مشاهده می کنید که هدر سایت به سه قسمت تقسیم شده است که به ترتیب شماره گذاری شده است، سمت راست لوگوی سایت قرار گرفته است، در بخش میانی قسمتی برای درج پیام به کاربران سایت مانند پیام تبریک سال نو و در قسمت سمت چپ بنرهای تبلیغاتی سایت قرار می گیره. برای ایجاد این سه قسمت من کد زیر رو با توجه به اندازه ی هر قسمت آماده کرده ام.

اگر پلاگینی را که در آموزش قبلی معرفی شد رو بر روی sublime text اضافه کرده اید. برای نوشتن کد بالا ابتدا بنویسید bs3.container و سپس tab رو بزنید تا کد زیر به صورت خودکار نوشته شود:

سپس بنویسید bs3.row و tab رو بزنید تا تگ های زیر اضافه شود:

 نکته ۲: نسخه های بوت استرپ rtl نمی باشند و خودمون باید زحمت راست چین کردن بوت استرپ رو بکشیم. اگر اینکار رو انجام ندهیم باکس هایی که توسط html ایجاد مکنیم از چپ به راست در قالب چیده میشوند! برای راست چین کردن Grid های بوت استرپ به پوشه mixins رفته و در دو فایل _grid.scss و _grid-framework.scss هرچه float: left وجود داره رو به float:right تبدیل می کنیم. در فایل grid.scss چهار کد float:left وجود داره که باید تغییر کنه و در فایل _grid-framework.scss یک کد float:left وجود داره و باید به float:right تغییر کنه.

تا این قسمت کار رو انجام دادیم. جهت جلوگیری از زیادی مطلالب هر آموزش و خسته کننده بودن آموزش ها ادامه آموزش در جلسه آینده ارائه میشود. موفق باشید.