Bootstrap表单布局

3.向所有的文本元素 、 和 <select> 添加"form-control"样式。</p> <div class="jb51code"> <pre class="brush:js;"> <div class="form-group"> <label for="name">名称</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div> <div class="form-group"> <label for="name">年龄</label> <input type="text" class="form-control" id="name" placeholder="请输入年龄"> </div> </pre> </div> <p><span ><strong>二、内联布局</strong></span><br /> </p> <p>内联布局与垂直布局其他完全一样，只是需要给加个class=form-inline。</p> <div class="jb51code"> <pre class="brush:js;"> </pre> </div> <p>使用这样的内联布局之后，就是大屏幕横排显示，小屏幕垂直显示。<br /> </p> <p>小屏幕：<br /> </p> <p ><img src="https://img.php1.cn/3cd4a/1e804/ae9/223518afc93b3d38.png" alt="" /></p> <p>大屏幕：<br /> </p> <p ><img src="https://img.php1.cn/3cd4a/1e804/ae9/d6945e2c4d48956b.png" alt="" /></p> <p><span ><strong>三、水平表单<br /> </strong></span></p> <p>水平表单指的是Label标签与控件(input、button)之间的水平。</p> <p>其使用步骤如下：</p> <p>&＃8226;向父 元素添加 class .form-horizontal。</p> <p>&＃8226;把标签和控件放在一个带有 class .form-group 的 <div> 中。</p> <p>&＃8226;向标签添加 class .control-label。</p> <div class="jb51code"> <pre class="brush:js;"> <div class="form-group"> <label for="name" class="control-label col-sm-2">名称</label> <div class="col-sm-10"> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div> </div> <div class="form-group"> <label for="name" class="control-label col-sm-2">年龄</label> <div class="col-sm-10"> <input type="text" class="form-control col-sm-10" id="name" placeholder="请输入年龄"> </div> </pre> </div> <p>使用了form-horizontal之后，才能给input控件套div，并且div也能够使用网格系统了。form-horizontal样式改变了.form-group的行为，将其表现得像栅格中的行（row）一样。<br /> </p> <p><span ><strong>四、复选框Checkbox和单选框Radio</strong></span><br /> </p> <p>这两个控件在Bootstrap里面比较特殊，有时候需要横排，有时候需要竖排。</p> <p>它也跟form一样，也是有内联的。</p> <p>&＃8226;如果需要内联显示，则设置其外层包围的label的class为checkbox-inline。<br /> &＃8226;如果需要默认的竖排显示，则设置外层包围的label的class为heckbox。</p> <div class="jb51code"> <pre class="brush:js;"> <div class="checkbox"> <label><input type="checkbox" value="">香蕉</label> </div> <div class="checkbox"> <label><input type="checkbox" value="">苹果</label> </div> <div class="checkbox"> <label><input type="checkbox" value="">西瓜</label> </div> <div class="checkbox-inline"> <label><input type="checkbox" value="">香蕉</label> </div> <div class="checkbox-inline"> <label><input type="checkbox" value="">苹果</label> </div> <div class="checkbox-inline"> <label><input type="checkbox" value="">西瓜</label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" value="option1" checked> 男 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" value="option2" checked> 女 </label> </div> <div class="checkbox-inline"> <label> <input type="radio" name="optionsRadios" value="option1" checked> 男 </label> </div> <div class="checkbox-inline"> <label> <input type="radio" name="optionsRadios" value="option2" checked> 女 </label> </div> </pre> </div> <p>其显示效果如下：<br /> </p> <p ><img src="https://img.php1.cn/3cd4a/1e804/ae9/dafddeca34c11533.png" alt="" /></p> <p><span ><strong>五、静态控件<br /> </strong></span></p> <p>静态控件指的是那些不能够改变值的控件，在bootstrap中，当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用class="form-control-static"。<br /> </p> <div class="jb51code"> <pre class="brush:js;"> <div class="form-group"> <label class="col-sm-1 control-label">名称</label> <div class="col-sm-11"> <p class="form-control-static">刘玄德</p> </div> </div> </pre> </div> <p>显示效果如下：<br /> </p> <p ><img src="https://img.php1.cn/3cd4a/1e804/ae9/730ee6dc35467ddd.png" alt="" /></p> <p><span ><strong>六、表单帮助文本</strong></span><br /> </p> <p>Bootstrap表单帮助文本一般指的是输入录入的提示，通常在input后面跟个.help-block的HTML元素就可以了。</p> <div class="jb51code"> <pre class="brush:js;"> <div class="form-group"> <input class="form-control" type="text" > <span class="help-block"> 特别提醒，如果你没有什么，就不要输入了。 </span> </div> </pre> </div> <p>显示效果如下：</p> <p ><img src="https://img.php1.cn/3cd4a/1e804/ae9/4d7c58f23144c3aa.png" alt="" /></p> <p>除了这些之外，Bootstrap还有很多用来控制input高度啊，输入是否成功啊等等的一些列样式，这些只要查一下，找到相应的关键字就能够用，以后遇到奇葩的再记录。 <br /> </p> <p>以上所述是小编给大家介绍的Bootstrap表单布局，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！</p> <br> <script type="text/javascript"> var cpro_id = "u6885494"; </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js"></script> </div> <div class="blog_tags"> <ul> <li><a href="https://www.php1.cn/tag/bootstrap" target="_blank" title="bootstrap">bootstrap</a></li> <li><a href="https://www.php1.cn/tag/ios" target="_blank" title="ios">ios</a></li> <li><a href="https://www.php1.cn/tag/html" target="_blank" title="html">html</a></li> </ul> </div> <div class="article_cmnt" style="display: none;"> <div class="cmnt_title">写下你的评论吧 !</div> <form action="" method="post"> <div class="cmnt_text"> <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了