按下列表群组里的项目,会切换显示对应的内容 ..
先去掉这个列表群组里的一些东西 .. 删掉这个小标签 .. 再去掉这些布局的工具栏 ...
再把 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 个网格宽度的容器里 ...
再回到浏览器,去预览一下 ...