Html 在哪里可以找到 HTML5 范围输入的 Bootstrap 样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24463678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Where can I find Bootstrap styles for HTML5 Range inputs?
提问by Wilhelm
I'm in the process of styling a form [with Bootstrap] and am using HTML5's new type="range"to specify a dollar amount.
我正在[使用 Bootstrap] 设计表单样式，并且正在使用 HTML5 的 newtype="range"来指定美元金额。
<input type="range" min="10" max="1000" step="10" />
Can anyone recommend a plugin with <input>styles with Bootstrap's form elements? Particularly, HTML5 Range inputs [as well as a corresponding output element].
谁能推荐一个<input>带有 Bootstrap 表单元素样式的插件？特别是 HTML5 Range 输入 [以及相应的输出元素]。
I'm surprised bootstrap doesn't already offer HTML5 form assets and want to avoid reinventing the wheel; Unless absolutely necessary.
我很惊讶 bootstrap 还没有提供 HTML5 表单资产，并希望避免重新发明轮子；除非绝对必要。
If anyone could point me in the right direction, I would appreciate it.
如果有人能指出我正确的方向，我将不胜感激。
采纳答案by eirenaios
There is no particular class in bootstrap for input type range but you can customize it with CSS and simple javascript. Pretty cool here is an example for that!
bootstrap 中没有针对输入类型范围的特定类，但您可以使用 CSS 和简单的 javascript 对其进行自定义。很酷，这里有一个例子！
See Demo here: jsfiddle - Input type rangestyling
在此处查看演示：jsfiddle - 输入类型范围样式
body {
background: #2B353E;
margin: 0;
padding: 0;
}
#slider {
width: 400px;
height: 17px;
position: relative;
margin: 100px auto;
background: #10171D;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
-moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
}
#slider .bar {
width: 388px;
height: 5px;
background: #333;
position: relative;
top: -4px;
left: 4px;
background: #1d2e38;
background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #1d2e38), color-stop(50%, #2b4254), color-stop(100%, #2b4254));
background: -webkit-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
background: -o-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
background: -ms-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
background: linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1d2e38', endColorstr='#2b4254', GradientType=1);
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
#slider .highlight {
height: 2px;
position: absolute;
width: 388px;
top: 6px;
left: 6px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
background: rgba(255, 255, 255, 0.25);
}
input[type="range"] {
-webkit-appearance: none;
background-color: black;
height: 2px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
position: relative;
top: 0px;
z-index: 1;
width: 11px;
height: 11px;
cursor: pointer;
-webkit-box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.6);
box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.6);
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ebf1f6), color-stop(50%, #abd3ee), color-stop(51%, #89c3eb), color-stop(100%, #d5ebfb));
}
input[type="range"]:hover ~ #rangevalue,
input[type="range"]:active ~ #rangevalue {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
top: -75px;
}
/* Tool Tip */
#rangevalue {
color: white;
font-size: 10px;
text-align: center;
font-family: Arial, sans-serif;
display: block;
color: #fff;
margin: 20px 0;
position: relative;
left: 44.5%;
padding: 6px 12px;
border: 1px solid black;
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
box-shadow: inset 0px 1px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #222931), color-stop(100%, #181D21));
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
width: 18px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
top: -95px;
}
input[type="range"]:focus {
outline: none;
}<div id="slider">
<input class="bar" type="range" id="rangeinput" value="50" onchange="rangevalue.value=value" />
<span class="highlight"></span>
<output id="rangevalue">50</output>
</div>回答by Harry
Check out Bootstrap Slider, it's very "Bootstrappy"(!)
查看Bootstrap Slider，它非常“Bootstrappy”（！）
Looks like this:
看起来像这样：
With lots of customisability.
具有很多可定制性。
