BootStrap笔记-导航

运行截图如下：

源码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CN_TEST1</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--    bootstrap css核心文件--><link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
<!--    bootstrap使用到了jquery，需要提前引用--><script src="js/jquery-3.5.1.min.js"></script>
<!--    弹窗、提示、下拉菜单--><script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
<!--    bootstrap核心文件--><script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script></head>
<body><div class="container-fluid"><ul class="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><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li></ul><ul class="nav justify-content-center"><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><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li></ul><ul class="nav justify-content-end"><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><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li></ul><ul class="nav flex-column"><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><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li></ul><!--        左列的--><ul class="nav flex-column"><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><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li></ul><!--        选项卡--><ul class="nav nav-tabs"><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><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li></ul><!--        胶囊导航--><ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" 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><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li></ul><!--        胶囊下拉菜单--><ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" 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><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</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><!--        选项卡--><ul class="nav nav-tabs"><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><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</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><!--        动态选项卡--><ul class="nav nav-tabs"><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><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li><div class="tab-content"><div class="tab-pane active container" id="home">...</div><div class="tab-pane container" id="menu">...</div><div class="tab-pane container" id="menu2">...</div></div></ul><ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" 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><li class="nav-item"><a class="nav-link disabled" href="#">Link</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</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></div></body>
</html>

解释：

①在ul元素上添加nav类，li上添加nav-item就可以实现导航的功能；

②ul上添加nav类后还可以添加justify-content-center和justify-content-end，设置导航为居中和右对齐；

③flex-column用于创建垂直导航；

④ul上添加nav类后，再添加nav-tabs就是选项卡了，可以使用li中可以添加active作为选中。

BootStrap笔记-导航相关推荐

BootStrap笔记参考（全）-优极限
目录 BootStrap 1.主要内容 2.BootStrap的安装和使用 2.1BootStrap介绍 2.2BootStrap特点 2.3下载与使用 3.布局容器和栅格网格系统 3.1布局容器 3 ...
Bootstrap~多级导航（级联导航）的实现
在bootstrap官方来说,导航最多就是两级,两级以上是无法实现的,大叔找了一些第三方的资料,终于找到一个不错的插件,使用上和效果上都还不错,现在和大家分享一下插件地址:http://vsn4ik ...
Bootstrap 分页导航中的翻页组件
分页导航中的翻页一些简单的网站,比如博客或者杂志网站,希望用更少的标记和样式,来创建简单的"前一页"和"后一页"的翻页导航. Bootstrap中,只需为列表 ...
Bootstrap 分页导航的对齐方式
分页导航的对齐方式分页导航中,默认采用左对齐.如果希望页码居中对齐,就给 .pagination 的 <div> 追加 .pagination-centered 类,希望页码右对齐,就给 ...
Bootstrap 标签导航的布局
默认情况下,标签的位于顶部.为了灵活控制标签的位置,Bootstrap额外提供了 3 个类,分别是 .tabs-left..tabs-right..tabs-below,它们分别让标签位于左侧.右侧. ...
Bootstrap 禁用导航链接
在导航组件中,包括标签导航.胶囊式导航.导航列表,为某个 <li> 元素添加 .disabled 类,可以让链接变灰并失去鼠标悬停效果.如: <ul class="nav ...
bootstrap实现导航栏的响应式布局，当在小屏幕、手机屏幕浏览时自动折叠隐藏
<!DOCTYPE html> <html> <head> <title>bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐 ...
Bootstrap后台导航
Bootstrap后台导航 1.新建一个web项目admin,首先要把bootstrap这些库给导进来. 2.打开bootstrap中文网站,找到文档.点击起步里面有一个模版,把这个模版直接复制到我们 ...
【解决方法】点击bootstrap里导航条nav里的下拉菜单无反应)
[解决方法]点击bootstrap里导航条nav里的下拉菜单无反应 nav 导航条下拉菜单 nav 导航条下拉菜单只需要按顺序引入以下3个文件即可:

BootStrap笔记-导航

BootStrap笔记-导航相关推荐

最新文章

热门文章