twitter-bootstrap - 如何在 twitter-bootstrap 中使用缩略图作为按钮组

Question

例如：- A、B 和 C 是缩略图。这样当缩略图“A”我显示“A”被选中（类似于按钮组中按下的按钮）并在 div 中显示与缩略图“A”相关的一些信息。

Answer 1

按钮组仅指几个按钮一起出现。

如果您想为缩略图使用 Twitter Bootstrap 按钮插件，并模拟单选按钮，这似乎是可能的：

将此添加data-toggle="buttons-radio"到一些共同的父级，并使用以下内容激活插件：

$('a').on('click',function() {
    $(this).button('toggle');
});

您可以使用一些 css 更改外观：

a .text { display: none; }
a.active .text { display: block; }

HTML：

<ul class="thumbnails" data-toggle="buttons-radio">
    <li class="span3">
        <a href="#" class="thumbnail active">
            <img data-src="holder.js/260x180" alt="" />
            <span class="text">A</span>
        </a>

    </li>
<!-- ... -->

演示（jsfiddle）

从理论上讲，您应该能够将其与任何元素一起使用，而不仅仅是<a>