Thursday, 15 July 2010

twitter bootstrap - How to add more items to a navbar button -


I'm starting at bootstrap, please stand by me.

How do I add more items to the button that appears on small screen sizes in the code below? Right now, the NAV link is the content of the button. I think that if the button appears, want to make more items in the list.

  & lt; Div class = "navbar navbar-default navbar-fixed-top" role = "navigation" & gt; & Lt; Div class = "container-liquid" & gt; & Lt; Div class = "navbar-header" & gt; & Lt; Button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = ". Navbar-collapse" & gt; & Lt; Span class = "sr-only" & gt; Toggle NAV Bar & lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; Span class = "icon-bar" & gt; & Lt; / Span & gt; & Lt; / Button & gt; & Lt; / Div & gt; & Lt; Div class = "navbar-collapse collapse" & gt; & Lt; Ul class = "nav navbar-nav navbar-left" & gt; & Lt; Li class = "active" & gt; & Lt; A href = "#" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Emergency & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Contact & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Skip to content & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

< / P>

P> Edit - Sorry, I have given the wrong JSFDial link. Now fixed.

Here you can go:

Hide what you have to do Except one of the item (all) screen-sizes, where you want it to appear:

  & lt; Li class = "hidden-sm hidden-md hidden-lg" & gt; & Lt; A href = "#" & gt; Another mobile item & lt; / A & gt; & Lt; / Li & gt;  

No comments:

Post a Comment