bootstrap tab和pill用法

本文概述

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

    推荐阅读