freesia

Ruby On Rails 에 부트스트랩 씌우기 본문

Programming/Ruby on Rails

Ruby On Rails 에 부트스트랩 씌우기

freeesia 2021. 4. 27. 08:30
반응형

**2018년도에 작성한 내용을 옮긴 글입니다.

 

 

 Ruby에 부트스트랩을 씌워볼거에요ㅎㅎ

 

먼저 마음에드는 부트스트랩 테마를 찾아서 다운받은 후, 압축파일을 풀어주세요!!

그리고 c9에서 Ruby workspace를 생성해주세요!!

 

아래쪽에 1번 사진과 같이 bash창이 있는데요!! 

rails g controller home index

라고 써볼게요!!

 

           1.        

 

 

그러면 2번 사진처럼 home_controller와 home파일안에 index.html.erb파일이 생성됩니다!

 

 

2.      

 

 

3번 사진처럼 압축을 풀어 놓은 부트스트랩의 index.html 파일을 home폴더 밑에 붙여넣어주세요!

 

lyout폴더 밑에 있는 application .html 안에 내용 다 지워주세요!

 

복사한 index.html파일의 head 부분을 application.html.erb 에 오려넣어주세요.

복사한 index.html파일의  script부분을 application.html.erb에 body 태그를 써주고 오려넣어주세요. 

(찾을때 : 컨트롤+ F / script내용이 <body></body>안에 있어야합니다.)

 

복사한 index.html 의 body 부분을

index.html.erb에 복사해서 넣어주세요.

(이때, 위에서 script부분은 오려냈으니 없겠죠?)

 

3.     

 

 

 

 4번 사진처럼 application.html 파일stylesheet 태그 위에

<%= stylesheet_link_tag 'application',media:'all' %>

라고 써주세요. (css연결)


4.    

 

5번 사진처럼 application.html 파일 스크립트 위에

<%= javascript_include_tag 'application'%>

라고 써주세요. (스크립트연결 )



5.    

 

6번 사진처럼 

<%= javascript_include_tag 'application'%> 위에

<%=yield%>를 써주세요.


6.    

 

**폰트파일이 있을 경우

asset 오른쪽 클릭후 new folder로 fonts 폴더를 만들어 준다.

 


7.    

 

8번 사진처럼 assets폴더 밑에 javascripts안에 있는  application.js 에

//= require jquery.min.js

//= require bootstrap.min.js

를 써주세요.

 

**파일안에 main.js 가 있을 경우

//=require main.js

도 써주세요.

 

8.    


9번 사진처럼 assets폴더 밑에 stylesheets안에 있는 application.css 파일에

*= require_bootstrap.min.css 

써주세요.

 (require_self가 맨밑에 있어야 작동합니다.)

 

9.    

10번 사진처럼 route.rb파일에

root 'home#index' 추가해주세요.



10.    

 

 

 

마지막으로 assets폴더 밑에 stylesheets안에 있는 style.css파일에서

.. -> assets으로 바꿔주세요.

(경우에따라서 ..이 아닐 수도 있습니다.)

 

참고링크 적어놓을게용ㅎㅎ

http://takeuu.tistory.com/104

반응형

'Programming > Ruby on Rails' 카테고리의 다른 글

ruby on rails - c9 시작하기  (0) 2021.04.26
Ruby on Rails란?  (0) 2021.04.25
'Programming/Ruby on Rails' Related Articles more