標簽：ati git 需要 動畫效果 ane ie9 out 包含 變化
通過這些簡單、靈活的進度條，為當前工作流程或動作提供實時反饋。
默認樣式的進度條
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div>
將設置了 .sr-only 類的 <span> 標簽從進度條組件中移除 類，從而讓當前進度顯示出來。
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> 60% </div> </div>
在展示很低的百分比時，如果需要讓文本提示能夠清晰可見，可以為進度條設置 min-width 屬性。
<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"> 0% </div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;"> 2% </div> </div>
進度條組件使用與按鈕和警告框相同的類，根據不同情境展現相應的效果。
<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div>
通過漸變可以為進度條創建條紋效果，IE9 及更低版本不支持。
<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div>
為 .progress-bar-striped 添加 .active 類，使其呈現出由右向左運動的動畫效果。IE9 及更低版本的瀏覽器不支持。
<div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div>
把多個進度條放入同一個 .progress 中，使它們呈現堆疊的效果。
<div class="progress"> <div class="progress-bar progress-bar-success" style="width: 35%"> <span class="sr-only">35% Complete (success)</span> </div> <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"> <span class="sr-only">20% Complete (warning)</span> </div> <div class="progress-bar progress-bar-danger" style="width: 10%"> <span class="sr-only">10% Complete (danger)</span> </div> </div>
雖然不總是必須，但是某些時候你可能需要將某些 DOM 內容放到一個盒子里。對于這種情況，可以試試面板組件。
默認的 .panel 組件所做的只是設置基本的邊框（border）和內補（padding）來包含內容。
<div class="panel panel-default"> <div class="panel-body"> Basic panel example </div> </div>
通過 .panel-heading 可以很簡單地為面板加入一個標題容器。你也可以通過添加設置了 .panel-title 類的 <h1>-<h6> 標簽，添加一個預定義樣式的標題。不過，<h1>-<h6> 標簽的字體大小將被 .panel-heading 的樣式所覆蓋。
為了給鏈接設置合適的顏色，務必將鏈接放到帶有 .panel-title 類的標題標簽內。
<div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div>
把按鈕或次要的文本放入 .panel-footer 容器內。注意面版的腳注不會從情境效果中繼承顏色，因為他們并不是主要內容。
<div class="panel panel-default"> <div class="panel-body"> Panel content </div> <div class="panel-footer">Panel footer</div> </div>
像其他組件一樣，可以簡單地通過加入有情境效果的狀態類，給特定的內容使用更針對特定情境的面版。
<div class="panel panel-primary">...</div> <div class="panel panel-success">...</div> <div class="panel panel-info">...</div> <div class="panel panel-warning">...</div> <div class="panel panel-danger">...</div>
為面板中不需要邊框的表格添加 .table 類，是整個面板看上去更像是一個整體設計。如果是帶有 .panel-body 的面板，我們為表格的上方添加一個邊框，看上去有分隔效果。
<div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <div class="panel-body"> <p>...</p> </div> <!-- Table --> <table class="table"> ... </table> </div>
如果沒有 .panel-body ，面版標題會和表格連接起來，沒有空隙。
<div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <!-- Table --> <table class="table"> ... </table> </div>
可以簡單地在任何面版中加入具有最大寬度的列表組。
<div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <div class="panel-body"> <p>...</p> </div> <!-- List group --> <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul> </div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="bootstrap-sweetalert-master/dist/sweetalert.css"> <script src="../s2/jquery-3.3.1.min.js"></script> <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script> <script src="bootstrap-sweetalert-master/dist/sweetalert.min.js"></script> </head> <body> <!--彈框--> <!--https://lipis.github.io/bootstrap-sweetalert/--> <!--引用dist下面的css和js即可--> <!--在后面還會涉及到該部分內容--> <!--進度條--> <div class="progress"> <div id="d1" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 1%"> <span id="d2" class="">1%</span> </div> </div> <button id="d3" class="btn btn-info">進度條跑起來吧</button> <script> function func (i) { let tempWidth = ‘width:‘ + i +‘%‘; // style屬性值 let contentText = i + ‘%‘; // 所顯示進度百分比 $(‘#d1‘).attr(‘style‘, tempWidth); $(‘#d2‘).text(contentText); }; var x = 1; $(‘#d3‘).click(function () { if (x<101) { let y = x++; setInterval(func(y), 1000); }; }); </script> </body> </html>
標簽：ati git 需要 動畫效果 ane ie9 out 包含 變化
原文地址：https://www.cnblogs.com/xuewei95/p/15072953.html
