Bootstrap響應式前端框架筆記八——按鈕組

Bootstrap響應式前端框架筆記八——按鈕組

    在Bootstrap定義的Css樣式中，開發者能夠將一組btn控件包裹在btn-group類中使其組合成按鈕組控件，組合後的控件左右兩側的按鈕將被圓角處理，示例代碼以下：

<p>正常的按鈕組</p>
		<div class="btn-group">
			<button class="btn btn-default">左按鈕</button>
			<button class="btn btn-danger">中心按鈕</button>
			<button class="btn btn-primary">右按鈕</button>
		</div>

效果以下：

    也能夠將一組按鈕組包裹在btn-toolbar類中，使其組合成爲按鈕組工具欄，示例以下：

<p>按鈕組工具欄</p>
		<div class="btn-toolbar">
			<div class="btn-group">
				<button class="btn btn-default">左按鈕</button>
				<button class="btn btn-danger">中心按鈕</button>
				<button class="btn btn-primary">右按鈕</button>
			</div>
			<div class="btn-group">
				<button class="btn btn-default">左按鈕</button>
				<button class="btn btn-primary">右按鈕</button>
			</div>
			<div class="btn-group">
				<button class="btn btn-primary">獨立按鈕</button>
			</div>
		</div>

效果以下：

按鈕組也能夠進行嵌套，使用按鈕組嵌套的方式也能夠實現下拉菜單效果，示例以下：

<div class="btn-group">
			<button class="btn btn-default">左按鈕</button>
			<button class="btn btn-danger">中心按鈕</button>
			<div class="btn-group">
				<button class="btn btn-info dropdown-toggle">菜單
				<span class="caret"></span>
				</button>
				<ul class="dropdown-menu">
					<li><a>金牛</a></li>
					<li><a>獅子</a></li>
				</ul>
			</div>
		</div>

效果以下：

    默認的按鈕組是水平排列的，爲其設置btn-group-vertical類能夠將其設置爲豎直排列的，示例以下：

<p>豎直排列的按鈕組</p>
		<div class="btn-group-vertical">
			<button class="btn btn-default">左按鈕</button>
			<button class="btn btn-danger">中心按鈕</button>
			<button class="btn btn-primary">右按鈕</button>
		</div>

效果以下：

    若是須要使按鈕組填充其父容器，須要設置btn-group-justified類，而且使用a標籤做爲按鈕，示例以下：

<p>設置按鈕組寬度充滿父容器</p>
		<div class="btn-group btn-group-justified">
			<a class="btn btn-default">左按鈕</a>
			<a class="btn btn-danger">中心按鈕</a>
			<a class="btn btn-primary">右按鈕</a>
		</div>

效果以下：

    經過按鈕組，能夠十分方便的實現分裂式下拉菜單，示例以下：

<p>分裂式下拉菜單</p>
		<div class="btn-group">
			<button type="button" class="btn btn-danger">金牛</button>
			<button type="button" class="btn btn-danger 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>

效果以下：

   另外，本篇博客中全部的實例代碼及顯示效果，在以下地址中，須要的能夠自行對照學習。

http://zyhshao.github.io/bootStrapDemo/buttonGroup.html。

前端學習新人，有志同道合的朋友，歡迎交流與指導，QQ羣:541458536