html – 如何在bootstrap中更新按钮图像

概述我正在尝试用我自己的图像更改glyphicon日历的背景图像.但是在更新图像后,我无法更改父类btn btn-default属性以删除按钮中的额外填充.这里我的代码看起来像CSS： .glyphicon-calendar{background : url('../app/images/datePickerIcon.png') no-repeat;padding: 3px 6px;width: 我正在尝试用我自己的图像更改glyphicon日历的背景图像.但是在更新图像后,我无法更改父类btn btn-default属性以删除按钮中的额外填充.这里我的代码看起来像CSS：

.glyphicon-calendar{background : url('../app/images/datePickerIcon.png') no-repeat;padding: 3px 6px;wIDth:26px;height:26px;Font-family: none;Font-size: 0;vertical-align: top;}

HTML：日期选择器动态生成日历功能

<div >                        <mydatepicker ng-model="nextDate" date-options="dateOptions"                            opened="opened" name="nextDate" ng-pattern="datePattern" />                    </div>

在开发人员工具代码中看起来像这样

<span >    <button  ng-click="open($event)">        <i ></i>    </button></span>

在浏览器中看起来像这样

我需要输出,如没有填充按钮.提前致谢

解决方法 图像大小在您的情况下很重要

尺寸合适的图像

.glyphicon-calendar {  background: url('https://cdn1.iconfinder.com/data/icons/mimiGlyphs/16/calendar.png') no-repeat;  padding: 3px 6px;  wIDth: 16px;  height: 16px;  Font-family: none;  Font-size: 0;  vertical-align: top;}div#datetimepicker1{  wIDth: 100%;}span.input-group{  wIDth: 20%;  display: inline-block;}#datetimepicker1 input.form-control{  wIDth: 80%;  display: inline-block;}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/CSS/bootstrap-glyphicons.CSS" rel="stylesheet"/><link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/CSS/bootstrap.min.CSS" rel="stylesheet"/><div >  <div >    <div class='col-sm-6'>      <div >        <div class='input-group date' ID='datetimepicker1'>          <input type='text'  />          <span >    <button  ng-click="open($event)">        <i ></i>    </button></span>        </div>      </div>    </div>  </div></div>

图像大小不同

.glyphicon-calendar {  background: url('https://cdn1.iconfinder.com/data/icons/mimiGlyphs/16/calendar.png') no-repeat;  padding: 3px 6px;  wIDth: 26px;  height: 26px;  Font-family: none;  Font-size: 0;  vertical-align: top;}div#datetimepicker1{  wIDth: 100%;}span.input-group{  wIDth: 20%;  display: inline-block;}#datetimepicker1 input.form-control{  wIDth: 80%;  display: inline-block;}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/CSS/bootstrap-glyphicons.CSS" rel="stylesheet"/><link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/CSS/bootstrap.min.CSS" rel="stylesheet"/><div >  <div >    <div class='col-sm-6'>      <div >        <div class='input-group date' ID='datetimepicker1'>          <input type='text'  />          <span >    <button  ng-click="open($event)">        <i ></i>    </button></span>        </div>      </div>    </div>  </div></div>

据我所知,你无法做任何关于填充的事情.只需更改图像的大小.

编辑

找到一个解决方案.

给

.glyphicon-calendar {   background-size: contain;  top: -3px; //to adjust the icon.}

并更改btn.btn-default的填充和高度(高度与输入文本框相同)

.input-group .glyphicon-calendar {  background: url('https://cdn1.iconfinder.com/data/icons/mimiGlyphs/16/calendar.png') no-repeat;  padding: 3px 6px;  wIDth: 26px;  height: 26px;  Font-family: none;  Font-size: 0;  vertical-align: top;  background-size: contain;  top: -3px;}.btn-default{ height: 34px; padding: 2px 8px;}div#datetimepicker1{  wIDth: 100%;}span.input-group{  wIDth: 20%;  display: inline-block;}#datetimepicker1 input.form-control{  wIDth: 80%;  display: inline-block;}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/CSS/bootstrap-glyphicons.CSS" rel="stylesheet"/><link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/CSS/bootstrap.min.CSS" rel="stylesheet"/><div >  <div >    <div class='col-sm-6'>      <div >        <div class='input-group date' ID='datetimepicker1'>          <input type='text'  />          <span >    <button  ng-click="open($event)">        <i ></i>    </button></span>        </div>      </div>    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 如何在bootstrap中更新按钮图像全部内容，希望文章能够帮你解决html – 如何在bootstrap中更新按钮图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。