很棒的Bootstrap选项卡切换效果

今天学习了Bootstrap的选项卡,在这里分享一下,具体解释代码中都有,不再重复了。
先看一下效果图吧,显目一些!

实现代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>Bootstrap选项卡</title>
 <!-- 引入Bootstrap的样式表 -->
 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
</head>
<body>

<h1 class="btn btn-success btn-large"><i class="icon-user icon-white"></i>Hello world!</h1>
<!-- nav 清除li的默认样式 -->
<!-- nav-tabs 定义选项卡的标题栏 -->
<!-- tab-content 定义了选项卡的内容栏 -->
<!-- 在内容栏中,每个子框都必须包含tab-pane类 -->
<!-- a标签中的href必须要和内容栏中的子框的id对应 -->
<!-- active表示活动中的标题栏和内容子框,且每个标签栏都必须对于一个data-toggle='tab' -->
<ul class="nav nav-tabs">
 <li><a href="#tab1" data-toggle="tab">li1</a></li>
 <li><a href="#tab2" data-toggle="tab">li2</a></li>
 <li class="active"><a href="#tab3" data-toggle="tab">li3</a></li>
 <li><a href="#tab4" data-toggle="tab">li4</a></li>
</ul>
<div class="tab-content">
 <div class="tab-pane" id="tab1"><img src="img/1.png"></div>
 <div class="tab-pane" id="tab2"><img src="img/2.png"></div>
 <div class="active tab-pane" id="tab3"><img src="img/3.png"></div>
 <div class="tab-pane" id="tab4"><img src="img/4.png"></div>
</div>

<!-- 引入Bootstrap的js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-tab.js"></script>
</body>
</html>

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-06-29

Bootstrap选项卡动态切换效果

最近在写一个系统的首页,就是平常的一个顶部导航栏,上面有登录和注册两个按钮,点击按钮弹出相应的登录或注册框,为了方便交互,把登录和注册在一个选项卡里放着,每次用户不用回到顶部去点击,只需要在当前框点击就可切换,先看一下样子吧,如图所示: 用Bootstrap平时在写静态页面时,只需要把.active类给自己想要第一个展现的框就可以,而动态的时候并不能简单的在js代码中给自己想要第一个展现的框直接设置.active,这样当切换时第一个设置为active的一直在界面中存在,所以我们需要写js代码,给

使用Bootstrap Tabs选项卡Ajax加载数据实现

本文实例为大家分享了Bootstrap Tabs选项卡Ajax加载数据的具体代码,供大家参考,具体内容如下 HTML代码(仅展示了部分关键性代码) <li class="active"> <a href="#home" data-toggle="tab" name="menu-ctrl"> <span class="glyphicon glyphicon-home"> &

全面解析Bootstrap中tab(选项卡)的使用方法

本文实例为大家介绍实现tab选项卡的应用,此插件相对比较简单,具体内容如下 源码文件: tab.js 实现原理: 1.单击一个元素时,首先将原来高亮的元素取消 2.然后给被单击元素进行高亮 3.如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5.如果定义了动画,先执行动画,然后回调 源码分析: 1.Show方法,是在单击一个元素的时候触发,会触发如下四个事件   1.1.Hiden.bs.tab:隐藏上一个元素   1.2.Show.bs.tab:显示当前元素   1.3.Hidee

BootStrap tab选项卡使用小结

选项卡 选项卡的基本使用方式为: <ul class="nav nav-tabs"> <li class="active"><a href="#" data-target="#tab1" data-toggle="tab">tab1</a></li> <li><a href="#" data-target=&q

Bootstrap选项卡与Masonry插件的完美结合

Bootstrap 是最流行的前端框架之一.在你的项目中使用Bootstrap,你就可以很快的实现响应式的网页. 如果你尝试将Masonry和Bootstrap提供的众多JavaScript组件之一的 选项卡组件 一起使用,你将会发现许多讨厌的行为. 我遇到过,而本文主要关注这个问题是什么和你要如何来解决这个问题. Bootstrap的Tabs Bootstrap的选项卡组件包括两个关键点:选项卡导航元素和一些内容面板.在页面加载时,第一个面板应用了 .active 类.使这个面板默认是可见的.

浅谈bootstrap源码分析之tab(选项卡)

实现tab选项卡的应用,此插件相对比较简单 源码文件: tab.js 实现原理 1.单击一个元素时,首先将原来高亮的元素取消 2.然后给被单击元素进行高亮 3.如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框 5.如果定义了动画,先执行动画,然后回调 源码分析: 1.Show方法,是在单击一个元素的时候触发,会触发如下四个事件 1.1.Hiden.bs.tab:隐藏上一个元素 1.2.Show.bs.tab:显示当前元素 1.3.Hideen.bs.tab:隐藏上一个元素完成 1.4.

bootstrap导航、选项卡实现代码

本文实例为大家分享了bootstrap导航和选项卡的具体代码,供大家参考,具体内容如下 导航: <!-- nav 导航的基础样式 --> <div class="container"> <div class="row"> <ul class="nav nav-tabs"> <li><a href="#">雪碧图</a></li> &

精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)

今天学习了bootsap,收获颇丰,这里分享一个小案例,具体的解释都在代码上,这样比较直观. 先看图例 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"&g

bootstrap选项卡扩展功能详解

用了下bootstrap,虽然好看,但是控件跟之前用的easyui相差很大,功能太少,不得不自己写. 花了几个小时把tabs控件扩展了下.下面是代码 页面代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> &l

bootstrap选项卡使用方法解析

选项卡Tabs是Web中一种非常常用的功能.用户点击或悬浮对应的菜单项,能切换出对应的内容 Bootstrap框架中的选项卡主要有两部分内容组成: 选项卡组件(也就是菜单组件),对应的是 Bootstrap的 nav-tabs) 底部可以切换的选项卡面板,在 Bootstrap 中通常 tab-pane 来表示. <!-- 选项卡组件(菜单项nav-tabs)--> <ul id="myTab" class="nav nav-tabs" role=

JS组件Bootstrap Select2使用方法解析

本文总结了组件Bootstrap Select2在一些实际项目中的用法,分享给大家,有需要的朋友可以借鉴一下,少走些弯路,具体内容如下 效果图: 无论是固定方式获取数据还是ajax获取都需要引入bootstrap.js/css 和 select2.js/css及: {{ stylesheet_link('css/bootstrap.css') }} {{ stylesheet_link('css/select2.min.css') }} {{ stylesheet_link('css/font-

Bootstrap Table使用方法解析

bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等. 最近基于bootstrap开发一个开台发布系统,就开发过程中,使用bootstap table遇到的一些问题及收获记录如下: 开始使用: 需要在你自己的页面中引入以下样式及脚本: <link rel="stylesheet" href="bootstrap.min.css"> <

bootstrap网格系统使用方法解析

网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统.Bootstrap框架中的网格系统就是将容器平分成12份. 工作原理 1.数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding).如: <div class="container"> <div class="row"&

AngularJS实现tab选项卡的方法详解

本文实例讲述了AngularJS实现tab选项卡的方法.分享给大家供大家参考,具体如下: 一.代码实现 <!DOCTYPE html> <html ng-app='app'> <head> <meta charset="UTF-8"> <title></title> <style> *{ list-style: none; margin: 0; padding: 0; } .TabNav{ height

vue-cli如何引入bootstrap工具的方法

本文介绍了vue-cli如何引入bootstrap工具的方法,分享给大家,也给自己留个笔记. 以下操作以正常安装node环境为前提. 1.引入jq: 在npm控制台中,进入项目目录,然后输入指令npm install jquery --save-dev(npm换成cnpm更好,国内环境下使用cnpm下载速度更快). 2.修改build目录下的webpack.base.conf.js配置文件: 1)加入webpack对象:var webpack=require('webpack'); 2)在mod

JS组件Bootstrap Table使用方法详解

最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机.平板.PC 设备 采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案 一.效果展示 二.BootStrap table简单介绍 bootStra

js简单实现竖向tab选项卡的方法

本文实例讲述了js简单实现竖向tab选项卡的方法.分享给大家供大家参考.具体如下: 选项卡占据左边,而内容放在右边,一个适合新手的竖向的tab选项卡特效例子 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ru"> <head> <title>

Bootstrap模态框案例解析

一.模态框的正常点击出现,如添加功能 <td width="120px"> <button type="button class="btn btn-blue" style="width: 100px;" data-toggle="modal" data-target="#systemAdd">添加</button></td> <!-- 添加的模