本章将讲解Bootstrap支持的另一个特性,输入框组。输入框组扩展自表单控件。使用输入框组,您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素。例如,您可以添加美元符号,或者在Twitter用户名前添加@,或者应用程序接口所需要的其他公共的元素。-control添加前缀或后缀元素的步骤如下:-group的<div>中。接着,在相同的<div>内,-group-addon的<span>内放置额外的内容。把该<span>放置在<input>元素的前面或者后面。为了保持跨浏览器的兼容性,请避免使用<select>元素,因为它们在WebKit浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的class,输入框组是一个孤立的组件。基本的输入框组下面的实例演示了基本的输入框组:<!DOCTYPEhtml><html><head><title>Bootstrap实例-基本的输入框组</title><linkhref="/bootstrap/css/"rel="stylesheet"><scriptsrc="/scripts/"></script><scriptsrc="/bootstrap/js/"></script></head><body><divstyle="padding:100px100px10px;"><formclass="bs-examplebs-example-form"role="form"><divclass="input-group"><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></body></html>尝试一下»结果如下所示:-group添加相对表单大小的class(-group-lg、input-group-sm、input-group-xs)来改变输入框组的大小。输入框中的内容会自动调整大小。下面的实例演示了这点:<!DOCTYPEhtml><html><head><title>Bootstrap实例-输入框组的大小</title><linkhref="/bootstrap/css/
Bootstrap 输入框组 来自淘豆网m.daumloan.com转载请标明出处.
