37.Bootstrap(中文教程)元件：List group:切换显示列表的内容

ㄧ.List group:切换显示列表的内容

<div class="component" id="demo">  <div class="container">    <div class="row">      <div class="col-4">        <div class="list-group">          <a data-toggle="list" href="#html-content" class="list-group-item list-group-item-action active">HTML</a>          <a data-toggle="list" href="#css-content" class="list-group-item list-group-item-action">CSS</a>          <a data-toggle="list" href="#javascript-content" class="list-group-item list-group-item-action">JavaScript</a>        </div>      </div>      <div class="col-8">        <div class="tab-content">        <div class="tab-pane fade show active" id="html-content">hello html</div>            <div class="tab-pane fade" id="css-content">hello css</div>        <div class="tab-pane fade" id="javascript-content">hello javascript</div>       </div>      </div>    </div>  </div></div>.demo.component{  padding: 50px;}

重点：

1.我在这里做一个布局，col-4为列表群组、col-8为列表群组内容
2.使用a连结，去除标籤与d-flex以及对齐
4.在a连结指定 data-toggle="list"
5.列表的内容结构.tab-content为父元素，.tab-pane .fade为第二层
6.第一个列表预设加.show .active
7.这个三个列表都需要个加#html-content，#css-content，#javascript-content

8.最后的重点是要在a连结的href各加列表的id
9.然后列表第一个预设要加.active

codepen
参考：bootstrap4