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

‏  4 دقیقه
۲۱ فروردین ۱۳۹۳
طراحی قالب واکنش گرا با بوت استرپ 3 : قسمت چهارم - منو - بخش دوم

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

شما الان اگر فایل 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 بنویسید.

<script src="js/dropdown.js"></script>
<script src="js/collapse.js"></script>
<script src="js/transition.js"></script>

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 متغیری تعریف میکنیم تا اسم فونت رو نگه داری کنه.

$tahoma-font-family: Tahoma, Helvetica, Arial, sans-serif;

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 کد زیر رو بنویسید:

$droid-font-family: 'DroidKufiBold', Tahoma, Arial, sans-serif;

@font-face {
  font-family: 'DroidKufiBold';
  src: url('../font/DroidKufi-Bold.eot');
  src: url('../font/DroidKufi-Bold.eot?#iefix') format('embedded-opentype'),
       url('../font/DroidKufi-Bold.woff') format('woff'),
       url('../font/DroidKufi-Bold.ttf') format('truetype')
}

RWD-bootstrap3-2-18

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

font-family: $droid-font-family;

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 بنویسید:

.btn {
  background: $color-black-dark;
  color: #fff;
}

.form-control {
  background: $color-black-light;
  color: #fff;
  border: 0;

  &:focus {
    @include box-shadow(none);
  }

  @include placeholder(#fff);
}

RWD-bootstrap3-2-20

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

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

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

@include box-shadow(0 1px 1px rgba(0,0,0,0.2));

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 هم دقیقا همینکارو انجام بدید.

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

چه امتیازی به این مقاله می دید؟
نویسنده مهشاد کلانتری

نیاز به لاگین

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

نظرات کاربران

hamed_z2001

یه سوال دیگه…
کارایی که گفتیدو برای راست چین کردن انجام دادم ، ولی باکس جستجو به انتهای سمت چپ نرفته و وسط منویه !!
چیکار کنم تا باکس جستجو سمت چپ قرار بگیره؟
(حتی اومدم تو کلاس فرم pull و push رو هم امتحان کردم ولی باز درست نشد)

مهشاد کلانتری

درست راست چین نکردید
الان کلاس های .navbar-header و .navbar-nav استایل float:left داره باید right بشه

hamed_z2001

مرسی خانم کلانتری
مشکل اولم حل شد ولی هنوز با دومی مشکل دارم
من چک کردم ، به هردو کلاسی که گفته بودید خاصیت شناور بودن رو راست گذاشته بودم …
ولی درست نشد که نشد 🙁

hamed_z2001

سلام خانم کلانتری …
من مشکلم با آیکون سرچه!!
هرکار میکنم درست نمیشه،طبق آموزش شما عمل کردم و مقدار

$icon-font-path: "../fonts/"

رو قرار دادم ولی درست نشد که نشد میشه یه نگاه بندازید؟؟
اینم آدرسش:
http://s6.picofile.com/file/8180664984/MyThem.rar.html

مهشاد کلانتری

فولدر فونت هاتون font هست ولی شما اینجا مسیر آیکون ها رو پوشه fonts معرفی کردید

M RAHIMI

سلام
من مشکلم با آیکون سرچه که به منو اضافه نمیشه و همینطور فایل های جاوااسکریپت.
میشه بررسی کنید لطفا
http://s4.picofile.com/file/8162092426/mytheme.rar.html

بهرام

سلام
نمیدونم سوال قبلی که پرسیدم ارسال شد یا نه، واسه همین دوباره میپرسم. در مورد قسمت تغییر right , left. این تغییر شامل اسم کلاس ها هم میشه؟

لقمان آوند

نام کلاس ها و سکلتورها رو نباید تغیر بدی …

بهرام

سلام
این تغییر right , left شامل اسم کلاس ها هم میشه؟ یا نه فقط مقادیر؟ چون من اسم کلاس ها رو هم تغییر دادم اما فکر میکنم اشتباه کردم

لقمان آوند

فقط مقادیر رو عوض کنید.

مبینا

سلام خانم کلانتری من فایل navs.scss و navbar.scss و dropedown.scss رو کاری که گفتین انجام دادم یعنی هر جا left رو به right و برعکس تبدیل کردم الان یه مشکلی پیش اومده برام در xs که نویگیشن با زدن دکمه معلوم میشه! من دکمه رو کلیک می کنم روش لینک های منو مشخص نمیشه میشه راهنمایی کنید ممنون می شم

سید علی

سلام
یه انتقاد دارم خیلی جدی!!
مطالب بیشتر شبیه کپی پیست کد شده تا اموزش!!!! 😀
در هر صورت ممنون

سعید

سلام. خسته نباشید.بابت آموزش های بسیار مفید شما تشکر میکنم. من از Prepros واسه کامپایل Bootstrap استفاده میکنم. وقتی میخوام مطابق آموزش شما Box-Shodow رو به _navbar اضافه کنم خطای کامپایل میده .اینم خطاش: Syntax error: Properties are only allowed within rules, directives, mixin includes, or other properties.
. تازه شروع به یادگیری Bootstrap کردم.راهنمایی کنید.

ehsan a

سلام . من یه مشکل پیدا کردم اینکه وقتی از آیکون استفاده میکنم به صورت مربع تو خالی نشون میده تغییرات رو هم انجام دادم توی قسمت variable مسیر فونت هم مشخص کردم ولی به مشکل خوردم ممنون میشم کمک کنیم.
http://uplod.ir/butjxp3jd77l/_strap_my_project.rar.htm

مهشاد کلانتری

مقدار $icon-font-path داخل فایل variables.scss رو برابر
../fonts/
قرار بدید

ehsan a

ممنون خانوم کلانتری پاینده باشید ❓

n.j j

سلام ببخشید کجا باید کدهامو آپلود کنم و لینک بدم؟؟؟

مهشاد کلانتری

سایت های آپلود فایل

n.j

با سلام وتشکر ویژه بابت توضیحات شما
من تمامی مراحل رو تا اینجا کار با شما پیش امدم و به قالب دمو هم نگاه کردم .ولی نمونه من وقتی پنجره رو کوچیک میکنم اون دکمه ای که باید ظاهر بشه به جای آیتم های حذف شده ،نمیاد.
لطفا راهنمایی بفرمایید

مهشاد کلانتری

کدهاتون رو آپلود کنید لینک بدید بررسی کنم