نوارهای ناوبری

نشانه گذاری نوار

نوارهای پیمایش در Stack به یک والدین نیاز دارند عنصر bar با ظرف و فرزندان ردیف. ستون های داخل نوار با استفاده از کنترل می شوند کلاس های Bootstrap Grid. با استفاده از کلاس‌های ستونی Bootstrap Grid، کنترل نحوه نمایش نوار شما در دستگاه‌های مختلف (مانند تبلت، موبایل) آسان می‌شود.

هر ماژول داخل یک ستون در داخل a قرار می گیرد bar__module عنصر

قطعه نشانه گذاری زیر منجر به نواری می شود که در سمت راست در عرض کامل می بینید.

<div class="bar bg--dark boxed boxed--sm">
	<div class="container">
		<div class="row">
			<div class="col-md-7">
				<div class="bar__module">
					<ul class="menu-horizontal">
						<li>
							<a href="#">Link 1</a>
						</li>
						<li>
							<a href="#">Link 2</a>
						</li>
						<li>
							<a href="#">Link 3</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="col-md-5">
				<div class="bar__module">
					<form>
						<input type="search" placeholder="Search here" />
					</form>
				</div>
			</div>
		</div><!--end of row-->
	</div><!--end of container-->
</div><!--end of bar-->
					

منو های چسبنده

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

ویژگی را اضافه کنید data-scroll-class به عنصر bar با دو آرگومان، ابتدا فاصله ای که باید پیمایش شود، و سپس کلاس pos-fixed که در زیر نشان داده شده است:

<div class="bar" data-scroll-class="100px:pos-fixed">...</div>
					

منوی چسبنده موبایل

برای چسباندن نوار پیمایش در تلفن همراه، ویژگی داده را اضافه کنید data-scroll-class به هر دو عناصر .bar در داخل nav-container

سپس کلاس را قرار دهید .bar--mobile-sticky در اول عنصر bar همانطور که در زیر نشان داده شده است:

<div class="nav-container">
   <div class="bar bar--mobile-sticky visible-xs" data-scroll-class="400px:pos-fixed">...</div>
   <nav class="bar hidden-xs" data-scroll-class="400px:pos-fixed">...</nav>
</div>