<!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组件 选项卡 基础案例的更多相关文章

  1. ⒂bootstrap组件 折叠 基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 【7】了解Bootstrap栅格系统基础案例（2）

    ps.这一次要说的是“Responsive column resets”,但是不知道为什么中文官网没有给出翻译,但是在看到案例的时候,感觉这就像一个bug,我自己姑且叫这个是一个高度bug吧,方便自己 ...

  3. 【10】了解Bootstrap栅格系统基础案例（5）

    这次我们来说下列排序: 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <!DOCTYPE html> <h ...

  4. 【9】了解Bootstrap栅格系统基础案例（4）

    这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含 ...

  5. 【8】了解Bootstrap栅格系统基础案例（3）

    这次我们来说下列偏移: 列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-off ...

  6. 【6】了解Bootstrap栅格系统基础案例（1）

    从上一张我们了解了栅格选项,那么我们就来了实战了解下吧(其实还是中文官网的案例) ps.我这里是电脑上用谷歌浏览器来观察的,毕竟电脑的分辨率高(1440*900px),谷歌浏览器最大化后,值比大屏幕设 ...

  7. ⑤bootstrap表格使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. ④bootstrap列表使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. ③bootstrap文本使用基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 我的第一个python web开发框架（3）——怎么开始？

    小白与小美公司经过几次接触商谈,好不容易将外包签订了下来,准备开始大干一场.不过小白由于没有太多的项目经验,学过python懂得python的基本语法,在公司跟着大家做过简单功能,另外还会一些HTML ...

  2. Java钉钉开发_02_免登授权（身份验证）（附源码）

    源码已上传GitHub: https://github.com/shirayner/DingTalk_Demo 一.本节要点 1.免登授权的流程 (1)签名校验 (2)获取code,并传到后台 (3) ...

  3. MySQL优化原理

    前言 说起MySQL的查询优化,相信大家收藏了一堆:不能使用SELECT *.不使用NULL字段.合理创建索引.为字段选择合适的数据类型..... 你是否真的理解这些优化技巧?是否理解其背后的工作原理 ...

  4. 考了3年，工作四年，零基础在职终于拿到CFA证书

    大家都知道CFA Charterholder是独有的全球公认的投资管理从业人员高职业水平和道德水准的有力证明,是金融界卓越专业成就的象征:CFA资格强调和遵循极其严格的职业操守和道德准则,世界各主要发 ...

  5. python修改注册表

    与注册表操作相关的函数可以分为打开注册表.关闭注册表.读取项值.c添加项值.添加项,以及删除项等几类. 表1   Windows注册表基本项 项名 描述 HKEY_CLASSES_ROOT 是HKEY ...

  6. WPF DataGrid自动生成行号

      在使用WPF进行应用程序的开发时,经常会为DataGrid生成行号,这里主要介绍一下生成行号的方法.通常有三种方法,这里主要介绍其中的两种,另一种简单提一下. 1. 直接在LoadingRow事件 ...

  7. Struts2 03---数据封装+获取表单提交数据

        Struts的数据封装分为三种:属性封装,模型驱动,表达式封装.下面以获取表单提交数据来简单介绍一下Struts的数据封装. <form action="loginlogin. ...

  8. 使用 Hibernate 和 MySQL 需要知道的五件事

    https://www.thoughts-on-java.org/5-things-you-need-to-know-when-using-hibernate-with-mysql/ 作者:Thorb ...

  9. 基于nginx搭建简易的基于wcf集群的复杂均衡

    很多情况下基于wcf的复杂均衡都首选zookeeper,这样可以拥有更好的控制粒度,但zk对C# 不大友好,实现起来相对来说比较麻烦,实际情况下,如果 你的负载机制粒度很粗糙的话,优先使用nginx就 ...

  10. js 关于性能的数据存储

    1.JavaScript中四种基本数据存取位置:字面量,本地变量,数组元素,对象成员.(四个都是存在于内存中) 一般来说:[字面量,局部变量]运行速度>[数组,对象成员] 2.内部属性包含了一个 ...