'부트스트랩'에 해당되는 글 3건

  1. 2013.05.01 Bootstrap - navbar-form
  2. 2013.04.29 Bootstrap - ERB에서 Button 꾸미기
  3. 2013.04.29 Bootstrap - Rails와 연동하기


navbar위에 navbar-form클래스를 이용해 로그인 폼을 만드는 방법이다.

다음 코드를 원하는 위치에 넣어주자.

 form_for의 클래스를 지정해 줄때는 :html => {:class => "navbar-form"} 으로 해준다.

 필드나 체크박스의 인자로 보내지는 모델의 원소는 html에서 name으로 변해 들어간다.

  예를 들어  :email 을 인자로 갖는 필드에는 user[email]로 이름이 지정된다.



다음은 결과이다.




참고자료





Posted by 하남각목

  Bootstrap을 설치하지 않은 경우에는 '이곳'을 참고하여 설치하고 돌아오자.


ERB에서 Button을 꾸며보자.

ERB는 Embeded Ruby의 줄임말로 HTML에 루비코드를 삽입한 것이다.


  ERB(Embeded Ruby)보다 HAML(HTML Abstraction Markup Language)을 사용하라는 말이 있는데, 이에 대한 포스트는 나중에 HAML을 공부한 뒤 올리겠다.



부트스트랩을 이용하여 버튼을 꾸미는 것은 정말 간단하다.

그냥 다음 클래스를 html 태그에 삽입하면 된다.


다음과 같이 html코드에 클래스를 지정해준다.

  <button class="btn btn-primary">Large</button>

  <label class="btn btn-link">small</label>


결과물.



그런데 실제로 루비온레일즈로 개발하다보면 html코드에 클래스를 넣는 것보다는

erb코드에 클래스를 넣는 경우가 많다.



그런 경우 태그에 클래스를 넣지말고 

다음과 같이 erb메서드의 인자로 클래스를 넣어주면된다.


  <%= button_to 'Large', path, class: "btn btn-primary" %>

  <%= link_to 'small', path, class:"btn btn-link" %>




참고자료

1. Bootstrap




Posted by 하남각목

트위터에서 부트스트랩이란 걸 만들었다.

부트스트랩은 HTML5 & CSS3 UI Framework이다.


우선 bootstrap 사이트로 들어가 파일을 다운받는다.

컴파일 버전을 다운받는 것을 추천한다.

http://twitter.github.io/bootstrap/getting-started.html



다운받은 폴더를 열어보면 css, js, img 폴더가 있을 것이다.



css 폴더에 있는 bootstrap.min.css파일을 프로젝트폴더/app/assets/stylesheets/ 폴더로 복사한다.


js 폴더에 있는 bootstrap.min.js파일을 프로젝트폴더/app/assets/javascripts/ 폴더로 복사한다.


   파일명에 min이 들어간 것은 들어가지 않은 것을 최대한 축약한 것이다.(띄어쓰기, 개행 등)





참고자료

1. 부트스트랩




Posted by 하남각목