html - twitter bootstrap screen size logic and best practices -


i building responsive site using bootstrap 3.

here desktop version(only header included):

header desktop

here mobile version:

header mobile

what concept achieving layout change using bootstrap 3, in usage of grid classes or media queries?

i appreciate short example.

thank you

you use responsive utility 'hidden-lg' (hides on desktop) , 'hidden-sm' (hides on tablets/phones) css classes this..

<div class="navbar navbar-inverse hidden-sm">       <div class="container">         .. menu here     </div> </div> <div class="hidden-lg text-center">   <!--custom select menu here-->   <select><option>contact us</option><option>about</option><option>link</option</select> </div> 

demo: http://www.bootply.com/70810

but, more typical bootstrap "thing do" use nav-collapse collapse menu on smaller devices:

http://www.bootply.com/cskelly/70636


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

css - Firefox for ubuntu renders wrong colors -