Bootstrap框架針對按鈕的狀態(tài)做了一些特殊處理。在Bootstrap框架中針對按鈕的狀態(tài)效果主要分為兩種:活動狀態(tài)和禁用狀態(tài)。
Bootstrap按鈕的活動狀態(tài)主要包括按鈕的懸浮狀態(tài)(:hover),點擊狀態(tài)(:active)和焦點狀態(tài)(:focus)幾種。
/*源碼請查看bootstrap.css文件第2011行~第2029行*/
.btn:focus, .btn:active:focus, .btn.active:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .btn:hover, .btn:focus { color: #333; text-decoration: none; } .btn:active, .btn.active { background-image: none; outline: 0; -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); }
而且不同風格下的按鈕都具有這幾種狀態(tài)效果,只是顏色做了一定的調(diào)整,我們以默認風格(btn-default)為例:
/*源碼請查看bootstrap.css文件第2045行~第2058行*/
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { color: #333; background-color: #ebebeb; border-color: #adadad; } .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { background-image: none; }
當按鈕處理正在點擊狀態(tài)(也就是鼠標按下的未松開的狀態(tài)),對于<button>元素是通過“:active”偽類實現(xiàn),而對于<a>這樣的標簽元素則是通過添加類名“.active”來實現(xiàn)。
我來試一試:觀察按鈕懸浮狀態(tài)、點擊狀態(tài)和焦點狀態(tài)的樣式變化。
請驗證,完成請求
由于請求次數(shù)過多,請先驗證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報