2013-08-08 3 views
3

Я пытаюсь использовать datepicker из bootstrap (http://eternicode.github.io/bootstrap-datepicker/), и все работает отлично, за исключением того, что не отображается ни один из глификонов.Щебет Bootstrap Datepicker отсутствует Glyphicons

Я видел, что глификоны перемещены в другой каталог под бутстрапом 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 datepicker?

+0

Показать Ваш код. В bootstrap 3 '' in bootstrap 2 '' – PiLHA

ответ

5

Загрузите исходный код плагина Javascript и CSS (или меньше) и замените ссылки старого класса на новый, см.: http://www.bootply.com/bootstrap-3-migration-guide. B.e. как уже упоминалось PilHA заменить icon-* с glyphicon glyphicon-*, input-append с input-group и т.д.

Сделайте то же самое для вашего HTML-кода. Или использовать Migrator/Updater как: http://twitterbootstrapmigrator.w3masters.nl/, http://bootstrap3.kissr.com/ или http://code.divshot.com/bootstrap3_upgrader/

Установка Glyphicons из http://glyphicons.getbootstrap.com/: загружать файлы и скопировать все файлы шрифтов в каталоге/шрифтов возле вашего CSS. Включите скомпилированный файл CSS из/css в репозиторий в локальную папку css или загрузите файл Less и скомпилируйте его с помощью файлов Bootstrap.

обновление Глификон назад с RC2. Bootstrap 3 в Twitter включает 180 глифов в формате шрифта из набора Glyphicon Halflings.

+0

Благодарю вас за помощь! – Penguinator

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> 

изменения CSS в datepicker.css на линиях 176-177:

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

изменение Javascript в Datepicker-bootstrap.js на линии 34:

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/

+0

Спасибо, сообщение в блоге помогло много, потому что не было ясно, что нужно было называть datepicker на '$ (". Input-group.date "). Datepicker ({autoclose: true, todayHighlight: true}) ;!' – mahatmanich

1

скачать bootstrap3 отсюда Download

Теперь расстегните его и получите шрифт из папки шрифтов.

Скопируйте этот .ttf, .otf, .svg и другой файл и вставить @ корневой проекта

И Вы можете скачать glyphoicon.CSS здесь glypho.css

включить этот CSS файл в индексном файле

Thats сделано

0

я не смог изменить мои glyphicons первоначально и в F12 Дев инструментов, которые я мог видеть ошибки попытке загрузить "glyphicons-полурослики-regular.woff2". Я смог исправить это, загрузив файл .woff2 и добавив его в папку моих шрифтов. Тогда я смог изменить то, что хотел. https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2

Смежные вопросы