引导：单选按钮切换着色 [英] Bootstrap: Radio button toggle coloring

问题描述

我想创建一个自举开/关按钮切换。当开时我希望背景是绿色的，而我想要的关闭按钮是灰色的，透明的。当关时，我希望它是红色的，我想开被取消。所有的例子我发现处理禁用的按钮，但我不希望禁用任一按钮。我知道如何实现CSS中的颜色和透明度，但我不知道我怎么可以使用CSS选择器自举实现我想要的。我必须让我自己的CSS类这还是引导有内置的东西吗？

的jsfiddle http://jsfiddle.net/UltraSonja/4pbpmqgu/

HTML

 ＆LT; D​​IV CLASS =BTN-组数据切换=按钮＆GT;
    ＆LT;标签类=BTN BTN-SM BTN-主要绿色＆GT;
        ＆LT;输入类型=电台NAME =选项ID =RTTOn自动完成=关闭＆GT;针对＆lt; /输入＆GT;
    ＆LT; /标签＆gt;
    ＆LT;标签类=BTN BTN-SM BTN-原色红＆GT;
        ＆LT;输入类型=电台NAME =选项ID =RTTOff自动完成=关闭＆GT;关闭＆LT; /输入＆GT;
    ＆LT; /标签＆gt;
＆LT; / DIV＆GT;
 

解决方案

我相信这是你想要做的事。

\r

\r

$（'。BTN-切换'）。点击（函数（）{\r
  $（本）.find（'BTN。'）toggleClass（激活）。\r
\r
  如果（$（本）.find（'BTN绿色。'）的大小（）方式＆gt; 0）{\r
    $（本）.find（'。BTN'）toggleClass（'BTN-红'）;\r
  }\r
\r
  $（本）.find（'BTN。'）toggleClass（'BTN-默认）。\r
\r
}）;

\r

.btn绿色{\r
  背景颜色：绿色;\r
}\r
.btn红{\r
  背景色：红色;\r
}\r
.wrap {\r
  保证金：120像素;\r
}

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/1.11.1/jquery.min.js\"></script>\r
＆所述; SCRIPT SRC =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;链接HREF =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css的rel =stylesheet属性/＆GT;\r
\r
＆LT; D​​IV CLASS =容器包装＆GT;\r
  ＆LT; D​​IV CLASS =BTN-组BTN-切换＆GT;\r
    ＆LT;按钮类=BTN BTN-LG BTN-绿色＆GT;针对＆lt; /按钮＆GT;\r
    ＆LT;按钮类=BTN BTN-LG BTN-默认的活动＆GT;关闭＆LT; /按钮＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

I am trying to create an on/off button toggle with Bootstrap. When "On" is selected I want the background to be green, and I want the "Off" button to be grayed out and transparent. When "Off" is selected I want it to be red and I want "On" to be deselected. All of the examples I've found deal with disabled buttons, but I don't want to disable either of the buttons. I know how to implement the colors and transparency in CSS, but I don't know how I can implement what I want by using CSS selectors with Bootstrap. Do I have to make my own CSS classes for this or does Bootstrap have something built in?

JSFiddle http://jsfiddle.net/UltraSonja/4pbpmqgu/

HTML

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-sm btn-primary green">
        <input type="radio" name="options" id="RTTOn" autocomplete="off">ON</input>
    </label>
    <label class="btn btn-sm btn-primary red">
        <input type="radio" name="options" id="RTTOff" autocomplete="off">OFF</input>
    </label>
</div>

解决方案

I believe this is what you're trying to do.

$('.btn-toggle').click(function() {
  $(this).find('.btn').toggleClass('active');

  if ($(this).find('.btn-green').size() > 0) {
    $(this).find('.btn').toggleClass('btn-red');
  }

  $(this).find('.btn').toggleClass('btn-default');

});

.btn-green {
  background-color: green;
}
.btn-red {
  background-color: red;
}
.wrap {
  margin: 120px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="container wrap">
  <div class="btn-group btn-toggle">
    <button class="btn btn-lg btn-green">ON</button>
    <button class="btn btn-lg btn-default active">OFF</button>
  </div>
</div>

这篇关于引导：单选按钮切换着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！