Bootstrp--一个导航面板切换的实用例子
<!--导航区开始-->
<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--一个导航面板切换的实用例子的更多相关文章
- iOS中如何创建一个滑出式导航面板(1)
本文将介绍如何创建类似Facebook和Path iOS程序中的滑出式导航面板. 向右滑动 滑出式设计模式可以让开发者在程序中添加常用的导航功能,又不会浪费屏幕上宝贵的空间.用户可以在任意时间滑出导航 ...
- Flutter - TabBar导航栏切换后,状态丢失
上一篇讲到了 Flutter - BottomNavigationBar底部导航栏切换后,状态丢失 里面提到了TabBar,这儿专门再写一下吧,具体怎么操作,来不让TabBar的状态丢失.毕竟大家99 ...
- react-router4.x 实用例子(路由过渡动画、代码分割)
react-router4.2.0实用例子 代码分割 官网上面写的代码分割是不支持create-react-app脚手架的,要使用import实现 创建一个bundle.js文件 import { C ...
- 用java单例模式实现面板切换
1.首先介绍一下什么是单例模式: java单例模式是一种常见的设计模式,那么我们先看看懒汉模式: public class Singleton_ { //设为私有方法,防止被外部类引用或实例 priv ...
- 使用 ViewPager 和 RadioGroup 封装的一个导航控件
import android.animation.ObjectAnimator; import android.content.Context; import android.graphics.dra ...
- 极致精简的fragment实现导航栏切换demo
一个小demo.用button+fragment实现导航栏切换界面,适合刚接触的新手看一下. 效果图 点击第二个后 源码: 主界面 <span style="font-size:18p ...
- 利用jquery写的一个TAB页切换效果
函数如下 /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == ...
- Axure之动态面板:登录面板切换
无论是谁,在刚开始接触一门不太熟悉的东西时都有一种恐惧感,但是慢慢多练习几遍,再多琢磨琢磨,形成自己的见解和认识,就掌握的差不多了.我说的是题外话,现在转入正题. 面板切换,也就是我们通常所有的tab ...
- Flutter - BottomNavigationBar底部导航栏切换后,状态丢失
如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...
随机推荐
- jquery 实践操作:iframe 相关操作
此篇记录关于HTML 的 iframe 元素 的相关记录 定义:iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 常用的基本 iframe 设置(详细设置属性参考API:http:/ ...
- cf 487E Tourist
题目大意 给定\(n\)个点\(m\)条边的无向连通图,无重边 每个点有点权 两个操作: 1.单点点权修改 2.询问从x到y的简单路径中,路径经过点的最小值的最小值时多少 (简单路径指经过每一个点至多 ...
- .NET结束外部进程 C#结束外部进程
原文发布时间为:2011-02-15 -- 来源于本人的百度文章 [由搬家工具导入] using System;namespace ConsoleApplication2{ class Prog ...
- css3动画、边框、投影知识
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 搞定vim的窗口操作
最近在给学生演示数据结构代码时,发现用一般的方法总会有不方便,如果使用ide又觉得太浪费了,后来觉得用vim就够了,使用buffer总会需要页面调来跳出,学生看起来容易迷糊.所以就研究了下vim的窗口 ...
- 【剑指offer】数组中重复的数字
题目描述 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度为 ...
- map、hash_map、unordered_map 的思考
#include <map> map<string,int> dict; map是基于红黑树实现的,可以快速查找一个元素是否存在,是关系型容器,能够表达两个数据之间的映射关系. ...
- 三、Ubuntu 使用Xshell
1.下载一个Xshell 2.输入命令:ssh root@Ubuntu的ip地址 输入密码,即可连接 如果遇到不可连接.在Ubuntu中输入命令 vim /etc/ssh/sshd_config 更 ...
- IOS view的圆角和阴影并存
记录一下这个简单但又难搞的问题,如何设置 view的圆角和阴影并存 UIView *v=[[UIView alloc]initWithFrame:CGRectMake(10, 10, 100, 100 ...
- JS-JavaScript String 对象-string对象方法3:concat()
1.concat():用于连接两个或多个字符串. 1).语法:string.concat(string1, string2, ..., stringX) (string1, string2, . ...