bootstrap-输入框组

<!--
    input-group             只能针对输入框,输入框组
    input-group-addon        给输入框前后添加的额外元素
    input-group-btn            添加的额外元素是按钮；
-->
<div class="container">
    <div class="row">
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control"/>
        </div>
    </div>

    <!-- 额外内容里放的是checkbox / radio -->
    <div class="row" style="margin-top:10px">
        <div class="input-group input-group-lg">
            <span class="input-group-addon">
                <input type="checkbox" />
            </span>
            <input type="text" class="form-control"/>
        </div>
    </div>
    <div class="row" style="margin-top:10px">
        <div class="input-group input-group-lg">
            <span class="input-group-addon">
                <input type="radio" />
            </span>
            <input type="text" class="form-control"/>
        </div>
    </div>

    <!-- 额外内容里放的是按钮-->
    <div class="row" style="margin-top:10px">
        <div class="input-group">
            <input type="text" class="form-control"/>
            <span class="input-group-btn">
                <button class="btn btn-default">搜索</button>
            </span>
        </div>
    </div>

    <!-- 额外内容里放的是按钮组/下拉菜单-->
    <div class="row" style="margin-top:10px">
        <div class="input-group">
            <div class="input-group-btn">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    学院课程 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">html</a></li>
                    <li><a href="#">javascript</a></li>
                    <li><a href="#">bootstrap</a></li>
                </ul>
            </div>
            <input type="text" class="form-control"/>
        </div>
    </div>
</div>

效果：