如何让 Jeditable 使用 Bootstrap 按钮类进行确定/取消？答案

【问题标题】：How can I make Jeditable use the Bootstrap button classes for Ok/Cancel?如何让 Jeditable 使用 Bootstrap 按钮类进行确定/取消？
【发布时间】：2014-10-22 22:14:09
【问题描述】：

我知道我可以使用这样的 css 文件为 Jeditable 创建的“确定”和“取消”按钮设置样式：

form.editable > button {
color : #F00
}

我希望 Jeditable 使用现有的 Bootstrap 类 btn btn-danger 和 btn btn-success。

我知道我可以将引导程序中的 CSS 复制并粘贴到我的自定义 css 文件中，但这看起来很恶心。

这样做的正确方法是什么？我在谷歌上搜索并没有取得多大成功并阅读了 jeditable 文档，但解决方案对我来说并不明显。

【问题讨论】：

标签： jquery css twitter-bootstrap jeditable

【解决方案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>

【讨论】：

【解决方案2】：

访问 Bootstrap CSS 自定义页面：http://getbootstrap.com/customize/
单击“全部切换”并仅选择“按钮”
点击编译下载
打开 zip 文件并将bootstrap-theme.css 文件加载到您的应用中
为您的按钮添加btn 类：<button class="button btn btn-success" type="submit" >Ok</button>

这将为您提供所需的 Bootstrap（而不是整个 CSS 库），并允许您将按钮样式设置为 Bootstrap 按钮。

【讨论】：

【解决方案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>';

【讨论】：