本文概述

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

推荐阅读

• 

  蒸米糕的制作方法和过程 视频 蒸米糕的制作方法
• 

  诗赋颂终南|诗赋颂终南 笔墨写太平 用这样方式表达对秦岭的厚爱
• 

  精华液的正确使用顺序
• 

  对2018全国最幸福的城市和县级城市评选结果你怎么看？
• 

  王者荣耀s18赛季进入末期,官方公布了各个段位的玩家分布,你能从中发现哪些内容？
• 

  刑事过失损坏电力设备案的公安立案追诉标准是如何规定
• 

  mongodb聚合查询索引性能分析 mongodb聚集查询？
• 

  佳能相机是全画幅吗 佳能全画幅怎么样
• 

  观赏鱼如何养水质好 观赏鱼如何养水
• 

  如何在思科设备上搭建FTP服务器？ 思科ftp服务器怎么搭建
• 

  python类中函数变量 python函数变量类型
• 

  绿萝生小黑苍蝇是什么虫
• 

  iqoo|2000-4000元价位选什么手机比较好？
• 

  最有名的钻戒是哪个品牌 钻戒哪个牌子好
• 

  如何拆下戴尔服务器的面板？ 戴尔服务器面板怎么拆下来
• 

  什么型号的cpu好 cpu哪个最好
• 

  毛豆有哪些功效 毛豆的营养价值是什么
• 

  拼多多助力代刷为什么流量起不来 拼多多助力如何代刷
• 

  关于win10电脑无法新建文件夹怎样解决
• 

  本文教你如何取消电脑开机密码

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