bootstrap 导航布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Bootstrap</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- 设置自适应设备  width=device-width宽度为设备宽度  initial-scale=1缩放比例设置为当前不缩放 -->
<meta name="viewport" content="width=device-width , initial-scale=1, user-scalable=no">
<script src="./bootstrap/js/bootstrap.min.js" ></script>
<script src="./bootstrap/js/jquery.js"></script>
<link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">天涯alone</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Cantent</a></li>
                </ul>
            </div>
        </div>

    </nav>
</body>
</html>

效果如下：

aaarticlea/png;base64,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" alt="" />