在Twitter的树Bootstrap [英] Trees in Twitter Bootstrap

问题描述

我一直在努力创建一个使用尽可能多的CSS和尽可能少的JS（只有状态等）的树（如目录树），我想知道是否有一些好的现有树用于到Bootstrap。请参阅 http://jhfrench.github.io/bootstrap-tree/docs/example上的项目文档。 html 。

或者，这里是LESS源生成的CSS（JS可以从 jsFiddle ）：

  @import../../ ../external/bootstrap/less/bootstrap.less; / *将你的路径替换为bootstrap.less文件* / 
 @import../../../external/bootstrap/less/responsive.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; 
 file-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; 
} 
} 
 / *删除root之前的连接器* / 
> ul> li :: before，> ul> li :: after {
 border：0; 
} 
} 
  

I have been trying to work on creating a tree (like a directory tree) that uses as much CSS and as little JS as possible (only for states, etc), and I want to know if there are some good existing tree plugins for bootstrap or jquery-ui bootstrap.

---

For reference or for people confused about this question, I am looking for something like dynatree for bootstrap.

解决方案

Building on Vitaliy's CSS and Mehmet's jQuery, I changed the a tags to span tags and incorporated some Glyphicons and badging into my take on a Bootstrap tree widget.

Example:

For extra credit, I've created a GitHub project to host the jQuery and LESS code that goes into adding this tree component to Bootstrap. Please see the project documentation at http://jhfrench.github.io/bootstrap-tree/docs/example.html.

Alternately, here is the LESS source to generate that CSS (the JS can be picked up from the jsFiddle):

@import "../../../external/bootstrap/less/bootstrap.less"; /* substitute your path to the bootstrap.less file */
@import "../../../external/bootstrap/less/responsive.less"; /* optional; substitute your path to the responsive.less file */

/* collapsable tree */
.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;
            /*Time for some hover effects*/
            &:hover, &:hover+ul li span {
                background: @grayLighter;
                border: 1px solid @gray;
                color: #000;
            }
        }
        /*Remove connectors after last child*/
        &:last-child::before {
            height: 30px;
        }
    }
    /*Remove connectors before root*/
    > ul > li::before, > ul > li::after {
        border: 0;
    }
}

这篇关于在Twitter的树Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！