⒀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 ...

随机推荐

uva 10391
这个题,单纯做出来有很多种方法,但是时间限制3000ms,因此被TL了不知道多少次,关键还是找对最优解决方法,代码附上: #include<bits/stdc++.h> using nam ...
C语言 printf 格式化输出函数
用法: int printf(const char *format,[argument]); format 参数输出的格式,定义格式为: %[flags][width][.perc] [F|N|h| ...
实例讲解webpack的基本使用第四篇
这一篇来讲解一下webpack的loader的使用,用webpack打包文件,css,img,icon等都需要下载安装对应的loader文件,并且写好配置项,才可以进行打包,废话不多说,直接开始实战. ...
NOIP2017SummerTraining0706
个人感受:这套题也依旧在划水,和wqh在一起,然后也没怎么好好想,第一题开始时打了个思维很好的方法,但是事完全错误的:然后就开始第二题,然后第二题枚举20分,然后看答案多了25分,就拿了 45分:第三 ...
数据的分类-JavaScript数据类型
JavaScript数据类型 1.数据类型是什么? 我们接触的绝大多数程序语言来说,把数据都进行了分类,包括数字.字符.逻辑真假:int,long,string,boolean....等等:我们都知道 ...
ch4-计算属性(表达式计算 computed methods watchers)
1 计算属性 1.1 模板内的表达式是非常便利的,但是它们实际上只用于简单的运算. 在模板中放入太多的逻辑会让模板过重且难以维护. <div id="test1"> { ...
Slf4j+Log4j日志框架入门
(一).日志系统介绍 slf4j,即简单日志门面(Simple Logging Facade for Java),不是具体的日志解决方案,它只服务于各种各样的日志系统.简答的讲就是slf4j是一系列的 ...
WPF加载程序集中字符串资源
WPF资源 WPF资源使用其实的也是resources格式嵌入资源,默认的资源名称为"应用程序名.g.resources",不过WPF资源使用的pack URI来访问资源. 添加图 ...
windows下Maven的安装与配置
1 安装maven前首先确认计算机已正确安装JDK2 下载maven 地址:http://maven.apache.org/download.html安装文件格式如下:apache-maven-3.0 ...
【学习】js学习笔记：对象的遍历和封装特性
1.对象的属性访问: 对象.属性对象[属性],但中括号中必须是字符串 2.属性的遍历: for in方法举例: var ren={}; ren.name="名字"; ren.ea ...

⒀bootstrap组件 选项卡 基础案例

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

随机推荐

热门专题

⒀bootstrap组件选项卡基础案例

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