文档章节

标签式导航

奋斗的小芋头
 奋斗的小芋头
发布于 2016/11/17 19:22
字数 253
阅读 6
收藏 0

1.标签式导航

在<ul>无序列表中添加 .nav nav-tabs  第一个<li>默认是选中状态

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">house1</a></li>
    <li><a href="#">house2</a></li>
</ul>

2.设置标签页对应的内容随标签的切换而更改

1.在<li>中加入  data-toggle="tab"      href="#home"   href中存放对应tab的ID

2.下面插入一个带有 .tab-contant的 div 

3.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 标签页与胶囊式标签页</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
        <script src="js/jquery-3.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#house1">house1</a></li>
    <li><a data-toggle="tab" href="#house2">house2</a></li>
</ul>

<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <h3>home页</h3>
    </div>
    <div id="house1" class="tab-pane fade ">
        <h3>house1页</h3>
    </div>
    <div id="house2" class="tab-pane fade ">
        <h3>house2页</h3>
    </div>
</div>

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">house1</a></li>
    <li><a href="#">house2</a></li>
</ul>
</body>
</html>

 

© 著作权归作者所有

上一篇: Angular笔记1
下一篇: 模态框
奋斗的小芋头
粉丝 1
博文 161
码字总数 129345
作品 0
大连
私信 提问
Bootstrap 导航元素

本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类.nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class,可以在不同的样式间...

wybo521
2016/01/27
32
0
bootstrap3教程

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态...

harries
2015/09/24
268
0
WordPress 安卓应用 4.1 版本发布

6月中旬,WordPress发布了WordPress for Android 4.1版本,该版本重新设计了界面,告别了传统的汉堡按钮式导航菜单,换成了4个标签页进行导航,更加方便易用。目前该版本已经可以从Google市场...

oschina
2015/07/03
1K
4
Bootstrap学习笔记(三)

13.缩略图 :圆角的外边框 标题字幕样式 image.png 13.导航 :标签页基类(ul加) 普通标签页,胶囊式标签页,纵向(ul加) 标签呈现出同等宽度(ul加) 显示的是哪个标签页内容(li加) image....

Mr_欢先生
2017/11/03
0
0
Bootstrap 响应式项目分享一

网页链接地址:http://chem960.vicp.cc:9128 该页面中主要用到的有 1. 全局 CSS 样式 -- 栅格系统 2. 全局 CSS 样式 -- 按钮 3. 全局 CSS 样式 -- 辅助类 4. 组件 -- 按钮式下拉菜单 5. 组件...

Neuro_annie
2017/12/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
10分钟前
0
0
说好不哭!数据可视化深度干货,前端开发下一个涨薪点在这里~

随着互联网在各行各业的影响不断深入,数据规模越来越大,各企业也越来越重视数据的价值。作为一家专业的数据智能公司,个推从消息推送服务起家,经过多年的持续耕耘,积累沉淀了海量数据,在...

个推
12分钟前
2
0
第三方支付-返回与回调注意事项

不管是支付宝,微信,还是其它第三方支付,第四方支付,支付机构服务商只要涉及到钱的交易都要进行如下校验,全部成功了才视为成功订单 1.http请求是否成功 2.校验商户号 3.校验订单号及状态...

Shingfi
14分钟前
1
0
简述Java内存分配和回收策略以及Minor GC 和 Major GC(Full GC)

内存分配: 1. 栈区:栈可分为Java虚拟机和本地方法栈 2. 堆区:堆被所有线程共享,在虚拟机启动时创建,是唯一的目的是存放对象实例,是gc的主要区域。通常可分为两个区块年轻代和年老代。更...

DustinChan
20分钟前
3
0
Excel插入批注:可在批注插入文字、形状、图片

1.批注一直显示:审阅选项卡-------->勾选显示批注选项: 2.插入批注快捷键:Shift+F2 组合键 3.在批注中插入图片:鼠标右键点击批注框的小圆点【重点不可以在批注文本框内点击】----->调出批...

东方墨天
44分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部