<!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>

　　

Bootstrap--响应式导航条布局的更多相关文章

  1. bootstrap 响应式导航条模板（含下拉菜单，弹出框）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  3. CSS3+Js制作的一款响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...

  4. Bootstrap响应式导航

    <nav class="navbar navbar-default" role="navigation"> <div class=" ...

  5. Bootstrap之响应式导航栏

    代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8 ...

  6. 【温故知新】——Bootstrap响应式知识点复习

    前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 开发工具 1.记事本,Editplus,... ... 2.Sublime,Dreamweaver 3.Webstorm = ...

  7. 第二百五十节，Bootstrap项目实战--响应式导航

    Bootstrap项目实战--响应式导航 学习要点: 1.响应式导航 一．响应式导航 基本导航组件+响应式 第一步,声明导航区域,设置导航默认样式,设置导航条固定在顶部navbar样式class类,写 ...

  8. Bootstrap学习笔记（8）--响应式导航栏

    说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...

  9. bootstrap响应式网页设计的9条基本原则！

    bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...

随机推荐

  1. 用nginx搭建简单的文件下载服务器

    server {      listen       80;        #端口      server_name  localhost;   #服务名      charset utf-8; # ...

  2. python操作mongo脚本

    #!/usr/bin/python# -*- coding: utf-8 -*- import sysimport osimport jsonfrom pymongo import MongoClie ...

  3. bzoj千题计划160：bzoj2599: [IOI2011]Race

    http://www.lydsy.com/JudgeOnline/problem.php?id=2599 点分治 mi[i] 记录边权和为i时的最少边数 先更新答案,再更新mi数组,换根时清空mi # ...

  4. Nginx模块Lua-Nginx-Module学习笔记（一）Nginx Lua API 接口详解

    源码地址:https://github.com/Tinywan/Lua-Nginx-Redis 一.介绍 各种* _by_lua,* _by_lua_block和* _by_lua_file配置指令用 ...

  5. ZeroMQ API（八） 异常&属性

    1.错误处理 1.1 zmq_errno() 1.1.1 名称 zmq_errno - 为调用线程检索errno的值 1.1.2 概要 int zmq_errno(void); 1.1.3 描述 zm ...

  6. 美轮美奂！9款设计独特的jQuery/CSS3全新应用插件（下拉菜单、动画、图表、导航等）

    今天要为大家分享9款设计非常独特的jQuery/CSS3全新应用插件,插件包含菜单.jQuery焦点图.jQuery表单.jQuery图片特效等.下面大家一起来看看吧. 1.jQuery水晶样式下拉导 ...

  7. java与Excel (.xls文件) ---使用JXL创建,增添表格文件

    由于一些原因要搞一下excel文件,个人感觉poi太难,所以用了JXL(感觉比较简单). 1.添加外部归档 jxl.jar 2. /** 生成的xls文件第一次需要手动选择EXCEL打开* * */ ...

  8. 2016-2017-20155329 《Java程序设计》第5周学习总结

    学号 2016-2017-20155329 <Java程序设计>第5周学习总结 教材学习内容总结 Java中所有错误都会被打包为对象,运用try.catch,可以在错误发生时显示友好的错误 ...

  9. shell if判断中常用的a-z表达式含义

    shell if判断中常用的a-z表达式含义 可通过在在linux中man test命令查看下列参数的详细用法   [ -a FILE ] 如果 FILE 存在则为真. [ -b FILE ] 如果 ...

  10. 【codeforces】【比赛题解】#931 CF Round #468 (Div. 2)

    因为太迟了,所以没去打. 后面打了Virtual Contest,没想到拿了个rank 3,如果E题更快还能再高,也是没什么想法. [A]Friends Meeting 题意: 在数轴上有两个整点\( ...