我尝试使http://wwwendt.de/tech/fancytree/demo/#sample-ext-glyph-bootstrap3.html处于运行状态，但似乎某些CSS无法正常工作或无法导入。 这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Fancytree - Example: Glyph Extension / Bootstrap Theme</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!--
<meta name="viewp.77ort" content="width=device-width,initial-scale=1">
-->
<!--
NOTE: "Bootstrap 3's JavaScript requires jQuery version 1.9.1 or higher,but lower than version 3"
-->
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="../assets/fancytree/src/skin-bootstrap/ui.fancytree.css" rel="stylesheet" class="skinswitcher">
<script src="../assets/fancytree/src/jquery.fancytree.js"></script>
<script src="../assets/fancytree/src/jquery.fancytree.dnd5.js"></script>
<script src="../assets/fancytree/src/jquery.fancytree.edit.js"></script>
<script src="../assets/fancytree/src/jquery.fancytree.glyph.js"></script>
<script src="../assets/fancytree/src/jquery.fancytree.table.js"></script>
<script src="../assets/fancytree/src/jquery.fancytree.wide.js"></script>
<!-- (Irrelevant source removed.) -->
<style type="text/css">
/* Define custom width and alignment of table columns */
#treetable {
table-layout: fixed;
}
#treetable tr td:nth-of-type(1) {
text-align: right;
}
#treetable tr td:nth-of-type(2) {
text-align: center;
}
#treetable tr td:nth-of-type(3) {
min-width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<!-- Include Fancytree skin and library -->
<link href="../assets/fancytree/dist/skin-win8/ui.fancytree.min.css" rel="stylesheet">
<script src="../assets/fancytree/dist/jquery.fancytree-all-deps.min.js"></script>
<!-- Initialize the tree when page is loaded -->
<script type="text/javascript">
$(function(){ // on page load
// Create the tree inside the <div id="tree"> element.
$("#tree").fancytree({
extensions: ["edit","filter"],source: [
{title: "Node 1a",key: "1"},{title: "Folder 1",key: "2",folder: true,children: [
{title: "Node 1.1",key: "3"},{title: "Node 1.2",key: "4"}
]},{title: "Folder 2",key: "5",children: [
{title: "Node 2.1",key: "6"},{title: "Node 2.2",key: "7"}
]}
]
});
// Note: Loading and initialization may be asynchronous,so the nodes may not be accessible yet.
});
</script>
<script type="text/javascript">
$(function(){ // on page load
// Create the tree inside the <div id="tree"> element.
$("#treetable").fancytree({
extensions: ["edit",so the nodes may not be accessible yet.
});
</script>
<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
var glyph_opts = {
preset: "bootstrap3",map: {
}
};
$(function(){
// Initialize Fancytree
$("#tree").fancytree({
extensions: ["dnd5","edit","glyph","wide"],checkbox: true,selectMode: 3,dnd5: {
dragStart: function(node,data) { return true; },dragEnter: function(node,dragDrop: function(node,data) { data.otherNode.copyTo(node,data.hitMode); }
},glyph: glyph_opts,// source: {url: "ajax-tree-taxonomy.json",debugDelay: 1000},source: {url: "ajax-tree-products.json",// toggleEffect: { effect: "drop",options: {direction: "left"},duration: 400 },wide: {
iconWidth: "1em",// Adjust this if @fancy-icon-width != "16px"
iconSpacing: "0.5em",// Adjust this if @fancy-icon-spacing != "3px"
labelSpacing: "0.1em",// Adjust this if padding between icon and label != "3px"
levelOfs: "1.5em" // Adjust this if ul padding != "16px"
},icon: function(event,data){
// if( data.node.isFolder() ) {
// return "glyphicon glyphicon-book";
// }
},lazyLoad: function(event,data) {
data.result = {url: "ajax-sub2.json",debugDelay: 1000};
}
});
$("#treetable").fancytree({
extensions: ["dnd5","table"],source: {url: "ajax-tree-taxonomy.json",table: {
checkboxColumnIdx: 1,nodeColumnIdx: 2
},activate: function(event,data) {
},debugDelay: 1000};
},renderColumns: function(event,data) {
var node = data.node,$tdList = $(node.tr).find(">td");
$tdList.eq(0).text(node.getIndexHier());
$tdList.eq(3).text(!!node.folder);
}
});
});
</script>
<!-- (Irrelevant source removed.) -->
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<h1>Example: Bootstrap theme</h1>
</div>
<div class="panel-body">
<p>
The 'glyph' extension adds <code>icon-...</code> classes to the
node's <code>span</code> tags,so scalable vector icons as provided by
<a href="http://fortawesome.github.io/Font-Awesome/" class="external" target="_blank">Font Awesome</a>
or <a href="http://getbootstrap.com/components/" class="external" target="_blank">Bootstrap Glyphicons</a>
can be used.
</p>
<p>
The theme defines some colors from bootstrap. To change it,run
<a href="https://github.com/mar10/fancytree/wiki/HowtoContribute">grunt dev</a>
and edit the
<a href="https://github.com/mar10/fancytree/blob/master/src/skin-bootstrap/ui.fancytree.less"
class="external" target="_blank">LESS definition</a>.
</p>
<p>
<b>Status</b>: beta<br>
See also
<a href="https://github.com/mar10/fancytree/wiki/ExtGlyph"
class="external" target="_blank">ext-glyph</a>.
</p>
</div>
</div>
<p>
Font size: <span id="curSize"></span>
<input id="fontSize" type="number" min="4" max="48" value="10"> pt
</p>
<h3> Plain tree </h3>
<p id="plainTreeStyles">
<b>Add container class:</b><br>
<!--
<label><input type="checkbox" data-class="fancytree-colorize-hover"> fancytree-colorize-hover</label>
-->
<label><input type="checkbox" data-class="fancytree-colorize-selected"> fancytree-colorize-selected</label>
</p>
<div class="panel panel-default">
<div class="panel-heading">
<b>Taxonomy</b>
</div>
<div id="tree" class="panel-body fancytree-colorize-hover fancytree-fade-expander">
</div>
<div class="panel-footer">
<button id="btnExpandAll" class="btn btn-xs btn-primary">Expand all</button>
<button id="btnCollapseAll" class="btn btn-xs btn-warning">Collapse all</button>
</div>
</div>
<h3> Table tree </h3>
<p id="bootstrapTableStyles">
<b>Add table class:</b><br>
<label><input type="checkbox" data-class="table-bordered"> table-bordered</label>
<label><input type="checkbox" data-class="table-condensed" checked="checked"> table-condensed</label>
<label><input type="checkbox" data-class="table-striped" checked="checked"> table-striped</label>
<label><input type="checkbox" data-class="table-hover" checked="checked"> table-hover</label>
<label><input type="checkbox" data-class="table-responsive"> table-responsive</label>
<label><input type="checkbox" data-class="fancytree-colorize-selected"> fancytree-colorize-selected</label>
</p>
<table id="treetable" class="table table-condensed table-hover table-striped fancytree-fade-expander">
<colgroup>
<col width="80px"></col>
<col width="30px"></col>
<col width="*"></col>
<col width="100px"></col>
<col width="100px"></col>
<col width="100px"></col>
</colgroup>
<thead>
<tr> <th></th> <th></th> <th>Classification</th> <th>Folder</th> <th></th> <th></th> </tr>
</thead>
<tbody>
<tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>
</tbody>
</table>
<!-- (Irrelevant source removed.) -->
</body>
</html>
这是这样的：
您能告诉我，我做错了什么吗？我该如何调试？您的第一步是什么？如何检查是否在头区域中导入了每个导入内容？