Bootstrap響應式前端框架筆記九——輸入框組

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