在Bootstrap中创建可折叠行

时间：2016-03-14 01:32:23

标签： html twitter-bootstrap css3

我的.container内有.row个.row，每个<!-- Team --> <div id="team"> <div class="container"> <h1>Summit Team Members</h1> <hr> <div class="row"> <div class="col-md-3"> <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt=""> <h3>Team Member Name</h3> <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a> </div> <div class="col-md-3"> <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt=""> <h3>Team Member Name</h3> <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a> </div> <div class="col-md-3"> <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt=""> <h3>Team Member Name</h3> <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a> </div> <div class="col-md-3"> <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt=""> <h3>Team Member Name</h3> <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a> </div> </div> <!-- end row --> <div class="row"> <div class="col-md-3"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p> </div> <div class="col-md-3"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p> </div> <div class="col-md-3"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p> </div> <div class="col-md-3"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p> </div> </div> <!-- end row --> </div> <!-- end container --> </div> <!-- end team --> /*================== TEAM ===================*/ #team { text-align: center; } 有4列。我的html中的底行是我想要在页面加载时折叠的行。

当按下按钮时，我希望底行展开，再次按下它时，我希望它会折叠。在Bootstrap中创建可折叠行的最佳方法是什么？我见过的大多数例子都使用表格而我在这里没有使用任何表格。

CREATE DATABASE ? LIKE TemplateDatabase

2 个答案:

答案 0 :(得分：2)

只需使用Bootstrap提供的 collapse 。

您不需要任何JavaScript代码。

行和按钮的基本标记：

<div id="collapseExample" class="row collapse">
  Your content
</div>
<button class="btn btn-info btn-block btn-toggle" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Toggle</button>

如果您希望在页面加载时默认打开此行，只需将in类添加到row，然后将aria-expanded更改为true button }

的 CODEPEN EXAMPLE

答案 1 :(得分：0)

请检查一下。我使用 可折叠面板 来执行此操作，该操作包含在bootstrap中。

Run Here... (jsfiddle) 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div id="team">
  <div class="container">
    <h1>Summit Team Members</h1>
    <hr>


    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseA" aria-expanded="true" aria-controls="collapseA">Collapse A</a>
                    </h4>
        </div>

        <div id="collapseA" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="row">
            <div class="col-md-3">
              <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt="">
              <h3>Team Member Name</h3>
              <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
            </div>
            <div class="col-md-3">
              <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt="">
              <h3>Team Member Name</h3>
              <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
            </div>
            <div class="col-md-3">
              <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt="">
              <h3>Team Member Name</h3>
              <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
            </div>
            <div class="col-md-3">
              <img class="img-responsive img-circle" src="http://placehold.it/250x250" alt="">
              <h3>Team Member Name</h3>
              <a class="btn btn-primary" href="" role="button"><i class="fa fa-angle-double-right fa-align-center fa-fw fa-1x"></i>Learn More</a>
            </div>
          </div>
          <!-- end row -->
        </div>


        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseB" aria-expanded="true" aria-controls="collapseB">Collapse B</a>
            </h4>
          </div>
<div id="collapseB" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
          <div class="row">
            <div class="col-md-3">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p>
            </div>
            <div class="col-md-3">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p>
            </div>
            <div class="col-md-3">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p>
            </div>
            <div class="col-md-3">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat veritatis, doloribus quisquam beatae, incidunt ipsam error laborum atque vero nobis ipsa deleniti porro, qui eius dignissimos. Suscipit, exercitationem, ducimus! Quisquam?</p>
            </div>
          </div>
        </div>
       </div>

      </div>
    </div>
  </div>
  <!-- end container -->
</div>

其他信息： class =＆＃34;面板折叠崩溃＆＃34; （ 类使面板打开/展开）可以默认查看数据。

相关问题
最新问题