1. <!--导航区开始-->
  2. <ul class="nav nav-tabs nav-stacked" role="tablist">
  3. <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  4. <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  5. <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  6. </ul>
  7. <!--导航区结束-->
  8.  
  9. <!--面板区开始-->
  10. <div class="tab-content">
  11. <div role="tabpanel" class="tab-pane active" id="home">这里是主页的内容</div>
  12. <div role="tabpanel" class="tab-pane" id="profile">这里是简介页面的内容</div>
  13. <div role="tabpanel" class="tab-pane" id="messages">这里是消息页面的内容</div>
  14. </div>
  15. <!--面板区结束-->

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. Java EE 学习(2):使用 IDEA 开发 最简java web

    参考:http://www.cnblogs.com/carsonzhu/p/5468223.html 使用IntelliJ IDEA开发java web 前言:由于本人以前简略的学习过 java 语言 ...

  2. 【02】react 之 jsx

    React与ReactDOM是react中核心对象,React为核心功能,ReactDOM提供对DOM的操作,以前的老版本中只有React没有ReactDOM,新版本中分离出ReactDOM提供两种渲 ...

  3. python之正则表达式【转】

    首先说 正则表达式是什么? 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达式.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计 ...

  4. BZOJ 1658 Water Slides 滑水

    Water Slides 滑水 [问题描述] It's a hot summer day, and Farmer John is letting Betsy go to the water park ...

  5. 局部a链接样式

    原文发布时间为:2010-01-16 -- 来源于本人的百度文章 [由搬家工具导入] <style type="text/css"> <!--默认页面链接-> ...

  6. quartz的配置

    Quartz.Net中的概念:计划者(IScheduler).工作(IJob).触发器(Trigger).给计划者一个工作,让他在Trigger(什么条件下做这件事)触发的条件下执行这个工作 将要定时 ...

  7. 解决Manjaro linux的中文输入

    系统安装完成后, 首先:安装中文输入法:pacman -S fcitx fcitx-libpinyin kcm-fcitx 接着:修改.xprofile 添加内容如下: export GTK2_RC_ ...

  8. hdu 4535(排列组合之错排公式)

    吉哥系列故事——礼尚往来 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tota ...

  9. 用NSLogger代替NSLog输出调试信息

    安装 NSLogger分为两部分,LoggerClient和NSLogger Viewer,你的App需要导入前者,后者是一个独立的mac应用,NSLogger所有的调试信息将输出到这个应用中. 安装 ...

  10. EasyMvc入门教程-基本控件说明(5)小图标

    我们网页很多时候需要小图标来进行美化,EasyMvc默认提供了100多种常用小图标,您可以根据实际情况选择使用,请看下面的例子: @Html.Q().Ico().Type(EasyMvcHelper. ...