如何使Jeditable使用Bootstrap按鈕類進行確定/取消？

Question

我知道我可以使用像這樣的css文件設置Jeditable創建的“Ok”和“Cancel”按鈕：

form.editable > button {
color : #F00
}

我希望Jeditable能夠使用現有的Bootstrap類btn btn-danger和btn btn-success 。

我知道我可以將CSS從bootstrap復制並粘貼到我的自定義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. 單擊“編譯和下載”
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>';