.btn-default——按鈕的預設樣式；
.btn-primary——按鈕的首選樣式；
.btn-success——按鈕的成功樣式；
.btn-info——按鈕的一般資訊樣式；‘
.btn-warning——按鈕的警告樣式；
.btn-danger——按鈕的危險樣式；
.btn-link——按鈕的連結樣式；
.btn-lg——大按鈕樣式；
.btn-sm——小按鈕樣式；
.btn-xs——超小按鈕樣式；
.btn-block——將按鈕設定為充滿父元素；
.active——設定按鈕為啟用狀態；
.disabled——設定按鈕為禁用狀態；
.img-circle——將圖片設定為圓形；
.img-rounded——為圖片設定為圓角；
.img-thumbnail——將圖片設定為方形；
.img-responsive——為圖片添加響應式；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>CSS全域樣式_按鈕和圖片</title> <link rel="stylesheet" href="bootstrap.min.css" type="text/css"></head><body><div class="container"> <p> <button type="button" class="btn btn-default">（預設樣式）Default</button> <button type="button" class="btn btn-primary">（喜好設定）Primary</button> <button type="button" class="btn btn-success">（成功）Success</button> <button type="button" class="btn btn-info">（一般資訊）Info</button> <button type="button" class="btn btn-warning">（警告）Warning</button> <button type="button" class="btn btn-danger">（危險）Danger</button> <button type="button" class="btn btn-link">（連結）Link</button> </p> <p> <button type="button" class="btn btn-success btn-lg" disabled>success</button> <button type="button" class="btn btn-success active">success</button> <button type="button" class="btn btn-success btn-sm">success</button> <button type="button" class="btn btn-success btn-xs">success</button> </p> <button type="button" class="btn btn-success btn-block">success</button> <a href="#" class="btn btn-primary btn-block">登入</a> <input class="btn btn-primary btn-block" value="提交"/> <img src="images/g.jpg" alt="girl" class="img-circle"/> <img src="images/g.jpg" alt="girl" class="img-rounded"/> <img src="images/g.jpg" alt="girl" class="img-thumbnail"/> <img src="images/937654.jpg" alt="girl" class="img-responsive"/></div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
