basic tab based Navigation
basic pills based Navigation
<div class="container"> <div class="row"> <!-- 横向TAB导航 --> <div class="col-lg-6"> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- 横向pill导航 --> <div class="col-lg-6"> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div>
Stacked or vertical tabs
Stacked or vertical pills
<div class="container"> <div class="row"> <!-- 垂直TAB导航 --> <div class="col-lg-6"> <ul class="nav nav-tabs nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> <!-- 垂直pill导航 --> <div class="col-lg-6"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Tutorials</a></li> <li><a href="#">Practice Editor </a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div>
Tab based Dropdowns
Pills based Dropdowns
<div class="container"> <div class="row"> <!-- Tab based Dropdowns --> <div class="col-lg-6"> <ul class="nav nav-tabs"> <!-- TAB1 --> <li class="active"><a href="#">Home</a></li> <!-- TAB2 --> <li><a href="#">About</a></li> <!-- TAB3 --> <!-- 封装一个下拉菜单 --> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a> <!-- 封装下拉项 ,pull-right指定下拉框靠左对齐--> <ul class="dropdown-menu pull-left"> <li><a href="#">Twitter Bootstrap</a></li> <li><a href="#">Google Plus API</a></li> <li><a href="#">HTML5</a></li> <!-- 分割线 --> <li class="divider"></li> <li><a href="#">Examples</a></li> </ul> </li> <!-- TAB4 --> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret"></b></a> <!-- 下拉框靠右对齐 --> <ul class="dropdown-menu pull-right"> <li><a href="#">PHP</a></li> <li><a href="#">MySQL</a></li> <li><a href="#">PostgreSQL</a></li> <li class="divider"></li> <li><a href="#">Live Demos</a></li> </ul> </li> </ul> </div> <!-- Pills based Dropdowns --> <div class="col-lg-6"> <ul class="nav nav-pills"> <!-- TAB1 --> <li class="active"><a href="#">Home</a></li> <!-- TAB2 --> <li><a href="#">About</a></li> <!-- TAB3 --> <!-- 封装一个下拉菜单 --> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">FrontEnd<b class="caret"></b></a> <!-- 封装下拉项 --> <ul class="dropdown-menu pull-left"> <li><a href="#">Twitter Bootstrap</a></li> <li><a href="#">Google Plus API</a></li> <li><a href="#">HTML5</a></li> <!-- 分割线 --> <li class="divider"></li> <li><a href="#">Examples</a></li> </ul> </li> <!-- TAB4 --> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">BackEnd<b class="caret"></b></a> <ul class="dropdown-menu pull-right"> <li><a href="#">PHP</a></li> <li><a href="#">MySQL</a></li> <li><a href="#">PostgreSQL</a></li> <li class="divider"></li> <li><a href="#">Live Demos</a></li> </ul> </li> </ul> </div> </div> </div>
Using nav list for stacked navigation with optional headers
垂直导航加Header进行分组
<div class="container"> <div class="row"> <div class="col-lg-6"> <!-- 使用nav-list显示导航 --> <ul class="nav nav-list"> <!-- 为一组元素添加Header,分组 --> <li class="nav-header"><b>First Header</b></li> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li><a href="#">Applications</a></li> <!-- 为一组元素添加Header,分组 --> <li class="nav-header"><b>Second Header</b></li> <li><a href="#">Profile</a></li> <li><a href="#">Settings</a></li> <li><a href="#">Help</a></li> </ul> </div> </div> </div>
Using nav list for stacked navigation with icons
垂直导航列表加图标
<div class="container"> <div class="row"> <div class="col-lg-6"> <!-- 使用nav-list显示导航 --> <ul class="nav nav-list"> <!-- 为一组元素添加Header,分组 --> <li class="nav-header"><b>First Header</b></li> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li> <li><a href="#"><span class="glyphicon glyphicon-book"></span> Library</a></li> <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Applications</a></li> <!-- 为一组元素添加Header,分组 --> <li class="nav-header"><b>Second Header</b></li> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Profile</a></li> <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li> <li><a href="#"><span class="glyphicon glyphicon-star-empty"></span> Help</a></li> </ul> </div> </div> </div>
相关推荐
Bootstrap 3 是一个广泛使用的前端开发框架,专为创建响应式和移动设备优先的网站而设计。...通过下载并研究Bootstrap-3-Tutorial-33---Nav-Pills-master文件,你可以深入了解实际的代码实现,并动手实践以加深理解。
1、通过 data 属性:您需要添加 data-toggle=”tab” 或 data-toggle=”pill” 到锚文本链接中添加 nav 和 nav-tabs 类到 ul 中,将会应用 Bootstrap 标签样式,添加 nav 和 nav-pills 类到 ul 中,将会应用 ...
如果希望标签页看起来更像胶囊按钮,可以使用`.nav-pills`类替换`.nav-tabs`类: ```html <ul class="nav nav-pills"> <li class="active"><a href="#html5" data-toggle="tab">HTML5</a></li> <!-- 其他标签项 -...
1. `.nav` 类:这是一个导航栏容器,可以是`.nav-tabs` 或 `.nav-pills`,前者用于选项卡样式,后者用于药丸样式。 2. `.nav-item` 类:每个选项卡都包裹在这个类中。 3. `.nav-link` 类:每个选项卡的链接元素,...
在Bootstrap Ace模板中,我们可以看到如何配置和使用Bootstrap的Nav Pills或Nav Tabs类来创建tab页,同时保持界面的整洁和一致性。在这个目录下,可能包含有多个HTML文件,每个文件代表一个tab页,通过JavaScript...
1. **Bootstrap导航系统**:Bootstrap提供了多种导航组件,如导航条(Navbar)、 Pills 和 Tabs,它们可以帮助用户在多个页面间轻松切换。例如,Navbar可以固定在顶部,展示网站的主要链接,当点击链接时,页面会...
- **导航**:包括导航条(navbar)、面包屑导航(breadcrumb)、页脚(footer)、标签页(tabs)和 Pills(导航项)等,提供了多种导航方式。 - **表单**:Bootstrap提供了预设样式的表单元素,如输入框、选择器、...
Bootstrap的标签页(Tab)插件是网页设计中常用的一种交互元素,它允许用户在多个内容区域之间切换,而无需重新加载整个页面。这个插件提供了多种样式和功能,包括传统的标签样式和胶囊式样式,甚至还可以将标签页...
`.nav-tabs`将导航项转换为带有下划线的标签页样式,而`.nav-stacked`则使这些标签页垂直排列。通过添加`.nav-pills`类,也可以将它们转换为无下划线的药丸样式。 **4. 折叠菜单实现** Bootstrap提供了`.collapse`...
Bootstrap提供了一套完整的导航组件,包括导航栏(navbar)、标签页(tabs)和胶囊式标签页(pills)等。 - **应用场景**: - 网站顶部的主要导航菜单。 - 内容页面中的标签式切换导航。 - **实现方式**: - ...
- 它有多种变体,如默认、inverse(深色背景)、pills(药丸样式)和tabs(标签页样式)。 2. **下拉菜单(Dropdowns)**: - 下拉菜单是导航条中的常见元素,允许在一个单一的菜单项下展示多个链接或操作。 - ...
3. **堆叠式导航(nav nav-pills nav-stacked)** 当空间有限时,可以使用堆叠式导航,将水平排列的选项卡变为垂直堆叠。只需在`.nav-pills`后添加`.nav-stacked`类。例如: ```html <ul class="nav nav-pills nav...
对于折角效果,使用`.nav-pills`类代替默认的`.nav-tabs`类。每个列表项内部,使用`<a>`标签来定义链接,并添加`.active`类以激活初始显示的内容。 ```html <ul class="nav nav-pills"> <li class="nav-item"> ...
Bootstrap提供了多种导航组件,如导航条(Navbar)、面包屑(Breadcrumbs)、标签页(Tabs)和 pills。这些组件都包含预定义的样式和交互效果,只需要添加相应的类即可。例如,创建一个基础的导航条,可以使用`....
1. **导航**:Bootstrap的导航系统包括导航栏(navbar)、面包屑导航(breadcrumb)、分页(pagination)、标签页(tabs)和 pills 等,它们都有不同的设计和交互方式,适应不同场景的需求。 2. **栅格系统**:...
4. **导航组件**:BootStrap的导航组件包括导航栏(Navbar)、面包屑(Breadcrumbs)、 pills 和 tabs。这些组件可以方便地创建各种导航形式,适应不同类型的网站需求。 5. **按钮和按钮组**:学习如何创建不同样式...