常用bootstrap 组件

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%;
                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>

效果如下：

每个年龄，鞭策自己尽力前行的理由都不一样,大家且行且珍惜