scssの編集

app/assets/javascripts/application.js

@@ -11,4 +11,7 @@
 // about supported directives.
 //
 //= require rails-ujs
+//= require jquery
+//= require jquery_ujs
+//= require bootstrap-sprockets
 //= require_tree .

app/assets/stylesheets/_bootstrap-custom.scss

@@ -0,0 +1,50 @@
+// Core variables and mixins
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+// Reset and dependencies
+@import "bootstrap/normalize";
+@import "bootstrap/print";
+@import "bootstrap/glyphicons";
+
+// Core CSS
+@import "bootstrap/scaffolding";
+@import "bootstrap/type";
+@import "bootstrap/code";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+
+// Components
+@import "bootstrap/component-animations";
+@import "bootstrap/dropdowns";
+@import "bootstrap/button-groups";
+@import "bootstrap/input-groups";
+@import "bootstrap/navs";
+@import "bootstrap/navbar";
+// @import "bootstrap/breadcrumbs";
+// @import "bootstrap/pagination";
+// @import "bootstrap/pager";
+// @import "bootstrap/labels";
+// @import "bootstrap/badges";
+// @import "bootstrap/jumbotron";
+// @import "bootstrap/thumbnails";
+@import "bootstrap/alerts";
+@import "bootstrap/progress-bars";
+@import "bootstrap/media";
+@import "bootstrap/list-group";
+@import "bootstrap/panels";
+@import "bootstrap/responsive-embed";
+@import "bootstrap/wells";
+@import "bootstrap/close";
+
+// Components w/ JavaScript
+// @import "bootstrap/modals";
+@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+@import "bootstrap/carousel";
+
+// Utility classes
+@import "bootstrap/utilities";
+@import "bootstrap/responsive-utilities";

app/assets/stylesheets/_navbar.scss

@@ -0,0 +1,27 @@
+nav {
+ color: rgba(0,0,0,0.5);
+ border-color: rgba(0,0,0,0.1);
+ align-items: center;
+ display: flex;
+}
+
+
+.navbar-toggler {
+ padding: 0.25rem 0.75rem;
+ font-size: 1.25rem;
+ line-height: 1;
+ background: transparent;
+ border: 1px solid transparent;
+ border-radius: 0.25rem;
+ -webkit-appearance: none;
+ overflow: visible;
+ touch-action: manipulation;
+}
+
+button {
+
+}
+
+ul {
+ list-style:none;
+}

app/assets/stylesheets/application.css.scss

@@ -1 +1,3 @@
-@import "bootstrap";
+@import "bootstrap-sprockets";
+@import "bootstrap-custom";
+@import "navbar";