Bootstrap 导航元素(标签页)
【Bootstrap 导航元素】
1、基本的导航元素:标签导航。基于ul、li而来,给ul添加 class="nav nav-tabs" 即可。选中的li添加 class="active"即可。
<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">SVN</a></li>
<li><a href="#">iOS</a></li>
<li><a href="#">VB.Net</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">PHP</a></li>
</ul>
2、用 class .nav-pills 代替 .nav-tabs 即可应用胶囊样式
3、给li添加 class="disabled" 即可禁用链接。
4、使用标签切换内容。
1)每一个li需要添加 <a data-toggle="tab" href="#menu1">,其中href为内容div id
2)添加内容div
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
其中根div必须为 class="tab-content",内容项必须为 class="tab-pane".
<div class="container">
<h2>动态标签</h2>
<p><strong>提示:</strong> 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。</p>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">首页</a></li>
<li><a data-toggle="tab" href="#menu1">菜单 1</a></li>
<li><a data-toggle="tab" href="#menu2">菜单 2</a></li>
<li><a data-toggle="tab" href="#menu3">菜单 3</a></li>
</ul> <div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>首页</h3>
<p>菜鸟教程 —— 学的不仅是技术,更是梦想!!!</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>菜单 1</h3>
<p>这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>菜单 2</h3>
<p>这是菜单 2 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>菜单 3</h3>
<p>这是菜单 3 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。</p>
</div>
</div>
</div>
5、通过.tab('show')也能进行切换。
参考:
1、http://www.runoob.com/bootstrap/bootstrap-navigation-elements.html
2、http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html
Bootstrap 导航元素(标签页)的更多相关文章
- Bootstrap插件——(Tab)标签页
项目中用到了Bootstrap的(Tab)标签页插件,记录如下: 代码如下: <div class="tabbable"> <ul class="nav ...
- Bootstrap (导航、标签、面包屑导航)
导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head& ...
- jQuery菜单,导航与标签页
一:导航 网站导航栏是网站导航的第一层导航结构,我们可以使用HTML和jQuery来创建类似flash的动画效果 一:下拉式菜单 法一: <!DOCTYPE html PUBLIC " ...
- Bootstrap 标签页(Tab)插件
摘自: http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstr ...
- 第二百四十五节,Bootstrap标签页和工具提示插件
Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一.标签页选项卡 标签页也就是通常所说的选项卡功能 ...
- Bootstrap标签页(Tab)插件
标签页(Tab)在Bootstrap导航元素一章中简介过,通过结合一些data属性,您可以轻松地创建一些标签页界面.通过这个插件您可以把内容放置在标签页或胶囊式标签页甚至是下拉菜单标签页中. 用法 您 ...
- bootstrap 下 标签页跳转总结
最近遇到一个问题,是关于bootstrap中的标签页实现上的一些功能实现,现总结一下. 问题描述:点击其他标签页后,如何在点击搜索按钮后自动跳转到第一个标签页.如下图 通过对bootstrap框架里的 ...
- bootstrap-js(4)标签页
实例 标签页(Tab)在 Bootstrap 导航元素 一章中介绍过.通过结合一些 data 属性,您可以轻松地创建一个标签页界面. 通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜 ...
- Bootstrap-Plugin:标签页(Tab)插件
ylbtech-Bootstrap-Plugin:标签页(Tab)插件 1.返回顶部 1. Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstrap 导航元素 一章中介绍过.通 ...
随机推荐
- Suricata在ubuntu14.04环境下安装
简介 Suricata是一款高性能的网络IDS.IPS和网络安全监控引擎.它是由the Open Information Security Foundation开发,是一款开源的系统,现在的NIDS领 ...
- 理解 with递归调用 Sqlserver 树查询
--with用法 --可以这么理解 with SQL语句变量或者叫临时表名 as( SQL语句 ) select * from SQL语句变量或者叫临时表名 --递归调用 with CTE as( s ...
- 5.2_k-means案例分析
k-means案例分析 手写数字数据上K-Means聚类的演示 from sklearn.metrics import silhouette_score from sklearn.cluste ...
- 8.Appium的基本使用-1
1.Appium是什么?Appium是一个跨平台移动端自动化测试工具,可以便捷的为ios和Android平台创建自动化测试用例.模拟app内部各种操作,点击.滑动.文本输入等,手工操作的动作appiu ...
- leetcode984
public class Solution { private string M1(int A, int B) { StringBuilder sb = new StringBuilder(); ; ...
- Mysql 预查询处理 事务机制
预处理 PDO支持sql预处理功能,可以有效的防止sql注入的问题 例如: 以下操作会导致数据表中所有数据删除 $host = 'localhost'; $port = 3306; $dbname = ...
- 浅谈 REST 和 RESTFul API
RESTFul API的特点: 基于“资源”,数据也好.服务也好,在RESTFul设计里一切都是资源. 无状态.一次调用一般就会返回结果,所有的资源,都可以通过URI定位 URL中通常不出现动词,只有 ...
- MiniDao_1.6.4 版本发布,轻量级Java持久化框架,Hibernate项目辅助利器
MiniDao 简介及特征 MiniDao 是一款超轻量的JAVA持久层框架,具备Mybatis一样的SQL能力: 支持SQL分离.支持标签.支持注解.MiniDao产生的初衷是为了解决Hiberna ...
- linux系统基础入门
使用工具:源码管理,自动部署,web服务器(linux) linux系统基础入门 1.下载地址 2.本文介绍的是一个基于Ubuntu的开源操作系统 下载优麒麟 Ubuntu是一个广泛应用于个人电脑,云 ...
- vue.js 组件引用之初级 之二
1. template 标签也可以实现替换,这样可以省去script标签了 <!DOCTYPE html> <html lang="en"> <hea ...