첫 Ruby on rails Bootstrap 도입편 [Memo for neko]
Ruby on rails 공부의 이번에는 bootstrap 도입에 대해 간단히 메모를 남겨 둡니다.
(왜냐하면, 마음대로, 혼자서 손질해 버려서 시간이 걸려 버렸기 때문에...)
방법은 몇 가지인가 생각합니다만, 이번은 ""bootstrap-sass""로 했습니다.
==환경==
・PC:Macbook Pro (Retina)
· macOS High Sierra
· rails: 5.1.6 (*rails 6.1.2 확인됨)
· bootstrap : bootstrap 4.0.0-alpha.3
== 도입 흐름(간략) ==
1.Gemfile에 추가
2. "bundle install"을 terminal에서 주창
3.application.scss 편집
4.application.js 편집
5.Bootstrap 확인을 위해 index.html.erb 편집
6.server 재부팅
7. Bootstrap이 도입되었는지 확인
== 도입 흐름 ==
1. Gemfile
Gemfile에 다음을 추가
Gemfilegem 'bootstrap', '~> 4.1.1'
저장.
terminal에 가서 "bundle install"을 부르십시오.
(↑↑↑이 매우 중요!!)
application.scss
app> assets> stylesheets> 편집기에서 application.css를 열고 편집
다음 추가
application.css@import "bootstrap";
저장.
+ 파일명 변경 : application.css → application.scss
application.js
app > assets > javascripts > application.js를 편집기에서 열고 편집
다음 추가
*p.s. rails 6.1.2에서는 app > javascripts > packs > application.js
application.js//=require bootstrap
저장.
Bootstrap 확인
에디터에서 app>assets>views>pages>index.html.erb를 열고 편집
다음 추가 (이것은 Bootstrap 사이트의 테스트 코드를 사용하는 것이 좋습니다)
index.html.erb<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
[bootstrap button sample]htps : // 게이 t보오 tst et al p. 코 m / 두 cs / 4.1 / 코 m 포넨 ts / 부톤 s /
+server 재시작
서버 시작rails s
Ruby on rails에 Bootstrap이 도입되었는지 확인
사이트 확인 :)
[Before]
[After]
이것으로 마침내 할 수있었습니다.
(할 수 있다고 생각합니다...)
Reference
이 문제에 관하여(첫 Ruby on rails Bootstrap 도입편 [Memo for neko]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Matteneko3/items/4dae9e55054e4a4affb4
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
gem 'bootstrap', '~> 4.1.1'
@import "bootstrap";
//=require bootstrap
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
rails s
Reference
이 문제에 관하여(첫 Ruby on rails Bootstrap 도입편 [Memo for neko]), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Matteneko3/items/4dae9e55054e4a4affb4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)