微信小程序怎么_Bootstrap根本组件学习笔记之inp

Bootstrap基本组件学习笔记之input输入框组(9)       这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之input输入框组,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

使用input输入框组，可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。

看下面的例子：

 !DOCTYPE html 
 html lang="" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1" 
 link href="../../css/bootstrap.min.css" rel="stylesheet" 
 script src="jquery/1.11.1/jquery.min.js" /script 
 script src="../../js/bootstrap.min.js" /script 
 title input控件组 /title 
 /head 
 body 
 div 
 div /div 
 div 
 div 
 h1 样式1 /h1 
 /div 
 div 
 input type="text" 
 div 
 button type="button" 搜索 /button 
 /div 
 /div 
 div 
 h1 样式2 /h1 
 /div 
 div 
 input type="text" 
 div 
 div 
 button type="button" data-toggle="dropdown" 
 下拉菜单
 span /span 
 /button 
 li a href="#" 菜单1 /a /li 
 li a href="#" 菜单2 /a /li 
 li /li 
 li a href="#" 菜单3 /a /li 
 li a href="#" 菜单4 /a /li 
 /ul 
 /div 
 /div 
 /div 
 /div 
 div /div 
 /div 
 /body 
 /html 

效果如下：

如果和input配合使用的按钮是不可单击的，只是用于文字的说明，修改如下：

 div 
 input type="text" 
 div 用来搜索 /div 
 /div 

效果如下：

如果大家还想深入学习，可以点击进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。