Updated at: February 23, 2017
For lazy you, you can directly go through these steps.
detail in wikis: bootstrap and jquery UI
# Sass format (SCSS syntax) for the Rails 3.1+ asset pipeline.
# bootstrap
gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails' #is optional, but recommended.
It automatically adds the proper vendor prefixes to your CSS code when it is compiled.
# jquery ui
gem 'jquery-ui-sass-rails'
@import "bootstrap-sprockets";
@import "bootstrap";
@import "jquery.ui.all";
...
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require jquery.ui.all
//= require_tree .
test_app> rails g controller welcome index
test_app> vi app/views/welcome/index.html.erb
<style>
#draggable { width: 150px; height: 150px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
<div id="draggable" class="panel panel-info">
<div class="panel-heading">You can drag this panel</div>
</div>
test_app>rails s