ایجاد یک nav bar ساده با تویتر بوت استرپ

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

مثال :

مثال زیر چگونگی ایجاد nav bar استاتیک با مسیریابی پایه را نشان می دهد.
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵

<!– Brand and toggle get grouped for better mobile display –>

Toggle navigation

</span>

</span>

</span>

</span>

</button>

Brand

</a>

</div>

<!– Collection of nav links and other content for toggling –>

Home

</a>

</li>

<li>

Profile

</a>

</li>

<li>

Messages

</a>

</li>

</ul>

<li>

<a href=”#”>Login</a>

</li>

</ul>

</div>

خروجی مثال بالا مانند زیر می باشد .
Bootstrap

همچنین می توانید فرم جستجو در داخل nav بارها اضافه کنید.

مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
۷۸
۷۹
۸۰
۸۱
۸۲
۸۳
۸۴
۸۵
۸۶
۸۷
۸۸
۸۹
۹۰
۹۱
۹۲
۹۳
۹۴
۹۵
۹۶
۹۷
۹۸
۹۹
۱۰۰
۱۰۱
۱۰۲
۱۰۳
۱۰۴
۱۰۵
۱۰۶
۱۰۷
۱۰۸
۱۰۹
۱۱۰
۱۱۱
۱۱۲
۱۱۳
۱۱۴
۱۱۵
۱۱۶
۱۱۷
۱۱۸
۱۱۹
۱۲۰
۱۲۱
۱۲۲
۱۲۳
۱۲۴
۱۲۵
۱۲۶
۱۲۷
۱۲۸
۱۲۹
۱۳۰
۱۳۱
۱۳۲
۱۳۳
۱۳۴
۱۳۵
۱۳۶
۱۳۷
۱۳۸
۱۳۹
۱۴۰
۱۴۱
۱۴۲
۱۴۳
۱۴۴
۱۴۵
۱۴۶
۱۴۷

<!– Brand and toggle get grouped for better mobile display –>

Toggle navigation

</span>

</span>

</span>

</span>

</button>

Brand

</a>

</div>

<!– Collection of nav links, forms, and other content for toggling –>

Home

</a>

</li>

<li>

Profile

</a>

</li>

Messages <strong class=”caret”>

</strong>

</a>

<li>

Inbox

</a>

</li>

<li>

Drafts

</a>

</li>

<li>

Sent Items

</a>

</li>

</li>

<li>

Trash

</a>

</li>

</ul>

</li>

</ul>

</div>

<li>

<a href=”#”>Login</a>

</li>

</ul>

</div>

خروجی مثال بالا مانند زیر می باشد .
Bootstrap
نکته:

برای ایجاد navbar هایی که در بالا ثابت نیستند، آن را در هرجایی در داخل .containerقرار دهید که عرض سایت و محتوای شما را تنظیم می کند.
Nav bar ثابت تویتر بوت استرپ

تویتربوت استرپ مکانیزمی برای ایجاد nav bar ارائه می دهد که در بالا یا پایین ViewPort ثابت است و با محتوای روی صفحه اسکرول می کند.
ایجاد nav bar ثابت در بالا

برای ایجاد nav bar هایی که در بالا ثابت هستند، به علاوه ی گروه پایه ی .nav bar and .nav bar-defaultیک گروه .nav bar-fixed-top نیز اضافه کنید.
ایجاد nav bar ثابت در بالا

برای ایجاد nav bar هایی که در بالا ثابت هستند، به علاوه ی گروه پایه ی .nav bar and .nav bar-defaultیک گروه .nav bar-fixed-top نیز اضافه کنید.

<!– Brand and toggle get grouped for better mobile display –>

Toggle navigation

</span>

</span>

</span>

</span>

</button>

Brand

</a>

</div>

<!– Collection of nav links and other content for toggling –>

Home

</a>

</li>

<li>

Profile

</a>

</li>

<li>

Messages

</a>

</li>

</ul>

<li><a href=”#”>Login</a></li>

</ul>

</div>

</div>
نکته:

برای ایجاد navbar هایی که در بالا ثابت نیستند، آن را در هرجایی در داخل .containerقرار دهید که عرض سایت و محتوای شما را تنظیم می کند.
Nav bar استاتیک تویتربوت استرپ در بالا

شما می توانید nav bar تمام عرض ایجاد کنید که در بالا ظاهر می شود اما با اضافه کردن گروه .navbar-static-top از فهرست صفحه دور می شود. برخلاف گروه .navbar-fixed-top لازم نیست هیچ لایه ای را درbodyتغییر دهید.

<!– Brand and toggle get grouped for better mobile display –>

Toggle navigation

</span>

</span>

</span>

</span>

</button>

Brand

</a>

</div>

<!– Collection of nav links and other content for toggling –>

Home

</a>

</li>

<li>

Profile

</a>

</li>

<li>

Messages

</a>

</li>

</ul>

<li>

<a href=”#”>Login</a>

</li>

</ul>

</div>

</div>
Nav bar تویتربوت استرپ با فرم جستجو

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

مثال :
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳

Toggle navigation

</span>

</span>

</span>

</span>

</button>

Brand

</a>

</div>

</div>

Submit

</button>

</div>
ایجاد گونه ی معکوس یک nav bar

شما می توانید با اضافه کردن گروه .navbar-inverse به گروه پایه ی .navbar یک گونه ی معکوس از navbar بوت استرپ ایجاد کنید که به تغییر در Markup هم احتیاجی نیست.

<!– Brand and toggle get grouped for better mobile display –>

Toggle navigation

</span>

</span>

</span>

</span>

</button>

Brand

</a>

</div>

<!– Collection of nav links, forms, and other content for toggling –>

Home

</a>

</li>

<li>

Profile

</a>

</li>

Messages <strong class=”caret”>

</strong>

</a>

<li>

Inbox

</a>

</li>

<li>

Drafts

</a>

</li>

<li>

Sent Items

</a>

</li>

</li>

<li>

Trash

</a>

</li>

</ul>

</li>

</ul>

</div>

</form>

<li>

<a href=”#”>Login</a>

</li>

</ul>

</div>

خروجی مثال بالا مانند زیر می باشد.
Bootstrap

ایجاد یک nav bar ساده با تویتر بوت استرپ

درباره نویسنده

نوشته‌های مرتبط

ارسال دیدگاه

دسته ها

جستجو

رجیران

نمايندگی

سرورها

طراحی سایت

هاست

ثبت دامنه