html/bootstrap/navigation.html

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>导航菜单</title>

    <!-- Bootstrap Core CSS -->
    <link href="../libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../libs/bootstrap/css/style.css" rel="stylesheet">

    <style>
        body {
            font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
            background-color: #EBF5F3;
        }

        .navbar-custom {
            /*color: #FFFFFF;*/
            background-color: #56b9ab;

        }

        .navbar-brand,
        .navbar-nav li a {
            line-height: 55px;
            height: 55px;
            padding-top: 0px;
            font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;

        }

        .navbar-default .navbar-nav > li > a {
            color: #ffffff;
        }

        .navbar-default .navbar-nav > li > a:hover {
            color: #175A94;
        }

        .page-header {
            font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
            /* border-bottom: 1px solid #bbb;*/
        }


    </style>

    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

<div class="navbar navbar-default navbar-custom" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="">
            <img alt="Brand" src="http://zhangjikai.com/bootstrap/images/logo.png" height="50">
        </a>
    </div>
    <div class="navbar-collapse collapse">
        <!-- Left nav -->
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#" target="_blank">菜单</a></li>
            <li><a href="#" target="_blank">菜单</a></li>
        </ul>
    </div>
</div>


<!-- Page Content -->
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h2 class="page-header">Hello</h2>
        </div>
    </div>


</div>
<!-- /.container -->

<script type="text/javascript" src="../libs/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../libs/bootstrap/js/bootstrap.js"></script>

</body>

</html>