📌  相关文章
📜  Bootstrap-输入组

📅  最后修改于: 2020-10-27 06:12:36             🧑  作者: Mango

 

本章介绍了Bootstrap支持的另一项功能，即输入组。输入组是扩展的表单控件。使用输入组，您可以轻松地在基于文本的输入中添加和添加文本或按钮。

通过将前置和附加内容添加到输入字段，可以将公共元素添加到用户的输入中。例如，您可以添加美元符号，@作为Twitter用户名，或添加其他可能对于您的应用程序界面通用的符号。

在.form-control之前或之后添加元素-

  • 用类.input-group将其包装在
    中
  • 下一步，在同一
    中，将您的额外内容放入类为.input-group-addon的中。
  • 现在，将此放在元素之前或之后。

为了实现跨浏览器的兼容性，请避免在此处使用


.00

$ .00

输入组大小

您可以通过向.input-group本身添加相对形式大小调整类(例如.input-group-lg，input-group-sm，input-group-xs)来更改输入组的大小。其中的内容将自动调整大小。

以下示例演示了这一点-

现场演示

   
   

      

         @
         
      

        
      


      

         @
         
      

        
      


      

         @

复选框和广播插件

您可以添加或添加单选按钮和复选框，而不是文本，如以下示例所示：

现场演示

按钮附件

您甚至可以在输入组中预先添加或添加按钮。代替.input-group-addon类，您需要使用.input-group-btn类包装按钮。由于无法覆盖默认浏览器样式，因此这是必需的。以下示例演示了这一点-

现场演示

带有下拉菜单的按钮

只需将按钮和下拉菜单包装在.input-group-btn类中，即可在输入组中添加带有下拉菜单的按钮，如以下示例所示-

现场演示

分段按钮

要在输入组中细分按钮下拉菜单，请使用与下拉按钮相同的常规样式，但要在下拉菜单中添加主要操作，如以下示例所示：

现场演示