Bootstrap4输入框组的案例-创新互联

这篇文章主要介绍了Bootstrap4输入框组的案例，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

十余年的耒阳网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整耒阳建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“耒阳网站设计”,“耒阳网站推广”以来，每个客户项目都认真落实执行。

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、复选框与单选框

效果图：

5、输入框加按钮组

  

    Basic Button 
  
  
 

  
  

    Go 
  
 

  
  

    OK 
    Cancel 
  

6、设置下拉菜单

  

    
      选择网站    
    

      GOOGLE
      RUNOOB
      TAOBAO
    
  
  

效果图：

7、输入框组标签

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

Write your email here:

  
  

    @runoob.com
  

效果图：

感谢你能够认真阅读完这篇文章，希望小编分享Bootstrap4输入框组的案例内容对大家有帮助，同时也希望大家多多支持创新互联建站，关注创新互联网站制作公司行业资讯频道，遇到问题就找创新互联建站，详细的解决方法等着你来学习!

网站栏目：Bootstrap4输入框组的案例-创新互联
URL分享：http://cxhlcq.com/article/dsggih.html