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

دسته بندی: آموزش
زمان مطالعه: 5 دقیقه
۱۶ فروردین ۱۳۹۳

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

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

<div class="container">

</div>

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

<div class="row">

</div>

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

<div class="col-sm-12">

</div>

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

<nav class="navbar navbar-default" role="navigation">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
			<span class="sr-only">Toggle navigation</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#">Title</a>
	</div>

	<!-- Collect the nav links, forms, and other content for toggling -->
	<div class="collapse navbar-collapse navbar-ex1-collapse">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
		</ul>
		<form class="navbar-form navbar-left" role="search">
			<div class="form-group">
				<input type="text" class="form-control" placeholder="Search">
			</div>
			<button type="submit" class="btn btn-default">Submit</button>
		</form>
		<ul class="nav navbar-nav navbar-right">
			<li><a href="#">Link</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
				<ul class="dropdown-menu">
					<li><a href="#">Action</a></li>
					<li><a href="#">Another action</a></li>
					<li><a href="#">Something else here</a></li>
					<li><a href="#">Separated link</a></li>
				</ul>
			</li>
		</ul>
	</div><!-- /.navbar-collapse -->
</nav>

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

RWD-bootstrap3-2-9

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

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

RWD-bootstrap3-2-10

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

<nav class="navbar navbar-default" role="navigation">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
			<span class="sr-only">باز و بسته کردن منو</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#">نام سایت شما</a>
	</div>

	<!-- Collect the nav links, forms, and other content for toggling -->
	<div class="collapse navbar-collapse navbar-ex1-collapse">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">آیتم 1</a></li>
			<li><a href="#">آیتم 2</a></li>
			<li><a href="#">آیتم 3</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">آیتم 4 <b class="caret"></b></a>
				<ul class="dropdown-menu">
					<li><a href="#">آیتم 4-1</a></li>
					<li><a href="#">آیتم 4-2</a></li>
					<li><a href="#">آیتم 4-3</a></li>
					<li><a href="#">آیتم 4-4</a></li>
				</ul>
			</li>
		</ul>
		<form class="navbar-form navbar-left" role="search">
			<div class="form-group">
				<input type="text" class="form-control" placeholder="متن مورد نظر...">
			</div>
			<button type="submit" class="btn"><i class="glyphicon glyphicon-search"></i></button>
		</form>
	</div><!-- /.navbar-collapse -->
</nav>

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

$color-black: #424242;
$color-black-dark: darken($color-black, 10%);
$color-black-light: lighten($color-black, 10%);

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

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

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

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

اسماعیل

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

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

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

وحید صالحی

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

رویا

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

وحید صالحی

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

ABCDE

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

وحید صالحی

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

امین

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

مبینا

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

علی دل

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

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

سلام
حتما جاییش رو اشتباه کردید

بهرام

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

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

داخل قسمت دوم آموزش اسم پکیج مخصوص کدهای میانبر بوتسترپ نوشته شده
bootstrap 3 snippets
نصب کنید مشکلتون حل میشه

بهرام

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

ahadabasi

داخل برنامه Sublime Text کلید های ctrl+shift+p رو بزن بعد تاپ کن syntax: scss و انتخابش کن 😉
edu7.ir

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

پکیج syntax highlighting for sass رو نصب کنید

karim mos

sublime من همه کد های scss به صورت مشکی نمایش میده مشکل چیه ؟

narges

لطفا اینو نگا کنین،بگیم مشکلش چیه که هیچی سرجاش http://uplod.ir/vjrziuo6gcsa/site.rar.htm
نیست؟

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

بفرما:
http://uplod.ir/0jdoyst3x753/site.zip.htm
خیلی اشتباه داشتید
قبل از اینکه این آموزش رو بخونید اول html رو کامل یاد بگیرید

narges

سلام خسته نباشید
این کارایی که گفتین انجام دادم اما هیچی سر جاش نیس
فک کنم ایراد از جای کداست
میشه بگین وقتی میگین داخل بادی بنویسین باید از کجا کانتینر رو توش بنویسم!؟
مثلا هر بار بع د این بنویسم یا قبله این ?

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

قسمت بعدی

نیاز به لاگین

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