bootstrap输入框组代码分享
Bootstrap支持的另一个特性，输入框组。输入框组扩展自表单控件。使用输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。
向输入域添加前缀和后缀的内容
<divstyle="padding:100px100px10px;"> <formclass="bs-examplebs-example-form"role="form"> <divclass="input-groupinput-group-lg"> <spanclass="input-group-addon">@</span> <inputtype="text"class="form-control"placeholder="twitterhandle"> </div> <br> <divclass="input-group"> <inputtype="text"class="form-control"> <spanclass="input-group-addon">.00</span> </div> <br> <divclass="input-group"> <spanclass="input-group-addon">$</span> <inputtype="text"class="form-control"> <spanclass="input-group-addon">.00</span> </div> </form> </div>
复选框和单选插件作为输入框组的前缀或者后缀元素
<divstyle="padding:100px100px10px;"> <formclass="bs-examplebs-example-form"role="form"> <divclass="row"> <divclass="col-lg-6"> <divclass="input-group"> <spanclass="input-group-addon"> <inputtype="checkbox"> </span> <inputtype="text"class="form-control"> </div><!--/input-group--> </div><!--/.col-lg-6--><br> <divclass="col-lg-6"> <divclass="input-group"> <spanclass="input-group-addon"> <inputtype="radio"> </span> <inputtype="text"class="form-control"> </div><!--/input-group--> </div><!--/.col-lg-6--> </div><!--/.row--> </form> </div>
按钮作为输入框组的前缀或者后缀元素
<divstyle="padding:100px100px10px;"> <formclass="bs-examplebs-example-form"role="form"> <divclass="row"> <divclass="col-lg-6"> <divclass="input-group"> <spanclass="input-group-btn"> <buttonclass="btnbtn-default"type="button"> Go! </button> </span> <inputtype="text"class="form-control"> </div><!--/input-group--> </div><!--/.col-lg-6--><br> <divclass="col-lg-6"> <divclass="input-group"> <inputtype="text"class="form-control"> <spanclass="input-group-btn"> <buttonclass="btnbtn-default"type="button"> Go! </button> </span> </div><!--/input-group--> </div><!--/.col-lg-6--> </div><!--/.row--> </form> </div> class="input-group-btn" <divclass="input-group"> <divclass="input-group-btn"> <buttontype="button"class="btnbtn-default dropdown-toggle"data-toggle="dropdown"> 下拉菜单 <spanclass="caret"></span> </button> <ulclass="dropdown-menu"> <li><ahref="#">功能</a></li> <li><ahref="#">另一个功能</a></li> <li><ahref="#">其他</a></li> <liclass="divider"></li> <li><ahref="#">分离的链接</a></li> </ul> </div><!--/btn-group--> <inputtype="text"class="form-control"> </div><!--/input-group--> <divclass="input-group"> <divclass="input-group-btn"> <buttontype="button"class="btnbtn-primarydropdown-toggle"data-toggle="dropdown"> <spanclass="glyphiconglyphicon-music"></span>GO <spanclass="caret"></span> </button> <ulclass="dropdown-menu"> <liclass="dropdown-header">下拉菜单标题</li> <li><ahref="#">A</a></li> <liclass="divider"><</li> <li><ahref="#">B</a></li> </ul> </div> <inputtype="text"class="form-control"> </div> <br> <divclass="input-group"> <divclass="input-group-btn"> <buttontype="button"class="btnbtn-primary"> <spanclass="glyphiconglyphicon-music"></span>GO </button> <buttontype="button"class="btnbtn-primarydropdown-toggle"data-toggle="dropdown"> <spanclass="caret"></span> </button> <ulclass="dropdown-menu"> <liclass="dropdown-header">下拉菜单标题</li> <li><ahref="#">A</a></li> <liclass="divider"><</li> <li><ahref="#">B</a></li> </ul> </div> <inputtype="text"class="form-control"> </div> <br>
以上所述是小编给大家介绍的bootstrap输入框组代码分享，希望对大家有所帮助！