Я пытаюсь запустить тест на 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", folder: true, 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", "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", folder: true, 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>
<!-- 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, data) { return true; },
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", debugDelay: 1000},
// 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", "edit", "glyph", "table"],
checkbox: true,
dnd5: {
dragStart: function(node, data) { return true; },
dragEnter: function(node, data) { return true; },
dragDrop: function(node, data) { data.otherNode.copyTo(node, data.hitMode); }
},
glyph: glyph_opts,
source: {url: "ajax-tree-taxonomy.json", debugDelay: 1000},
table: {
checkboxColumnIdx: 1,
nodeColumnIdx: 2
},
activate: function(event, data) {
},
lazyLoad: function(event, data) {
data.result = {url: "ajax-sub2.json", 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>
И вот как этовыглядит так: 
Можете ли вы сказать мне, что я сделал не так? Как я могу отладить это? Какими будут ваши первые шаги? Как я могу проверить, импортируется ли каждый импорт в области головы?