Bootstrap 导航栏
一、Bootstrap 导航栏
1.1 基本导航栏
导航栏一般放在页面的顶部。
我们可以使用 .navbar 类来创建一个标准的导航栏,后面紧跟: .navbar-expand-xl|lg|md|sm类来创建响应式的导航栏 (大屏幕水平铺开,小屏幕垂直堆叠)。
导航栏上的选项可以使用<ul>元素并添加 class="navbar-nav"类。 然后在 <li> 元素上添加 .nav-item 类, <a> 元素上使用 .nav-link 类:
<nav class="navbar navbar-expand-sm bg-light"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">Link 1</a></li><li class="nav-item"><a class="nav-link" href="#">Link 2</a></li><li class="nav-item"><a class="nav-link" href="#">Link 3</a></li></ul>
</nav>
1.2 垂直导航栏
<nav class="navbar bg-light"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">Link 1</a></li><li class="nav-item"><a class="nav-link" href="#">Link 2</a></li><li class="nav-item"><a class="nav-link" href="#">Link 3</a></li></ul>
</nav>
1.3 不同颜色导航栏
<nav class="navbar navbar-expand-sm bg-light navbar-light"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</nav><nav class="navbar navbar-expand-sm bg-dark navbar-dark"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</nav><nav class="navbar navbar-expand-sm bg-primary navbar-dark"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</nav><nav class="navbar navbar-expand-sm bg-success navbar-dark"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</nav><nav class="navbar navbar-expand-sm bg-info navbar-dark"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</nav><nav class="navbar navbar-expand-sm bg-warning navbar-dark"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</nav><nav class="navbar navbar-expand-sm bg-danger navbar-dark"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</nav><nav class="navbar navbar-expand-sm bg-secondary navbar-dark"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li></ul>
</nav>
1.4 品牌/Logo
.navbar-brand 类用于高亮显示品牌/Logo:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"><!-- Brand/logo --><a class="navbar-brand" href="#">Logo</a><!-- Links --><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">Link 1</a></li><li class="nav-item"><a class="nav-link" href="#">Link 2</a></li><li class="nav-item"><a class="nav-link" href="#">Link 3</a></li></ul>
</nav>
如果使用图片,可以使用 .navbar-brand 类来设置图片自适应导航栏。
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"><!-- Brand/logo --><a class="navbar-brand" href="#"><img src="https://static.runoob.com/images/mix/bird.jpg" alt="logo" style="width:40px;"></a><!-- Links --><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">Link 1</a></li><li class="nav-item"><a class="nav-link" href="#">Link 2</a></li><li class="nav-item"><a class="nav-link" href="#">Link 3</a></li></ul>
</nav>
1.5 折叠导航栏
通常,小屏幕上我们都会折叠导航栏,通过点击来显示导航选项。
要创建折叠导航栏,可以在按钮上添加 class=“navbar-toggler”, data-toggle=“collapse” 与 data-target="#thetarget" 类。然后在设置了 class=“collapse navbar-collapse” 类的 div 上包裹导航内容(链接), div 元素上的 id 匹配按钮 data-target 的上指定的 id:
<nav class="navbar navbar-expand-md bg-dark navbar-dark"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="collapsibleNavbar"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li> </ul></div>
</nav>
1.6 导航栏使用下拉菜单
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"><!-- Brand --><a class="navbar-brand" href="#">Logo</a><!-- Links --><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">Link 1</a></li><li class="nav-item"><a class="nav-link" href="#">Link 2</a></li><!-- Dropdown --><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Dropdown link</a><div class="dropdown-menu"><a class="dropdown-item" href="#">Link 1</a><a class="dropdown-item" href="#">Link 2</a><a class="dropdown-item" href="#">Link 3</a></div></li></ul>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"><form class="form-inline"><input class="form-control" type="text" placeholder="Search"><button class="btn btn-success" type="button">Search</button></form>
</nav>
你也可以使用其他的输入框类,如 .input-group-addon 类用于在输入框前添加小标签。
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"><form class="form-inline"><div class="input-group"><span class="input-group-addon">@</span><input type="text" class="form-control" placeholder="Username"></div> </form>
</nav>
1.8 导航栏文本
使用 .navbar-text 类来设置导航栏上非链接文本,可以保证水平对齐,颜色与内边距一样。
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"><!-- Links --><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">Link 1</a></li><li class="nav-item"><a class="nav-link" href="#">Link 2</a></li></ul><!-- Navbar text--><span class="navbar-text">Navbar text</span>
1.9 固定导航栏
导航栏可以固定在头部或者底部。
我们使用 .fixed-top 类来实现导航栏的固定:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"><a class="navbar-brand" href="#">Logo</a><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li></ul>
</nav><div class="container-fluid" style="margin-top:80px"><h3>固定导航栏</h3><p>导航栏可以固定在头部或者底部。</p><h1>滚动页面查看效果。</h1>
</div>
.fixed-bottom 类用于设置导航栏固定在底部:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom"><a class="navbar-brand" href="#">Logo</a><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link</a></li><li class="nav-item"><a class="nav-link" href="javascript:void(0)">Link</a></li></ul>
</nav><div class="container-fluid"><h3>底部固定导航栏</h3><p>导航栏可以固定在头部或者底部。</p><h1>滚动页面查看效果。</h1>
</div>
Bootstrap 导航栏相关推荐
- BootStrap导航栏的使用
默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...
- Html 5/CSS 的学习(二) —— Bootstrap 导航栏
参考 Bootstrap 导航栏 0. 导航栏类别 (1)默认导航栏:class="navbar navbar-default": (2)响应式导航栏:要折叠的内容必须包裹在cla ...
- Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
- css设置导航栏背景颜色,更改bootstrap导航栏背景颜色和字体颜色
3 个答案: 答案 0 :(得分:46) 我使用以下CSS成功设置了Bootstrap导航栏的样式.你也没有在CSS中定义任何字体,这就是字体没有改变的原因.可以在here找到使用此CSS的网站. . ...
- Bootstrap导航栏始终固定在页面顶部
Bootstrap导航栏始终在页面顶部 引入文件,这是需要自己去官网下载的 <link rel="stylesheet" type="text/css" ...
- 修改bootstrap导航栏样式(颜色,高)
提示:记录bootstrap导航栏样式(颜色,高)的修改 文章目录 前言 一.bootstrap导航栏样式 (颜色,高) 的修改 前言 在写自适应网页时想使用bootstrap实现,但与原稿的有一些差 ...
- 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...
- Bootstrap导航栏navbar源码分析
1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...
- Bootstrap导航栏
导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...
- Bootstrap导航栏注释
>Bootstrap官方文档里实现了一个导航栏: 添加了注释,帮助以后理解: <!--整体灰色横条--><!--navbar-default,默认是灰色: navbar-inv ...
最新文章
- android 之自定义Adapter的用法
- Java EE开发三剑客现状及发展浅析
- 【Linux】Linux crontab 命令详解
- java扫描指定package注解_java随笔-扫描使用指定注解的类与方法
- apache camel_令人印象深刻的第一个Apache Camel版本
- 小米8青春版超级夜景安排上了 这个样张我是服气的!
- 真正的PHP多线程(绝非fork或者用http再开进程)
- codeforces-984D——XOR-pyramid(DP)
- C#操作xml SelectNodes,SelectSingleNode总是返回NULL
- Linux SHELL 命令入门题目(一)
- cmder的下载安装
- Oracle客户端安装简易教程
- 拼多多网站的服务器多大,拼多多打不开网页怎么回事
- python面板数据模型_面板数据模型选择问题
- ajax怎么回调函数,ajax使用回调函数的例子(原生代码和jquery代码)
- Flashpaper序列号
- Basic Blocks
- java网络文章博客抓取系统_java 后端博客系统文章系统——No5
- Flutter 数据持久化
- 【Xshell免费版,不用去找破解(ftp也一样)】