BootStrap笔记-按钮相关
生活随笔
收集整理的這篇文章主要介紹了
BootStrap笔记-按钮相关
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
程序運行截圖如下：
源碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CN_TEST1</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- bootstrap css核心文件--><link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css"> <!-- bootstrap使用到了jquery，需要提前引用--><script src="js/jquery-3.5.1.min.js"></script> <!-- 彈窗、提示、下拉菜單--><script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script> <!-- bootstrap核心文件--><script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script></head> <body><div class="container-fluid"><button type="button" class="btn">btn按鈕</button><button type="button" class="btn btn-primary">btn-primary按鈕</button><button type="button" class="btn btn-secondary">btn-secondary按鈕</button><button type="button" class="btn btn-success">btn-success按鈕</button><button type="button" class="btn btn-info">btn-info按鈕</button><button type="button" class="btn btn-warning">btn-warning按鈕</button><button type="button" class="btn btn-dark">btn-dark按鈕</button><button type="button" class="btn btn-light">btn-light按鈕</button><button type="button" class="btn btn-link">btn-link按鈕</button><br/><button type="button" class="btn">btn按鈕</button><button type="button" class="btn btn-outline-primary">btn-primary按鈕</button><button type="button" class="btn btn-outline-secondary">btn-secondary按鈕</button><button type="button" class="btn btn-outline-success">btn-success按鈕</button><button type="button" class="btn btn-outline-info">btn-info按鈕</button><button type="button" class="btn btn-outline-warning">btn-warning按鈕</button><button type="button" class="btn btn-outline-dark">btn-dark按鈕</button><button type="button" class="btn btn-outline-light">btn-light按鈕</button><button type="button" class="btn btn-outline-link">btn-link按鈕</button><br/><button type="button" class="btn">btn按鈕</button><button type="button" class="btn btn-outline-primary btn-lg">btn-primary按鈕</button><button type="button" class="btn btn-outline-secondary btn-lg">btn-secondary按鈕</button><button type="button" class="btn btn-outline-success btn-lg">btn-success按鈕</button><button type="button" class="btn btn-outline-info btn-lg">btn-info按鈕</button><button type="button" class="btn btn-outline-warning btn-lg">btn-warning按鈕</button><button type="button" class="btn btn-outline-dark btn-lg">btn-dark按鈕</button><button type="button" class="btn btn-outline-light btn-lg">btn-light按鈕</button><button type="button" class="btn btn-outline-link btn-lg">btn-link按鈕</button><br/><button type="button" class="btn">btn按鈕</button><button type="button" class="btn btn-outline-primary btn-lg btn-block">btn-primary按鈕</button><button type="button" class="btn btn-outline-secondary btn-lg btn-block">btn-secondary按鈕</button><button type="button" class="btn btn-outline-success btn-lg btn-block">btn-success按鈕</button><button type="button" class="btn btn-outline-info btn-lg btn-block">btn-info按鈕</button><button type="button" class="btn btn-outline-warning btn-lg btn-block">btn-warning按鈕</button><button type="button" class="btn btn-outline-dark btn-lg btn-block">btn-dark按鈕</button><button type="button" class="btn btn-outline-light btn-lg btn-block">btn-light按鈕</button><button type="button" class="btn btn-outline-link btn-lg btn-block">btn-link按鈕</button><br/><button type="button" class="btn btn-outline-primary btn-lg btn-block active">btn-primary按鈕</button><button type="button" class="btn btn-outline-secondary btn-lg btn-block" disabled>btn-secondary按鈕</button><br/><button class="btn btn-primary"><span class="spinner-border spinner-border-sm"></span></button><button class="btn btn-primary"><span class="spinner-border spinner-border-sm"></span>Loading...</button><button class="btn btn-primary"><span class="spinner-grow spinner-grow-sm"></span>Loading...</button></div> </body> </html>解釋：
①span中的一個類是spinner-border和sprnner-graw分別代表的效果：
②使用BootStrap的button屬性時，要用btn類，后面再接各種不同的類樣式。
總結
以上是生活随笔為你收集整理的BootStrap笔记-按钮相关的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python笔记-方差分析之单因素方差分
- 下一篇： js获取精确宽度/高度(带小数位像素)