Question

我尝试使用bootstrap（http://eternicode.github.io/bootstrap-datepicker/）中的datepicker，一切正常，但没有任何字形显示。

我看到glyphicons被移动到bootstrap 3（http://glyphicons.getbootstrap.com/）下的另一个目录，这是我正在使用的，但我不确定如何集成它。

两个

<input type="text" value="12-02-2012" date-date-format="yyyy-mm-dd" class="datepicker">

和

<div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
     <input class="span2" size="16" type="text" value="12-02-2012" readonly/>
     <span class="add-on"><i class="icon-th"></i></span>
</div>

没有工作。

任何人都知道如何将bootstrap 3与twitter datepicker集成？

Answer 1

下载插件的源代码Javascript和CSS（或更少）并将旧类引用替换为new，请参阅：http://www.bootply.com/bootstrap-3-migration-guide。是。正如PilHA所述，将icon-*替换为glyphicon glyphicon-*，将input-append替换为input-group等。

对HTML代码执行相同操作。或者使用迁移器/更新程序，例如：http://twitterbootstrapmigrator.w3masters.nl/，http://bootstrap3.kissr.com/或http://code.divshot.com/bootstrap3_upgrader/

从http://glyphicons.getbootstrap.com/安装Glyphicons：下载文件并将所有字体文件复制到CSS附近的/ fonts目录中。将编译后的CSS文件从存储库中的/ css包含到本地css文件夹中，或者下载Less文件并使用Bootstrap文件进行编译。

更新自RC2以来，Glyphicons又回来了。 Twitter的Bootstrap 3包含来自Glyphicon Halflings集的180种字体格式字形。

Answer 2

除了更改类引用之外，我发现还有一些布局考虑因素禁止某些类的一对一交换，例如输入控件上的span2。我最终得到了以下内容：

<div class="form-group row">
  <div class="col-xs-8">
    <label class="control-label">My Label</label>
    <div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
      <input class="form-control" type="text" readonly="" value="12-02-2012">
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
  </div>
</div>

第176-177行的datepicker.css中的CSS更改：

.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {

第34行的datepicker-bootstrap.js中的Javascript更改：

this.component = this.element.is('.date') ? this.element.find('.input-group-addon') : false;

我还在这里写了一篇博文：http://kenyontechnology.com/2013/10/08/datepicker-for-bootstrap-with-twitter-bootstrap-3-0/

Answer 3

从这里下载bootstrap3 Download

现在解压缩并从字体文件夹中获取字体。

将此.ttf，.otf，.svg和其他文件复制并粘贴@您的项目根目录

你可以从这里下载glyphoicon.css glypho.css

在索引文件中包含此css文件

完成了

Answer 4

我最初无法更改我的字形，在F12开发工具中，我可以看到错误尝试加载＆＃34; glyphicons-halflings-regular.woff2＆＃34;。我能够通过下载.woff2文件并将其添加到我的fonts文件夹来修复它。然后我能够改变到我想要的。 https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

Twitter的Bootstrap Datepicker缺少Glyphicons

4 个答案: