zoukankan      html  css  js  c++  java
  • Bootstrap--响应式导航条布局

    <!DOCTYPE html>
    
    <html>
    <head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="navbar navbar-inverse" style="">
    <div class="container">
    <div class="navbar-header">
    <a class="navbar-brand" href="https://www.baidu.com/" target="_blank">百度一下</a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    </div>
    <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    <li><a href="#">搜狐</a></li>
    <li><a href="#">腾讯</a></li>
    <li><a href="#">搜狗</a></li>
    <li><a href="#">360</a></li>
    <li class="hidden-lg"><a href="#">搜索音乐</a></li>
    </ul>
    @{
    if (Session["userid"] == null)
    {
    <ul class="nav navbar-nav navbar-right">
    <li>
    <form class="navbar-form navbar-right visible-lg" style="margin:0;padding:8px 0 0 0;" role="search">
    <div class="input-group">
    <input type="text" placeholder="搜索音乐..." class="form-control">
    <span class="input-group-btn">
    <button class="btn btn-default" type="button">
    Go
    </button>
    </span>
    </div><!-- /input-group -->
    </form>
    </li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">落叶随风落叶..<b class="caret"></b></a> 
    <ul class="dropdown-menu">
    <li><a href="#">jmeter</a></li>
    <li><a href="#">EJB</a></li>
    <li><a href="#">Jasper Report</a></li>
    <li class="divider"></li>
    <li><a href="#">分离的链接</a></li>
    <li class="divider"></li>
    <li><a href="#">另一个分离的链接</a></li>
    </ul>
    </li>
    <li><a href="#">退出</a></li>
    </ul>
    }
    else
    {
    <ul class="nav navbar-nav navbar-right">
    <li><a href="#">登录</a></li>
    <li><a href="#">注册</a></li>
    </ul>
    }
    } 
    </div>
    </div>
    </div>
    <div class="container" style="min-height:400px;">
    @RenderBody()
    </div>
    <footer class="footer" style="min-height:105px;text-align:center;vertical-align:bottom;">
    页脚
    </footer>
    </body>
    </html>
    

      

  • 相关阅读:
    $.data(elem, key, val) 和 elem.data(key, val)
    支付宝调起,应用签名失败,请联系商家
    关于load方法加载时间问题
    你学过的每一样东西,你遭受的每一次苦难,都会在你一生中的某个时候派上用场。 ——佩内洛普·菲兹杰拉德 《离岸》
    iOS视图生命周期总结(别人博客荡来的)
    闲言(诗三百三首)
    iOS 点击WebView中的链接,跳转指定控制器
    IOS 版本号大小比较
    iOS二维码,条形码扫描问题
    IOS使用个推遇到的坑
  • 原文地址:https://www.cnblogs.com/NuoYer/p/5378725.html
Copyright © 2011-2022 走看看