PDA

View Full Version : مشکل با nav در bootstrap



*sajjad*
جمعه 06 آذر 1394, 04:00 صبح
سلام
من وقتی منو درست میکنم منو درست میشه ولی منو هایی که زیر منو دارن باز نمیشن . نه با کلیک کردن نه با hover شدن
در ضمن وقتی این کد رو مینویسم data-toggle="dorpdown"
فقط کلمه ی data در ctrl +space وجود داره بقیه اش رو باید دستی بنویسم.
اینم کد

<div class="col-lg-12">
<header>
<div class="row navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">home</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" id="menu" data-toggle="dropdown">register<i class="caret"></i></a>
<ul class="dropdown-menu">
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
</ul>
</li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</header>
</div>



<script src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript">
$(function(){
$('ul.nav li.dropdown').hover(function(){
$('.dropdown-menu',this).fadeIn();
},function(){
$('.dropdown-menu',this).fadeOut('fast');
});
});
</script>

mohammad425
یک شنبه 08 آذر 1394, 14:27 عصر
کتابخانه جکوئری رو به پروژتون اضافه کردین؟

FNS4565
سه شنبه 10 آذر 1394, 08:51 صبح
ایجاد یک nav bar ساده با تویتر بوت استرپ
تویتر بوت استرپ شما را قادر می کند تا انواع مختلفی از nav bar را به سرعت و بدون نیاز به تلاش زیاد ایجاد کنید. شما nav barهای استاتیک با مسیریابی ساده و همچنین nav barهایی با منوهای رو به پایین و جعبه های جستجو ایجاد می کنید.
مثال
مثال زیر چگونگی ایجاد nav bar استاتیک با مسیریابی پایه را نشان می دهد.
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a href="#" class="navbar-brand">
Brand
</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Profile
</a>
</li>
<li>
<a href="#">
Messages
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Login</a>
</li>
</ul>
</div>
</nav>
خروجی مثال بالا مانند زیر می باشد .


http://articles.tahlildadeh.com/image.axd?picture=image_thumb_2100.png

همچنین می توانید فرم جستجو در داخل nav بارها اضافه کنید.
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a href="#" class="navbar-brand">
Brand
</a>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Profile
</a>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
Messages <b class="caret">
</b>
</a>
<ul role="menu" class="dropdown-menu">
<li>
<a href="#">
Inbox
</a>
</li>
<li>
<a href="#">
Drafts
</a>
</li>
<li>
<a href="#">
Sent Items
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Trash
</a>
</li>
</ul>
</li>
</ul>
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Login</a>
</li>
</ul>
</div>
</nav>
خروجی مثال بالا مانند زیر می باشد .


http://articles.tahlildadeh.com/image.axd?picture=image_thumb_2101.png

نکته
برای ایجاد navbar هایی که در بالا ثابت نیستند، آن را در هرجایی در داخل .containerقرار دهید که عرض سایت و محتوای شما را تنظیم می کند.
Nav bar ثابت تویتر بوت استرپ
تویتربوت استرپ مکانیزمی برای ایجاد nav bar ارائه می دهد که در بالا یا پایین ViewPort ثابت است و با محتوای روی صفحه اسکرول می کند.
ایجاد nav bar ثابت در بالا
برای ایجاد nav bar هایی که در بالا ثابت هستند، به علاوه ی گروه پایه ی .nav bar and .nav bar-defaultیک گروه .nav bar-fixed-top نیز اضافه کنید.
مثال
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a href="#" class="navbar-brand">
Brand
</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Profile
</a>
</li>
<li>
<a href="#">
Messages
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
نکته
برای لایه گذاری درست و تنظیم با بقیه ی محتوا، محتوای Navbar ثابت را در داخل .container یا .container-fluid قرار دهید.
ایجاد nav bar ثابت در پایین
به طور مشابه برای ایجاد یک nav barثابت در پایین گروه .nav bar-fixed-bottom را اضافه کنید.
مثال
<nav role="navigation" class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a href="#" class="navbar-brand">
Brand
</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Profile
</a>
</li>
<li>
<a href="#">
Messages
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
نکته
به یاد داشته باشید لایه ای به بالا یا پایین عنصر <body> اضافه کنید تا از رفتن محتوا به زیر navbar در هنگام اجرای navbar ثابت جلوگیری کنید.
Nav bar استاتیک تویتربوت استرپ در بالا
شما می توانید nav bar تمام عرض ایجاد کنید که در بالا ظاهر می شود اما با اضافه کردن گروه .navbar-static-top از فهرست صفحه دور می شود. برخلاف گروه .navbar-fixed-top لازم نیست هیچ لایه ای را درbodyتغییر دهید.
مثال
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a href="#" class="navbar-brand">
Brand
</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Profile
</a>
</li>
<li>
<a href="#">
Messages
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
Nav bar تویتربوت استرپ با فرم جستجو
فرم جستجو یک مولفه ی متداول بر روی navbarها می باشد و شما آن ها را روی وب سایت های متفاوت دیده اید. فرم جستجو با استفاده از گروه .navbar-form روی عنصر <form> می تواند در داخل navbar قرار بگیرد.
مثال
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a href="#" class="navbar-brand">
Brand
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control">
</div>
<button type="submit" class="btnbtn-default">
Submit
</button>
</form>
</div>
</nav>
ایجاد گونه ی معکوس یک nav bar
شما می توانید با اضافه کردن گروه .navbar-inverse به گروه پایه ی .navbar یک گونه ی معکوس از navbar بوت استرپ ایجاد کنید که به تغییر در Markup هم احتیاجی نیست.

مثال
<nav role="navigation" class="navbar navbar-inverse">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
<span class="icon-bar">
</span>
</button>
<a href="#" class="navbar-brand">
Brand
</a>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Profile
</a>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
Messages <b class="caret">
</b>
</a>
<ul role="menu" class="dropdown-menu">
<li>
<a href="#">
Inbox
</a>
</li>
<li>
<a href="#">
Drafts
</a>
</li>
<li>
<a href="#">
Sent Items
</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">
Trash
</a>
</li>
</ul>
</li>
</ul>
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search" class="form-control">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Login</a>
</li>
</ul>
</div>
</nav>
خروجی مثال بالا مانند زیر می باشد.


http://articles.tahlildadeh.com/image.axd?picture=image_thumb_2102.png