常用bootstrap 組件

本文轉載自查看原文 2018-08-07 15:15 2417

1. breadcrumb(面包屑)

可以在當行欄下面進行二級導航提示

<div class="row">
         <ol class="breadcrumb">
              <li> <a href="#"></a></li>     
              <li class="active">面包屑</li>
         </ol>
</div

最后顯示如下

2. page-header

可以加一個自定義的下划線，進行分割非常方便

<div class="row">
     <div class="col-lg-12">
         <h2 class="page-header">Page—Header</h2>
     </div>
</div>

　　最后顯示如下，下面的虛線，如果加上模板語言{% for %} 進行數據循環，是一個很好的分割段落的效果

3. 切換卡

我在項目中使用切換卡來進行評論以及微信和釘釘報警的顯示

代碼：

     <div class="row">
                    <div class="col-sm-3">
                <div class="tabbable" id="tabs-877726">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#panel-one" data-toggle="tab">第一部分</a>
                        </li>
                        <li >
                            <a href="#panel-two" data-toggle="tab">第二部分</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="panel-one" style="overflow:auto;height:1000px">
                            <p>
                                第一部分內容. 第一部分內容. 第一部分內容. 第一部分內容.
                                第一部分內容. 第一部分內容. 第一部分內容. 第一部分內容.
                                第一部分內容. 第一部分內容. 第一部分內容. 第一部分內容.
                                第一部分內容. 第一部分內容. 第一部分內容. 第一部分內容.
                                第一部分內容. 第一部分內容. 第一部分內容. 第一部分內容.
                                第一部分內容. 第一部分內容. 第一部分內容. 第一部分內容. 
                            </p>
                        </div>
                        <div class="tab-pane " id="panel-two" style="overflow:auto;height:30px">
                            <p>
                                第二部分內容.
                            </p>
                        </div>
                    </div>
                </div>
              </div>
            </div>

　切換卡的應用如下

4. 提示框

可以進行提示，顏色可以自定義; (alert-success/default/primary/info/warning/danger)

代碼：

　　　　　　</a>

　　　　　　<strong>警告！</strong>您的網絡連接有問題。

　　　　</div>

顯示如下：

5. 手風琴切換

　　這個組件可以作為左邊的導航，如果有二級菜單，可以作為鏈接進行跳轉

代碼：

<div class="container">
    <div class="row">
        <div class="col-sm-3" style="margin-left:-200px;margin-top:50px">
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h5 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                   href="#collapseOne">
                 
                <h5>    <span class="glyphicon glyphicon-film" style="color: rgb(117, 75, 187); font-size: 15px;"> 影視頻道</span></h5>
                </a>
            </h5>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                    <div class="list-group">
                            <a class="list-group-item active" href="#">全部</a>
                            <a class="list-group-item" href="#">電影</a>
                            <a class="list-group-item" href="#">電視劇</a>
                            <a class="list-group-item" href="#">明星</a>
                            <a class="list-group-item" href="#">八卦</a>
                            <a class="list-group-item" href="#">音樂</a>
                            <a class="list-group-item" href="#">演員</a>
                            <a class="list-group-item" href="#">歌手</a>
                        </div>
                
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                   href="#collapseTwo">
                   <h5>    <span class="glyphicon glyphicon-film" style="color: rgb(117, 75, 187); font-size: 15px;"> 測試頻道</span></h5>
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                    <div class="list-group">
                            <a class="list-group-item active" href="#">全部</a>
                            <a class="list-group-item" href="#">電影</a>
                            <a class="list-group-item" href="#">電視劇</a>
                            <a class="list-group-item" href="#">明星</a>
                            <a class="list-group-item" href="#">八卦</a>
                            <a class="list-group-item" href="#">音樂</a>
                            <a class="list-group-item" href="#">演員</a>
                            <a class="list-group-item" href="#">歌手</a>
                        </div>
                        
            </div>
        </div>
        </div>
    </div>
</div>
</div>
</div>

顯示：

6. 時間動態顯示，非常實用

代碼：顏色可以自定義

    <li class="times">
     <p style="color: #fffff" id="logInfo"></p>
    </li>

<script language="javascript">
function getCurDate()
{
var d = new Date();
var week;
switch (d.getDay()){
case 1: week="星期一"; break;
case 2: week="星期二"; break;
case 3: week="星期三"; break;
case 4: week="星期四"; break;
case 5: week="星期五"; break;
case 6: week="星期六"; break;
default: week="星期天";
}
var years = d.getFullYear();
var month = add_zero(d.getMonth()+1);
var days = add_zero(d.getDate());
var hours = add_zero(d.getHours());
var minutes = add_zero(d.getMinutes());
var seconds=add_zero(d.getSeconds());
var ndate = years+"年"+month+"月"+days+"日 "+hours+":"+minutes+":"+seconds+" "+week;
var divT=document.getElementById("logInfo");
divT.innerHTML= ndate;
}
function add_zero(temp)
{
if(temp<10) return "0"+temp;
else return temp;
}
setInterval("getCurDate()",100);
</script>

效果如下：

7. 彩色面板

代碼：

 <div class="panel panel-default">
        <div class="panel-heading">面板頭</div>
        <div class="panel-body">
           面板內容
           內容111111111111
           內容111111111111
           內容111111111111
        </div>
        <div class="panel-footer">面板底</div>
    </div>

效果：

8. 提示消息

代碼：

<div class="alert alert-info">
      <i class="fa fa-info-circle"></i> 以下顯示任務執行后的狀態。</br>
      
      <i class="fa fa-info-circle"></i> 以下任務都放在任務隊列，如果執行長,可能不能及時返回結果。</br>
      
      <i class="fa fa-info-circle"></i> 如不需要續期，請到 <a target="_blank" href="http://www.DS_test.com">DS系統</a> 中進行表單回退操作。</br>
      
      <span class="label label-danger"> 一下任務信息會長期存在。</span>
 </div>

效果如下：

9. 導航下拉

一般導航欄上都有按鈕，會進行點擊，但是如果分類，可以再加一個下拉框

代碼如下：

<div class="navbar navbar-default" style="border:none">
<div class="container">
    <div class="navbar-header" style="margin-left:-50px">
        <a class="navbar-brand" style="color: #40d2b1;;font-weight:bold;">芒果先生</a>
    </div>
    <ul class="nav navbar-nav" style="margin-left:800px;">
            <li><a href="#" style="font-weight:bold">芒果</a></li>
            <li><a href="#" style="font-weight:bold">鳳梨</a></li>
            <li><a href="#" style="font-weight:bold">菠蘿</a></li>
            <li><a href="#" style="font-weight:bold">banana</a></li>
            <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                         <span class="icon ion-navicon-round"><span class="caret "></span></span>
                    </a>
                    <ul class="dropdown-menu" style="padding-left:2s0px">
                        <li><a href="#">qq</a></li>
                        <li><a href="#">weichat</a></li>
                        <li><a href="#">feiqi</a></li>
                        <li class="divider"></li>
                        <li><a href="#">123</a></li>
                    </ul>
                </li>
    </ul>
</div>

</div>

　　效果如下：

10. 畫一個圓形logo

　　可以把圖片變成圓形的圖,當然，需要使用png的圖片，畢竟它是透明，rgb可以自定義

代碼：

<img src="logo.png" style="background:black;
                color:white;
                border-radius:50%;
                width:100px;
                height:100px;
                text-align:center;
                line-height:10px;
                margin:0 auto;
                border:0px
                " alt="123">

　　效果：

11. 按鈕下拉

在做table表的時候，我們一般會在一行的最末尾添加按鈕，一般有 "編輯" "添加" "刪除" 等功能，bootstrap有個組件，實現起來非常方便

<div role="presentation" class="dropdown">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
            操作<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">編輯</a></li>
            <li><a href="#">刪除</a></li>
            <li><a href="#">鎖定</a></li>
            <li><a href="#">修改密碼</a></li>
       </ul>
</div>

效果如下：

12. nav-tabs

我覺得這是一個非常漂亮的區域表，在你選擇的時候回自動把邊的border上面取消，效果非常好看

　　代碼

<ul class="nav nav-tabs">
                    <li >
                        <a href="#">用戶列表</a>
                    </li>
                    <li class="active">
                            <a href="#">用戶搜索</a>
                    </li>
                    <li >
                                <a href="#">用戶添加</a>
                    </li>
                </ul>
                
                <form action="" style="padding:10px;border:solid 1px #ddd;border-top:none">
                    <div class="alert alert-info" >
                            <strong>技巧提示：</strong>
                            支持模糊搜索和匹配搜索，匹配搜索使用*代替
                    </div>
                    <div role="presentation" class="dropdown">
                            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                                操作<span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">編輯</a></li>
                                <li><a href="#">刪除</a></li>
                                <li><a href="#">鎖定</a></li>
                                <li><a href="#">修改密碼</a></li>
                            </ul>
                        </div>
                </form>

　　效果如下：

　　對吧，邊框非常整潔，我以前在做運維開發的時候，總是在調節頁面上花費了很大的功夫，所以，同志們，bootstrap 是一個非常便利的利器

13. bootstrapDualListbox

這是個很好的實現數據動態添加的可視化雙列表，需要引用的有：

1. jquery.bootstrap-duallistbox.js 2. bootstrap-duallistbox.css

代碼非常簡單，如果開發中有需要，會是一個非常好用的工具

<select id="demo2" multiple="multiple" size="10" name="duallistbox_demo2" class="demo2">

        {% for item in data %}
             <option value="{{ item.ip }}" id="{{ item.ip  }}">{{ item.hostname }}:<span style="margin-left: 5px;color: red;">{{ item.ip }}</span> </option>
        {% endfor %}
    

 </select>


  <script>
        var demo2 = $('.demo2').bootstrapDualListbox({
          nonSelectedListLabel: '可選服務器ip',
          selectedListLabel: '已選服務器ip',
          filterTextClear: '清空過濾條件',
          filterPlaceHolder: '過濾條件',
          preserveSelectionOnMove: 'moved',
          moveOnSelect: false,
          infoText: '當前共 {0} 條IP',
          infoTextFiltered: '從 {1} 項 篩選 {0} 項',
          infoTextEmpty: 'Empty list',
          nonSelectedFilter: ''
        });


      </script>

最后效果：

14. bootstrapTable

bootstrapTable 是一個多功能的table

我覺得bootstrapTable中，最重要的是自帶搜索和分頁，大大增加了開發效率，並且還是異步返回數據，特別實用

一般，我們在一行的最后進行"編輯，添加，刪除"，bootstrap提供了 formatter:function(value,row,index)

其中value的值是根據 ,field 提供的字段后端進行返回的值，我們一般實用id進行傳遞，所以我使用ids作為字段

看代碼：

 <div class="row">
            <table class="table" id="table" data-toggle="table"></table>
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#table").bootstrapTable({
                    showRefresh: true,
                    clickToSelect: true,
                    showColumns: true,
                    showToggle: true,
                    sortable: true,
                    pagination: true,
                    striped: true,
                    search:true,
                    // pageSize: rows,
                    pageList: [10, 25, 50, 100],

                    url: '{% url "docker:ajax_docker_stats" %}',
                    columns: [{
                        field: "rownum",
                        checkbox: "true"
                    },{
                        field: "hostname",
                        title: "主機名"
                    }, {
                        field: "container",
                        title: "CONTAINER",
                        sortable: true
                    }, {
                        field: "cpu",
                        title: "CPU %",
                        sortable: true
                    }, {
                        field: "mem_ul",
                        title: "MEM USAGE / LIMIT",
                        sortable: true
                    },{
                        field: "mem",
                        title: "MEM %",
                        sortable: true
                    }, {
                        field: "net_io",
                        title: "NET I/O",
                        sortable: true
                    },{
                        field: "block_io",
                        title: "BLOCK I/O",
                        sortable: true
                    }, {
                        field: "ids",
                        title: "容器資源圖表",
                        sortable: true,
                        formatter:function(value,row,index){
                            {#alert(value)#}
　　　　　　　　　　　　　　　　var c = '<a class="green-color" href="#" onclick="info('+ row.id+ ')">查看</a> ';

                            return[
                                '<a  href="/docker/container_e?container_id='+ value +'" style="text-decoration:none">'+  '<span class="glyphicon glyphicon-asterisk"> </sapn>' +'</i> </a>' + "" + c
                            ]
                }
                    }]
                });
            });
            </script>

效果如下：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Bootstrap 組件之 Panel bootstrap組件-導出數據 Bootstrap Blazor 組件入門 bootstrap Typeahead組件 [bootstrap] 基本css樣式和組件詳解Bootstrap按鈕組件使用 Bootstrap Typeahead 組件 Bootstrap Blazor 組件介紹 Bootstrap常用的自帶插件 bootstrap 常用類名