Web Front-endBootstrap TutorialHow to add navigation components and tab components in Bootstrap? A brief analysis of usage
This article will take you to learn about the navigation and tab components in bootstrap, and introduce how to use the navigation component and tab component. I hope it will be helpful to everyone!
1 Navigation Basics
The navigation bar is a necessary function of the website system. In the past, it took a lot of effort to make a good navigation bar, but now it is available Bootstrap5 navigation, from now on, you can create a beautiful navigation bar with just a few moments of copy and paste. [Related recommendations: "bootstrap tutorial"]
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<div>
<ul>
<li>
<a class="nav-link href="#">首页</a>
</li>
<li>
<a href="#">文章</a>
</li>
<li>
<a href="#">图片</a>
</li>
<li>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
</li>
</ul>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
You can also make your code more concise
<nav class="nav"> <a class="nav-link" href="#">首页</a> <a class="nav-link" href="#">文章</a> <a class="nav-link" href="#">图片</a> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a> </nav>
This code The display is the same as above. As for the unavailable buttons inside, there is no need to put them in the menu unless it is for some special purpose (for example, it is available to members but not available to ordinary people).
Both writing methods have their own advantages;
- The first one is more organized, and it is clearer when there are other decorative elements in the navigation, such as icons, etc., and it is also You can change the link display method by writing the li style class. In some companies, employees' work performance will be evaluated based on the amount of code (I heard that many companies do this).
- The second one is more concise. What the second one can achieve can be achieved by the first one, but the reverse is not true. After all, the lite version has castrated some functions.
- I will use the second type for the following demonstrations. It will be no problem to switch to the first type for all demonstrations.
2 Common styles
2.1 Horizontal alignment
You can easily change the horizontal alignment of navigation using the flexible box general class. Navigation is aligned to the left by default, and you can easily change it to center or right.
- Use .justify-content-center to align in the center:
- Use .justify-content-end to align to the right:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<div>
<nav class="nav justify-content-center">
<a href="#">首页</a>
<a href="#">文章</a>
<a href="#">图片</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
</nav>
<nav class="nav justify-content-end">
<a href="#">首页</a>
<a href="#">文章</a>
<a href="#">图片</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
</nav>
</div>
<script src="bootstrap5/bootstrap.bundle.min.js" ></script>
</body>
</html>
You may also see that multiple navigations can be placed on a page.
2.2 Vertical Navigation
Change the navigation to vertical navigation by using the .flex-column generic class. If you only want stacking under specific viewports, use the responsive version (e.g. .flex-sm-column).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<div>
<nav class="nav flex-column">
<a href="#">首页</a>
<a href="#">文章</a>
<a href="#">图片</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
</nav>
<nav class="nav flex-sm-column">
<a href="#">首页</a>
<a href="#">文章</a>
<a href="#">图片</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">视频</a>
</nav>
</div>
<script ></script>
</body>
</html>
ps: This response is vertical when it is greater than the breakpoint, because vertical navigation is generally used for secondary navigation or in-page navigation. If the screen is too small, vertical navigation It takes up reading space, so the play is not needed. If you want to hide the horizontal navigation function when the screen is made smaller, the navigation toolbar in the next chapter will be introduced in detail.
2.3 Tab style
Use basic navigation and add .nav-tabs to generate an interface with paging tabs. Use the paging JavaScript plug-in in the "Tab Usage" section below to create switchable blocks. The tab style is very simple. If you want to implement specific functions, we will introduce it in detail later, and there is also detailed code later.
2.4 Capsules
Capsules are used the same as tabs, but use .nav-pills instead of nav-tabs:
<ul class="nav nav-pills">
2.5 Fill and align
.nav content has two classes for width expansion. Using .nav-fill will allocate space to the .nav-item content in proportion. Note that this takes up all the horizontal space, but not every navigation item will be the same width.
Please use .nav-justified to create equal-width elements. All horizontal space will be taken up by the navigation links, but unlike the .nav-fill above, each navigation item will be the same width.
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">文章</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">图片</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">只有会员可以观看的视频视频</a>
</li>
</ul>
<br><br>
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">文章</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">图片</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">只有会员可以观看的视频视频</a>
</li>
</ul>
You can compare the differences between the two alignments.
3 Further expansion of navigation components
3.1 Using flexible box utility classes
If you need responsive navigation changes, please use a series of flexible box common classes. These general classes provide more customization between breakpoints. In the example below, our navigation will be stacked below the small breakpoint and layout horizontally from the small breakpoint to fill all available width.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<br><br>
<div>
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
</div>
<script ></script>
</body>
</html>Display under different browser widths.
3.2 使用下拉列表
加入额外的HTML和下拉菜单JavaScript插件
带下拉列表的选项卡
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<div>
<br><br><br>
<ul class="nav nav-tabs">
<li>
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul>
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><hr></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
<li>
<a href="#">Link</a>
</li>
<li>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<script ></script>
</body>
</html>
带下拉列表的胶囊只需要将nav-tabs换成nav-pills
<ul class="nav nav-pills">
4 使用选项卡
4.1 普通选项卡
前面的选项卡只有样式，是不起作用的。其实bootstrap已经为我们写好js代码，他们都在bootstrap.bundle.min.js中了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<br><br>
<div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首页</button>
</li>
<li role="presentation">
<button id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">资料</button>
</li>
<li role="presentation">
<button id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">联系方式</button>
</li>
</ul>
<div id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h1 id="首页内容">首页内容</h1>
这里可以放文字、列表等一切页面元素
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<h1 id="个人资料">个人资料</h1>
这里可以放文字、列表等一切页面元素
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<h1 id="联系方式">联系方式</h1>
这里可以放文字、列表等一切页面元素
</div>
</div>
</div>
<script ></script>
</body>
</html>
4.2 胶囊选项卡
跟前面胶囊一样，只是换一个标签这么简单。
<ul class="nav nav-pills" id="myTab" role="tablist">
4.3 垂直胶囊选项卡
这个段代码把普通链接改成了按钮，其实也是一样的，看着貌似很复杂，其实只需要复制进去，修改一下你要的地方就好了。
需要注意的是，垂直标签的内容显示在右侧（当然也可以菜单在右边，内容在左边），所以在布局的时候跟前面不太一样。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
<title>导航演示</title>
</head>
<body>
<br><br>
<div>
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">首页</button>
<button id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">资料</button>
<button id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">信息</button>
</div>
<div id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<h1 id="首页内容">首页内容</h1>
这里可以放文字、列表等一切页面元素
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<h1 id="个人资料">个人资料</h1>
这里可以放文字、列表等一切页面元素
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<h1 id="联系方式">联系方式</h1>
这里可以放文字、列表等一切页面元素
</div>
</div>
</div>
</div>
<script ></script>
</body>
</html>
4.4 淡入淡出效果
要使选项卡或菜单淡入淡出，请将.fade加到每个.tab-pane分页中。第一个分页内容还必须具有.show以使初始内容可见。事实上上面已经用了淡入淡出效果，试着去掉tab-pane中的fade，看一下效果。
更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！
The above is the detailed content of How to add navigation components and tab components in Bootstrap? A brief analysis of usage. For more information, please follow other related articles on the PHP Chinese website!
10款好看又实用的Bootstrap后台管理系统模板（快来下载）Aug 06, 2021 pm 01:55 PM一个好的网站，不能只看外表，网站后台同样很重要。本篇文章给大家分享10款好看又实用的Bootstrap后台管理系统模板，可以帮助大家快速建立强大有美观的网站后台，欢迎下载使用！如果想要获取更多后端模板，请关注php中文网后端模板栏目！
bootstrap与jquery是什么关系Aug 01, 2022 pm 06:02 PMbootstrap与jquery的关系是：bootstrap是基于jquery结合了其他技术的前端框架。bootstrap用于快速开发Web应用程序和网站，jquery是一个兼容多浏览器的javascript库，bootstrap是基于HTML、CSS、JAVASCRIPT的。
7款实用响应式Bootstrap电商源码模板（快来下载）Aug 31, 2021 pm 02:13 PM好看又实用的Bootstrap电商源码模板可以提高建站效率，下面本文给大家分享7款实用响应式Bootstrap电商源码，均可免费下载，欢迎大家使用！更多电商源码模板，请关注php中文网电商源码栏目！
8款Bootstrap企业公司网站模板（源码免费下载）Aug 24, 2021 pm 04:35 PM好看又实用的企业公司网站模板可以提高您的建站效率，下面PHP中文网为大家分享8款Bootstrap企业公司网站模板，均可免费下载，欢迎大家使用！更多企业站源码模板，请关注php中文网企业站源码栏目！
bootstrap中sm是什么意思May 06, 2022 pm 06:35 PM在bootstrap中，sm是“小”的意思，是small的缩写；sm常用于表示栅格类“.col-sm-*”，是小屏幕设备类的意思，表示显示大小大于等于768px并且小于992px的屏幕设备，类似平板设备。
bootstrap modal 如何关闭Dec 07, 2020 am 09:41 AMbootstrap modal关闭的方法：1、连接好bootstrap的插件；2、给按钮绑定模态框事件；3、通过“ $('#myModal').modal('hide');”方法手动关闭模态框即可。
bootstrap默认字体大小是多少Aug 22, 2022 pm 04:34 PMbootstrap默认字体大小是“14px”；Bootstrap是一个基于HTML、CSS、JavaScript的开源框架，用于快速构建基于PC端和移动端设备的响应式web页面，并且默认的行高为“20px”，p元素行高为“10px”。
bootstrap是免费的吗Jun 21, 2022 pm 05:31 PMbootstrap是免费的；bootstrap是美国Twitter公司的设计师“Mark Otto”和“Jacob Thornton”合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，开发完成后在2011年8月就在GitHub上发布了，并且开源免费。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Dreamweaver CS6
Visual web development tools
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
