這篇文章主要介紹了bootstrap有什么樣式按鈕，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站成立于2013年，我們提供高端網(wǎng)站建設(shè)、成都網(wǎng)站制作公司、成都網(wǎng)站設(shè)計(jì)、網(wǎng)站定制、營(yíng)銷型網(wǎng)站建設(shè)、小程序制作、微信公眾號(hào)開發(fā)、成都網(wǎng)站推廣服務(wù)，提供專業(yè)營(yíng)銷思路、內(nèi)容策劃、視覺設(shè)計(jì)、程序開發(fā)來(lái)完成項(xiàng)目落地，為成都玻璃隔斷企業(yè)提供源源不斷的流量和訂單咨詢。

bootstrap樣式按鈕有：1、“.btn”圓角灰色按鈕；2、“.btn-lg”大按鈕；3、“.btn-sm”小按鈕；4、“.btn-xs”超小按鈕；5、“.btn-block”塊級(jí)按鈕；6、“.disabled”禁用樣式按鈕等等。

本教程操作環(huán)境：Windows7系統(tǒng)、bootsrap3.3.7版、DELL G3電腦

bootstrap 按鈕樣式匯總

類樣式	描述
.btn	圓角灰色按鈕，為了讓按鈕不那么尖銳，我們的按鈕都應(yīng)該使用這個(gè)樣式來(lái)獲得圓角，然后再覆蓋上其他的特性。
.btn-default	默認(rèn)/標(biāo)準(zhǔn)按鈕，白色的按下灰色。
.btn-primary	原始按鈕樣式（未被操作），這個(gè)跟active相對(duì)應(yīng)，他是一個(gè)按鈕沒(méi)被操作的樣式，而active是按鈕被點(diǎn)擊時(shí)顯示的相應(yīng)的樣式。
.btn-success	表示成功的動(dòng)作
.btn-info	該樣式可用于要彈出信息的按鈕
.btn-warning	表示需要謹(jǐn)慎操作的按鈕
.btn-danger	表示一個(gè)危險(xiǎn)動(dòng)作的按鈕操作
.btn-link	讓按鈕看起來(lái)像個(gè)鏈接 (仍然保留按鈕行為)
.btn-lg	大按鈕
.btn-sm	小按鈕
.btn-xs	超小按鈕
.btn-block	塊級(jí)按鈕(拉伸至父元素100%的寬度)
.active	按鈕被點(diǎn)擊，按鈕在激活時(shí)將呈現(xiàn)為被按壓的外觀（深色的背景、深色的邊框、陰影）。
.disabled	禁用按鈕，顏色會(huì)變淡 50%，并失去漸變。

基本的按鈕組

<div class="btn-group">
    <button type="button" class="btn btn-default">按鈕 1</button>
    <button type="button" class="btn btn-default">按鈕 2</button>
    <button type="button" class="btn btn-default">按鈕 3</button>
</div>

按鈕的大小

<div class="btn-group btn-group-lg">
	<button type="button" class="btn btn-default">Button 1</button>
	<button type="button" class="btn btn-default">Button 2</button>
	<button type="button" class="btn btn-default">Button 3</button>
</div>
<div class="btn-group btn-group-sm">
	<button type="button" class="btn btn-default">Button 4</button>
	<button type="button" class="btn btn-default">Button 5</button>
	<button type="button" class="btn btn-default">Button 6</button>
</div>
<div class="btn-group btn-group-xs">
	<button type="button" class="btn btn-default">Button 7</button>
	<button type="button" class="btn btn-default">Button 8</button>
	<button type="button" class="btn btn-default">Button 9</button>
</div>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“bootstrap有什么樣式按鈕”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

網(wǎng)頁(yè)題目：bootstrap有什么樣式按鈕
網(wǎng)站路徑：http://www.rwnh.cn/article20/ggohco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)公司、軟件開發(fā)、ChatGPT、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)