Bootstrap4 导航栏


目录

Bootstrap4 导航栏

动态选项卡

标准的导航栏

导航对齐方式

导航栏的组成

ul 元素中包含navbar-nav 类 表示导航栏中ul

li元素中包含nav-item类 表示导航栏中ul中li 的元素

li-> a 中class="nav-link”表示元素是连接

下拉菜单

垂直导航

垂直导航栏

不同颜色导航栏

品牌/Logo

导航栏的表单与按钮

导航栏使用下拉菜单

导航栏文本

固定导航栏

面包屑导航



简单的水平导航栏,可以在 <ul> 元素上添加 .nav类,在每个 <li> 选项上添加 .nav-item 类,在每个链接上添加 .nav-link 类:

.nav-tabs 类可以将导航转化为选项卡。

.nav-pills 类可以将导航项设置成胶囊形状。

.nav-justified 类可以设置导航项齐行等宽显示。

动态选项卡

如果你要设置选项卡是动态可切换的,可以在每个链接上添加 data-toggle="tab" 属性。 然后在每个选项对应的内容的上添加 .tab-pane类。

如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类:

<div class="container">
<h2>选项卡切换</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul> <!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>

标准的导航栏

nav元素中用 .navbar 类来创建一个标准的导航栏

导航对齐方式

.justify-content-center 类设置导航居中显示, .justify-content-end 类设置导航右对齐。

导航栏的组成

nav元素中包含  .navbar  导航栏垂直 、响应式的、 导航栏颜色、 导航栏适应 等类

nav元素中包含  ul

ul 元素中包含navbar-nav 类 表示导航栏中ul

li元素中包含nav-item类 表示导航栏中ul中li 的元素

结构如下:

nav -> a或者a->img 或者ul->->li->a等

li-> a 中class="nav-link”表示元素是连接

下拉菜单

.dropdown 类用来指定一个下拉菜单。

.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线;

.dropdown-header 类用于在下拉菜单中添加标题;

.disabled 类禁用下拉菜单;

.dropdown-menu 类后添加 .dropdown-menu-right 类 让下拉菜单右对齐

向上弹出的下拉菜单.dropup类:

垂直导航

.flex-column 类用于创建垂直导航:

垂直导航栏

删除 .navbar-expand-xl|lg|md|sm 类  变化为 ->垂直导航栏;

不同颜色导航栏

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark和 .bg-light类  创建不同颜色导航栏

品牌/Logo

.navbar-brand 类用于高亮显示品牌/Logo;

<a class="navbar-brand" href="#"> <img src="*.jpg" alt="Logo" style="width:40px;"> </a>

导航栏的表单与按钮

导航栏的表单 <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="submit">Search</button>
</form>
</nav>

导航栏使用下拉菜单

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

导航栏文本

使用 .navbar-text 类来设置导航栏上非链接文本,可以保证水平对齐,颜色与内边距一样。

  <span class="navbar-text">
Navbar text
</span>

固定导航栏

.fixed-top 类来实现导航栏的固定;

.fixed-bottom 类用于设置导航栏固定在底部;

面包屑导航

<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">Home</a>
<a class="breadcrumb-item" href="#">Library</a>
<a class="breadcrumb-item" href="#">Data</a>
<span class="breadcrumb-item active">Bootstrap</span>
</nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>

Bootstrap4 导航栏的更多相关文章

  1. 完美解决Bootstrap4 导航栏 fixed-top 后,锚点定位时遮挡问题

    利用锚点改变事件\(onhashchange\),使用jQuery的\(scrollTop\)向前滚回导航栏的高度(比如我的100个像素) HTML: <body onhashchange=&q ...

  2. Bootstrap4 导航栏元素居右

    Bootstrap 4正解: .ml-auto元素居右 .mr-auto元素居左 在某度上查了半小时还是没查出什么名堂,搜出来的方法大多都是Bootstrap3的,实测pull-right或navba ...

  3. vue项目1-pizza点餐系统1-利用bootstrap4制作导航栏

    初次接触Bootstrap,简单谈一下理解.bootstrap是一个简单有强悍的前端框架,它是一个开源项目.当我们需要一些样式等,可以了解bootstrap的相关class.标签名称等所代表的意思,然 ...

  4. 搭建自己的博客(七):使用bootstrap框架美化导航栏

    前面发现自己写css代码以及很多功能太麻烦,故希望在自己的博客中引入bootstrap框架,bootstrap是一个非常强大的前端框架,简单易学容易上手.附上官网地址:bootstrap官网 我使用的 ...

  5. 使用iframe实现导航栏在上面,下面的窗体刷新

    1.做一个导航栏,并设置跳转链接的<a>标签的name属性或id 此处演示name标签 <!-- 导航条 --> <nav id="navAjax" ...

  6. 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  7. SAP CRM 将组件整合至导航栏中

    到现在,我们已经可以让组件独立地显示.我们只是运行它.让它显示在Web UI中.让我们把组件整合进导航栏,使我们可以在正常登录Web UI时访问它. 步骤一: 为你的UI组件主窗体创建一个内向插件. ...

  8. ABP(现代ASP.NET样板开发框架)系列之22、ABP展现层——导航栏设置

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之22.ABP展现层——导航栏设置 ABP是“ASP.NET Boilerplate Project (ASP.NE ...

  9. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

随机推荐

  1. 哨兵2 NDVI

    shp从国外网站下载的,不是很准确了 数据:COPERNICUS/S2 交流合作请联系:ab000c@163.com

  2. redis 在 php 中的应用(Sorted-set篇)

    本文为我阅读了 redis参考手册 之后编写,注意 php_redis 和 redis-cli 的区别(主要是返回值类型和参数用法) Redis 有序集合和集合一样也是string类型元素的集合,且不 ...

  3. 搭建一个简单的Eureka程序

    Eureka集群主要有三个部分Eureka服务器,服务提供者,服务调用者 简单的来说就是服务提供者将服务注册到Eureka服务器,服务调用者对其服务进行查找调用. Eureka服务程序的搭建可参考官方 ...

  4. html5中视频播放问题总结

    html5中视频播放问题总结 文章 1.问题一 框架? 加个标签就OK! <video id="video1" src="/video1.mp4" con ...

  5. 【shell】shuf命令提取文件的随机行

    shuf命令可以随机提取一个文本文件的不同行,输出到文件或者标准输出中. shuf 用法: shuf [选项]... [文件] 或者: shuf -e [选项]... [参数]... 或者: shuf ...

  6. iOS进阶之如何进行 HTTP Mock(转载)

    这篇文章会对 OHHTTPStubs 源代码的分析,其实现原理是建立在 NSURLProtocol 的基础上的,对这部分内容不了解的读者,可以阅读这篇文章 iOS 开发中使用 NSURLProtoco ...

  7. jquery serializeArray()、serialize()增加数据

    转自:http://blog.csdn.net/csdnzhangtao5/article/details/52981541 serialize().serializeArray()方法都是jquer ...

  8. Tomcat笔记 #01# WEB应用管理工具简介

    索引 查看JVM以及SERVLET/接口的情况 动态管理WEB应用 Tomcat自带了一个基于网页的web应用管理工具,可以帮助我们监控&管理部署上去的WEB APP,特别方便!恰好之前碰到的 ...

  9. sdoi2018旧试题 证明

  10. rsync如何不指定密码文件

    平时用rsync做数据同步时,都是通过--password-file指定一个密码文件 这个密码文件权限要求比较高,一般是600,属主属组都是rsync命令执行者 如果是在脚本中执行rsync,比如定时 ...