How can I get Jeditable to use Bootstrap's Ok / Cancel button classes?
I know that I can style the OK and Cancel buttons generated by Jeditable with a css file like this:
form.editable > button {
color : #F00
}
I want Jeditable to use existing Bootstrap btn btn-danger
and btn btn-success
.
I know I can just copy and paste the CSS from bootstrap into my own css file, but that seems disgusting.
What is the correct way to do this? I googled without distortion and read the jeditable docs, but the solution is not obvious to me.
+3
source to share
3 answers
I just got interested in this and I found out that it is as simple as it is.
$('.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>
+7
source to share
- Visit the Bootstrap CSS customization page: http://getbootstrap.com/customize/
- Click "Toggle All" and select "Buttons" only
- Click "Compile and Download"
- Open the zip file and upload the file
bootstrap-theme.css
to your application. - Add classes
btn
to your buttons:<button class="button btn btn-success" type="submit" >Ok</button>
This will only give you the Bootstrap you need (not the whole CSS library) and will allow you to style your buttons as Bootstrap buttons.
+1
source to share