Introducing a feature of Bootstrap input box group

Place the before or after the element.

To maintain cross-browser compatibility, avoid using elements as they do not render fully in WebKit browsers. Do not apply the class of the input box group directly to the form group. The input box group is an isolated component.

Previous words

Sometimes, we need to combine a text input box (input group) with a file or small icon for display, which we call addon. That is, by adding text or buttons in front, behind or on both sides of the text input box

, the form control can be extended. This article will introduce in detail the Bootstrap input box group

Basic usage

Add additional elements or buttons on either side of the input box. You can also add additional elements on both sides of the input box at the same time

  @
  

  
  @example.com

  $
  
  .00

  
  

【Notes】

　1. Avoid using elements because WebKit browsers cannot fully draw its styles

2. Avoid using </code> elements because of their <code>rows</code> Attributes are not supported in some cases </p> <p> 3. Do not mix form groups or grid column (column) classes directly with input box groups. Instead, the input box group is nested inside the form group or grid-related element </p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><h3>错误示范</h3><div class="input-group col-xs-4">   <span class="input-group-addon" id="basic-addon1">@</span>   <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group col-xs-8">   <span class="input-group-addon" id="basic-addon1">@</span>   <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><h3>正确示范</h3><div class="col-xs-4"><div class="input-group">  <span class="input-group-addon" id="basic-addon1">@</span>  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div></div><div class="col-xs-8"><div class="input-group">  <span class="input-group-addon" id="basic-addon1">@</span>  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div></div></pre></div> <p><br></p> <p>　4. <span class="text-danger">You can add multiple ( <code>.input-group-addon</code> or <code>.input-group-btn</code>)</span></p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div class="input-group">   <span class="input-group-addon" id="basic-addon1">@</span>   <span class="input-group-addon" id="basic-addon1">@</span>       <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">   <span class="input-group-addon" id="basic-addon1">@</span></div></pre></div> <p><br></p> <p> 5. <span class="text-danger">Does not support adding multiple form controls to a single input box group</span></p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div class="input-group">   <span class="input-group-addon" id="basic-addon1">@</span>   <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">   <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div></pre></div> <p><br></p> <p> </p> <h3> Size </h3> <p> Add the corresponding size class to <code>.input-group</code>, and the elements contained within it will automatically adjust their size. There is no need to repeatedly add sizing classes for each element in the input box group. .input-group-lg and .input-group-sm are provided, but the ultra-small style is not provided. Maybe the author thinks it is not needed</p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div class="input-group input-group-lg">   <span class="input-group-addon" id="basic-addon1">@</span>   <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group input-group-sm">   <span class="input-group-addon" id="basic-addon1">@</span>   <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div><div class="input-group">   <span class="input-group-addon" id="basic-addon1">@</span>   <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1"></div></pre></div> <p><br></p> <p> </p> <h3>Extra Elements</h3> <p>[Multi-select box or radio button] </p> <p> You can add a multi-select box or radio button as an additional element to the input box group</p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div class="input-group">   <span class="input-group-addon"><input type="checkbox" aria-label="...">   </span>   <input type="text" class="form-control" aria-label="..."></div><div class="input-group">   <span class="input-group-addon"><input type="radio" aria-label="...">   </span>   <input type="text" class="form-control" aria-label="..."></div></pre></div> <p><br></p> <p>【Button】</p> <p> To add a button to the input box group, you need to add an extra layer of nesting, not <code>.input-group -addon</code>, instead add <code>.input-group-btn</code> to wrap the button element. Since the .btn button style defines various styles, it is not like checkbox, radio, label, etc. that can be directly placed in the .input-group-addon style. Therefore, in order to avoid conflicts, the author set up a separate .input-group-btn style for the .btn style to replace .input-group-addon as the new addon container</p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div class="input-group">   <span class="input-group-btn"><button class="btn btn-default" type="button">Go!</button>   </span>   <input type="text" class="form-control" placeholder="Search for..."></div></pre></div> <p><br></p> <p>[Button drop-down menu]</p> <p> It’s natural that if you can support buttons, you can also support button drop-down menus. No additional style support is needed, just in the ordinary Just apply a data-toggle="dropdown" attribute to the .btn button</p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div class="input-group">  <div class="input-group-btn"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button><ul class="dropdown-menu">  <li><a href="#">Action</a></li>  <li><a href="#">Another action</a></li>  <li><a href="#">Something else here</a></li>  <li role="separator" class="divider"></li>  <li><a href="#">Separated link</a></li></ul>   </div>   <input type="text" class="form-control" aria-label="..."></div></pre></div> <p><br></p> <p>[Split button drop-down menu]</p> <div class="cnblogs_code"><pre class="brush:php;toolbar:false"><div class="input-group">  <div class="input-group-btn"> <button class="btn btn-default" type="button">Action</button><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button><ul class="dropdown-menu">  <li><a href="#">Action</a></li>  <li><a href="#">Another action</a></li>  <li><a href="#">Something else here</a></li>  <li role="separator" class="divider"></li>  <li><a href="#">Separated link</a></li></ul>   </div>   <input type="text" class="form-control" aria-label="..."></div></pre></div> <p><br></p> <p> </p><p>The above is the detailed content of Introducing a feature of Bootstrap input box group. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Anchor setting for jump within the page" href="//m.sbmmt.com/m/faq/372421.html">Anchor setting for jump within the page</a></span><span>Next article：<a class="dBlack" title="Anchor setting for jump within the page" href="//m.sbmmt.com/m/faq/372425.html">Anchor setting for jump within the page</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="//m.sbmmt.com/m/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="//m.sbmmt.com/m/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="//m.sbmmt.com/m/"><b class="icon1"></b><p>Home</p></a></li><li><a href="//m.sbmmt.com/m/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="//m.sbmmt.com/m/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="//m.sbmmt.com/m/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="//m.sbmmt.com/m/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="//m.sbmmt.com/m/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="//m.sbmmt.com/m/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="//m.sbmmt.com/m/" >Home</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/course.html" >Course</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/xiazai" >Download</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/game" >Game</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', { slidesPerView : 'auto', observer: true,//修改swiper自己或子元素时，自动初始化swiper observeParents: true,//修改swiper的父元素时，自动初始化swiper }); </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>