转换Bootstrap 2.3.2&jQuery-Spinner与Bootstrap 3. *配合使用 [英] Convert Bootstrap 2.3.2 & jQuery-Spinner to work with Bootstrap 3.*

问题描述

我正在尝试转换

解决方案

我只是自己解决了这个问题.这是如果有人正在寻找解决方案的代码

用以下命令替换bootstrap-spinner.css文件:

  .spinner .input-group-btn {填充:2px}.spinner .input-group-btn a.spin-up {.spinner .input-group-btn a.spin-down {高度:10px；溢出:隐藏；显示:块；文本对齐:居中；职位:相对颜色:#999}.spinner .input-group-btn a.spin-up .fa-sort-down，.spinner .input-group-btn a.spin-down .fa-sort-down {职位:相对顶部:-9px}.spinner .input-group-btn a.spin-up:hover，.spinner .input-group-btn a.spin-down:hover {颜色:#555}.spinner输入{宽度:4em;文本对齐:居中；font-size:12px;border-radius:4px 0 0 4px;背景颜色:#FFFFFF;边框:1px实心#CCCCCC；box-shadow:0 1px 1px rgba(0，0，0，0.075)插入;过渡:边框0.2s线性0s，盒子阴影0.2s线性0s;行高:20px；}.spinner .input-group-btn {背景颜色:#EEEEEE；边框:1px实心#CCCCCC；高度:20px；行高:20px；最小宽度:14像素；填充:4px 5px;文本对齐:居中；文字阴影:0 1px 0 #FFFFFF;宽度:自动;}.spinner .input-group-btn a:focus {color:#999！important;} 

并使用以下HTML代码

 < div class ="col-sm-1">< div class ="input-group spinner" data-trigger ="spinner">< input type ="text" class ="form-control" value ="0" data-min ="0" data-max ="10" name ="spinner" id ="spinner" data-rule ="quantity>< span class ="input-group-btn">< a href ="javascript :;"class ="spin-up" data-spin ="up"< i class ="fa fa-sort-desc"</i>/a;< a href ="javascript :;"class ="spin-down" data-spin ="down"< i class ="fa fa-sort-down"</i</a></span></div></div> 

如果您曾经想使用glyphicon而不是font-awesome，那么请替换HTML和bootstrap.spinner.css文件中的fa和fa-xxx类.

I am trying to convert xixilive's jQuery Spinner Plugin that uses Bootstrap 2.3.2 code into bootstrap 3.* Unfortunately it's not working as it should be, along with no JavaScript errors, so I believe it's just a CSS issue.

Here is what I have done so far:

HTML/CSS

<div class="input-group spinner" data-trigger="spinner">
    <input type="text" value="0" 
                       data-min="0" 
                       data-max="10" 
                       name="spinner" 
                       id="spinner" 
                       data-rule="quantity" readonly />

    <span class="input-group-btn"> 
        <!-- Up arrow -->
        <a href="javascript:;" class="spin-up" data-spin="up">
            <i class="fa fa-sort-up"></i>
        </a>
        <!-- Down arrow -->
        <a href="javascript:;" class="spin-down" data-spin="down">
            <i class="fa fa-sort-down"></i>
        </a>
    </span>
</div>

Expected output

Demo Fiddle: http://jsfiddle.net/DAS3K/

解决方案

I just solved it by myself. Here is the code if anyone is looking for solution

Replace bootstrap-spinner.css file with this one:

.spinner .input-group-btn {
    padding: 2px
}

.spinner .input-group-btn a.spin-up, .spinner .input-group-btn a.spin-down {
    height: 10px;
    overflow: hidden;
    display: block;
    text-align: center;
    position: relative;
    color: #999
}

.spinner .input-group-btn a.spin-up .fa-sort-down, .spinner .input-group-btn a.spin-down .fa-sort-down {
    position: relative;
    top: -9px
}

.spinner .input-group-btn a.spin-up:hover, .spinner .input-group-btn a.spin-down:hover {
    color: #555
}

.spinner input {
    width: 4em;
    text-align: center;
    font-size: 12px;
    border-radius: 4px 0 0 4px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;

    line-height: 20px;
}

.spinner .input-group-btn {
    background-color: #EEEEEE;
    border: 1px solid #CCCCCC;
    height: 20px;
    line-height: 20px;
    min-width: 14px;
    padding: 4px 5px;
    text-align: center;
    text-shadow: 0 1px 0 #FFFFFF;
    width: auto;
}

.spinner .input-group-btn a:focus {color: #999 !important; }

and use following HTML code

<div class="col-sm-1">
    <div class="input-group spinner" data-trigger="spinner">
        <input type="text" class="form-control" value="0" data-min="0" data-max="10" name="spinner" id="spinner" data-rule="quantity" >
        <span class="input-group-btn">
            <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-sort-desc"></i></a>
            <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-sort-down"></i></a>
        </span>
    </div>
</div>

If you use to want use glyphicon instead of font-awesome then replace fa and fa-xxx classes in HTML and bootstrap.spinner.css file as well.

这篇关于转换Bootstrap 2.3.2&jQuery-Spinner与Bootstrap 3. *配合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！