Sunday, 11 January 2015

bootstrap navbar

I use angularjs with bootstrap, so if you use bootstrap only this post is also perfectly good for you.

First to know how to use nav bar, the best place is not bootstrap website, it is w3schools.com:
http://www.w3schools.com/bootstrap/bootstrap_case_navigation.asp

you can change the code and try them and run your changes.

It mainly has two styles of nav bar: black and light gray:





All of them have screen fitting ability: which means they are mobile friendly solutions.

However, the collapse one has a special feature: all links will collapse together if the screen is smaller. you don't need control it by @media you self.




See below:




Without the collapse feature. As you can see if your application is visited by a smaller screen, all links will be listed in a above style. If your links do't have an icon, your webpage looks fine, but if it has icon, that looks bad!

I got a solution to display them in the middle, like this:



The code is:

<nav class="navbar ">
<div class="container-fluid navbar-default">
<div class="navbar-header">
</div>
<div>
<ul class="nav navbar-nav">
<li><a href="" ng-click="pagebackToHome()">Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="" ng-click="pageback()"><span class="glyphicon glyphicon-chevron-left"></span> Back</a></li>
<li><a href="" class="btn"><span class="glyphicon glyphicon-print"></span> Print</a></li>
</ul>
</div>
</div>
</nav>

class="btn" is the key thing,





No comments:

Post a comment