PHP前端开发

bootstrap输入框组有哪些

百变鹏仔 1个月前 (11-14) #bootstrap
文章标签 输入框

推荐教程:Bootstrap教程

1、Bootstrap4 输入框组

我们可以使用 .input-group 类来向表单输入框中添加更多的样式,如图标、文本或者按钮。使用 .input-group-prepend 类可以在输入框的的前面添加文本信息, .input-group-append 类添加在输入框的后面。最后,我们还需要使用 .input-group-text 类来设置文本的样式。

  
    
      @    
      
  
        
      @runoob.com    
  

效果图:

2、输入框大小

使用 .input-group-sm 类来设置小的输入框, .input-group-lg 类设置大的输入框:

  
     
       Small    
      
  
    
      Default    
      
  
    
      Large    
      

  3、多个输入框和文本

<!-- 多个输入框 -->
  
    
      Person    
          
   
    
      One      Two      Three    
      

4、复选框与单选框

<div>  <div>    <div>      <input>     </div>  </div>  <input></div> <div>  <div>    <div>      <input>     </div>  </div>  <input></div>

效果图:

5、输入框加按钮组

<div>  <div>    <button>Basic Button</button>   </div>  <input></div> <div>  <input>  <div>    <button>Go</button>   </div></div> <div>  <input>  <div>    <button>OK</button>     <button>Cancel</button>   </div></div>

6、设置下拉菜单

<div>  <div>    <button>      选择网站    </button>    <div>      <a>GOOGLE</a>      <a>RUNOOB</a>      <a>TAOBAO</a>    </div>  </div>  <input></div>

效果图:

7、输入框组标签

在输入框组通过在输入框组外围的 label 来设置标签,标签的 for 属性需要与输入框组的 id 对应,点击标签后可以聚焦输入框:

<label>Write your email here:</label><div>  <input>  <div>    <span>@runoob.com</span>  </div></div>

效果图: