按下列表群组里的项目，会切换显示对应的内容 ..

先去掉这个列表群组里的一些东西 .. 删掉这个小标签 .. 再去掉这些布局的工具栏 ...

再把 CSS 这个项目换成普通的 action 项目 .. 再去掉 HTML 项目上的这个 disabled ..

在这组项目的下面，可以再去添加要切换显示的标签内容 ..

在 包装上添加一个 tab-content ..

每个标签内容项目上面加上一个 tab-pane .. 再用一个 fade ，这样在切换显示的时候可以添加点过滤效果 ..

项目上需要一个 id .. 这个项目的 id 的值可以是 html-content .. 然后在内容项目里输入点内容 .. hello html.

复制一份 .. 修改一下标签内容还有标签元素上的 id .. 再复制一份 .. 同样修改一下它里面的内容还有元素上的 id 的值 ..

在当前要显示的标签内容的元素上，添加一个 show ... 还有 active ..

列表项目

再去修改一下列表群组里的项目 .. 给它们都添加一个 data-toggle 属性，对应的值是 list .. 这样会触发元素的行为，让它可以切换显示对应的标签内容 ..

每个项目链接的东西就是它的目标，也就是按下这个项目要显示的内容元素上的 id .. 这个是 #html-content .. 下面这个是 #css-content ... 最后这个是 javascript-content ..

在当前活动的列表项目上，再添加一个 active ...

预览

再去预览一下 .. 按下列表群组里的项目 .. 会显示对应的标签内容 ..

布局

下面我们可以再去设计一下它们的布局 ...

先添加一排内容 .. 容器上添加一个 row ..

里面分成两栏显示 .. 列表群组可以占用 4 个网格的宽度 .. 标签内容可以占用剩下的 8 个网格的宽度 ..

把这个 list-group .. . 放在上面这个 4 个网格宽度的容器里 ..

再把 tab-content ，放在上面这个 8 个网格宽度的容器里 ...

再回到浏览器，去预览一下 ...