我想创建一个 Web GUI,它分为两部分:不同操作的列表,实现为引导列表组和可以更改这些操作设置的详细信息区域。
单击该项目应显示该操作的详细信息/设置部分。
我还想要快速操作,它们是列表组项目右侧的小按钮。
这个概念在 Bootstrap 中有效,但我的 IDE 给我关于嵌套按钮/链接的警告。最大的问题是,这不是有效的 HTML5,可能会导致错误的结果。我已经注意到的一个错误是,单击一个小按钮也会在 Firefox 中执行列表项操作。
这是 GUI 概念的示例,因为这很难用语言描述: https ://jsfiddle.net/drx7xhw7/
<div class="container">
<div class="row">
<div class="col-md-4">
<h3>Actions</h3>
<div class="list-group">
<a class="list-group-item clearfix" onclick="alert('Action1 -> Details');">
Action1
<span class="pull-right">
<button type="button" class="btn btn-xs btn-default" onclick="alert('Action1 -> Play');">
<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
</button>
</span>
</a>
<a class="list-group-item clearfix" onclick="alert('Action2 -> Details');">
Action2
<span class="pull-right">
<button type="button" class="btn btn-xs btn-default" onclick="alert('Action2 -> Play');">
<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
</button>
</span>
</a>
</div>
</div>
<div class="col-md-8">
<h3>Settings</h3>
</div>
</div>
</div>
有没有一种简单的方法可以拥有完全相同的 GUI 但使用有效的 HTML5?
原文由 user1798024 发布,翻译遵循 CC BY-SA 4.0 许可协议
@Kim:如果您仍想在有效的 HTML 标准中使用 Bootstrap 实现相同的效果,请使用以下代码。我将按钮更改为 span 并添加了相同的类
btn btn-xs btn-default
。