Bootstrap学习笔记02-常用控件

1.表格

//overflow为设置滚动条, 超过设置的长度将出现滚动条显示内容
//该table配合Jquery进行动态往tbody添加表格内容  $("#tableId tbody")

                

                            页面无数据
                        

                    

                        

                            
resourseId
                            
服务器名
                            
公网IP
                            
内网IP
                            
创建时间
                            
计费起始时间
                            
计费结束时间
                            
月成本（元）
                            
共用系数
                            
实际成本（元）
                            
状态
                            
操作
                        
                    
                    

                        
                    
                
            

• jq代码

       //生成开始架设新服表格数据
function beginCreateListTable(data) {
    //清空tabel表格
    $("#begin_create_list_table tbody").empty();
    $.each(data, function (index, item) {
        var nameTd = $("").attr("name", "name").append(item.name);
        var name2Td = $("").attr("name", "name2").append(item.name2);
        var gsidTd = $("").attr("name", "gsid").append(item.gsid);
        var lanipTd = $("").attr("name", "lanip").append(item.lanip);
        var ipTd = $("").attr("name", "ip").append(item.ip);
        var gs_portTd = $("").attr("name", "gs_port").append(item.gs_port);
        var dbs_idTd = $("").attr("name", "dbs_id").append(item.dbs_id);
        var pk_groupTd = $("").attr("name", "pk_group").append(item.pk_group);
        var pk_group2Td = $("").attr("name", "pk_group2").append(item.pk_group2);
        var start_timeTd = $("").attr("name", "start_time").append(item.start_time);
        var lan_groupTd = $("").attr("name", "lan_group").append(item.lan_group);
        var wss_portTd = $("").attr("name", "wss_port").append(item.wss_port);

        $("")
            .append(nameTd)
            .append(name2Td)
            .append(gsidTd)
            .append(lanipTd)
            .append(ipTd)
            .append(gs_portTd)
            .append(dbs_idTd)
            .append(pk_groupTd)
            .append(pk_group2Td)
            .append(start_timeTd)
            .append(lan_groupTd)
            .append(wss_portTd)
            .appendTo("#begin_create_list_table tbody");
    });
}

2.选择日期控件

• 下载bootstrap-datetimepicker插件, 并引入
• html页面代码

• js代码

    $('#cost_datetimepicker').datetimepicker({
        format: 'yyyymmdd',  //显示格式
        weekStart: 1,
        autoclose: true,
        startView: 2,
        minView: 2,
        forceParse: false,
        language: 'zh-CN'  //控件中文显示, 需引入插件
    });

3.模态框

//为模态框添加data-backdrop="static" 属性后可以去除点击背景关闭弹框
    
    

        

            

                

                    
                    
确认下架？
                
                

                    

                        
                        
                            
                        
                    
                    

                        成本将统计至该下架日期截止
                    
                
                

                    关闭
                    确认
                
            
        
    

• jq手动打开关闭模态框

$("#modalId").modal("show");   //打开
$("#modalId").modal("hide");    //关闭

4.按钮

查看月成本（按30天）

5.input输入框

              新服数量
              
            

6.select下拉框

   

          服务器组
          
            请先选择项目
          
        

7.下拉操作按钮

• 效果
  

• html实现

  Action
  
    
    Toggle Dropdown
  
  

    
Action
    
Another action
    
Something else here
    

    
Separated link
  

• jq实现

 var transferLi = $("
")
                .append($("")
                    .attr("onclick", "") //点击事件
                    .append($("").addClass("glyphicon glyphicon-share-alt").append("转移")))
            //下架
            var downLi = $("
")
                .append($("")
                    .attr("onclick", "downServerSecond(" + p + ",\"" + item.ServerResId + "\",\"" + "down" + "\")") //点击事件;
                    .append($("").addClass("glyphicon glyphicon-arrow-down").append("下架")))
            var ul = $("
")
                .addClass("dropdown-menu")
                .append(transferLi)
                .append(downLi);
            var selectBtn = $("
")
                .addClass("btn-group")
                .append($("")
                    .attr("type", "button")
                    .addClass("btn")
                    .addClass("btn-success")
                    .append("选择操作"))
                .append($("")
                    .attr("type", "button")
                    .addClass("btn")
                    .addClass("btn-success")
                    .addClass("dropdown-toggle")
                    .attr("data-toggle", "dropdown")
                    .append($("").addClass("caret")))
                .append(ul);
            var btnTd = $("")
                .append(selectBtn);