Bootstrap：如何从行扩展到垂直表

Question

我看到Google Analytics可以从一行扩展到一个表格。

这样的事情：

那么我们可以使用bootstrap 3.3.7吗？

请帮助我，

由于

Answer 1

只是举例说明你可以用Bootstrap 3.3.7做什么：

＆＃13;

＆＃13;

$("#mCountries").click(function(e) {
  $("#mytable").empty();
  var html = '<table class="table">';
  html += '<thead><tr><th>Countries</th>';
  html += '<th>Users</th>';
  html += '<th>% Users</th>';
  html += '</tr></thead>';
  html += '<tbody><tr>';
  html += '<td>UK</td>';
  html += '<td>120</td>';
  html += '<td>32%</td>';
  html += '</tr></tbody></table>';
  $("#mytable").html(html);
  $(".list-group-item").removeClass("active");
  $(e.currentTarget).addClass("active");
})

＆＃13;

.just-padding {
  padding: 15px;
}

.list-group.list-group-root {
  padding: 0;
  overflow: hidden;
}

.list-group.list-group-root .list-group {
  margin-bottom: 0;
}

.list-group.list-group-root .list-group-item {
  border-radius: 0;
  border-width: 1px 0 0 0;
  font-weight: bold;
}

.list-group.list-group-root > .list-group-item:first-child {
  border-top-width: 0;
}

.list-group.list-group-root > .list-group > .list-group-item {
  padding-left: 10px;
}

.list-group.list-group-root > .list-group > .list-group > .list-group-item {
  padding-left: 25px;
  font-weight: normal;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="just-padding">

  <div class="row">
    <div class="col-sm-3">

      <div class="list-group list-group-root well">
        <div class="list-group">
          <a href="#" class="list-group-item">Demographics</a>
          <div class="list-group">
            <a href="#" class="active list-group-item">Language <i class="glyphicon glyphicon-chevron-right pull-right"></i></a>
            <a href="#" class="list-group-item" id="mCountries">Country</a>
            <a href="#" class="list-group-item">City</a>
          </div>
          <a href="#" class="list-group-item">System</a>
          <div class="list-group">
            <a href="#" class="list-group-item">Item 1.2.1</a>
            <a href="#" class="list-group-item">Item 1.2.2</a>
            <a href="#" class="list-group-item">Item 1.2.3</a>
          </div>
          <a href="#" class="list-group-item">Mobile</a>
          <div class="list-group">
            <a href="#" class="list-group-item">Item 1.3.1</a>
            <a href="#" class="list-group-item">Item 1.3.2</a>
            <a href="#" class="list-group-item">Item 1.3.3</a>
          </div>
        </div>
      </div>

    </div>
    <div class="col-sm-9">
      <div id="mytable" class="table-responsive well">
        <table class="table">
          <thead>
            <tr>
              <th>Language</th>
              <th>Users</th>
              <th>% Users</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>English</td>
              <td>100</td>
              <td>30%</td>
            </tr>
            <tr>
              <td>Spanish</td>
              <td>50</td>
              <td>15%</td>
            </tr>
            <tr>
              <td>German</td>
              <td>20</td>
              <td>7%</td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

另一种可能性是使用垂直标签：

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs

但是还有很多其他的例子......