Как я могу заставить Jeditable использовать классы кнопок Bootstrap для Ok/Cancel?

Question

Я знаю, что могу стилизовать кнопки "ОК" и "Отмена", созданные Jeditable, с помощью файла CSS следующим образом:

form.editable > button {
color : #F00
}

Я хочу, чтобы Jeditable использовала существующие классы Bootstrap btn btn-danger а также btn btn-success,

Я знаю, что могу просто скопировать и вставить CSS из начальной загрузки в свой файл CSS, но это кажется отвратительным.

Как правильно это сделать? Я безуспешно гуглял и читал документы, которые можно было с легкостью передать, но решение для меня не очевидно.

Answer 1

Я просто заинтересовался этим и обнаружил, что все так просто:)

$('.edit_area').editable('http://www.example.com/save.php', {
     type: 'textarea',
     cancel: '<button class="btn btn-danger" type="cancel" >Cancel</button>',
     submit: '<button class="btn btn-success" type="submit" >Ok</button>'
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//rawgit.com/tuupola/jquery_jeditable/master/jquery.jeditable.js"></script>

<div class="edit_area">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae officiis reprehenderit tempora rerum quaerat sed totam recusandae sint doloremque perspiciatis omnis illum facilis odio perferendis quibusdam sequi ab consectetur repudiandae.</div>

Answer 2

1. Посетите страницу настройки Bootstrap CSS: http://getbootstrap.com/customize/
2. Нажмите "Переключить все" и выберите только "Кнопки"
3. Нажмите Compile and Download
4. Откройте ZIP-файл и загрузите bootstrap-theme.css файл в ваше приложение
5. Добавить btn Классы ваших кнопок: <button class="button btn btn-success" type="submit" >Ok</button>

Это даст вам только необходимую вам Bootstrap (не всю библиотеку CSS) и позволит вам стилизовать ваши кнопки как кнопки Bootstrap.

Answer 3

Попробуйте ниже:

$.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit">'+
'<i class="icon-ok icon-white"></i></button>'+
'<button type="button" class="btn editable-cancel"><i class="icon-remove"></i></button>';