> For the complete documentation index, see [llms.txt](https://hanco.gitbook.io/railsbooks/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hanco.gitbook.io/railsbooks/master.md).

# jquery & bootstrap for Rails

ruby on rails에서 jquery와 bootstrap 사용하기

## 시작하기

가장 먼저 jquery-rails와 bootstrap-scss gemfile을 설치해 줍시다.

### gem 설치

#### 터미널에서..

레일즈에서는 gem install 명령어를 통해 Gemfile을 설치할 수 있다. 

```
$ gem install bootstrap-scss
$ gem install jquery-rails
$ gem install simple-form
```

{% hint style="info" %}
 이렇게 설치되어진 Gemfile은 Gemfile.lock에 저장되어진다.
{% endhint %}

#### Gemfile 안에서..

또는 이러한 방법으로 Gemfile을 명시할 수 있다. rails 폴더안의 Gemfile에 들어간다. 그후 다음의 내용을 입력해 준다.

```
# jquery-rails 사용
gem 'jquery-rails'
# bootstrap 파일
gem 'bootstrap-sass', '~> 3.3', '>= 3.3.7'
# bootstrap & rails의 form_for 메소드 사용 도움 파
gem 'simple_form'
```

이후 터미널에서 다음의 명령어를 입력한다. 

```
$ bundle install
```

### Assets 관리

#### jquery

app/assets/javascripts/application.js에 들어가 다음의 코드를 추가한다.

```
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
```

#### bootstrap & simple\_form사용

app/assets/stylesheet/application.scss파일을 생성하고 다음의 코드를 추가해줍시다. 기존의 application.css파일은 삭제합니다.

```
@import "bootstrap-sprockets";
@import "bootstrap";
```

#### bootstrap & simple\_form 연결

![](https://3979988220-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LDimWdXltfy05uFh0Lg%2F-LDimgr3yZTw3w5iG3ZC%2F-LDjHirsRT0UzTQZy_Vd%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202018-05-30%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%201.24.47.png?alt=media\&token=33e22929-e269-4c4c-8a76-8e6d17e07597)

{% hint style="info" %}
이후에 css와 jquery문이 잘 사용되는 것을 확인할 수 있다.
{% endhint %}