如何将 bootstrap 应用于 headers 和导航栏？

Question

在下面的代码中创建了一个示例 treegrid jqGrid 图像显示了生成的网格：

这里是代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
    <style>

        .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-hdiv {
            background-color: #ffaaaa;
        }
        .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-toppager,
        .ui-jqgrid.ui-jqgrid-bootstrap .ui-jqgrid-pager {
            background-color: #ffaaaa;
        }
    </style>

</head>
<body>

<table id="list10"></table>
<div id="pager"></div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script>
<script>
    $.jgrid = $.jgrid || {};
    $.jgrid.no_legacy_api = true;
    $.jgrid.useJSON = true;
</script>
<script src="https://rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>

<script type="text/javascript">
    $(function(){
        var mydata = [
            {id:"1",Name:"Main Menu",MenuId:"1",MenuName:"Menu1",
                level:"0", parent:"", isLeaf:false, expanded:false},
            {id:"1_1",Name:"Sub Menu",MenuId:"1",MenuName:"Menu1",
                level:"1", parent:"1", isLeaf:false, expanded:false},
            {id:"1_1_1",Name:"Sub Sub Menu",MenuId:"1",MenuName:"Menu1",
                level:"2", parent:"1_1", isLeaf:true, expanded:false},
            {id:"1_2",Name:"Sub Menu1",MenuId:"1",MenuName:"Menu1",
                level:"1", parent:"1", isLeaf:true, expanded:false},
            {id:"2",Name:"Main Menu1",MenuId:"2",MenuName:"Menu2",
                level:"0", parent:"", isLeaf:false, expanded:true},
            {id:"2_1",Name:"Main Menu sdaadadadadadaadsdada",MenuId:"2",MenuName:"Menu2",
                level:"1", parent:"2", isLeaf:true, expanded:false},
            {id:"2_2",Name:"Main Menu",MenuId:"2",MenuName:"Menu2",
                level:"1", parent:"2", isLeaf:true, expanded:false},
            {id:"3",Name:"Main Menu2",MenuId:"3",MenuName:"Menu3",
                level:"0", parent:"", isLeaf:false, expanded:false},
            {id:"3_1",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
                level:"1", parent:"3", isLeaf:true, expanded:false},
            {id:"3_2",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
                level:"1", parent:"3", isLeaf:true, expanded:false}
        ];

        $("#list10").jqGrid({
            datatype: "local",
            data: mydata,
            colNames:['id','Name','MenuId','Menu Name'],
            colModel:[
                {name:'id',index:'id',width:100,hidden:true},
                {name:'Name',index:'Name',width:150},
                {name:'MenuId',index:'MenuId',width:100},
                {name:'MenuName',index:'MenuName',width:100}
            ],
            cmTemplate: { autoResizable: true, editable: true },
            autoResizing: { compact: true },
            iconSet: "fontAwesome",
            guiStyle: "bootstrap",
            height:'auto',
            pager : "pager",
            sortname: 'id',
            treeGrid: true,
            treeGridModel: 'adjacency',
            treedatatype: "local",
            ExpandColumn: 'Name',
            caption: "Sample Tree View Model"
        });
    })
</script>
</body>
</html>

我想知道执行以下操作：

如你所见，叶子主菜单sdaadadadadaadsdada叶子真的很长。我如何包装它，使用户可以看到文本而不扩展列，同时文本必须与单选按钮（项目符号）图标保持对齐。
如何更改顶部标题栏的背景和文字颜色？
如何将树节点（箭头）和叶子（bullet/radio 按钮图标）的默认图标图像更改为 plus/minus（对于 parent节点）图标和黑点（叶子）？
当我点击当前显示绿色的行时，如何将其更改为另一种颜色？
当我将鼠标悬停在以灰色突出显示的行上时，我该如何更改此颜色？

Answer 1

尝试添加以下 CSS 规则：

tr.jqgrow > td > .tree-wrap {
    display: table-cell;
}
tr.jqgrow > td > .cell-wrapperleaf,
tr.jqgrow > td > .cell-wrapper {
    display: table-cell;
}
.ui-jqgrid tr.jqgrow > td {
    white-space: normal;
}

得到如下图所示的结果

您可以在 .tree-wrap 上另外添加 float: left;：

tr.jqgrow > td > .tree-wrap {
    float: left;
    display: table-cell;
}
tr.jqgrow > td > .cell-wrapperleaf,
tr.jqgrow > td > .cell-wrapper {
    display: table-cell;
}
.ui-jqgrid tr.jqgrow > td {
    white-space: normal;
}

更改换行文字一侧的图标（下图红色标记）的位置：

要更改 jqGrid 元素的颜色，您只需添加相应的 CSS 样式。请参阅演示 https://jsfiddle.net/OlegKi/90qmjean/, which I created for 。

如何将 bootstrap 应用于 headers 和导航栏？

How apply bootstrap to headers and navbars?

jqgrid

free-jqgrid