آموزش طراحی قالب ریسپانسیو
بسم الله الرحمن الرحیم
طراحی منو با بوت استرپ
بخش پنجم (طراحی منو با بوت استرپ)
نمایش لیست آموزش های Bootstrap
آموزش طراحی قالب ریسپانسیو
در بخش قبل یکی از بخش های Template خود را طراحی کردیم در این بخش قصد داریم آموزش نوار منو را در بوت استرپ بررسی کنیم.
Bootstrap دارای کلاس های بسیاری زیادی برای ایجاد منو می باشد که می توانید بر اساس نیاز خود یکی از این کلاس ها را انتخاب کنید.
کد ما در مرحله پیش به صورت زیر به اتمام رسید. در این مرحله کد نویسی خود را بعد از توضیحات end info-bar شروع می کنیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Ably.ir:.Bootstrap</title>
<!-- Bootstrap css -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<style>
.info-bar-text {
color: white;
text-align: center;
line-height: 25px;
vertical-align: middle;
}
.info-bar {
background-color: black;
}
</style>
</head>
<body>
<!-- Start info-bar -->
<div class="info-bar">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-12 col-md-offset-1">
<span class="info-bar-text ">
Login | Sign Up
</span>
</div>
<div class="col-md-2 col-sm-3 col-xs-12 ">
<span class="info-bar-text ">
Email:Hello@Eduonline.ir
</span>
</div>
<div class="col-md-3 col-sm-3 col-xs-12 ">
<span class="info-bar-text ">
Tel:0912-097-5516
</span>
</div>
</div>
</div>
</div>
<!-- End info-bar -->
<!-- Strat Bootstrap -->
<div class="container-fluid">
</div>
<!-- End Bootstrap -->
<!-- jquery main file -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap js -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>در html5 شما می توانید از تگ nav برای طراحی نوار منو استفاده کنید، همچنین بوت استرپ کلاس های ایجاد نوار منو را در اختیار ما قرار داده است، پس برای شروع ابتدا کد زیر را به انتهای <!-- End info-bar --> اضافه می کنیم.
<!-- Start Menu -->
<nav class="navbar navbar-default">
<div class="container-fluid">
</div>
</nav>
<!-- End Menu -->همانطور که مشاهده می کنید ابتدا یک تگ <nav> ایجاد کردیم و سپس مانند سایر قسمت ها یک container در صفحه خود قرار داده ایم.
حال در میان کلاس container-fluid کد نویسی منو را آغاز می کنیم. برای طراحی منو در بوت استرپ اولین کلاسی که مورد استفاده قرار می گیرد. کلاس navbar-header می باشد. این کلاس همانطور که از نامش مشخص است برای مشخص کردن header نوار منو مورد استفاده قرار می گیرد.
در تصویر Template ما جزئیات منو مشخص نشده است، ما می خواهیم در سمت چپ منو یک لوگو داشته باشیم و سپس منوهای خود را نمایش دهیم.
برای اینکار ابتدا کد زیر را به درون کلاس container-fluid اضافه می کنیم.
<div class="navbar-header">
<a class="navbar-brand" href="http://Ably.ir">Ably.ir</a>
</div>کلاس navbar-brand برای نمایش لوگو در میان منو مورد استفاده قرار می گیرد. سایت خود را اجرا کنید و نتیجه کار را مشاهده کنید.
البته دقت کنید که در کلاس بالا منظور از لوگو، لوگویی بود که به صورت متن نمایش داده می شد اگر میخواهید لوگو شما به صورت تصویر در نوار منو نمایش داده شود، برای اینکار کد خود را به صورت زیر تغییر می دهیم
<!-- Start Menu -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://Ably.ir">
<img alt="Ably Image" src="img/Ably-Brand.png">
</a>
</div>
</div>
</nav>
<!-- End Menu -->
همانطور که مشاهده می کنید در کد بالا، همه ی مواردی را که تاکنون انجام داده ایم یکسان است، تنها خط زیر به میان تگ a اضافه شده است:
<img alt="Ably Image" src="img/Ably-Brand.png">
نوبت به طراحی منو می رسد، برای قراردادن منو ها در نوار منو ابتدا یک div به عنوان نگه دارنده منوها اضافه می کنیم سپس در این div از تگ UL استفاده می کنیم، هر گزینه منو یک li می باشد.
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="http://Ably.ir">Home</a></li>
<li><a href="http://Ably.ir">Tutorial</a></li>
<li><a href="http://Ably.ir">E-Books</a></li>
<li><a class="active" href="http://Ably.ir/page/ContactUS">Contact us</a></li>
<li><a href="http://Ably.ir/page/about-me">About us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://Ably.ir/">Change Password</a></li>
<li><a href="http://Ably.ir">Sign up</a></li>
</ul>
</div>
کدهای بالا بسیار ساده هستند، ابتدا یک Div برای نگه داری عناصر منو با کلاس و Id مشخص شده ایجاد کرده ایم، سپس در این Div یک تگ UL برای تعریف عناصر منو ایجاد کرده ایم. هر منو نیز در یک تگ li قرار دارد.
در اینجا ما دو منو داریم یک منو در سمت چپ و دیگری در سمت راست، برای مشخص کردن مکان منو ها می توانید از کلاس navbar-right و یا navbar-left استفاده کنید. همانطور که در کد بالا مشاهده می کنید ما برای مشخص کردن منو فعال کلاس active به تگ li مورد نظر انتساب داده ایم.
حال کد خود را اجرا کنید و نتیجه را مشاهده کنید.
اگر بخواهیم یک منو ایجاد کنیم که خود دارای زیر منو (sub menu) باشد می توانیم به صورت زیر عمل کنیم. بعد از کد مربوط به Sign up کدهای زیر را اضافه کنید.
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Share <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">twitter</a></li>
<li><a href="#">Linked-in</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Ably sites</li>
<li><a href="#">Ably social</a></li>
<li><a href="#">Ably Froum</a></li>
</ul>
</li>در کد بالا اولین کلاسی که اضافه شده است کلاس dropdown می باشد که به تگ li انتساب داده شده است و پس از آن تگ a می باشد که دارای پراپرتی مقادیر زیادی است که مشخص می کند منو ما دارای زیر منو است.
در نهایت از تگ ul با کلاس dropdown-menu استفاده شده است، آیتم های تگ ul همان زیر منوهای ما هستند.
اگر بخواهید در بین زیر منوهای خود عنوانی را به کار ببرید کافی است که به تگ li خود کلاس dropdown-header را انتساب دهید.
همچنین برای ایجاد خطوط جهت تفکیک بهتر منو می توانید از کد زیر استفاده کنید.
<li role="separator" class="divider"></li>کد خود را ذخیره کنید و نتیجه را مشاهده کنید.
در اینجا طراحی منو ما به پایان رسید. اگر در تمامی سایت ها دقت کرده باشید وقتی سایتی را با صفحه نمایش های کوچک مانند موبایل و تبلت بررسی می کنید به جای نمایش تمامی منو ها آیکونی نمایش داده می شود که با کلیک بر روی آن می توانید به عناصر منو دسترسی پیدا کنید.
در حال حاضر اگر نوار منو خود را تست کنید، مشاهده خواهید کرد که نوار منو ما نسخه Responsive یا همان واکنش گرا ندارد، بدین معنا که منو ها برای تمامی صفحه نمایش ها قابل دسترسی نیستند.
برای Responsive کردن منوها در بوت استرپ می بایست از کد زیر استفاده کنید. این روش باعث می شود تا منوهای شما در تمامی صفحه نمایش ها به زیبایی در دسترس کاربر قرار گیرند و تا هنگامی که کاربر نیاز به نمایش منوها نداشته باشد فضای صفحه را اشغال نخواهند کرد.
برای استفاده از این قابلیت کافی است که کدهای زیر را درون کلاس navbar-header خود قرار دهید تا اگر کاربر با صفحه نمایش های کوچک خواست سایت شما را مشاهده کند، بتواند به سادگی به نوار منو دسترسی داشته باشد.
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>در کد بالا Button ایی وجود دارد که دارای مقدار "data-target="#navbar می باشد وقتی کاربر بر روی این Button کلیک می کند این کد باعث می شود کنترلی که Id آن مقدار navbar را دارد نمایش داده شود.
برای درک بهتر، کافی است کد خود را ذخیره کنید و سایز مرورگر خود را کوچک کنید مشاهده خواهید کرد که نوار منو مخفی می شود و به جای آن یک Button نمایش داده می شود اگر روی Button کلیک کنید نوار منو شما نمایش داده خواهد شد.
کل کدی که تا کنون نوشته اید باید به صورت زیر باشد:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Ably.ir:.Bootstrap</title>
<!-- Bootstrap css -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<style>
.info-bar-text {
color: white;
text-align: center;
line-height: 25px;
vertical-align: middle;
}
.info-bar {
background-color: black;
}
.navbar-brand img {
margin-top: -10px;
}
</style>
</head>
<body>
<!-- Start info-bar -->
<div class="info-bar">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-12 col-md-offset-1">
<span class="info-bar-text ">
Login | Sign Up
</span>
</div>
<div class="col-md-2 col-sm-3 col-xs-12 ">
<span class="info-bar-text ">
Email:Hello@Eduonline.ir
</span>
</div>
<div class="col-md-3 col-sm-3 col-xs-12 ">
<span class="info-bar-text ">
Tel:0912-097-5516
</span>
</div>
</div>
</div>
</div>
<!-- End info-bar -->
<!-- Start Menu -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<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="http://Ably.ir">
<img alt="Ably Image" src="img/Ably-Brand.png">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="http://Ably.ir">Home</a></li>
<li><a href="http://Ably.ir">Tutorial</a></li>
<li><a href="http://Ably.ir">E-Books</a></li>
<li><a class="active" href="http://Ably.ir/page/ContactUS">Contact us</a></li>
<li><a href="http://Ably.ir/page/about-me">About us</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://Ably.ir/">Change Password</a></li>
<li><a href="http://Ably.ir">Sign up</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Share <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">twitter</a></li>
<li><a href="#">Linked-in</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Ably sites</li>
<li><a href="#">Ably social</a></li>
<li><a href="#">Ably Froum</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Menu -->
<!-- Strat Bootstrap -->
<div class="container-fluid">
</div>
<!-- End Bootstrap -->
<!-- jquery main file -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap js -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>در نوار منو شما می توانید همچنین از Textbox و یا Button نیز استفاده کنید. در اینجا ما میخواهیم فرم login خود را در نوار منو قرار دهید تا کاربر بتواند به سادگی لاگین کند برای اینکار کافی است از کد زیر استفاده کنیم.
<form class="navbar-form navbar-left" >
<div class="form-group">
<input type="text" class="form-control" placeholder="User Name">
<input type="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
در کد بالا ابتدا یک تگ form ایجاد کرده ایم و در این تگ از کلاس navbar-form استفاده نموده ایم، همچنین برای نگه داری کنترل های Login یک div ایجاد کرده ایم و سپس به این div کلاس form-group را انتساب داده ایم. در آخر نیز کنترل های مورد نیاز برای وارد کردن نام کاربری و کلمه عبور را قرار داده ایم.
شما می توانید با استفاده از کلاس های بوت استرپ کاری کنید که منو شما همیشه در دسترس باشد (نوار منو به بالای صفحه همیشه چسبیده است) برای اینکار کافی است از کلاس navbar-fixed-top استفاده کنید. این کلاس را می توانید به تگ nav بدهید تا کد شما مثل زیر شود:
<nav class="navbar navbar-default navbar-fixed-top">همچنین به صورت پیش فرض بوت استرپ دارای دو رنگ برای نوار منو می باشد در صورتی که تمایل داشته باشید از رنگ مشکی برای منو خود استفاده کنید می توانید از کلاس navbar-inverse استفاده کنید.
<nav class="navbar navbar-inverse">
کد نویسی و طراحی منو ما در این قسمت نیز به پایان رسید، اکنون کد شما باید به صورت زیر باشد.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Ably.ir:.Bootstrap</title>
<!-- Bootstrap css -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<style>
.info-bar-text {
color: white;
text-align: center;
line-height: 25px;
vertical-align: middle;
}
.info-bar {
background-color: black;
}
.navbar-brand img {
margin-top: -10px;
}
</style>
</head>
<body>
<!-- Start info-bar -->
<div class="info-bar">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-12 col-md-offset-1">
<span class="info-bar-text ">
Login | Sign Up
</span>
</div>
<div class="col-md-2 col-sm-3 col-xs-12 ">
<span class="info-bar-text ">
Email:Hello@Eduonline.ir
</span>
</div>
<div class="col-md-3 col-sm-3 col-xs-12 ">
<span class="info-bar-text ">
Tel:0912-097-5516
</span>
</div>
</div>
</div>
</div>
<!-- End info-bar -->
<!-- Start Menu -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
<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="http://Ably.ir">
<img alt="Ably Image" src="img/Ably-Brand.png">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="http://Ably.ir">Home</a></li>
<li><a href="http://Ably.ir">Tutorial</a></li>
<li><a href="http://Ably.ir">E-Books</a></li>
<li><a class="active" href="http://Ably.ir/page/ContactUS">Contact us</a></li>
<li><a href="http://Ably.ir/page/about-me">About us</a></li>
</ul>
<form class="navbar-form navbar-left" >
<div class="form-group">
<input type="text" class="form-control" placeholder="User Name">
<input type="password" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://Ably.ir/">Change Password</a></li>
<li><a href="http://Ably.ir">Sign up</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Share <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Facebook</a></li>
<li><a href="#">twitter</a></li>
<li><a href="#">Linked-in</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Ably sites</li>
<li><a href="#">Ably social</a></li>
<li><a href="#">Ably Froum</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Menu -->
<!-- Strat Bootstrap -->
<div class="container-fluid">
</div>
<!-- End Bootstrap -->
<!-- jquery main file -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap js -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>کل کدهایی را که تا کنون نیز نوشته ایم می توانید از بخش زیر دانلود کنید. نام فایل این جلسه Index_Menu می باشد.
آموزش طراحی قالب با بوت استرپ