توی این پست در خدمت دوستان هستیم با جلسه چهاردهم دوره آموزش متنی بوت استرپ به زبان فارسی. اینبار از وب سایت سورس باران در جلسه چهاردهم آموزش بوت استرپ آموزش کار با نوار هدایتی-مسیریابی بوت استرپ رو به اشتراک گذاشته ایم. و در این بخش با نوار هدایتی – مسیریابی بوت استرپ به خوبی آشنا خواهید شد.
نوار هدایتی-مسیریابی بوت استرپ :
نوار مسیریابی یک هدر/سرفصل مسیر یابی ست که بر بالای صفحه قرار میگیر.
بوسیله بوت استرپ ، یک نوار مسیریابی میتواند میتواند به اندازه صفحه گسترش یابد یا نزول پیدا کند.
یک نوار مسیریابی استاندارد توسط <nav class=”navbar navbar-default”> ساخته میشود. مثال زیر چگونگی اضافه کردن نوار مسیریابی ب بالای صفحه را نشان میدهد :
<body> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </div> </nav> ...
نکته : همه مثال های درون این صفحه، یک نوار مسیریابی را نشان میدهند که فضای زیادی را بر روی صفحه نمایش کوچک اشغال می کند اما نوار مسیریابی در صفحات نمایش بزرگ، یک خط واحد خواهد بود چرا که بوتسترپ واکنش گرا/ریسپانسیو می باشد.
این مشکل(در رابطه با صفحه نمایش های کوچک) در مثال آخر این مجموعه اموزشی ، حل خواهد شد.
نوار مسیریابی برعکس در بوت استرپ :
اگر استایل نوار مسیریابی پیش فرض را نمیپسندید ، بوت استرپ یک نوار پیمایش جایگزین در اختیار شما قرار میدهد.
کافیست کلاس .navbar-default را به .navbar-inverse تغییر دهید :
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </div> </nav>
نوار مسیریابی ثابت در بوت استرپ :
نوار مسیریابی را میتوان در بالا یا پایین صفحه ثابت قرار داد. یک نوار مسیریابی ثابت صرف نظر از اینکه در کجای صفحه قرار دارید در بالا یا پایین آن ثابت میماند .
کلاس .navbar-fixed-top باعث ثابت شدن نوار مسیریابی در بالای صفحه میشود :
<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </div> </nav>
کلاس .navbar-fixed-bottom باعث ثابت شدن نوار مسیریابی در پایین صفحه میشود :
<nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav>
نوار مسیر یابی با منوی کشویی در بوت استرپ :
نوار های مسیریابی نیز میتوانند دارای منوهای کشویی باشند، مثال بالا در قسمت page1 یک منوی کشویی استفاده میکند
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </div> </nav>
نوار مسیریابی راست چین شده در بوت استرپ :
کلاس .navbar-right برای راست چین کردن دکمه های نوار مسیریابی استفاده میشود :
در مثال زیر ما یک دکمه “Sign Up” و یک دکمه “Login” به سمت راست نوار مسیریابی اضافه میکنیم . ما همچنین یک glyphicon کنار هر یک از دکمه ها اضافه میکنیم.
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav>
نوار مسیریابی نزولی در بوت استرپ :
نوار مسیریابی فضای زیادی را بر روی صفحه های کوچک اشغال میکند، ما باید نوار مسیریابی را مخفی کرده و تنها به موقع نیاز ان را نمایش دهیم.
در مثال زیر نوار مسیریابی با یک دکمه در گوشه سمت راست صفحه جایگزین میشود. و تنها زمانی که بر روی دکمه کلیک میکنیم نوار مسیریابی نمایش داده میشود :
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">WebSiteName</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </div> </nav>
لینک منبع : http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
موفق و پیروز باشید
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- منبع : سورس باران
- رمز فايل : www.sourcebaran.com
- انتشار: ۲ تیر ۱۳۹۵
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
سلام، اگه این قبیل آموزش ها هم به صورت PDF باشند بهتر است.
ممنون.