<!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. oracle数据库备份、还原 （如何将Oracle 11g备份的dat文件导入到10g数据库里面）

    如何将Oracle 11g备份的dat文件导入到10g数据库里面 解决方法:      导出的时候后面加上目标数据库的版本号   导出: 在SQL plus下执行:create or replace  ...

  2. Java子线程中的异常处理（通用）

    在普通的单线程程序中,捕获异常只需要通过try ... catch ... finally ...代码块就可以了.那么,在并发情况下,比如在父线程中启动了子线程,如何正确捕获子线程中的异常,从而进行相 ...

  3. Iframe刷新页面

    window.parent.frames["name"].location="url";

  4. Ubuntu16.04下安装redis

    Ubuntu16.04下安装redis 保证网络畅通,选定好下载工作路径,执行以下命令下载redis-3.2.6: sudo wget http://download.redis.io/release ...

  5. socket及其相关（续篇）

    IO 多路复用 基本概念 IO多路复用是指内核一旦发现进程指定的一个或者多个IO条件准备读取,它就通知该进程.IO多路复用适用如下场合: (1)当客户处理多个描述字时(一般是交互式输入和网络套接口), ...

  6. 定制Three.js中Material属性

    1.找到想要更改的着色器代码

  7. docker镜像文件导入与导出

    工作中经常需要拉取一些国外的镜像,但是网络限制等原因在公司拉取很慢,所以我习惯用亚马逊服务器拉取镜像,导出后下载到本地再导入开发环境 1. 查看镜像id sudo docker images REPO ...

  8. 虚拟机+桥接模式+Host-only模式 搭建完美的Windows下Linux开发环境

    相信有很多鞋童和我一个样是一枚Linux码农(我现在还是嵌入式方向). 做Linux开发势必需要一个Linux环境, 大多数开发者会首先选择一个Linux发行版, 其中Ubuntu LTS版本应该是选 ...

  9. 客户机中PLSQL DEV访问虚拟机中的ORCLE11g，错误百出！

    客户机中PLSQL DEV访问虚拟机中的ORCLE11g,错误百出! 创建时间: 2017/10/14 18:44 作者: CNSIMO 标签: ORACLE 忙了一下午,只有两个字形容:麻烦!   ...

  10. web自动化测试从入门到持续集成（selenium webdriver）

    在很多刚学习自动化的可能会认为我只需要会运用selenium,我只需要在一个编辑器中实用selenium +java编写了一些脚本那么就会自动化了,是真的吗?答案肯定是假的.自动化肯定是需要做到真的完 ...