bootstrap选项卡效果

最新推荐文章于 2023-12-10 17:59:11 发布

蜗牛慢慢向上爬

最新推荐文章于 2023-12-10 17:59:11 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/A9925/article/details/42268901

bootstrap 专栏收录该内容

3 篇文章

订阅专栏

这篇博客展示了如何利用Bootstrap框架创建选项卡效果。内容包括个人报名和团体报名两个选项卡，每个选项卡内包含表格展示相关数据。用户可以通过操作按钮进行报名、缴费等操作。页面底部提供了返回队员信息列表、添加新队员以及根据队员状态进行报名确认、撤回审核、在线缴费和查看缴费记录的链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<img src="https://img-blog.youkuaiyun.com/20141230172542333?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQTk5MjU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

<div class="row-fluid sortable" style="width:80%; margin-left:auto; margin-right:auto;">
  <div class="box span12">
    <div class="box-header well" data-original-title>
      <h2 style="margin-top:-10px;"><i class="icon-th"></i>
        <?=$teamname?>
        参赛项目信息</h2>
    </div>
    <div class="box-content" style ="text-align: center;">
      <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#info">个人报名</a></li>
        <!--<li><a href="#custom">队员列表</a></li>-->
        <li><a href="#messages">团体报名</a></li>
      </ul>
      <div id="myTabContent" class="tab-content">
        <div class="tab-pane active" id="info">
          <table class="table table-striped table-bordered">
            <tr>
              <td height="40" align="center">姓名</td>
              <td align="center">性别</td>
              <td align="center">年龄</td>
              <td align="center">报名</td>
              <td align="center">缴费</td>
              <td align="center">已报项目</td>
              <td align="center"> 队员1 </td>
              <td align="center"> 队员2 </td>
              <td align="center"> 队员3 </td>
              <td align="center"> 操作 </td>
            </tr>
            <?=$strTable?>
          </table>
        </div>
        <div class="tab-pane" id="messages">
          <table class="table table-striped table-bordered bootstrap-datatable">
            <input type="hidden" name="act" value="new">
            <tr>
              <th align="center">俱乐部名称：</th>
              <td></td>
              <th align="center">成 员 数：</th>
              <td></td>
            </tr>
            <tr>
              <th align="center">联 系 人：</th>
              <td></td>
              <th align="center"> </th>
              <td></td>
            </tr>
            <tr>
              <th align="center">备 注：</th>
              <td colspan="3"></td>
            </tr>
          </table>
        </div>
      </div>
      <a class="btn btn-primary" href="<?=base_url() ?>team"><< 返回队员信息列表</a> <a class="btn btn-primary" href="<?=base_url() ?>team/addmember">++ 添加新队员</a>
      <?php if($TeamStatus=="0"){?>
      <a class="btn btn-primary" href="<?=base_url() ?>team/pushstatus"> 队员及参赛项目信息完成，确定报名。</a>
      <?php }else if($TeamStatus=="1"){?>
      <a class="btn btn-primary" href="<?=base_url() ?>team/withdraw"> 撤回审核推送 </a>
      <?php }else if($TeamStatus=="2"){?>
      <a class="btn btn-primary" href="<?=base_url() ?>payorder"> $$ 在线缴费 </a>
      <?php }else if($TeamStatus=="3"){?>
      <a class="btn btn-primary" href="<?=base_url() ?>payorder/success"> 缴费记录 </a>
      <?php }?>
    </div>
  </div>
</div>