BootStrap2学习日记16---选项卡内容
代码:
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">中国</a></li>
<li><a href="#tab2" data-toggle="tab">美国</a></li>
<li><a href="#tab3" data-toggle="tab">日本</a></li>
<li><a href="#tab4" data-toggle="tab">英国</a></li>
<li><a href="#tab5" data-toggle="tab">加拿大</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>中国(China),位于东亚,是一个以华夏文明为主体、中华文化为基础,以汉族为主要民族的统一多民族国家,通用汉语。中国疆域内的各个民族统称为中华民族,龙是中华民族的象征。</p>
</div>
<div class="tab-pane" id="tab2">美国</div>
<div class="tab-pane" id="tab3">日本</div>
<div class="tab-pane" id="tab4">英国</div>
<div class="tab-pane" id="tab5">加拿大</div>
</div>
在每个<li>里面<a>中添加两个属性 href="#tab1" data-toggle="tab"
其中”#tab+数字" 对应下面的 id=“tab+数字”
效果:
控制选项卡的位置:
效果:
在上述代码最外层添加一个<div>标签
并添加类“tabbable“ ,
”tabs-left”-----左边显示
"tabs-right"----右边
。。。。。。
BootStrap2学习日记16---选项卡内容的更多相关文章
- BootStrap2学习日记20---定制缩略图
先看看效果: 代码: <ul class="thumbnails"> <li class="span3"> <div class= ...
- BootStrap2学习日记15----选项卡
导航格式1: <ul class="nav nav-tabs"> <li class="active"><a href=" ...
- BootStrap2学习日记3--响应式布局实用类
BootStrap2中常用的响应式布局类如: visible-phone 仅在 手机平台显示 visible-tablet 仅在 平板电脑显示 visible-desktop 仅 ...
- BootStrap2学习日记2--将固定布局换成响应式布局
概要:响应式页面是指页面根据浏览平台(尺寸)的不同显示不同的CSS. 原理:在Html的的头加入代码 <style> /*当浏览器宽度大于767是 采用括号里面的CSS样式*/ @medi ...
- BootStrap2学习日记23---图片轮播
<div id="carousel1" class="carousel slide"> <div class="carousel-i ...
- BootStrap2学习日记22---点击展开
先看效果: Code: <div class="accordion" id="accordion2"> <div class="ac ...
- BootStrap2学习日记21---消息提示
<p><a href="#" title="中国(China),位于东亚,是一个以华夏文明为主体.中华文化为基础,以汉族为主要民族的统一多民族国家,通用 ...
- BootStrap2学习日记19---缩略图
缩略图 代码: <ul class="thumbnails"> <li class="span3"><a href="# ...
- BootStrap2学习日记18---提示消息
代码: <div class="alert alert-block" id="alert"> <a href="#" cl ...
随机推荐
- 关于对javascript 提升概念 的总结与思考。
最近在看一本新买的书叫<你不知道的javascript上卷>..买到这本书也算是个巧合 不过真是物有所值.它对js的几个高级概念都做了非常深刻的描述和通过一些通俗易懂的方式来让我们理解.这 ...
- 统一入口的Ajax验证
此前一直没有写博客的习惯,只是将一些心得和体会大致的用笔写在一个本子上,今天刚刚开通博客,就随便写一点吧! 关于服务端验证,大致可以分为登陆验证与功能权限验证,而以前端请求方式来区分的话,又可分为 1 ...
- 第三百五十二天 how can I 坚持
如果要是今年找不到对象,明年去回济南, 怎么感觉那么不舍呢.生活总是有太多的无奈啊. 今天加了一天,倒是没感觉,只是感觉生活太空虚. 或许遗憾只是因为自己太懦弱.怎么说呢,还是那句话,经历的就会成长, ...
- Delphi IOS环境安装
RAD Delphi XE/10 Seattle 安装IOS.OSX环境安装,IOS模拟器,MAC X 真机可以调试 http://community.embarcadero.com/blogs/en ...
- 【转】Hibernate利用@DynamicInsert和@DynamicUpdate生成动态SQL语句
原文链接:http://www.cnblogs.com/quanyongan/p/3152290.html 最近在使用Hibernate4中,发现两个很有奥秘的注解 @DynamicInsert 和 ...
- Bash's ArithmeticExpression
[Bash's ArithmeticExpression] let command: let a=17+23 echo "a = $a" # Prints a = 40 let a ...
- 最精简的IOCP封装
最精简的IOCP封装,DELPHI XE8直接编译通过.Winsock2.pas即使用DELPHI自带的,相信XE7也能编译,或者XE6,XE5也能. 单说Winsock2.pas,我见过无数种版本的 ...
- 原生的AJAX写法,可以直接复制过来套用
方法一: function createXMLHTTPRequest() { //1.创建XMLHttpRequest对象 //这是XMLHttpReuquest对象无部使用中最复杂的一步 //需要针 ...
- 接口是干爹, 继承是亲爹 ---JAVA
接口(interface)是干爹, 因为你可以有很多很多的干爹爹... 继承(extends)是亲爹, 因为你只能有一个父类, 只有一个亲生的父亲. 单继承,多接口?./>./..
- GetQueuedCompletionStatus的返回值
完成端口GetQueuedCompletionStatus返回值的问题 先看看GetQueuedCompletionStatus函数的完整声明:BOOL GetQueuedCompletionStat ...