Code Monkey home page Code Monkey logo

samplebt's Introduction

bootstrap template 적용 방법

$ rails new sampletemplate

  • rails : 4.2.10
  • ruby : 2.3.5

index

$ rails g controller temp controller 만들기

# controller index(action)
class TempController < ApplicationController
  def index
  end
end
# config/routes.rb
root 'temp#index'
get 'temp/index' => 'temp#index'

index.html을 index.html.erb에 붙여 넣기

css file은 절대경로로 불러올 수 없기 때문에 파일을 옮겨서 생성해줘야 한다. (bootstrap style 경로를 옮긴다)
ex) stylesheets/responsive.css → vendor/assets/stylesheets 밑에다가 옮겨주기.
/* app/assets/stylesheets/application.css인데 파일 이름을
@import를 쓰기 위해 application.scss로 변경*/

/*기존에 있던 line 지우기*/
*= require_tree .
*= require_self

/*index 대신 붙일 때 index.html에 써져 있던 순서대로 써야 한다. 순서 지키기!!*/
@import 'responsive';

기존 index.html에 있던 css 주석 처리 하기

tag 내용은 `app/views/layouts/application.html.erb`로 옮기기 tag만 지우기(안에 내용이 아닌 tag자체만)

JS코드도 index.html.erb에 최하단에 있는 코드들을 app/assets/javascripts/application.js에 복붙하고

//= require_tree . 지우기

//<script type="text/javascript" src="javascript/ 을
//= require        로 바꾸기

//cf) 만약 CND이 있다면
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=KEY&region=GB"/>
// app/views/layouts/application.html.erb의 <body> 밑으로 옮기기

javascripts 에 있는 필요한 js 파일들을→ vendor/assets/javascripts밑에다가 옮겨주기.

Image는 app/assets/images로 옮기기

<!--파일 경로를 직접 작성하거나 이렇게 쓰면 된다. -->
<img src="<%=asset_path '01.png'%>" alt="">

<!-- 백그라운드 이미지인 경우 -->
.flat-iconbox.style2{
	...
	backgroud-image: url(asset-path('02.png'));
}

cf) Atom에서 ctrl+shift+f로 전체 파일에서 검색이 가능하다.

cf) erb코드에서 javascript부분 중 나중에 실행시켜야 하는 경우

// ex. app/views/controller/index.html.erb
//단순 코드가 아니라 js 코드가 써져 있는 경우//
<% content_for 'javascripts_contents' do %>
	<script type = "text/javascript">
        ...
    	...
    </script>
<% end %>
<!-- app/views/layouts/application.html.erb -->
<%= yield 'javascript_contents' %>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.