Bootstrap中的动态按钮组

不知有没有办法让按钮组动态化，例如：http://www.bootply.com/lkJQ2WDubH 结果你可以看到第一行和第二行。Bootstrap中的动态按钮组

我该如何创建或使其成为动态的，以便当我点击按钮时，它会调整位置并获得活动状态？

当按钮1被激活：

当按钮2被激活：

等等...

所以一个按钮组或工具栏就像那两组一样，现在它是重复的代码。

想法是活跃的按钮脱颖而出，但现在它是复制代码，也许有更多的动态解决方案，欣赏指导或帮助。

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> 
    <div class="btn-group" role="group" aria-label="First group"> 
    <button type="button" class="btn btn-primary active">1</button> 
    </div> 
    <div class="btn-group" role="group" aria-label="Second group"> 
    <button type="button" class="btn btn-primary">2</button> 
    <button type="button" class="btn btn-primary">3</button> 
    <button type="button" class="btn btn-primary">4</button> 
    <button type="button" class="btn btn-primary">5</button> 
    <button type="button" class="btn btn-primary">6</button> 
    <button type="button" class="btn btn-primary">7</button> 
    </div> 
</div> 
<br> 
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> 
    <div class="btn-group" role="group" aria-label="First group"> 
    <button type="button" class="btn btn-primary">1</button> 
    </div> 
    <div class="btn-group" role="group" aria-label="First groups"> 
    <button type="button" class="btn btn-primary active">2</button> 
    </div> 
    <div class="btn-group" role="group" aria-label="Second group"> 

    <button type="button" class="btn btn-primary">3</button> 
    <button type="button" class="btn btn-primary">4</button> 
    <button type="button" class="btn btn-primary">5</button> 
    <button type="button" class="btn btn-primary">6</button> 
    <button type="button" class="btn btn-primary">7</button> 
    </div> 
</div>

谢谢。

来源

2016-02-08 karma

究竟是要效仿该链接发生了什么？这似乎是从小提琴 –

相当二多悬空按钮现在每个组有7个按钮和那些是硬编码的。而不是你应该能够传递一些按钮来显示？ – Thangaraja

现在它是重复按钮，我想要一个按钮组，行为像这些2组 – karma

做这样的事情：

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> 
    <div class="btn-group" role="group" aria-label="First group"> 
     <button type="button" class="btn btn-primary new">1</button> 
     <button type="button" class="btn btn-primary new">2</button> 
     <button type="button" class="btn btn-primary new">3</button> 
     <button type="button" class="btn btn-primary new">4</button> 
     <button type="button" class="btn btn-primary new">5</button> 
     <button type="button" class="btn btn-primary new">6</button> 
     <button type="button" class="btn btn-primary new">7</button> 
    </div> 
</div>

然后，使用jQuery的一点点，你可以添加一个类点击的按钮并从别人删除它达到你想要的点击按钮任何风格：

$("button.new").click(function() { 
     $("button.new").removeClass("buttonChange").removeClass("buttonRoundLeft").removeClass("buttonRoundRight"); 
    $(this).addClass("buttonChange"); 
    $(this).prev().addClass("buttonRoundLeft"); 
    $(this).next().addClass("buttonRoundRight"); 
});

所需的CSS类是这样的：

.buttonChange { 
    margin: 0 10px !important; 
    border-radius: 5px !important; 
} 

.buttonRoundLeft { 
    border-top-right-radius: 5px !important; 
    border-bottom-right-radius: 5px !important; 
} 
.buttonRoundRight { 
    border-top-left-radius: 5px !important; 
    border-bottom-left-radius: 5px !important; 
}

检查OU在TA工作示例CODEPEN

UPDATE：

更简单的方法来做到这一点是刚才有一个类的按钮这样的焦点状态：

button.new:focus { 
    margin: 0 10px !important; 
    border-radius: 5px !important; 
}

这只能如果您不希望有相邻按钮的圆角。使用相同的语法很容易做到下一个按钮，但对于上一个按钮不可能。

来源

2016-02-08 18:16:12

不错，但不是一个真正的单独的组解决方案（无边框半径处理）。 – isherwood

你想要按钮有圆角？然后检查出更新的答案 –

这很好，谢谢！ – karma

$("li.btn").click(function() { 
 
    $("li.btn").removeClass("buttonSelect"); 
 
    $(this).addClass("buttonSelect"); 
 
});

.buttonSelect { 
 
    margin: 0 10px !important; 
 
} 
 

 
li.btn:focus { 
 
    margin: 0 10px !important; 
 
    border-radius: 0 !important; 
 
}

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> 
 
    <ul class="btn-group" role="group" aria-label="First group"> 
 
    <li type="button" class="btn btn-primary">1</li> 
 
    <li type="button" class="btn btn-primary">2</li> 
 
    <li type="button" class="btn btn-primary">3</li> 
 
    <li type="button" class="btn btn-primary">4</li> 
 
    <li type="button" class="btn btn-primary">5</li> 
 
    <li type="button" class="btn btn-primary">6</li> 
 
    <li type="button" class="btn btn-primary">7</li> 
 
    </ul> 
 
</div>

Check this

来源

2016-02-08 18:38:03

Bootstrap中的动态按钮组

回答

相关问题