آموزش Bootstrap جلسه بیست و سوم (navbar)

بازدید
12264

دسته بندی :آموزش Bootstrap,آموزش طراحی وب

در خدمت شما هستیم با آموزش Bootstrap جلسه بیست و سوم (navbar)

آموزش Bootstrap جلسه بیست و سوم (navbar) از سری آموزش های تک قسمتی است

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

منویی که در این آموزش یاد داده می شود موارد زیر را در خود جای داده است

منو رسپانسیو
منو Dropdown (زیر منو)
دکمه ورود
دکمه ثبت نام
باکس جستجو
لوگو سایت

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

شما به سادگی می توانید جایگاه هر کدام از المان های بالا را در منو تعیین کنید

کلاس navbar

درباره این کلاس در بخش بالا توضیح دادیم با این کلاس ساخت تمام منو های رسپاسیو امکانپذیر است در html5 با آمدن تگ های جدید تگ nav نیز اضافه شد که برای موتور های جستجو امکان خواندن منو ها را راحتتر کرد پس به شما پیشنهاد میدهیم از این تگ برای ساخت منو های خود استفاده کنید. همچنین به کمک این آموزش میتوانید بخش های مختلف را در منو خود جای دهید از این رو تا انتها با آموزش Bootstrap جلسه بیست و سوم (navbar) که مربوط به ساخت منو است همراه باشید.

در حالت پیشفرض برای ساخت منو یا همان Navigation Bar از کلاس <nav class=”navbar navbar-default”> استفاده میشود که از آن برای شما مثالی خواهیم زد.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
  
<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

</body>
</html>

همانطور که در کد بالا مشخص است در کنار کلاس navbar از کلاس navbar-default نیز استفاده شد این کلاس باعث به وجود آمدن بکگراندی خاکستری در منو شما میشود.

اگر قصد دارید رنگ منو خود را برعکس حالت فعلی کنید یعنی از رنگ نوشته مشکی و رنگ بکگراند سفید به رنگ نوشته سفید و بکگراند مشکی تبدیل کنید کافیست جای کلاس navbar-default از کلاس navbar-inverse استفاده کنید در کلاس هم کاملا این موضوع مشهود است Inverse به معنی برعکس است.

تا اینجای کار ما منو ساده ای ساختیم اگر میخواهید به منو های خود قابلیت زیرمنو نیز اضافه کنید باید از قابلیت dropdown نیز در منو خود استفاده کنید قبلا در آموزش آموزش Bootstrap جلسه بیستم (Dropdown) به این موضوع اشاره کردیم اما باز برای شما مثالی میزنیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
  
<div class="container">
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>

</body>
</html>

قرار دادن ثبت نام و لاگین در منو

اگر میخواهید دکمه لاگین و ثبت نام نیز در خود منو جای بگیرید میتوانید کد زیر را استفاده کنید البته برای استفاده از آیکن لازم است از گلیف آیکن یا fontawesome استفاده کنید که قبلا در آموزش Bootstrap جلسه سیزدهم (Glyphicons) به صورت مفصل به آن پرداخته ایم.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>
  
<div class="container">
  <h3>Right Aligned Navbar</h3>
  <p>The .navbar-right class is used to right-align navigation bar buttons.</p>
</div>

</body>
</html>

قرار دادن دکمه در منو

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    <button class="btn btn-danger navbar-btn">Button</button>
  </div>
</nav>

<div class="container">
  <h2>Navbar Button</h2>
  <p>Use the navbar-btn class on a button to vertically align (same padding as links) it inside the navbar.</p>
</div>

</body>
</html>

قرار دادن باکس سرچ در منو

یکی از مواردی که در بسیاری از سایت ها میبینید قرار دادن باکس جستجو در منو سایت است که به کاربران شما این امکان را میدهد که به صورت سریع اگر موردی را نتوانستند بیابند از جستجو در سایت شما استفاده کنند اگر این مورد هم برای شما جذاب است میتوانید از کد زیر استفاده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <form class="navbar-form navbar-left" action="/action_page.php">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Search" name="search">
        <div class="input-group-btn">
          <button class="btn btn-default" type="submit">
            <i class="glyphicon glyphicon-search"></i>
          </button>
        </div>
      </div>
    </form>
  </div>
</nav>

<div class="container">
  <h3>Navbar Forms</h3>
  <p>Use the .navbar-form class to vertically align form elements (same padding as links) inside the navbar.</p>
  <p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".</p>
  <p>The .input-group-btn class attaches a button next to an input field. This is often used as a search bar:</p>
</div>

</body>
</html>

ثابت بودن موقعیت منو با اسکرول

حتما سایت هایی را دیده اید که منو سایت با اسکرول کردن شما به پایین صفحه به صورت ثابت با شما حرکت میکند به این حالت اصطلاحا پوزیشن fixed گفته میشود و میتوانید با تعیین نوع پوزیشن منو خود را در بالایی ترین قسمت مرورگر یا پایین ترین حالت آن قرار دهید ما برای شما پوزیشن بالا را در کد زیر قرار داده ایم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body style="height:1500px">

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
  
<div class="container" style="margin-top:50px">
  <h3>Fixed Navbar</h3>
  <div class="row">
    <div class="col-md-4">
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>    
    </div>
    <div class="col-md-4"> 
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
    </div>
    <div class="col-md-4"> 
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p> 
    </div>
  </div>
</div>

<h1>Scroll this page to see the effect</h1>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

</body>
</html>

می توانید دیگر قسمت ها را در لینک زیر ببینید

آموزش Bootstrap جلسه بیست و دوم (Tabs)

آموزش Bootstrap جلسه بیست و چهارم (Forms)

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید

و یا آن را در آپارت ببینید

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

آموزش ساخت منو در بوت استرپ در یوتیوب

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید

سلام برنامه | HiProgram

مرجع آموزش برنامه نویسی وب و اندروید

مطالب پربازدید

آخرین ارسالی ها

آموزش رفع محدودیت سایز آپلود در وردپرس

آموزش Bootstrap 4 جلسه بیست و هشتم (ScrollSpy)

آموزش Bootstrap 4 جلسه بیست و هفتم (popover)

آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip)

آموزش Bootstrap 4 جلسه بیست و پنجم (Modal)

پکیج های آموزشی

پکیج طراحی قالب وردپرس

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

پکیج طراحی قالب جوملا ۳

آموزش تصویری html5

آموزش تصویری css3