<!--导航区开始-->
<ul class="nav nav-tabs nav-stacked" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
</ul>
<!--导航区结束--> <!--面板区开始-->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">这里是主页的内容</div>
<div role="tabpanel" class="tab-pane" id="profile">这里是简介页面的内容</div>
<div role="tabpanel" class="tab-pane" id="messages">这里是消息页面的内容</div>
</div>
<!--面板区结束-->

Bootstrap是包装好的实例,可以拿来直接用,想要改变的样式自己做改变。

网上的一些插件也是可以引用的,直接引用过来css和js就可以用,所以,Bootstrap的相关插件与模板,去官网拿下来即可

Bootstrp--一个导航面板切换的实用例子的更多相关文章

  1. iOS中如何创建一个滑出式导航面板(1)

    本文将介绍如何创建类似Facebook和Path iOS程序中的滑出式导航面板. 向右滑动 滑出式设计模式可以让开发者在程序中添加常用的导航功能,又不会浪费屏幕上宝贵的空间.用户可以在任意时间滑出导航 ...

  2. Flutter - TabBar导航栏切换后,状态丢失

    上一篇讲到了 Flutter - BottomNavigationBar底部导航栏切换后,状态丢失 里面提到了TabBar,这儿专门再写一下吧,具体怎么操作,来不让TabBar的状态丢失.毕竟大家99 ...

  3. react-router4.x 实用例子(路由过渡动画、代码分割)

    react-router4.2.0实用例子 代码分割 官网上面写的代码分割是不支持create-react-app脚手架的,要使用import实现 创建一个bundle.js文件 import { C ...

  4. 用java单例模式实现面板切换

    1.首先介绍一下什么是单例模式: java单例模式是一种常见的设计模式,那么我们先看看懒汉模式: public class Singleton_ { //设为私有方法,防止被外部类引用或实例 priv ...

  5. 使用 ViewPager 和 RadioGroup 封装的一个导航控件

    import android.animation.ObjectAnimator; import android.content.Context; import android.graphics.dra ...

  6. 极致精简的fragment实现导航栏切换demo

    一个小demo.用button+fragment实现导航栏切换界面,适合刚接触的新手看一下. 效果图 点击第二个后 源码: 主界面 <span style="font-size:18p ...

  7. 利用jquery写的一个TAB页切换效果

    函数如下 /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == ...

  8. Axure之动态面板:登录面板切换

    无论是谁,在刚开始接触一门不太熟悉的东西时都有一种恐惧感,但是慢慢多练习几遍,再多琢磨琢磨,形成自己的见解和认识,就掌握的差不多了.我说的是题外话,现在转入正题. 面板切换,也就是我们通常所有的tab ...

  9. Flutter - BottomNavigationBar底部导航栏切换后,状态丢失

    如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...

随机推荐

  1. (转载--修改)使用Xcode9的Instruments检测解决iOS内存泄露

    作为一名iOS开发攻城狮,在苹果没有出ARC(自动内存管理机制)时,我们几乎有一半的开发时间都耗费在这么管理内存上.后来苹果很人性的出了ARC,虽然在很大程度上,帮助我们开发者节省了精力和时间.但是我 ...

  2. jquery取得iframe中元素的方法

    原文发布时间为:2010-12-27 -- 来源于本人的百度文章 [由搬家工具导入] 收集利用Jquery取得iframe中元素的几种方法 :contents()  $.trim($("if ...

  3. js动态添加select菜单 联动菜单

    原文发布时间为:2009-11-14 -- 来源于本人的百度文章 [由搬家工具导入] <html> <head> <title>http://hi.baidu.co ...

  4. 最近发的一些csdn下载资源

    原文发布时间为:2009-11-02 -- 来源于本人的百度文章 [由搬家工具导入] http://wjwu1988.download.csdn.net/treeview的datasource类    ...

  5. 页面get post等查看

    原文发布时间为:2010-03-08 -- 来源于本人的百度文章 [由搬家工具导入] http://www.fiddler2.com/Fiddler2/firstrun.asp

  6. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---30

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  7. linux下kodi没有声音的解决

    前几天,心血来潮,就安装了manjaro的pre3版本,由于是mini kde版本的,就随手安装了kodi,可以用来看视频,听音乐和看图片. 结果在所有插件都折腾好了之后发现,在屏幕的右上角有一个喇叭 ...

  8. AC日记——集合位置 洛谷 P1491

    集合位置 思路: 次短路: 先走一遍最短路: 记录最短路径,然后依次删边走最短路: 最短的长度就是次短路: 来,上代码: #include <queue> #include <cma ...

  9. Dialog和软键盘在屏幕上的并存问题:

    最近做添加门店,门店昵称自动根据文字变化去搜索后台数据,但是一搜索软键盘就关闭了,感觉用户体验不太好.一开始根本不知道啥问题,找了半天才发现是网络请求dialog加载导致软件盘隐藏的,后面直接把dia ...

  10. 洛谷 P1031 均分纸牌【交叉模拟】

    题目描述 有 N 堆纸牌,编号分别为 1,2,…, N.每堆上有若干张,但纸牌总数必为 N 的倍数.可以在任一堆上取若干张纸牌,然后移动. 移牌规则为:在编号为 1 堆上取的纸牌,只能移到编号为 2 ...