在Vitaliy的CSS和Mehmet的jQuery的基础上，我将a标签更改为标签，span并结合了一些Glyphicons并将徽章添加到Bootstrap树小部件中。
为了获得更多的荣誉，我创建了一个Github图标GitHub项目来托管jQuery和LESS代码，该代码用于将该树组件添加到Bootstrap中。请在http://jhfrench.github.io/bootstrap-tree/docs/example.html上查看项目文档。
另外，这是用于生成CSS的LESS源（可以从jsFiddle中拾取JS ）：
@import "../../../external/bootstrap/less/bootstrap.less"; @import "../../../external/bootstrap/less/responsive.less"; .tree { .border-radius(@baseBorderRadius); .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); background-color: lighten(@grayLighter, 5%); border: 1px solid @grayLight; margin-bottom: 10px; max-height: 300px; min-height: 20px; overflow-y: auto; padding: 19px; a { display: block; overflow: hidden; text-overflow: ellipsis; width: 90%; } li { list-style-type: none; margin: 0px 0; padding: 4px 0px 0px 2px; position: relative; &::before, &::after { content: ''; left: -20px; position: absolute; right: auto; } &::before { border-left: 1px solid @grayLight; bottom: 50px; height: 100%; top: 0; width: 1px; } &::after { border-top: 1px solid @grayLight; height: 20px; top: 13px; width: 23px; } span { -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid @grayLight; border-radius: 5px; display: inline-block; line-height: 14px; padding: 2px 4px; text-decoration: none; } &.parent_li > span { cursor: pointer; &:hover, &:hover+ul li span { background: @grayLighter; border: 1px solid @gray; color: #000; } } &:last-child::before { height: 30px; } } > ul > li::before, > ul > li::after { border: 0; }}
