• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

51 18669 ۱۶ فروردین ۹۳

سلام دوستان. قسمت قبلی یکم سیستم گرید بوت استرپ رو براتون توضیح دادم و حالا در این قسمت میخوایم منوی بالای سایت رو درست کنیم.

فایل index.html رو باز کنید و داخل body بنویسید bs3-container و tab رو بزنید یا کد زیر رو به صورت دستی بنویسید:

الان container رو ایجاد کردیم و تمامی کدهایی که قراره نوشته بشه باید داخل همین container قرار بگیره. ولی همونطور که میدونید عرض container در دستگاههای Large برابر با 1170پیکسل هست ولی ما میخوایم عرض container در دستگاه های Large برابر با عرض container در دستگاه های Medium یعنی 970پیکسل باشه. فایل _grid.scss رو باز کنید و طبق تصویر زیر تغییرات رو اعمال کنید.

RWD-bootstrap3-2-7

همون طور که تو عکس دیدید من کد رو پاک نکردم و فقط اون رو به صورت کامنت در آوردم. Sass کامنت های تک خطی رو کامپایل نمیکنه پس این بهترین راهه که سورس اصلی هم باقی بمونه. همچنین این خطوط رو هم طبق تصویر زیر به کامنت تبدیل کنید.

RWD-bootstrap3-2-8

حالا در فایل index.html داخل container بنویسید bs3-row و tab رو بزنید یا کد زیر رو بنویسید:

الانم که یه row درست کردیم و حالا باید داخلش یه ستونی درست کنیم که 12ستون گرید رو اشغال کنه پس داخل همین row مینویسیم:

اینم از همون بلاکی که باید 12ستون رو اشغال میکرد. الان دیگه داخل همین بلاک کد منو رو مینویسیم. برای اینکار میتونید عبارت bs3-navbar رو بنویسید و tab رو بزنید یا کد زیر رو بنویسید:

اگر فایل index.html رو داخل مرورگر باز کنید میبینید منو از بالا فاصله نداره برای اینکه این منو از بالا یکم فاصله داشته باشه میتونید به تگ body یک مقداری padding-top بدید. برای اینکار فایل _scaffolding.scss رو باز کنید و مثل تصویر خصوصیت padding-top: 40px; رو به سلکتور body اضافه کنید. یه direction: rtl; هم اضافه کنید که جهت سندمون راست به چپ بشه.

RWD-bootstrap3-2-9

خب! حالا بیاید اول نوشته های منو رو فارسی کنیم و یه سری تغییرات داخل کدهاش بدیم. برای این کار کدها رو مثل تصویر زیر تغییر بدید. سمت راست تصویر کدهای تغییر داده شده و سمت چپ تصویر کدهای اصلی منو هست و شما باید کدتون رو که شبیه کدهای سمت چپ تصویر هست تغییر بدید و شبیه کدهای سمت راست تصویر بشه.

برای اینکه تصویر رو واضح تر ببینید روی تصویر کلیک کنید تا تصویر با سایز بزرگتر براتون نشون داده بشه.

RWD-bootstrap3-2-10

این هم کدهای منو ی جدیدمون بعد از تغییرات هست:

حالا برای تغییر رنگ منو، فایل _variables.scss رو باز کنید و اون قسمتی که متغیرهای خودمون رو تعریف میکردیم سه تا متغیر جدید تعریف کنید تا رنگ جدید رو داخل این متغیر بریزیم و بعد، از این متغیر استفاده کنیم:

RWD-bootstrap3-2-11

بعد از اینکه متغیرهارو تعریف کردیم وقتشه از این متغیرها استفاده کنیم تا رنگ منو عوض بشه. ضمنا منو از سمت چپ و راست یکمی padding داره که بهتره مقدارش کمتر بشه تا ظاهر منو بهتر بشه. پس داخل فایل _variables.scss مثل تصویر زیر تغییرات رو اعمال کنید.

RWD-bootstrap3-2-12

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

$navbar-padding-horizontal : مقدار padding-right و padding-left منو

$navbar-default-color : رنگ نوشته های بدون لینک منو

$navbar-default-bg : رنگ بکگراند منو

$navbar-default-link-color : رنگ نوشته های لینک های منو در حالت عادی

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

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

$navbar-default-link-active-color : رنگ نوشته های لینک های منو وقتی هرکدوم از این آیتم های منو کلاس .active دارند

$navbar-default-link-active-bg : رنگ بکگراند لینک های منو وقتی هرکدوم از این آیتم های منو کلاس .active دارند

داخل کدهای html منو، آیتم "نام سایت شما" همون brand هستش و دو متغیر زیر مربوط به همین brand هست:

$navbar-default-brand-hover-color : رنگ نوشته مربوط به brand وقتی ماوس روی این آیتم قرار میگیره

$navbar-default-brand-hover-bg : رنگ بکگراند مربوط به brand وقتی ماوس روی این آیتم میاد

وقتی سایز صفحه نمایش کوچیک باشه برای اینکه منو به هم ریخته نشه آیتم ها از روی منو برداشته میشن و یه دکمه بهش اضافه میشه که وقتی روی اون دکمه کلیک بشه آیتم ها نشون داده میشه. این دو متغیر زیر هم مربوط به این دکمه هست:

$navbar-default-toggle-hover-bg : رنگ دکمه وقتی ماوس روی این دکمه قرار میگیره

$navbar-default-toggle-border-color : رنگ border دکمه

حالا فایل index.html رو داخل مرورگر باز کنید میبینید گوشه های منو، یکم زیادی گرد هستش. یعنی الان border-radius برابر با 4px هست ولی میخوایم 2px باشه. کافیه در فایل _variables.scss مقدار متغیر $border-radius-base رو تغییر بدیم:

RWD-bootstrap3-2-13

این متغیر $border-radius-base مقدار border-radius پیشفرض هست و تو بیشتر فایل های بوت استرپ از این مقدار استفاده شده پش وقتی مقدار این متغیر رو تغییر بدید همه ی خصوصیت های border-radius دیگه هم مقدار 2px رو استفاده میکنند.

خسته نباشید! منو یخورده دیگه کار داره که در قسمت بعدی انجام میدیم.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 51 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    بهرام(۲۴ آبان ۱۳۹۳)

    سلام
    من با sublim text مشکل دارم. یه بار دیگم تو همین قسمت نظرات ارسال کردم اما نمیدونم ارسال نشده یا کسی ج نداد. من نسخه 3 رو نصب کردم. مشکلم اینجاست که کد های scss رو مثل کامنت نشون میده و هیچ واکنشی نصبت به این کدها نشون نمیده انگار متن ساده داری کار میکنی. رنگ سفید. ممنون میشم راهنمایی کنید.

  • ‏‏
    بهرام(۲۴ آبان ۱۳۹۳)

    کدهای میانبر برای بوت استراپ رو هم تشخیص نمیده مثل آموزش که گفته شده :(

  • ‏‏
    علی دل(۲۷ آبان ۱۳۹۳)

    سلام وخسته نباشید
    متاسفانه من از کدهای خود شما استفاده کردم و تمام مراحل شما رو پیش رفتم ولی جی کوئری کار نمیکنه متاسفانه :(

  • ‏‏
    مبینا(۱۶ آذر ۱۳۹۳)

    میشه یه لینک از نرم افزار koala بذارین؟ اخه ورژن جدید خود سایت ruby نداره ! من نمیتونم با ورژن جدید خود سایت کار کنم.

  • ‏‏

    قدرت بیان بسیار پایینی دارید.

  • ‏‏

    سلام، میشه در مورد data-toggle توضیحی بدید.
    ممنون

    • ‏‏
      وحید صالحی(۳۱ تیر ۱۳۹۴)

      سلام دوست عزیز به زبان ساده یک attribute در html هست که باعث ارتباط عنصری مورد نظر با یک سری از فرامین موجود در فایل جاوااسکریپ موجود در سند میشه میشه گفت یک پل ارتباطی برای اجرای یکسری از فرامین ,دستورات و توابعی هست که با صدا زدن اونها توسط data-toggle و مقداری که بهش نسبت داده میشه در سند رخدادهایی صورت میگیره و یکسری کد اجرا میشه.در دوره مجازی بوت استرپ در این مورد با ذکر مثال هایی توضیح کامل داده ایم

  • ‏‏

    ضمن تشکر از آموزشهای مفیدتون
    من میخوام قالبی رو که طراحی کردم در Asp.net استفاده کنم.چطور میتونم این فایلها رو در vs2012 اعمال کنم؟

    • ‏‏
      وحید صالحی(۱۰ مرداد ۱۳۹۴)

      سلام ممنون دوست عزیز کافیه فایل ها در ویژوال استودی ایمپورت کنید یه پروژه در ویژوال ایجاد کنید و به همین ترتیب که در php storm عمل میکنیم شما در ویژوال عمل کنید

  • ‏‏
    اسماعیل(۲۰ بهمن ۱۳۹۴)

    سلام میشه این سوال منو جواب بدید و به ایمیلم ارسال کنید :

    آیا میشه اصلا از کد های آماده بوت استراپ استفاده نکنم مثلا مثل همین منو که ایجاد کردید من منوی خودم رو ایجاد کنم

    اما ستون و ردیف رو ایجاد کنم

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram