Twitter Bootstrap中的树

Twitter Bootstrap中的树

在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;    }}