div布局之面向对象

最新推荐文章于 2024-11-04 14:35:43 发布

weixin_30508309

最新推荐文章于 2024-11-04 14:35:43 发布

阅读量83

点赞数

文章标签： php javascript ViewUI

原文链接：http://www.cnblogs.com/yangwu-183/p/7577066.html

版权

栗子之导航条（navbar）

http://www.runoob.com/try/try2.php?filename=bootstrap-using-glyphicons-navbar

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">Project name</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#">
                            <span class="glyphicon glyphicon-home"></span> Home
                        </a>
                    </li>
                    <li >  
                        <a href="#shop">
                            <span class="glyphicon glyphicon-shopping-cart"></span> Shop
                        </a>
                    </li>
                    <li>
                        <a href="#support">
                            <span class="glyphicon glyphicon-headphones"></span> Support
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>