Bootstrap元件2

WellBay 2月前


標籤: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>

 

Bootstrap元件2

標籤:ati   git   需要   動畫效果   ane   ie9   out   包含   變化   

原文地址:https://www.cnblogs.com/xuewei95/p/15072953.html


上一篇:003-核心技術-IO模型-NIO-基於NIO群聊示例
下一篇:劍指offer-複雜連結串列的複製