Bootstrap 3使自定义导航菜单响应

Question

I am currently converting a psd to html using bootstrap. And I want to make use of the bootstrap responsive menu.

But I don't want to use the bootstrap menu for non-mobile devices such that, if the user is on the mobile he'll bootstrap's responsive menu and if he's using a desktop or any other md sized device in bootstrap then he should see my navigation menu which I styles on my own. How would I do this?

My Html Markup for the menu:

<div id="navigation" class="col-md-9 col-sm-12">
    <nav>
        <ul>
            <li><a href="#" class="selected">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Archive</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Other Pages</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav> <!-- end nav -->
</div>

Answer 1

This is a fairly easy task.

You need to know two things. 1. Media Queries 2. Bootstrap view-port break points

Link for break points

http://getbootstrap.com/css/#responsive-utilities

Link for media queries

http://getbootstrap.com/css/#grid-media-queries

Using that you can set specific CSS for Desktops, Mobile devices, etc...