Bootstrap4 菜鳥教程
- Bootstrap4 教程
- Bootstrap4 安裝使用
- Bootstrap4 網(wǎng)格系統(tǒng)
- Bootstrap4 文字排版
- Bootstrap4 顏色
- Bootstrap4 表格
- Bootstrap4 圖像形狀
- Bootstrap4 Jumbotron
- Bootstrap4 信息提示框
- Bootstrap4 按鈕
- Bootstrap4 按鈕組
- Bootstrap4 徽章
- Bootstrap4 進(jìn)度條
- Bootstrap4 分頁
- Bootstrap4 列表組
- Bootstrap4 卡片
- Bootstrap4 下拉菜單
- Bootstrap4 折疊
- Bootstrap4 導(dǎo)航
- Bootstrap4 導(dǎo)航欄
- Bootstrap4 面包屑導(dǎo)航
- Bootstrap4 表單
- Bootstrap4 表單控件
- Bootstrap4 輸入框組
- Bootstrap4 自定義表單
- Bootstrap4 輪播
- Bootstrap4 模態(tài)框
- Bootstrap4 提示框
- Bootstrap4 彈出框
- Bootstrap4 滾動(dòng)監(jiān)聽
- Bootstrap4 小工具
- Bootstrap4 Flex 布局
- Bootstrap4 多媒體對象
Bootstrap4 進(jìn)度條
進(jìn)度條可用于向用戶顯示任務(wù)或操作的進(jìn)度。以下示例將向您展示如何創(chuàng)建一個(gè)帶有垂直漸變的簡單進(jìn)度條。
進(jìn)度條可以顯示用戶任務(wù)的完成過程。
創(chuàng)建一個(gè)基本的進(jìn)度條的步驟如下：
添加一個(gè)帶有 .progress 類的 <div>。
接著，在上面的 <div> 內(nèi)，添加一個(gè)帶有 class .progress-bar 的空的 <div>。
添加一個(gè)帶有百分比表示的寬度的 style 屬性，例如 style="width:70%" 表示進(jìn)度條在 70% 的位置。
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>基本進(jìn)度條</h2> <p>要?jiǎng)?chuàng)建一個(gè)默認(rèn)的進(jìn)度條，可以在容器元素上添加 .progress 類，在子元素上添加 progress-bar 類，并設(shè)置進(jìn)度條進(jìn)度情況：:</p> <div class="progress"> <div class="progress-bar" style="width:70%"></div> </div> </div> </body> </html>測試看看 ?/?
進(jìn)度條高度
進(jìn)度條高度默認(rèn)為 16px。我們可以使用 CSS 的 height 屬性來修改他：
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>進(jìn)度條高度</h2> <p>進(jìn)度條高度默認(rèn)為 16px。我們可以使用 CSS 的 height 屬性來修改他：</p> <div class="progress" style="height:10px;"> <div class="progress-bar" style="width:40%;"></div> </div> <br> <div class="progress" style="height:20px;"> <div class="progress-bar" style="width:50%;"></div> </div> <br> <div class="progress" style="height:30px;"> <div class="progress-bar" style="width:60%;"></div> </div> </div> </body> </html>測試看看 ?/?
進(jìn)度條標(biāo)簽
可以在進(jìn)度條內(nèi)添加文本，如進(jìn)度的百分比：
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>進(jìn)度條文本標(biāo)簽</h2> <div class="progress"> <div class="progress-bar" style="width:70%">70%</div> </div> </div> </body> </html>測試看看 ?/?
不同顏色的進(jìn)度條
默認(rèn)情況下進(jìn)度條為藍(lán)色，Bootstrap4 還提供了以下顏色的進(jìn)度條：
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>多種顏色的進(jìn)度條</h2> <p>Bootstrap4 提供了以下幾種進(jìn)度條顏色:</p> <div class="progress"> <div class="progress-bar" style="width:30%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-success" style="width:40%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-info" style="width:50%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-warning" style="width:60%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-danger" style="width:70%"></div> </div> </div> </body> </html>測試看看 ?/?
條紋的進(jìn)度條
可以使用 .progress-bar-striped 類來設(shè)置條紋進(jìn)度條：
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>條紋的進(jìn)度條</h2> <p>可以使用 .progress-bar-striped 類來設(shè)置條紋進(jìn)度條：</p> <div class="progress"> <div class="progress-bar progress-bar-striped" style="width:30%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div> </div> </div> </body> </html>測試看看 ?/?
動(dòng)畫進(jìn)度條
使用 .progress-bar-animated 類可以為進(jìn)度條添加動(dòng)畫：
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>動(dòng)畫進(jìn)度條</h2> <p>使用 .progress-bar-animated 類可以為進(jìn)度條添加動(dòng)畫：</p> <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div> </div> </div> </body> </html>測試看看 ?/?
混合色彩進(jìn)度條
進(jìn)度條可以設(shè)置多種顏色：
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>混合色彩進(jìn)度條</h2> <p>進(jìn)度條可以設(shè)置多種顏色:</p> <div class="progress"> <div class="progress-bar bg-success" style="width:40%"> Free Space </div> <div class="progress-bar bg-warning" style="width:10%"> Warning </div> <div class="progress-bar bg-danger" style="width:20%"> Danger </div> </div> </div> </body> </html>測試看看 ?/?
