<!--导航区开始-->
<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. vue-router 页面切换后保持在页面顶部而不是保持原先的滚动位置的办法

    vue-router有提供一个方法scrollBehavior,它可以使切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样. 这个功能只在 HTML5 history 模 ...

  2. pat 团体天梯赛 L3-015. 球队“食物链”

    L3-015. 球队“食物链” 时间限制 1000 ms 内存限制 262144 kB 代码长度限制 8000 B 判题程序 Standard 作者 李文新(北京大学) 某国的足球联赛中有N支参赛球队 ...

  3. nvarchar与varchar的区别

    原文发布时间为:2009-08-05 -- 来源于本人的百度文章 [由搬家工具导入] 1、通俗一點就是varchar適合輸入英文和數字,nvarchar一般用做中文或其它語言的輸入,這樣到別的語系不會 ...

  4. updatepanel的使用【他人经验+原创 完整例子】

    原文发布时间为:2009-05-16 -- 来源于本人的百度文章 [由搬家工具导入] 刚上传的代码,不知道能不能下载:[源码包含所有ajax控件的简单使用] http://www.xmaspx.com ...

  5. 一张图让你学会Python【转】

    转自:http://blog.csdn.net/qq_30845505/article/details/51588423 有编程基础的人一看就可以了解 Python 的用法了.真正的 30 分钟上手. ...

  6. Selenium2+python自动化(学习笔记3)

    1.加载firefox配置 参考代码: # coding=utf-8from selenium import webdriver# 配置文件地址,打开Firefox点右上角设置--帮助--故障排除信息 ...

  7. Spring Boot学习——第一个Spring Boot程序

    依照下面的步骤创建项目: 点击 Next 项目介绍: Application.java中的主要代码: @SpringBootApplication public class ReaderApplica ...

  8. java 修改字体大小

    在Windows->Preferences->General->Appearance->Colors and Fonts->Java->Java Editor Te ...

  9. 体育成绩统计——20180801模拟赛T3

    体育成绩统计 / Score 题目描述 正所谓“无体育,不清华”.为了更好地督促同学们进行体育锻炼,更加科学地对同学们进行评价,五道口体校的老师们在体育成绩的考核上可谓是煞费苦心.然而每到学期期末时, ...

  10. 1219 骑士游历(棋盘DP)

    1997年  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解    题目描述 Description 设有一个n*m的棋盘(2≤n≤50,2≤m≤50),如 ...