改变Bootstrap的iCheck的尺寸

  • Post author:
  • Post category:其他


<p><span style="font-family: Arial, Helvetica, sans-serif;">方法:</span></p><p>1、打开你使用的那个iCheck的css文件,改变里面的一些参数包括大小和各种状态下的背景图片的position;</p><p>2、修改对应的那个背景图片PNG的大小,用美图秀秀之类的软件按比例调整一下即可。</p><p>下面是CSS修改的例子:</p>

.icheckbox_flat,
.iradio_flat {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
   <span style="color:#ff0000;"> <strong>width: 30px;</strong></span>
    <span style="color:#ff0000;"><strong>height: 30px;</strong></span>
    background: url(flat.png) no-repeat;
    border: none;
    cursor: pointer;
}

.icheckbox_flat {
    background-position: 0 0;
}
    .icheckbox_flat.checked {
        <strong><span style="color:#ff0000;">background-position: -33px 0;
</span></strong>
    }
    .icheckbox_flat.disabled {
        <strong><span style="color:#ff0000;">background-position: -66px 0;</span></strong>
        cursor: default;
    }
    .icheckbox_flat.checked.disabled {
        <span style="color:#ff0000;"><strong>background-position: -99px 0;</strong></span>
    }

这里将原来20*20的的iCheck,改为了30*30大小;相应的状态的背景图片的位置也要改变



版权声明:本文为daelly原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。