درس بیست و دوم: آموزش کار با Navbar در بوت استرپ

آموزش کار با Navbar در بوت استرپ؛ یکی از مفاهیم اساسی در دوره آموزش بوت استرپ!  Navbar یکی از بخش های جذاب و پرکاربرد در بوت استرپ است که این بخش به ما کمک می کند تا به راحتی بتوانیم منوهای افقی یا عمودی در صفحه خود ایجاد کنیم.

بوت استرپ یکی از مفاهیم در حوزه وب است که معمولا در راه اندازی و طراحی سایت مورد استفاده قرار می گیرد. امروزه توسعه دهندگان از بوت استرپ استفاده می کنند تا صفحات سایت خودشان را طراحی کنند. بوت استرپ شامل بخش های مختلفی است که یکی از بخش ها Navbar است. اگر قصد طراحی سایت در ارومیه را دارید، باید با این بخش آشنا شوید. به همین دلیل ما می خواهیم در این مطلب، توضیحاتی در مورد بخش Navbar در بوت استرپ برای شما ارائه کنیم و نحوه کار با Navbar را به شما یاد دهیم.

Navbar در بوت استرپ چیست؟

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

جالب است بدانید، Navbar یکی از ویژگی های جذاب در سایت های بوت استرپ است. Navbars اجزای متا پاسخگو هستند که به عنوان هدرهای ناوبری برای برنامه یا سایت شما عمل می کنند. Navbar در نمای موبایل فرو می ریزند و با افزایش عرض نمای نمایش موجود، افقی می شوند. در هسته خود، نوار ورودی شامل یک ظاهر طراحی شده برای نام سایت ها و پیمایش اساسی است.

 ایجادNavbar پیش فرض

توجه داشته باشید که Navbar می تواند به صورت پیش فرض در سایت های بوت استرپ ایجاد شود و یکی از مهترین بخش ها پس از آموزش کار با Spinners در بوت استرپ است. در ادامه سعی می کنیم تا به بررسی مراحل ایجاد Navbar پیش فرض بپردازیم:

• کلاس های navbar-default و Navbar را به تگ <nav> اضافی کنید.

• برای کمک به قابلیت دسترسی role=navigation را به عنصر فوق اضافی کنید.

• یک کلاس هدر navbar-header به عنصر <div> اضافی کنید. همچنین یک عنصر <a> را با اسم تجاری navbar وارد کنید. با این کار اندازه کمی بزرگ تر به متن می رسد.

• برای اضافی کردن لینک به نوار اسم، به راحتی یک لیست غیر مرتب با کلاس های navbar-nav اضافی کنید. مثال زیر این را نشان می دهد:

• <nav class = "navbar navbar-default" role = "navigation">

•    <div class = "navbar-header">

•       <a class = "navbar-brand" href = "#">TutorialsPoint</a>

•    </div>    

•    <div>

•       <ul class = "nav navbar-nav">

•          <li class = "active"><a href = "#">iOS</a></li>

•          <li><a href = "#">SVN</a></li>             

•          <li class = "dropdown">

•             <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">

•                Java 

•                <b class = "caret"></b>

•             </a>             

•             <ul class = "dropdown-menu">

•                <li><a href = "#">jmeter</a></li>

•                <li><a href = "#">EJB</a></li>

•                <li><a href = "#">Jasper Report</a></li>                

•                <li class = "divider"></li>

•                <li><a href = "#">Separated link</a></li>         

•                <li class = "divider"></li>

•                <li><a href = "#">One more separated link</a></li>

•             </ul>

•          </li>

•       </ul>

•    </div>

• </nav>

فرم ها در Navbar

به جای استفاده از فرم های پیش فرض مبتنی بر کلاس از Chapter Bootstrap Forms، فرم هایی که در بخش ناوبر وجود دارند، از کلاس navbar-form استفاده کنید. این تضمین می کند که ترازبندی عمودی مناسب فرم و رفتار فروپاشیده در نمای دید باریک است. برای تعیین محل سکونت در محتوای ناوبر از گزینه های هم ترازی استفاده کنید. مثال زیر این را نشان می دهد:

<nav class = "navbar navbar-default" role = "navigation">

   <div class = "navbar-header">

      <a class = "navbar-brand" href = "#">TutorialsPoint</a>

   </div>   

   <div>

      <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>    

   </div>   

</nav>

جمع بندی و نتیجه:

ما خواستیم در این مطلب، توضیحاتی در مورد بخش Navbar در بوت استرپ برای شما ارائه کنیم و نحوه کار با Navbar را به شما یاد دهیم. همانطور که گفته شد، منوی Navbar یکی از بخش های مهم و کاربردی در بوت استرپ است که شما می توانید از این بخش استفاده کنید. اگر می خواهید نحوه کار با این بخش را یاد بگیرید، توصیه می کنیم تا در دوره آموزش بوت استرپ شرکت کنید.