طراحی قالب واکنش گرا با بوت استرپ 3 : قسمت چهارم - منو - بخش دوم

- visibility ٣٩ mode_comment

سلام دوستان. قسمت قبلی شروع کردیم به طراحی منو، که البته یکمی ازش موند و حالا در این قسمت تکمیلش میکنیم.

شما الان اگر فایل index.html رو داخل مرورگر باز کنید و روی آیتم 4 منو که به صورت dropdown هست کلیک کنید، یا مثلا پنجره مرورگرتون رو کوچیک کنید آیتم های منو حذف میشه و یه دکمه به جاش میاد که وقتی روش کلیک میکنید آیتم های منو ظاهر میشه، ولی خب الان که کار نمیکنه و به خاطره اینه که فایل جاوااسکریپت مربوطه رو به سندمون اضافه نکردیم. برای این کار کافیه ابتدا فایلهای جاوااسکریپ پلاگین های بوت استرپ یعنی dropdown.js و collapse.js و transition.js رو از پوشه vendor\assets\javascripts\bootstrap بردارید و اون رو داخل پوشه js که در پوشه mytheme خودتون هست (bootstrap-sass-master\vendor\assets\mytheme) بریزید و بعد داخل فایل index.html خطهای زیر رو قبل از بسته شدن تگ body بنویسید.

RWD-bootstrap3-2-14

بیاید رنگ این dropdown رو هم درست کنیم. فایل _variables.scss رو باز کنید و تغییرات رو مثل تصویر زیر اعمال کنید.

RWD-bootstrap3-2-15

و یه توضیحی راجع به متغیرهایی که مقدارشون رو عوض کردیم:

$dropdown-bg : رنگ بکگراند منوی dropdown

$dropdown-fallback-border : مقدار خصوصیت border-color منوی dropdown برای IE8

$dropdown-link-color : رنگ متن لینک های dropdown

$dropdown-link-hover-color : رنگ متن لینک های dropdown وقتی ماوس روی این لینک ها میاد

$dropdown-link-hover-bg : رنگ بکگراند لینک های dropdown وقتی ماوس روی این لینک ها میاد

$dropdown-link-active-color : رنگ متن لینک های dropdown وقتی کلاس .active دارند

$dropdown-link-active-bg : رنگ بکگراند لینک های dropdown وقتی کلاس .active دارند

قسمت بعدی فونت منو هست. کلا این فونت فعلی بوت استرپ برای فارسی جالب نیست و قراره به Tahoma تغییرش بدیم. اول داخل فایل _variables.scss متغیری تعریف میکنیم تا اسم فونت رو نگه داری کنه.

RWD-bootstrap3-2-16

و بعد مقدار متغیر $font-family-base رو به $tahoma-font-family تغییر میدیم. ضمنا سایز فونت 14px هست که به نظرم زیاده و میخوایم 12px باشه پس مقدار متغیر $font-size-base رو هم تغییر میدیم.

RWD-bootstrap3-2-17

ازونجایی هم که فونت Tahoma برای سایزهای بزرگ یکم بیریخته پس برای سایزهای بزرگ نوشته هامون از فونت DroidKufi-Bold استفاده میکنیم. میتونید از اینجا این فونت رو دانلود کنید و داخل پوشه font که در پوشه mytheme هست (bootstrap-sass-master\vendor\assets\mytheme\font) این فایل رو از حالت فشرده خارج کنید. حالا داخل فایل _variables.scss کد زیر رو بنویسید:

RWD-bootstrap3-2-18

برای اینکه brand داخل منو که سایز بزرگتری داره از این فونت DroidKufiBold استفاده کنه کافیه فایل _navbar.scss رو باز کنیم و کد زیر رو برای سلکتور .navbar-brand بنویسیم:

RWD-bootstrap3-2-19

همونطور که میدونید بوت استرپ آیکون هاش رو به صورت فونت حاضر کرده و باید این فونت رو داشته باشیم تا بتونیم از آیکون هاش استفاده کنیم. تا اینجا اگر دقت کرده باشید دکمه جستجومون آیکونش به صورت مربعی شده و به خاطر اینه که فایل های فونت بوت استرپ رو داخل پروژمون اضافه نکردیم. برای اینکار از پوشه bootstrap-sass-master\vendor\assets\fonts\bootstrap فونت های بوت استرپ رو کپی کنید و داخل پوشه فونت mytheme خودمون (bootstrap-sass-master\vendor\assets\mytheme\font) پیست کنید. بعدش از داخل فایل _variables.scss مقدار متغیر $icon-font-path رو به "../font/" تغییر بدید.

خب! آیکون دکمه جستجو هم درست شد. حالا میمونه رنگ دکمه و input جستجو. فایل _navbar.scss رو باز کنید و کدهای زیر رو برای سلکتور .navbar-form بنویسید:

RWD-bootstrap3-2-20

box-shadow و placeholder میکسین هایی هستند که بوت استرپ از قبل خودش تعریف کرده و تمام میکسین ها داخل فایل _mixins.scss هستند. قبل از اینکه میکسینی تعریف کنید اول یه نگاه به این فایل بندازید که از قبل تعریف نشده باشه.

کد توضیح خاصی نداره فقط برای اینکه رنگ نوشته ی placeholder رو تغییر بدیم از این میکسین placeholder استفاده کردیم و رنگ سفید رو به عنوان پارامتر به این میکسین فرستادیم.

اگر دموی قالب رو دیده باشید، منو، یکم box-shadow هم داره. برای اینکه box-shadow هم به منو اضافه کنیم داخل فایل _navbar.scss کد زیر رو برای سلکتور .navbar مینویسیم:

RWD-bootstrap3-2-21

حالا دیگه بریم سراغ راست چین کردن منو 🙂

فایل _navbar.scss رو باز کنید و از خط بالا شروع کنید به ترتیب هرجا کلمه left دیدین اون رو right کنید و هرجا هم کلمه right دیدید تغییرش بدید به left ، مثلا اگر نوشته بود padding-left شما این رو تغییر بدید به padding-right یا مثلا float: left رو تغییر بدید به float: right یا مثلا margin-right باید بشه margin-left

برای فایل های _navs.scss و فایل _dropdowns.scss هم دقیقا همینکارو انجام بدید.

به همین راحتی 🙂

comment دیدگاه کاربران
الهه گیتی روان

بسیار ممنونم . آموزش مفیدی بود . تشکر فراوان از شما . ❓ ❓ ❓

Ali Abedian

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

مصطفی

ضمن عرض سلام و وقت بخیر
خانم کلانتری مرسی از زحماتتون بسیار عالی بود خسته نباشید و خدا قوت و انشاالله که راهتون رو ادامه بدین و براتون آرزوی موفقیت و سربلندی میکنم ❓

رضا

درود و سپاس از آموزش تون
البته من هنوز آغاز به فرا گیریش نکردم! چون من تو پروژم از بوت استرپ 3.3.5 بهره می برم و نسخه ای که شما آموزش دادید انگارنسبت به اونی که من بکار میبرم قدیمی تره.با این حساب آیا آموزش های شما بدرد من میخوره؟ و اینکه من با نرم افزار براکتس کار میکنم و شما با یه برنامه دیگه این آموزش رو دادید.این دو برنامه کارکردشون باهم خیلی فرق داره یا نه با براکتس هم می تونم از آموزش شما بهره ببرم؟
سپاس پیشاپیش برای پاسخ گویی تون

وحید صالحی

سلام مشکلی نیست میتونید استفاده کنید فقط کد نویسی css این دوره تحت sass هست که اون رو هم باید بلد باشید و حتما نسخه بوت استرپ باید rtl و راست چین باشه. برای آموزش تحت css میتونید در دوره آموزشی فریم ورک بوت استرپ که در سایت در حال برگزاری هست ثبت نام کنید در این دوره خیلی با جزئیات بیشتر بوت استرپ رو تدریس میکنیم
بله از براکت هم میتونید استفاده کنید
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2 3