码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap_12菜单栏

时间:2014-05-13 11:58:21      阅读:335      评论:0      收藏:0      [点我收藏+]

标签:菜单栏   手机   

<!doctype html>
<html>
<meta charset="utf-8" />
<head>
<title>益司CMS-PC与手机建站集成</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<!--<link href="__PUBLIC__/bootstrap/css/bootstrap-theme.css" rel="stylesheet" />-->
<!--[if It IE 9]>
    <script src="http//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
    <h1 class="page-header">导航栏</h1>
         
        <div class="navbar">
            <ul class="nav nav-pills">
                <li class="active"><a href="#" >aa</a></li>
                <li><a href="#">aa</a></li>
                <li><a href="#">aa</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                      项目 <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="">项目一</a></li>
                        <li><a href="">项目二</a></li>
                        <li><a href="">项目三</a></li>                                               
                    </ul>
                  </li>           
            </ul>
        </div>
            
            
        <nav role="navigation" class="navbar navbar-default navbar-static" id="navbar-example">
        <div class="navbar-header">
          <button data-target=".bs-js-navbar-collapse" data-toggle="collapse" type="button" class="navbar-toggle collapsed">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="navbar-brand">Project Name</a>
        </div>
            
            
        <div class="navbar-collapse bs-js-navbar-collapse collapse"  >
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" id="drop1">Dropdown <b class="caret"></b></a>
              <ul aria-labelledby="drop1" role="menu" class="dropdown-menu">
                <li role="presentation"><a href="http://twitter.com/fat" tabindex="-1" role="menuitem">Action</a></li>
                <li role="presentation"><a href="http://twitter.com/fat" tabindex="-1" role="menuitem">Another action</a></li>
                <li role="presentation"><a href="http://twitter.com/fat" tabindex="-1" role="menuitem">Something else here</a></li>
                <li class="divider" role="presentation"></li>
                <li role="presentation"><a href="http://twitter.com/fat" tabindex="-1" role="menuitem">Separated link</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" role="button" id="drop2" href="#">Dropdown 2 <b class="caret"></b></a>
              <ul aria-labelledby="drop2" role="menu" class="dropdown-menu">
                <li role="presentation"><a href="http://twitter.com/fat" tabindex="-1" role="menuitem">Action</a></li>
                <li role="presentation"><a href="http://twitter.com/fat" tabindex="-1" role="menuitem">Another action</a></li>
                <li role="presentation"><a href="http://twitter.com/fat" tabindex="-1" role="menuitem">Something else here</a></li>
                <li class="divider" role="presentation"></li>
                <li role="presentation"><a href="http://twitter.com/fat" tabindex="-1" role="menuitem">Separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li class="dropdown" id="fat-menu">
              <a data-toggle="dropdown" class="dropdown-toggle" role="button" id="drop3" href="#">Dropdown 3 <b class="caret"></b></a>
              <ul aria-labelledby="drop3" role="menu" class="dropdown-menu">
                <li role="presentation"><a href="http://twitter.com/fat" tabindex="-1" role="menuitem">Action</a></li>
                <li role="presentation"><a href="http://twitter.com/fat" tabindex="-1" role="menuitem">Another action</a></li>
                <li role="presentation"><a href="http://twitter.com/fat" tabindex="-1" role="menuitem">Something else here</a></li>
                <li class="divider" role="presentation"></li>
                <li role="presentation"><a href="http://twitter.com/fat" tabindex="-1" role="menuitem">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.nav-collapse -->
      </nav> 
</div>
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
         
</script>
</body>
</html>

bootstrap_12菜单栏.html

bootstrap_12菜单栏,布布扣,bubuko.com

bootstrap_12菜单栏

标签:菜单栏   手机   

原文地址:http://6846041.blog.51cto.com/6836041/1410160

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!