BOOTSTRAP3 easy to use, easy to implement mobile phone adaptation

Source: Internet
Author: User
Tags button type

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.