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"----右边

。。。。。。

转载于:https://www.cnblogs.com/keiling/p/3639169.html

BootStrap2学习日记16---选项卡内容相关推荐

程序员女盆友的学习日记（没内容）
大噶猴!居然看到了我的心得!(*这篇文章没有内容*) 这篇文章适合,类似我这样想去多了解自己家程序员的妹子:还有那些想教自己家小宝贝一些计算机语言的程序汉我是学食品的妹子,工科女,爱淘宝,小红书,知 ...
BootStrap2学习日记20---定制缩略图
先看看效果: 代码: <ul class="thumbnails"><li class="span3"><div class=&q ...
ABP VNext学习日记16
1.ABP中的领域事件解析: [1]Abp中使用事件总线来实现领域事件.领域事件作用,一是解耦,二是使用领域事件进行事务的拆分,通过引入事件存储,来实现数据的最终一致性. [2]事件总线是对发布-订 ...
安卓学习日记——APP共享内容
分享简单的文本内容 public void sharedSimpleContentClick(View v){Intent intent=new Intent();intent.setAction(I ...
Day16.面向对象(学习日记16)
面向对象(oop) 面向对象是一种编程思维(oop),将对应你需要用到的对象进行抽取,将对应方法综合到对应的对象中,在需要调用对应的方法时侯去找对应的对象.(万物皆对象(任何东西都可以抽取为对象),主 ...
BootStrap2学习日记8---表单
<form><label for="username">用户名</label><input id="username" ...
四书之《论语》学习日记16
无欲则刚. 有贪欲就不可能刚毅. 海纳百川有容乃大,壁立千仞无欲则刚.--林则徐我不欲人之加诸我也,吾亦欲无加诸人.非尔所及也. 连子贡都没有做到的"恕"道,让我想起了这样的话: ...
10.16 my学习日记 (XPath的基础语法，lxml库的应用）
10.16 my学习日记(XPath的基础语法,lxml库的应用) XPath的基础语法 XPath查找标签 XPath谓语 lxml库在爬虫中的应用 etree库etree_Element对象使用 ...
爬虫学习日记1-豆瓣top250电影信息爬取
@ 爬虫学习日记1-豆瓣top250电影信息爬去学习任务:结合requests.re两者的内容爬取https://movie.douban.com/top250里的内容, 要求抓取名次.影片名称.年 ...

BootStrap2学习日记16---选项卡内容

BootStrap2学习日记16---选项卡内容相关推荐

最新文章

热门文章