bootstrap-导航条反色的导航条

说明

通过添加 .navbar-inverse 类可以改变导航条的外观

示例

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!--[if lt IE 9]><script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script><script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--></head><body><nav class="navbar navbar-inverse navbar-static-top"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><!-- Include all compiled plugins (below), or include individual files as needed --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script></body>
</html>

输出

转载于:https://blog.51cto.com/suyanzhu/1897980

bootstrap-导航条反色的导航条相关推荐

Bootstrap 反色导航条
反色导航条只需在 .navbar 类后面追加 .navbar-inverse 类,就能创建出反色效果导航条,即黑底白字的导航条.如: <div class="navbar navba ...
Bootstrap 学习之（十）------ 导航与导航条
导航 Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的.改变修饰类可以改变样式. 标签页注意 .nav-tabs 类依赖 .nav 基类. <span style= ...
OpenCV学习笔记：反色显示图片、鼠标事件、键盘事件和窗口滑动条操作
环境CentOS7 g++ (GCC) 4.8.5 20150623 (Red Hat 4.8.5-16) $ pkg-config --modversion opencv 2.4.13 参照< ...
iOS小技能：自定义导航栏，设置全局导航条外观。（iOS15适配）
文章目录前言 I 自定义导航栏 1.1 自定义导航条 1.2 设置全局导航条按钮主题 1.3 设置导航条渐变颜色 1.4 ` 拦截push` II 相关代码 see also 前言需求:同一个模块 ...
bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠
分页: 分页功能是当遇到数据很多时,如果都放到一个页面上,那么找起来很不方便,而且不利于性能.此时采用分页功能就能很好的优化用户体验,可是如果自己开发分页功能,那么就会影响开发效率,bootstrap ...
bootstrap实战--微金所项目(导航栏)
导航栏实现一.导航栏展示二.导航栏实现思路导航栏在不同的屏幕大小下呈现不同的样式,移动端下使用手风琴菜单(有现成的代码),在sm屏幕下,除了微金所图标和个人中心外,其余都不可见. 三.相关代码 ...
Android 色色的进度条实现可以如此简单
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 转载请标明出处: http://blog.csdn.net/lmj623565791/article/details/43371 ...
html怎么让导航栏背景透明,Swift - 导航栏背景全透明效果的实现（沉浸式效果）...
由于导航栏背景透明,那么整个视图的背景便会占据全部的可视区域,从而让用户有一种沉浸式的体验.下面通过样例演示如何实现这个效果. 1,实现原理 (1)如果想让导航栏(navigationBar)透明,只 ...
【loj#2524】【bzoj5303】 [Haoi2018]反色游戏（圆方树）
题目传送门:loj bzoj 题意中的游戏方案可以转化为一个异或方程组的解,将边作为变量,点作为方程,因此若方程有解,方程的解的方案数就是2的自由元个数次方.我们观察一下方程,就可以发现自由元数量=边 ...

bootstrap-导航条反色的导航条

bootstrap-导航条反色的导航条相关推荐

最新文章

热门文章