本文概述

• Bootstrap 4 tab/pill

引导菜单
在大多数网页中都使用菜单。这些在无序列表< ul> 中定义。你必须将.list-inline类添加到< ul> 才能创建水平菜单。
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Case< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h3>Inline List< /h3> < ul class="list-inline"> < li>< a href="http://www.srcmini.com/#">Home< /a>< /li> < li>< a href="http://www.srcmini.com/#">Menu 1< /a>< /li> < li>< a href="http://www.srcmini.com/#">Menu 2< /a>< /li> < li>< a href="http://www.srcmini.com/#">Menu 3< /a>< /li> < /ul> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/16002R203-1.jpg">< /script> < /body> < /html>

引导选项卡
你可以使用< ul class =“ nav nav-tabs”> 创建基本的导航标签。你也可以使用< li class =“ active”> 标记当前页面。
以下示例指定如何创建一个简单的导航选项卡。
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Case< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h3>Tabs< /h3> < ul class="nav nav-tabs"> < li class="active">< a href="http://www.srcmini.com/#">Home< /a>< /li> < li>< a href="http://www.srcmini.com/#">Menu 1< /a>< /li> < li>< a href="http://www.srcmini.com/#">Menu 2< /a>< /li> < li>< a href="http://www.srcmini.com/#">Menu 3< /a>< /li> < /ul> < br>< /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/16002R203-1.jpg">< /script> < /body> < /html>

带有下拉菜单的引导选项卡
你也可以使用下拉菜单中的标签。
【bootstrap tab和pill用法】请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Case< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h3>Tabs With Dropdown Menu< /h3> < ul class="nav nav-tabs"> < li class="active">< a href="http://www.srcmini.com/#">Home< /a>< /li> < li class="dropdown"> < a class="dropdown-toggle" data-toggle="dropdown" href="http://www.srcmini.com/#">Menu 1 < span class="caret">< /span>< /a> < ul class="dropdown-menu"> < li>< a href="http://www.srcmini.com/#">Submenu 1-1< /a>< /li> < li>< a href="http://www.srcmini.com/#">Submenu 1-2< /a>< /li> < li>< a href="http://www.srcmini.com/#">Submenu 1-3< /a>< /li> < /ul> < /li> < li>< a href="http://www.srcmini.com/#">Menu 2< /a>< /li> < li>< a href="http://www.srcmini.com/#">Menu 3< /a>< /li> < /ul> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/16002R203-1.jpg">< /script> < /body> < /html>

Bootstrap可切换/动态选项卡
将data-toggle =“ tab”属性添加到每个链接。然后为每个选项卡添加一个具有唯一ID的.tab-pane类，并将它们包装在具有.tab-content类的< div> 元素内，以使标签可切换。
如果希望在单击时淡入淡出选项卡，请将.fade类添加到.tab-pane。
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Case< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Dynamic Tabs< /h2> < ul class="nav nav-tabs"> < li class="active">< a data-toggle="tab" href="http://www.srcmini.com/#home">Home< /a>< /li> < li>< a data-toggle="tab" href="http://www.srcmini.com/#menu1">Menu 1< /a>< /li> < li>< a data-toggle="tab" href="http://www.srcmini.com/#menu2">Menu 2< /a>< /li> < li>< a data-toggle="tab" href="http://www.srcmini.com/#menu3">Menu 3< /a>< /li> < /ul>< div class="tab-content"> < div id="home" class="tab-pane fade in active"> < h3>HOME< /h3> < p>A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.< /p> < /div> < div id="menu1" class="tab-pane fade"> < h3>Menu 1< /h3> < p>Java is a high level, robust, secured and object-oriented programming language.< /p> < /div> < div id="menu2" class="tab-pane fade"> < h3>Menu 2< /h3> < p>SQL is just a query language, it is not a database. To perform SQL queries, you need to install any database for example Oracle, MySQL, MongoDB, PostGre SQL, SQL Server, DB2 etc.< /p> < /div> < div id="menu3" class="tab-pane fade"> < h3>Menu 3< /h3> < p>The C Language is developed for creating system applications that direct interacts to the hardware devices such as drivers, kernals etc.< /p> < /div> < /div> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/16002R203-1.jpg">< /script> < /body> < /html>

引导药
你可以使用< ul class =“ nav nav-pills”> 创建药丸。你也可以使用< li class =“ active”> 标记当前页面。
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Case< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h3>Pills< /h3> < ul class="nav nav-pills"> < li class="active">< a href="http://www.srcmini.com/#">Home< /a>< /li> < li>< a href="http://www.srcmini.com/#">Menu 1< /a>< /li> < li>< a href="http://www.srcmini.com/#">Menu 2< /a>< /li> < li>< a href="http://www.srcmini.com/#">Menu 3< /a>< /li> < /ul> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/16002R203-1.jpg">< /script> < /body> < /html>

Bootstrap垂直药丸
添加.nav-stacked类以垂直显示药丸。
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Case< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h3>Vertical Pills< /h3> < ul class="nav nav-pills nav-stacked"> < li class="active">< a href="http://www.srcmini.com/#">Home< /a>< /li> < li>< a href="http://www.srcmini.com/#">Menu 1< /a>< /li> < li>< a href="http://www.srcmini.com/#">Menu 2< /a>< /li> < li>< a href="http://www.srcmini.com/#">Menu 3< /a>< /li> < /ul> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/16002R203-1.jpg">< /script> < /body> < /html>

带下拉菜单的自举药
你也可以将下拉菜单与药丸一起使用。
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Case< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h3>Pills With Dropdown Menu< /h3> < ul class="nav nav-pills nav-stacked"> < li class="active">< a href="http://www.srcmini.com/#">Home< /a>< /li> < li class="dropdown"> < a class="dropdown-toggle" data-toggle="dropdown" href="http://www.srcmini.com/#">Menu 1 < span class="caret">< /span>< /a> < ul class="dropdown-menu"> < li>< a href="http://www.srcmini.com/#">Submenu 1-1< /a>< /li> < li>< a href="http://www.srcmini.com/#">Submenu 1-2< /a>< /li> < li>< a href="http://www.srcmini.com/#">Submenu 1-3< /a>< /li> < /ul> < /li> < li>< a href="http://www.srcmini.com/#">Menu 2< /a>< /li> < li>< a href="http://www.srcmini.com/#">Menu 3< /a>< /li> < /ul> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/16002R203-1.jpg">< /script> < /body> < /html>

Bootstrap可切换动态药丸
它与可切换的动态标签相同，唯一的变化是data-toggle =“ data-toggle =” pill“属性。
请参阅以下示例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Case< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">< /head> < body>< div class="container"> < h2>Dynamic Pills< /h2> < ul class="nav nav-pills"> < li class="active">< a data-toggle="pill" href="http://www.srcmini.com/#home">Home< /a>< /li> < li>< a data-toggle="pill" href="http://www.srcmini.com/#menu1">Menu 1< /a>< /li> < li>< a data-toggle="pill" href="http://www.srcmini.com/#menu2">Menu 2< /a>< /li> < li>< a data-toggle="pill" href="http://www.srcmini.com/#menu3">Menu 3< /a>< /li> < /ul>< div class="tab-content"> < div id="home" class="tab-pane fade in active"> < h3>HOME< /h3> < p>A markup language is a programming language that is used make text more interactive and dynamic. It can turn a text into images, tables, links etc.< /p> < /div> < div id="menu1" class="tab-pane fade"> < h3>Menu 1< /h3> < p>Java is a high level, robust, secured and object-oriented programming language.< /p> < /div> < div id="menu2" class="tab-pane fade"> < h3>Menu 2< /h3> < p>SQL is just a query language, it is not a database. To perform SQL queries, you need to install any database for example Oracle, MySQL, MongoDB, PostGre SQL, SQL Server, DB2 etc.< /p> < /div> < div id="menu3" class="tab-pane fade"> < h3>Menu 3< /h3> < p>The C Language is developed for creating system applications that direct interacts to the hardware devices such as drivers, kernals etc.< /p> < /div> < /div> < /div> < script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">< /script> < script src="http://img.readke.com/220416/16002R203-1.jpg">< /script> < /body> < /html>

Bootstrap 4 tab/pill没有菜单
导航菜单是网站中使用的导航菜单。如果要在网站中创建简单的水平菜单，请将.nav类添加到< ul> 元素，然后为每个< li> 添加.nav-item并将.nav-link类添加到其链接。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/16002S204-17.jpg">< /script> < script src="http://img.readke.com/220416/16002U302-18.jpg">< /script> < /head> < body>< div class="container"> < h2>Nav Example< /h2> < p>Basic horizontal menu:< /p> < ul class="nav"> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link disabled" href="http://www.srcmini.com/#">Disabled< /a> < /li> < /ul> < /div>< /body> < /html>

对齐导航
默认情况下，导航左对齐。
对于居中对齐：添加.justify-content-center类以使导航居中对齐。
对于右对齐：添加.justify-content-end类以使导航右对齐。
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/16002S204-17.jpg">< /script> < script src="http://img.readke.com/220416/16002U302-18.jpg">< /script> < /head> < body>< div class="container"> < h2>Nav Example< /h2> < h4>Left-aligned nav (default):< /h4> < ul class="nav"> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link disabled" href="http://www.srcmini.com/#">Disabled< /a> < /li> < /ul>< h4>Centered nav:< /h4> < ul class="nav justify-content-center"> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link disabled" href="http://www.srcmini.com/#">Disabled< /a> < /li> < /ul> < h4>Right-aligned nav:< /h4> < ul class="nav justify-content-end"> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link disabled" href="http://www.srcmini.com/#">Disabled< /a> < /li> < /ul> < /div> < /body> < /html>

垂直导航
添加.flex-column类以创建垂直导航。
例

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/16002S204-17.jpg">< /script> < script src="http://img.readke.com/220416/16002U302-18.jpg">< /script> < /head> < body> < div class="container"> < h2>Vertical Nav Example< /h2> < p>Use the .flex-column class to create a vertical nav:< /p> < ul class="nav flex-column"> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link disabled" href="http://www.srcmini.com/#">Disabled< /a> < /li> < /ul> < /div> < /body> < /html>

合理的标签/药丸
对于合理的标签/药片，请添加.nav合理的类（等宽）：
例：

< !DOCTYPE html> < html lang="en"> < head> < title>Bootstrap Example< /title> < meta charset="utf-8"> < meta name="viewport" content="width=device-width, initial-scale=1"> < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> < script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script> < script src="http://img.readke.com/220416/16002S204-17.jpg">< /script> < script src="http://img.readke.com/220416/16002U302-18.jpg">< /script> < /head> < body> < div class="container"> < h2>Justified Tabs/Pills Example< /h2> < p>To justify tabs/pills (equal width), use the .nav-justified class:< /p> < ul class="nav nav-pills nav-justified"> < li class="nav-item"> < a class="nav-link active" href="http://www.srcmini.com/#">Active< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link disabled" href="http://www.srcmini.com/#">Disabled< /a> < /li> < /ul>< br> < h4>Justified tabs:< /h4> < ul class="nav nav-tabs nav-justified"> < li class="nav-item"> < a class="nav-link active" href="http://www.srcmini.com/#">Active< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">Link< /a> < /li> < li class="nav-item"> < a class="nav-link disabled" href="http://www.srcmini.com/#">Disabled< /a> < /li> < /ul> < /div> < /body> < /html>

推荐阅读

• 

  mysql实现排名 mysqlsql排名函数怎么用
• 

  大豆蛋白被是什么材料
• 

  金庸的武侠代表作品是什么
• 

  技嘉主板超频内存 技嘉Z390主板超频指南
• 

  2017年出的关于现代校园恋爱的动漫,有没有什么推荐？
• 

  新鲜桂花怎么处理和保存
• 

  为什么iPhone手机不踏足折叠屏市场？或许离不开这五点原因
• 

  SQL|SQL 导出表结构到Excel
• 

  N95 12月25日起赣榆区投放8万个医用防护口罩
• 

  什么条件下才能领取失业保险金?不领取还是领好?
• 

  出现菲斯曼锅炉显示0a故障怎么办,故障原因说明与3种解决方法
• 

  定金合同在什么情况下无效 有哪些情况定金合同无效
• 

  大金空调打台风后不制冷故障排除图解,主要还是受气温的影响
• 

  40岁自学go语言 零基础学go语言多久
• 

  办理加油卡有什么好处 加油卡怎么办理划算
• 

  这样搭配更具有视觉美观性 浅蓝色t恤配什么颜色裤子好看
• 

  夏天什么时候种白菜 什么时候种白菜
• 

  Win11如何禁用资源管理器历史搜索？Win11禁用资源管理器历史搜索的方法
• 

  特仑苏纯牛奶多少钱一瓶 「特仑苏纯牛奶两种包装」
• 

  三菱空调定时闪烁不制冷是什么原因,辅助加热

• bootstrap collapse用法
• bootstrap下拉dropdown
• bootstrap列表组
• bootstrap进度条
• bootstrap轮播组件
• bootstrap glyphicon用法
• bootstrap图像image
• bootstrap pager用法
• bootstrap分页pagination