zoukankan      html  css  js  c++  java
  • 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"----右边

    。。。。。。

  • 相关阅读:
    写在毕业季前
    使用Github Page鼓励自己每日编程
    win8/Metro开发系列一 Xaml布局
    AlertDialog详解
    安卓项目文件目录
    Andriod布局之LinearLayout
    Andriod定时任务
    android 设置布局横屏竖屏
    Android默认启动程序问题
    Android全屏显示
  • 原文地址:https://www.cnblogs.com/keiling/p/3639169.html
Copyright © 2011-2022 走看看