rails에서 bootstrap 사용
2466 단어 Rails 튜토리얼루비Rails
bootstrap이란?
세련된 웹 디자인과 사용자 인터페이스 요소를 쉽게 도입할 수 있는 CSS 프레임워크.
최대의 특징은 어플리케이션을 반응형 디자인으로 할 수 있는 것.
공식 사이트
소개
① gem 파일을 기입
Gemfilesource 'https://rubygems.org'
gem 'bootstrap', '~> 4.5.0'
.
.
.
② 터미널에서 bundle 설치
$ bundle install
③scss 파일 작성
/app/assets/stylesheets/application.scss 파일을 만듭니다.
/app/assets/stylesheets/application.scss@import "bootstrap-sprockets";
@import "bootstrap";
.
.
.
④코드 기입
bootstrap은 클래스를 특정 코드로 다시 쓰면 자동으로 색상과 크기를 변경합니다.
이번에는 이 버튼에 bootstrap을 맞춰 보겠습니다.
공식 사이트의 Compornents → buttons 안의 이 코드를 사용합니다.
클래스 부분을 복사하여 코드에 붙여 넣습니다.
↓
서버를 다시 시작하면
지정한 버튼으로 바뀌어! !
Reference
이 문제에 관하여(rails에서 bootstrap 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yu_class/items/a43f62b93aa8938336f9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
① gem 파일을 기입
Gemfile
source 'https://rubygems.org'
gem 'bootstrap', '~> 4.5.0'
.
.
.
② 터미널에서 bundle 설치
$ bundle install
③scss 파일 작성
/app/assets/stylesheets/application.scss 파일을 만듭니다.
/app/assets/stylesheets/application.scss
@import "bootstrap-sprockets";
@import "bootstrap";
.
.
.
④코드 기입
bootstrap은 클래스를 특정 코드로 다시 쓰면 자동으로 색상과 크기를 변경합니다.
이번에는 이 버튼에 bootstrap을 맞춰 보겠습니다.
공식 사이트의 Compornents → buttons 안의 이 코드를 사용합니다.
클래스 부분을 복사하여 코드에 붙여 넣습니다.
↓
서버를 다시 시작하면
지정한 버튼으로 바뀌어! !
Reference
이 문제에 관하여(rails에서 bootstrap 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yu_class/items/a43f62b93aa8938336f9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)