⒀bootstrap组件选项卡基础案例

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!--移动设备优先-->
     <title>bootstrap</title>
     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

     <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
     <style>
         img{width: 100px;height: 100px;}
     </style>
 </head>
 <div class="container">
     <!--选项卡          -->
     <ul class="nav nav-tabs">
         <li><a href="#pan1" data-toggle="tab">搜索</a></li>
         <li><a href="#pan2"  data-toggle="tab">常规</a></li>
         <li><a href="#pan3"  data-toggle="tab">查看</a></li>
     </ul>
     <!--面板-->
     <div class="tab-content">
         <div class="tab-pane active" id="pan1">
             搜索面板    搜索面板    搜索面板    搜索面板    搜索面板    搜索面板    搜索面板    搜索面板
         </div>
         <div class="tab-pane" id="pan2">
             常规面板常规面板常规面板常规面板常规面板常规面板常规面板
         </div>
         <div class="tab-pane" id="pan3">
             查看面板查看面板查看面板查看面板查看面板查看面板
         </div>
     </div>
 </div>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!--移动设备优先-->
     <title>bootstrap</title>
     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

     <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
     <style>
         img{width: 100px;height: 100px;}
     </style>
 </head>
 <body>
 <div class="container">
     <!--选项卡          -->
     <ul class="nav nav-pills">
         <li><a href="#pan1" data-toggle="pill">搜索</a></li>
         <li><a href="#pan2"  data-toggle="pill">常规</a></li>
         <li><a href="#pan3"  data-toggle="pill">查看</a></li>
     </ul>
     <!--面板-->
     <div class="tab-content">
         <div class="tab-pane active" id="pan1">
             搜索面板    搜索面板    搜索面板    搜索面板    搜索面板    搜索面板    搜索面板    搜索面板
         </div>
         <div class="tab-pane fade in" id="pan2">
             常规面板常规面板常规面板常规面板常规面板常规面板常规面板
         </div>
         <div class="tab-pane fade" id="pan3">
             查看面板查看面板查看面板查看面板查看面板查看面板
         </div>
     </div>
 </div>
 </body>
 </html>

⒀bootstrap组件选项卡基础案例的更多相关文章

⒂bootstrap组件折叠基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
【7】了解Bootstrap栅格系统基础案例（2）
ps.这一次要说的是“Responsive column resets”,但是不知道为什么中文官网没有给出翻译,但是在看到案例的时候,感觉这就像一个bug,我自己姑且叫这个是一个高度bug吧,方便自己 ...
【10】了解Bootstrap栅格系统基础案例（5）
这次我们来说下列排序: 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <!DOCTYPE html> <h ...
【9】了解Bootstrap栅格系统基础案例（4）
这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含 ...
【8】了解Bootstrap栅格系统基础案例（3）
这次我们来说下列偏移: 列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-off ...
【6】了解Bootstrap栅格系统基础案例（1）
从上一张我们了解了栅格选项,那么我们就来了实战了解下吧(其实还是中文官网的案例) ps.我这里是电脑上用谷歌浏览器来观察的,毕竟电脑的分辨率高(1440*900px),谷歌浏览器最大化后,值比大屏幕设 ...
⑤bootstrap表格使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
④bootstrap列表使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
③bootstrap文本使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

Count(*), Count(1) 和Count(字段)的区别
1. count(1) and count(*) 当表的数据量大些时,对表作分析之后,使用count(1)还要比使用count(*)用时多了! 从执行计划来看,count(1)和count(*)的 ...
http content-type accept的区别
1.Accept属于请求头, Content-Type属于实体头. Http报头分为通用报头,请求报头,响应报头和实体报头. 请求方的http报头结构:通用报头|请求报头|实体报头响应方的http报 ...
创建 Rex-Ray volume - 每天5分钟玩转 Docker 容器技术（76）
前面我们安装部署了 Rex-Ray,并且成功配置 VirtualBox backend,今天演示如何创建和使用 Rex-Ray volume. 在 docker1 或 docker2 上执行如下命令创 ...
1-git初体验
1 准备工作: windows系统下,安装好msysgit -安装好后,在开始菜单找到Git > Git bash 2 当前电脑配置用户名邮箱 $ git config --global ...
HDU3605 Escape
思想:缩点+sap Max,t还可以缩小,优化,高数课写的,有点丑,暂时懒得改. #include<cstdio> #include<cstdlib> #include< ...
23.Linux-块设备驱动(详解)
通过上节的块设备驱动分析,本节便通过内存来模拟块设备驱动参考内核自带的块设备驱动程序: drivers/block /xd.c drivers/block /z2ram.c 1.本节需要的结构体如 ...
前端页面卡顿、也许是DOM操作惹的祸？
界面上UI的更改都是通过DOM操作实现的,并不是通过传统的刷新页面实现的.尽管DOM提供了丰富接口供外部调用,但DOM操作的代价很高,页面前端代码的性能瓶颈也大多集中在DOM操作上,所以前端性能优化 ...
CSS之 relative 特性
1. 自身特性: 如left,right,top,bottom定位都是相对于自身位置定位. 当left与right同时存在,lfet生效. 当top与bottom同时存在,top生效. 无侵入,保留原 ...
python学习之第三课时--基本数据类型及区别，变量
基本数据类型及区别 1. 数字类型(int) 数字型--变量值直接是数字,没有双引号"" 整数 2. 浮点数(float) 肤浅理解小数点后有有效数字 1.55 0.22 ...
Maven 开发hibernate存在的诸多问题
项目结构: 开发平台: maven version 3.5 eclipse 4. 7 oxyen 最新:hibernate 5.x 引入问题官网提供的必需选择只有这个当然还需要我们单独配置mys ...

⒀bootstrap组件 选项卡 基础案例

⒀bootstrap组件 选项卡 基础案例的更多相关文章

随机推荐

热门专题

⒀bootstrap组件选项卡基础案例

⒀bootstrap组件选项卡基础案例的更多相关文章