• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 前端开发 >> bootstrap教程 >> bootstrap输入框input组件加文字或按钮

bootstrap输入框input组件加文字或按钮

• 作者：创新互联 文章来源：网页前端技术 点击数： 更新时间：2016-03-23

• 文本输入框就是可以在<input>元素前后加上文字或按钮，可以实现对表单控件的扩展。

  //bootstrap输入框 在左侧添加文字

  <div class="input-group">
  	<span class="input-group-addon">@</span>
  	<input type="text" class="form-control">
  </div>
  

  //bootstrap输入框 在右侧添加文字

  <div class="input-group">
  	<input type="text" class="form-control">
  	<span class="input-group-addon">@163.com</span>
  </div>
  

  //bootstrap输入框 在两侧添加文字

  <div class="input-group">
  	<span class="input-group-addon">$</span>
  	<input type="text" class="form-control">
  	<span class="input-group-addon">.00</span>
  </div>
  

  //bootstrap输入框 设置尺寸，另外三种分别是默认、xs、sm

  <div class="input-group input-group-lg">
  

  //bootstrap输入框 左侧使用复选框和单选框

  <div class="input-group">
  	<span class="input-group-addon"><input type="checkbox"></span>
  	<input type="text" class="form-control">
  </div>
  <div class="input-group">
  	<span class="input-group-addon"><input type="radio"></span>
  	<input type="text" class="form-control">
  </div>
  

  //bootstrap输入框 左侧使用按钮

  <div class="input-group">
  	<span class="input-group-btn">
  		<button type="button" class="btn btn-default">按钮</button>
  	</span>
  	<input type="text" class="form-control">
  </div>
  

  //bootstrap输入框 左侧使用下拉菜单或分列式

  <div class="input-group">
  	<span class="input-group-btn">
  		<button class="btn btn-default dropdown-toggle"
  		data-toggle="dropdown">
  			下拉菜单
  			<span class="caret"></span>
  		</button>
  		<ul class="dropdown-menu">
  			<li class="dropdown-header">网站导航</li>
  			<li><a href="#">首页</a></li>
  			<li><a href="#">资讯</a></li>
  			<li class="divider"><a href="#">产品</a></li>
  			<li class="disabled"><a href="#">关于</a></li>
  		</ul>
  	</span>
  	<input type="text" class="form-control">
  </div>
  

• 导航条组件navbar是网站制作导航页头响应式基础组件 :上一篇
  bootstrap按钮式下拉菜单 :下一篇