نمایش نتایج 1 تا 2 از 2

نام تاپیک: navbar در بوت استرپ

  1. #1
    کاربر دائمی آواتار saeed410
    تاریخ عضویت
    بهمن 1386
    محل زندگی
    قوچان. مشهد
    پست
    264
    تشکر کردن
    43
    128 بار تشکر شده در 106 پست

    Lightbulb navbar در بوت استرپ

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

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

    • کلاسهای navbar و navbar-default را به تگ nav اضافه کنید.
    • ویژگی role را برای تگ nav برابر navigation قرار دهید
    • یک Div با کلاس navbar-header ایجاد کنید. و داخل آن یک تگ a قرار دهید که دارای کلاس navbar-brand است.
    • سپس برای اضافه کردن منوهای خود یک لیست ایجاد کنید و آنها را داخل یک div با کلاسهای nav و navbar-nav قرار دهید .

    کد زیر روش استفاده از navbar پیش فرض در بوت استرپ را نشان میدهد:


    کد HTML:
    [LEFT]<nav class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
          <a class="navbar-brand" href="#">سیپنا</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> 
    [/LEFT]
    تصویر دموی این کد به صورت زیر است:

    نوار منوی واکنش گرا در بوت استرپ :

    اگر میخواهید یک نوار منوی واکنش گرا در طراحی وب سایت خود داشته باشید میتوانید از کلاس های ایجاد شده توسط بوت استرپ استفاده کنید. محتواهایی را که میخواهید هنگام کوچک شدن صفحه ، جمع شوند داخل کلاسهای collapse و navbar-collapse قراردهید. هنگامی که از این کلاس استفاده میکنید نیاز به یک دکمه دارید تا اگر کاربر روی آن کلیک کرد منوهای آبشاری شما باز شوند. این دکمه در کلاس navbar-toggle قرار دارد. همچنین برای این کلاس باید دو ویژگی داده را مشخص کنیم که عبارتند از : data-toggle که به جاوااسکریپت میگوید قرار است با این دکمه چه کارهای انجام شود و data-target که نمایانگر کنترلهایی است که قرار است جمع شوند. علاوه بر ویژگی داده میتوانیم با ویژگی icon-bar آیکونی سفارشی را برای دکمه انتخاب کنیم. در کد زیر روش استفاده از کلاسهای عنوان شده را نشان داده ایم:
    کد HTML:
    [LEFT] <nav class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" 
             data-target="#example-navbar-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="#">نوار منوی جمعشو</a>
       </div>
       <div class="collapse navbar-collapse" id="example-navbar-collapse">
          <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>
    [/LEFT]
    تصویر این کد به صورت زیر است.هنگامی که صفحه نمایش در حالت عادی باشد با نوار منوی پیش فرض هیچ فرقی ندارد. اما اگر صفحه نمایش کوچک شود منوها جمع میشوند و با کلیک بر روی دکمه میتوانید آنها را باز کنید:


    فرم در نوار منو و بوت استرپ :

    اگر نیاز دارید در طراحی سایت خود نوار منو را به گونه ایی طراحی کنید که دارای فرم باشد میتوانید از کلاس navbar-form استفاده کنید. ایده استفاده از فرم در نوار منوی طراحی وب سایت شما میتواند شامل قرار دادن فرم ورود و ثبت نام در یکی از منوها باشد یا میتوانید فرم جستجو در وبسایت خود را در یکی ازمنو ها قرار دهید. کد زیر روش ایجاد فرم ها در نوار منو را نشان میدهد:
    کد HTML:
    [LEFT] <nav class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
          <a class="navbar-brand" href="#">فرم در نوار منو</a>
       </div>
       <div>
          <form class="navbar-form navbar-right" role="search">
             <div class="form-group">
                <input type="text" class="form-control" placeholder="جستجو">
             </div>
             <button type="submit" class="btn btn-default">جستجو</button>
          </form>    
       </div>
    </nav>
    [/LEFT]
    تصویر زیر دموی این کد را نشان میدهد:

    دکمه ها در نوار منو و بوت استرپ :

    اگر طراحی وب سایت شما به گونه ایی است که نیاز دارید دکمه هایی را در نوار منوی خود قرار دهید میتوانید از کلاس navbar-btn استفاده کنید. کد زیر روش استفاده از این کلاس را نشان میدهد:


    کد HTML:
    [LEFT]<nav class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
          <a class="navbar-brand" href="#">آموزش بوت استرپ </a>
       </div>
       <div>
          <form class="navbar-form navbar-right" role="search">
             <div class="form-group">
                <input type="text" class="form-control" placeholder="جستجو">
             </div>
             <button type="submit" class="btn btn-default">کمه ثبت</button>
          </form>    
          <button type="button" class="btn btn-default navbar-btn">
             دکمه در نوار منو
          </button>
       </div>
    </nav>
     
    [/LEFT]
    تصویر زیردموی این کد را نشان میدهد:

    متن در نوار منو و بوت استرپ :

    اگر میخواهید یک متن در نوار منو قرار دهید از کلاس navbar-text استفاده کنید. این کلاس معمولاً همراه با تگ p مورد استفاده قرار میگیرد.مثال:
    کد HTML:
     [LEFT]<nav class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
          <a class="navbar-brand" href="#">آموزش بوت استرپ</a>
       </div>
       <div>
          <p class="navbar-text">وارد شده به عنوان سیپنا</p>
       </div>
    </nav>[/LEFT]
    تصویر دموی این کد به صورت زیر است:

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

    اگر میخواهید یک لینک معمولی در نوار منوی خود ایجاد کنید میتوانید از کلاس navbar-link برای این کار استفاده کنید. کد زیر استفاده از این کلاس را نشان میدهد:
    کد HTML:
     [LEFT]<nav class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
          <a class="navbar-brand" href="#">آموزش بوت استرپ </a>
       </div>
       <div>
          <p class="navbar-text navbar-right">وارد شده به عنوان 
             <a href="#" class="navbar-link">سیپنا</a>
          </p>
       </div>
    </div>
    </nav>[/LEFT]
    تصویر دموی این کد به صورت زیراست:

    ترازبندی مولفه ها در بوت استرپ:

    برای تراز بندی مولفه های مختلف در نوار منو میتوانید از کلاسهای navbar-left و navbar-right استفاده کنید. در مثال زیر روش های مختلف استفاده از این دو کلاس را نشان داده ایم:
    کد HTML:
     [LEFT]<nav class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
          <a class="navbar-brand" href="#">TutorialsPoint</a>
       </div>
       <div>
          <!--Left Align-->
          <ul class="nav navbar-nav navbar-left">
             <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>
          <form class="navbar-form navbar-left" role="search">
             <button type="submit" class="btn btn-default">
                Left align-Submit Button   
             </button>
          </form> 
          <p class="navbar-text navbar-left">Left align-Text</p>
          <!--Right Align-->
          <ul class="nav navbar-nav navbar-right">
             <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>
          <form class="navbar-form navbar-right" role="search">
             <button type="submit" class="btn btn-default">
                Right align-Submit Button
             </button>
          </form> 
          <p class="navbar-text navbar-right">Right align-Text</p>
       </div [/LEFT]
    تصویر کد بالا به صورت زیر است:

    نوار منوی ثابت در بوت استرپ :

    اگر میخواهید منوی شما به گونه ایی طراحی شود که با اسکرول کردن مرورگر به سمت پایین ؛ همیشه قابل نمایش باشد میتوانید از این روش استفاده کنید. برای این کار میتوانید کلاس navbar-fixed-top را به کلاس navbar اضافه کنید.در این حالت منو با بدنه وب سایت شما تداخل پیدا می کند . اگر میخواهید از این کلاس استفاده کنید یک padding به اندازه 50 پیکسل یا دلخواه خودتان به تگ body صفحه اختصاص دهید. کد زیر روش استفاده از این کلاس را نشان میدهد:
    کد HTML:
    <nav class="navbar navbar-default navbar-fixed-top" 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-fixed-bottom استفاده کنید. کد زیر روش استفاده از این کلاس را نمایش میدهد:
    کد HTML:
     [LEFT]<nav class="navbar navbar-default navbar-fixed-bottom" 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>[/LEFT]
    تصویر زیر دموی کد بالا را نشان میدهد:

    منوی ایستا در بوت استرپ:

    برای ایجاد یک منو که با اسکرول به پایین و بالا حرکت میکند میتوانید از کلاس navbar-static-top استفاده کنید. کارایی این کلاس تقریباً همانند مثال قبل است.با این تفاوت که استفاده از این کلاس نیاز به اختصاص padding به تگ body ندارد. مثال:
    کد HTML:
     [LEFT]<nav class="navbar navbar-default navbar-static-top" role="navigation">
       <div class="navbar-header">
          <a class="navbar-brand" href="#">منوی ایستا</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>
    [/LEFT]
    تصویر کد:

    منوی وارونه در بوت استرپ:

    برای ایجاد یک منوی وارونه با استفاده از بوت استرپ ، به صورتی که پس زمینه منو مشکلی و رنگ متن ها سفید باشد میتوانید از کلاس navbar-invese استفاده کنید. در این حالت تمام رنگ ها وارنه میشوند. کد زیر روش استفاده از این کلاس را نشان میدهد:
    کد HTML:
     [LEFT]<nav class="navbar navbar-inverse" role="navigation">
       <div class="navbar-header">
          <a class="navbar-brand" href="#">منوی وارونه</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>[/LEFT]
    تصویر زیر دموی این کد را نشان میدهد:

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

    در گروه: کامپوننت های لایه بندی
    منبع: طراحی سایت

  2. 2 کاربر از saeed410 به خاطر این مطلب مفید تشکر کرده اند:


  3. #2
    کاربر تازه وارد آواتار alibahman47
    تاریخ عضویت
    بهمن 1395
    پست
    63
    تشکر کردن
    55
    5 بار تشکر شده در 5 پست

    نقل قول: navbar در بوت استرپ

    درود بر شما
    چطوری میشه یه منو طراحی کرد که مثلا وسط صفحه (بعد از اسلایدر و ...) باشه و وقتی صفحه رو اسکرول میکنیم و بهش میرسیم بره بالای سایت همونجا ثابت بشه. ؟؟؟

تاپیک های مشابه

  1. بوت استرپ
    نوشته شده توسط yegane8 در بخش طراحی وب (Web Design)
    پاسخ: 2
    آخرین پست: دوشنبه 04 شهریور 1392, 18:30 بعد از ظهر
  2. سوال: بوت استرپ
    نوشته شده توسط زینب فاطمی در بخش طراحی وب (Web Design)
    پاسخ: 18
    آخرین پست: پنجشنبه 24 مرداد 1392, 14:59 بعد از ظهر
  3. سوال: رسپانسیو بوت استرپ
    نوشته شده توسط mazaher5723 در بخش طراحی وب (Web Design)
    پاسخ: 3
    آخرین پست: شنبه 19 مرداد 1392, 14:17 بعد از ظهر
  4. استفاده از بوت استرپ در asp.net
    نوشته شده توسط هم دانشگاهی در بخش ASP.NET
    پاسخ: 5
    آخرین پست: پنجشنبه 20 تیر 1392, 22:46 بعد از ظهر
  5. مشکل در طراحی با بوت استرپ
    نوشته شده توسط payamka در بخش طراحی وب (Web Design)
    پاسخ: 3
    آخرین پست: چهارشنبه 29 خرداد 1392, 12:30 بعد از ظهر

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •