Bootstrap4 导航栏navbar
导航栏一般放在页面的顶部。
我们可以使用 .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>
<br>
container-fluid遇container的区别
container 响应式
container-fluid 响应式一个宽度是百分百
container 类和container-fluid类的区别体现在是否有随视口宽度改变的margin存在。
container类所谓的自适应也是通过margin的改变来完成，container-fluid类的百分百宽度是指在固有的15px的padding前提下宽度总是当前视口的宽度。
<!-- 小屏幕上水平导航栏会切换为垂直的 -->
<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>
<br>
垂直导航栏
通过删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏:
不同颜色导航栏
可以使用以下类来创建不同颜色导航栏：.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)。
提示: 对于暗色背景需要设置文本颜色为浅色的，对于浅色背景需要设置文本颜色为深色的。
<div class="container">
<h3>不同颜色导航栏</h3>
<p>对于暗色背景需要设置文本颜色为浅色的，对于浅色背景需要设置文本颜色为深色的。</p>
</div>
<!-- 灰底黑字 -->
<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>
激活和禁用状态: 可以在 <a> 元素上添加 .active 类来高亮显示选中的选项。 .disabled 类用于设置该链接是不可点击的。
<div class="container-fluid">
<h3>品牌/Logo</h3>
<p>.navbar-brand 类用于高亮显示品牌/Logo:</p>
</div>
<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 类来设置图片自适应导航栏。
<a class="navbar-brand" href="#">
<img src="http://static.runoob.com/images/mix/bird.jpg" alt="logo" style="width:40px;">
</a>
navbar-toggler-icon
<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>
<br>
导航栏使用下拉
<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>
<br>
导航栏的表单与按钮
导航栏的表单 <form> 元素使用 class="form-inline" 类来排版输入框与按钮：
<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>
<br>
<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>
<br>
导航栏文本
使用 .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>
</nav>
<br>
<div class="container">
<h3>导航栏文本</h3>
<p>使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。</p>
</div>
固定导航栏
导航栏可以固定在头部或者底部。
我们使用 .navbar-fixed-top 类来实现导航栏的固定：
<body style="height:1500px">
<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>
.navbar-fixed-bottom 类用于设置导航栏固定在底部：
Bootstrap4 导航栏navbar相关推荐
- bootstrap4导航栏点击弹出表单_Bootstrap4从入门到精通
一.布局 0.课件 1.Bootstrap介绍_栅格系统 2.禁用响应式_响应式分界点 二.内容 3.排版_代码 4.图片_图片框 5.表格 三.公共样式 6.边框_浮动 7.颜色_Display显示 ...
- jQuery Mobile中导航栏navbar的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中导航栏navbar的data-*选项 //带有 data-role="nav ...
- Bootstrap导航栏navbar源码分析
1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平 先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...
- 导航栏(navbar) - bootStrap4常用CSS笔记
导航栏:navbar 导航栏容器可以包含以下几个常用组成: 1.品牌LOGO(.navbar-brand ) 2.导航菜单(.navbar-nav) 3.导航文本(.navbar-text) 4.折叠 ...
- Bootstrap4 导航栏元素居右
Bootstrap 4正解: .ml-auto元素居右 .mr-auto元素居左 在某度上查了半小时还是没查出什么名堂,搜出来的方法大多都是Bootstrap3的,实测pull-right或navba ...
- bootstrap4导航栏居右
.ml-auto 元素居右 .mr-auto 元素居左
- iOS 自定义导航栏 NavigationBar
自定义一个导航栏,包括左侧.右侧按钮,中间的title. 效果图: 代码: Swift版 // 创建一个导航栏 let navBar = UINavigationBar(frame: CGRectMa ...
- 【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式
掌握分寸感,找目标一致的人协同你,有效地调配资源,就可以提高效率. 写在前面的话:博主最近想要搭建自己的前端若依项目,因此此系列博客会做一些记录.我的项目gitee地址: https://gitee. ...
- ionic之如何隐藏navBar导航栏
最近开始参与新的项目的开发,关于前人留下来的一套Ionic+PhoneGap+Cordova的移动端开发的App,现在需要整改部分内容.也是头一次接触ionic,再加上Angular.js的一些语法了 ...
最新文章
- 视学AI，这群大学生做了个牛逼的项目！
- HDU - 3374 String Problem(最小表示法+最大表示法+KMP的next数组)
- [地球人]BlogEngine.NET[Appwo.com版]+采集器
- 找到一个比较熟悉Go语言的国内博客
- .jar文件如何打开_ofd发票文件如何打开
- python批量下载百度照片
- XUbuntu20.04开机logo定制，主题修改启动背景
- 基于灰色模型GM的管道腐蚀预测 - 附代码
- 惠普计算机电源怎么设置充电,HP笔记本的三芯电源怎么改二芯实现充电？
- 美团实习| 周记(二)
- 如何实现 1 小时内完成千万级数据运算
- 微信小程序之个人界面编写（2023.5.9版）
- 施工现场资料员15个常见问题处理流程！
- 「Python开发者」公号招内容编辑
- Outlook代收发其他邮箱（gmail, qqmail, aliyun, 163）
- 百分点科技位居中国数据治理解决方案市场第二
- 各行业商业数据分析报告网站汇总
- day02-HTML的基本标签
- vivox21支持html,【vivoX21评测】看完vivo X21这20个重点，我忍不住剁手_vivo X21_手机评测-中关村在线...
- html wap 转换,html移动端wap页面、图片多少宽度最合适？【转载】