<!-- 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>
效果:
时间: 2024-11-07 03:41:07