3

ブートストラップ ( http://eternicode.github.io/bootstrap-datepicker/ )から datepicker を使用しようとしていますが、グリフィコンが表示されないことを除いて、すべて正常に動作します。

私が使用しているブートストラップ 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>

うまくいきませんでした。

ブートストラップ 3 を Twitter の日付ピッカーと統合する方法を知っている人はいますか?

4

4 に答える 4

5

プラグインのソース コード Javascript と CSS (またはそれ以下) をダウンロードし、古いクラス参照を新しいクラス参照に置き換えます。参照: 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 ファイルでコンパイルします。

update Glyphicons は RC2 から復活しました。Twitter の Bootstrap 3 には、Glyphicon Halflings セットからのフォント形式の 180 個のグリフが含まれています。

于 2013-08-09T21:46:12.147 に答える
3

クラス参照の変更に加えて、入力コントロールの span2 など、特定のクラスの 1 対 1 の交換を禁止するレイアウト上の考慮事項があることがわかりました。私は次のようになりました：

<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 に答える
0

最初はグリフィコンを変更できませんでした。F12 開発ツールで、「glyphicons-halflings-regular.woff2」をロードしようとするとエラーが表示されました。.woff2 ファイルをダウンロードして fonts フォルダーに追加することで修正できました。そしたら希望通りに変更できました。 https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

于 2016-05-03T17:25:52.660 に答える