BOOTSTRAP3 easy to use, easy to implement mobile phone adaptation

Personal official website http://FansUnion.cn, front end use bootstrap frame. Most of the styles are easy to implement.

just, about the navigation bar, by countless netizens spit slot.
  
Through the mobile phone access, the navigation bar to completely occupy the screen, the text content is not the opportunity to display aspirations, it is regrettable.

After being the Netizen and customer vomit the trough countless times, this afternoon, the colleague of the company again Spit trough once. Spit Groove to spit groove, many netizens remind me to improve, at least 2 know the front-end of GG,
Gg-pslong and company colleague Gg-tuyang all gave advice.

To tell the truth, using bootstrap to do the basic adaptation of mobile phone, it is not difficult, the official online demo. In addition, the first half of the entrepreneurial time, also done. Gg-pslong, gave a demonstration of his own personal website:http://80iter.com/.

    Just, on the above that personal website and bootstrap demo, after 2 times debugging, finally done.
   ------------
    Commissioning Process, there is a small problem. I access the Internet through the router, even if the query to the local network IP, can not directly access the program locally, and therefore can not be directly tested on the phone. Each time is, first in the local modification, deployment to the online, mobile phone access to view the effect, not up to expectations, then modify, then.

    Below is the HTML code,   the key places are bold:

<nav class= "NavBar navbar-default navbar-fixed-top" id= "Headernav" role= "navigation" >

<div class= "Navbar-inner" >

<div class= "Container" >

<div class= "Navbar-header" >

<button type= "button" class= "Navbar-toggle collapsed"

data-toggle= "collapse" data-target= "#navdiv" >

<span class= "sr-only" >toggle navigation</span> <span

class= "Icon-bar" ></span> <span class= "Icon-bar" ></span> <span

class= "Icon-bar" ></span>

</button>

</div>

<div id= "navdiv" class= "collapse navbar-collapse" >

<ul id= "navlist" class= "Nav navbar-nav" >

<li id= "Indexli" ><a href= "${base}/" title= "home, premier service, starting from this page" >${siteColumnIndex}</a></li>

<li id= "Serviceli" ><a href= "${base}/service"

Title= "Three-stream products, second-rate technology, first-class service" >${siteColumnService}</a></li>

</ul>

</div>

</div>

</div>

</nav>

Explained below:
There is a button on it that is not displayed when it is accessed through the computer. When accessed via a mobile phone, a button is displayed and the navigation bar below is not displayed directly. The bottom navigation bar is displayed when you click the button.

There are several places to add. " collapse", must be added.

Also, be aware that data-target= "#navdiv", the #navdiv of this place is the ID of the navigation bar below. must correspond to each other.

do not like to write their own CSS back-end programmer GG, can spend 1 days to learn Bootstrap3.

reference: http://v3.bootcss.com/components/#navbar

BOOTSTRAP3 easy to use, easy to implement mobile phone adaptation