工作列表组引导程序

Working list-group bootstrap

本文关键字：引导程序 列表 工作      更新时间：2023-09-26

现在我很难找到如何使list-group工作。我想要左侧的一个面板，使用col-lg-9。右侧有一个选择菜单，使用col-lg-3。

我不希望此选择菜单动态更改页面的内容。因此，当我点击项目1时，面板会提供项目1的信息。

到目前为止，我已经了解了这一点，但这还不起作用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
  <div class='row'>
    <div class='col-lg-9'>
      <div class='panel panel-default' id='panel1'>
        <div class='panel-body'>
          <div class='page-header'>
            <h3>The first panel <small>Posted on december 23 2015</small></h3>
          </div>
          <img class='featuredImg' src='resources/screenshot1.png'>
          <p>Another paragraph</p>
          <h4>This is a header</h4>
          <p>Paragraph to match this header</p>
        </div>
      </div>
      <div class='panel panel-default' id='panel2'>
        <div class='panel-body'>
          <div class='page-header'>
            <h3>This is panel two <small>Posted on december 24 2015</small></h3>
          </div>
          <p>This is a paragraph for panel two</p>
          <h4>This is a sub header for panel two</h4>
          <p>This is content belonging to subheading of panel two</p>
        </div>
      </div>
    </div>
    <div class='col-lg-3'>
      <div class='list-group'>
        <a href='#panel1' class='list-group-item active' data-toggle='tab'>
          <h4 class='list-group-item-heading'>Item 1</h4>
          <p class='list-group-item-text'>Short info about the item</p>
        </a>
        <a href='#panel2' class='list-group-item' data-toggle='tab'>
          <h4 class='list-group-item-heading'>Item 2</h4>
          <p class='list-group-item-text'>Short info about the item</p>
        </a>
      </div>
    </div>
  </div>
</div>

如果我理解正确，您需要将tabs和item-list组件结合起来。

像这样：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container'>
  <div class='row'>
    <div class='col-lg-9 tab-content'>
      <div class='panel panel-default tab-pane active' id='panel1'>
        <div class='panel-body'>
          <div class='page-header'>
            <h3>The first panel <small>Posted on december 23 2015</small></h3>
          </div>
          <img class='featuredImg' src='resources/screenshot1.png'>
          <p>Another paragraph</p>
          <h4>This is a header</h4>
          <p>Paragraph to match this header</p>
        </div>
      </div>
      <div class='panel panel-default tab-pane' id='panel2'>
        <div class='panel-body'>
          <div class='page-header'>
            <h3>This is panel two <small>Posted on december 24 2015</small></h3>
          </div>
          <p>This is a paragraph for panel two</p>
          <h4>This is a sub header for panel two</h4>
          <p>This is content belonging to subheading of panel two</p>
        </div>
      </div>
    </div>
    <div class='col-lg-3'>
      <ul class='list-group'>
        <li class="list-group-item active">
          <a href='#panel1' data-toggle='tab'>
            <h4 class='list-group-item-heading'>Item 1</h4>
            <p class='list-group-item-text'>Short info about the item</p>
          </a>
        </li>
        <li class="list-group-item">
          <a href='#panel2' data-toggle='tab'>
            <h4 class='list-group-item-heading'>Item 2</h4>
            <p class='list-group-item-text'>Short info about the item</p>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

相关文章：