Twitter Bootstrap：如何为收音机和复选框添加标签？

Question

是否有TB方式引入无线电和复选框选项？例如：

Foo选项介绍：

• Foo One
• Foo Two

基本上，类似于<label>对<input>等的角色。以下是2个无线电选项的代码，但没有“标签”：

<div class="control-group">
    <div class="controls">
        <label class="radio" for="foo_foo1">
            <input type="radio" name="foo" value="foo1" id="foo_foo1">
            Foo One
        </label>
        <label class="radio" for="foo_foo2">
            <input type="radio" name="foo" value="foo2" id="foo_foo2">
            Foo Two
        </label>        
    </div>
</div>

喜欢TB解决方案。

Answer 1

与<fieldset>的<legend>怎么样？

就像在这里的第一个例子：http://twitter.github.com/bootstrap/base-css.html#forms

还是信息提醒？ http://twitter.github.com/bootstrap/components.html#alerts

Answer 2

我想你只想在单选按钮上方有一个标签。像这样：

<div class="control-group">
    <label for="foo_controls">Foo Options Introduction:</label>
    <div id="foo_controls" class="controls">
        <label class="radio">
            <input type="radio" name="foo" value="foo1" id="foo_foo1">
            Foo One
        </label>
        <label class="radio">
            <input type="radio" name="foo" value="foo2" id="foo_foo2">
            Foo Two
        </label>
    </div>
</div>

Answer 3

从Bootstrap 3开始，你必须在标签上使用checkbox-inline and radio-inline类。

<label class="checkbox-inline">
    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="radio-inline">
    <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>