Bootstarp学习教程(11) 输入框组组件分析

熊孩纸 阅读:150 2021-04-01 00:25:58 评论:0


基本案例:通过在基于文本的输入框前面,后面或是两边加上文字或按钮,可以扩展对表单的控制。用带有.input-group-addon.input-group,可以给.form-control前面或后面追加元素。

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

尺寸:input-group添加标明尺寸的class,它自己和其中的内容都会自动调整尺寸。没必要给每个元素都重复添加尺寸class。

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


复选框与单选框:可以把复选框或单选框放在输入组里而不是文本前。

<div class="row"> 
  <div class="col-lg-6"> 
    <div class="input-group"> 
      <span class="input-group-addon"> 
        <input type="checkbox"> 
      </span> 
      <input type="text" class="form-control"> 
    </div><!-- /input-group --> 
  </div><!-- /.col-lg-6 --> 
  <div class="col-lg-6"> 
    <div class="input-group"> 
      <span class="input-group-addon"> 
        <input type="radio"> 
      </span> 
      <input type="text" class="form-control"> 
    </div><!-- /input-group --> 
  </div><!-- /.col-lg-6 --> 
</div><!-- /.row -->


附加按钮:要用 .input-group-btn 包住按钮而不是 .input-group-addon。这是因为默认的浏览器样式不能被覆盖

	<div class="row"> 
			<div class="col-lg-6"> 
				<div class="input-group"> 
					<span class="input-group-btn"> 
						<button class="btn btn-default" type="button">搜索</button> </span> <input 
						type="text" class="form-control"> 
				</div> 
				<!-- /input-group --> 
			</div> 
			<!-- /.col-lg-6 --> 
			<div class="col-lg-6"> 
				<div class="input-group"> 
					<input type="text" class="form-control"> <span 
						class="input-group-btn"> 
						<button class="btn btn-default" type="button">搜索</button> </span> 
				</div> 
				<!-- /input-group --> 
			</div> 
			<!-- /.col-lg-6 --> 
		</div> 
		<!-- /.row --> 
 
	</div>


带下拉菜单的按钮:

<div class="row"> 
  <div class="col-lg-4"> 
    <div class="input-group"> 
      <div class="input-group-btn"> 
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">链接按钮 <span class="caret"></span></button> 
        <ul class="dropdown-menu"> 
          <li><a href="#">链接一</a></li> 
          <li><a href="#">链接二</a></li> 
          <li><a href="#">其他链接</a></li> 
          <li class="divider"></li> 
          <li><a href="#">指定链接</a></li> 
        </ul> 
      </div><!-- /btn-group --> 
      <input type="text" class="form-control"> 
    </div><!-- /input-group --> 
  </div><!-- /.col-lg-6 --> 
  <div class="col-lg-4"> 
    <div class="input-group"> 
      <input type="text" class="form-control"> 
      <div class="input-group-btn"> 
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">链接按钮 <span class="caret"></span></button> 
        <ul class="dropdown-menu pull-right"> 
          <li><a href="#">链接一</a></li> 
          <li><a href="#">链接二</a></li> 
          <li><a href="#">其他链接</a></li> 
          <li class="divider"></li> 
          <li><a href="#">指定链接</a></li> 
        </ul> 
      </div><!-- /btn-group --> 
    </div><!-- /input-group --> 
  </div><!-- /.col-lg-6 --> 
</div><!-- /.row -->



声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

一个IT知识分享的公众号