Twitter Bootstrap 中的树 [英] Trees in Twitter Bootstrap
问题描述
我一直在尝试创建一棵树(如目录树),它使用尽可能多的 CSS 和尽可能少的 JS(仅用于状态等),我想知道是否有一些好的现有树添加到 Bootstrap.请参阅 http://jhfrench.github.io/bootstrap-tree 上的项目文档/docs/example.html.
或者,这里是生成该 CSS 的 LESS 源(可以从 jsFiddle):
@import "../../../external/bootstrap/less/bootstrap.less";/* 替换你的 bootstrap.less 文件路径 */@import "../../../external/bootstrap/less/responsive.less";/* 可选的;替换你的responsive.less 文件的路径*//* 可折叠的树 */.树 {.border-radius(@baseBorderRadius);.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));背景色:变亮(@grayLighter,5%);边框:1px 实心@grayLight;底边距:10px;最大高度:300px;最小高度:20px;溢出-y:自动;填充:19px;一种 {显示:块;溢出:隐藏;文本溢出:省略号;宽度:90%;}李{列表样式类型:无;边距:0px 0;填充:4px 0px 0px 2px;位置:相对;&::before, &::after {内容: '';左:-20px;位置:绝对;右:自动;}&::before {左边框:1px 实心@grayLight;底部:50px;高度:100%;顶部:0;宽度:1px;}&::after {边框顶部:1px 实心@grayLight;高度:20px;顶部:13px;宽度:23px;}跨度 {-moz-border-radius: 5px;-webkit-border-radius: 5px;边框:1px 实心@grayLight;边框半径:5px;显示:内联块;行高:14px;填充:2px 4px;文字装饰:无;}&.parent_li >跨度 {光标:指针;/*一些悬停效果的时间*/&:hover, &:hover+ul li span {背景:@grayLighter;边框:1px 实心@gray;颜色:#000;}}/*删除最后一个孩子之后的连接器*/&:last-child::before {高度:30px;}}/*删除root之前的连接器*/>升 >里::之前,>升 >里::之后{边框: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屋!