Bootstrap响应式前端框架笔记九——输入框组
博客专区 > 珲少 的博客 > 博客详情
Bootstrap响应式前端框架笔记九——输入框组
珲少 发表于11个月前
Bootstrap响应式前端框架笔记九——输入框组
  • 发表于 11个月前
  • 阅读 130
  • 收藏 0
  • 点赞 0
  • 评论 0

华为云·免费上云实践>>>   

摘要: 通过输入框组件,开发者可以将输入框与按钮,图标,下拉菜单组合使用

Bootstrap响应式前端框架笔记九——输入框组

    将input标签与input-group-addon类组合使用可以为输入框添加前后挂件,需要注意,Bootstrap不支持在输入框控件一侧添加多个挂件,示例如下:

		<p>输入框的前后可以添加额外的标题元素</p>
		<div class="input-group form-group">
			<span class="input-group-addon">邮箱</span>
			<input type="text" class="form-control" placeholder="邮箱">
		</div>

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

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

效果如下:

    也可以将输入框组合为选择控件,示例如下:

		<p>将输入框组合为选择组件</p>
		<div class="input-group form-group">
			<span class="input-group-addon">
                <input type="checkbox">
            </span>
			<input type="text" class="form-control">
		</div>
		<div class="input-group form-group">
			<span class="input-group-addon">
                <input type="radio">
            </span>
			<input type="text" class="form-control">
		</div>

效果如下:

    在输入框的前后,也可以添加功能按钮,示例如下:

		<p>为输入框添加功能按钮</p>
		<div class="input-group form-group">
			<span class="input-group-btn">
                <button class="btn btn-default" type="button">星座</button>
            </span>
			<input type="text" class="form-control">
		</div>
		<div class="input-group form-group">
			<input type="text" class="form-control">
			<span class="input-group-btn">
                <button class="btn btn-primary" type="button">前往</button>
            </span>
		</div>

效果如下图:

    在输入框组件中,也可以与下拉菜单进行嵌套使用,示例如下:

		<p>在输入框组件中嵌套下拉菜单组件</p>
		<div class="input-group">
			<div class="input-group-btn">
				<button type="button" class="btn btn-default dropdown-toggle">星座 <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>
			<input type="text" class="form-control">
		</div>
		<div class="input-group">
			<input type="text" class="form-control">
			<div class="input-group-btn">
				<button type="button" class="btn btn-default">金牛</button>
				<button class="btn btn-default dropdown-toggle"><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>
		</div>

效果如下:

   另外,本篇博客中所有的实例代码及显示效果,在如下地址中,需要的可以自行对照学习。

http://zyhshao.github.io/bootStrapDemo/inputGroup.html

前端学习新人,有志同道合的朋友,欢迎交流与指导,QQ群:541458536

共有 人打赏支持
粉丝 773
博文 361
码字总数 415579
×
珲少
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: