首页 > 代码库 > bootstrap_12菜单栏

bootstrap_12菜单栏

2024-07-04 06:19:55   217人阅读

<!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="http://www.mamicode.com/__PUBLIC__/bootstrap/css/bootstrap-theme.css" rel="stylesheet" />-->
<!--[if It IE 9]>
    <script src="http://www.mamicode.com/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="http://www.mamicode.com/#" >aa</a></li>
                <li><a href="http://www.mamicode.com/#">aa</a></li>
                <li><a href="http://www.mamicode.com/#">aa</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="http://www.mamicode.com/#">
                      项目 <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="http://www.mamicode.com/#" 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="http://www.mamicode.com/#" 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="http://www.mamicode.com/#">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="http://www.mamicode.com/#">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


联系
我们