3

我正在尝试使用引导程序（http://eternicode.github.io/bootstrap-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 集成？

4

4 回答 4

5

下载插件的源代码 Javascript 和 CSS（或更少）并将旧类引用替换为新的，请参阅： http: //www.bootply.com/bootstrap-3-migration-guide。如PilHA所述，替换icon-*为glyphicon glyphicon-*, input-appendwithinput-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 文件对其进行编译。

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

于 2013-08-09T21:46:12.147 回答
3

除了更改类引用之外，我发现还有一些布局考虑不允许一对一交换某些类，例如输入控件上的 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/

于 2013-10-09T02:38:10.493 回答
1

从这里下载 bootstrap3下载

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

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

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

在索引文件中包含这个 css 文件

完成了

于 2013-10-28T13:07:38.730 回答
0

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

于 2016-05-03T17:25:52.660 回答