【Rails】【초학자용】Bootstrap이란 무엇인가(가장 간단하게 Rails 앱에 Bootstrap을 도입한다)

6802 단어 BootstrapRails

Bootstrap이란 무엇인가



목차
· Bootstrap이란?
· Bootstrap 사용 방법
· Bootstrap을 Rails 앱에 도입 할 때까지

제대로 Rails 앱에 도입하고 싶은 분은,
· Bootstrap을 Rails 앱에 도입 할 때까지
까지 날아보세요!

Bootstrap이란?



Bootstrap은 단적으로 말하면, 앱의 디자인을 폭속으로 진행해 나가는데 엄청 편리한 툴입니다!
원래, Twitter사가 개발한 것입니다.
보통 일반적으로, 디자인 등은 프로그래머가 CSS나 Javascript를 써 가서, 구현해 가는데,
Bootstrap을 사용하면 이미 Bootstrap 측에서 만들어 준 CSS나 Javascript를 사용할 수 있습니다!
(즉, 여러분이 HTML을 써 가는 중에서 클래스명을, Bootstrap측에서 준비해 주는 클래스명에 맞추면, Bootstraps제의 CSS나 Javascript가 적용되는 것입니다!)
그리고 어떤 클래스 이름에 맞으면 Bootstrap을 적용 할 수 있는지에 관해서는
Bootstrap 공식 사이트 에 부품이 쓰여져 있습니다! 거의 거의 copipe로 갈 것입니다.

인용

SKILLHUB

Bootstrap 사용 방법



Bootstrap을 사용하는 방법은 두 가지가 있습니다.

CDN을 이용하는 방법



Bootstrap CDN
↑
이 사이트에 기재된 CDN을 HTML의 Head내에 기입하는 것으로, 서버에 놓여져 있는 Bootstrap 데이터를 읽어들일 수 있어 이용할 수 있습니다!
Ex.)


index.html.erb
<head>
 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

CDN은 뭐야

Bootstrap 파일을 다운로드하는 방법



이것은 직접 Bootstrap이 만들어 주는 CSS, Javascript 파일을 자신의 앱 디렉토리에 통합하는 방법입니다!
Bootstrap 다운로드 페이지


위의 다운로드 버튼을 누르면 파일을 다운로드할 수 있으므로 다운로드한 파일을 자신의 파일 안에 넣어 가는 것뿐입니다.
실제로 사용하고 싶은 파일만 자신의 stylesheet 폴더 안에 넣어주세요.
CSS를 사용하고 싶다면 bootstrap.min.css만으로 좋을까 생각합니다.

참조

Bootstrap을 Rails 앱에 도입할 때까지



이번에는 CDN을 이용하는 방법으로 설명하겠습니다.

Rails 앱 만들기


> cd Desktop
> rails new BootstrapApp
> cd BootstrapApp

홈 컨트롤러의 상위 액션 만들기


> rails generate controller home top

Bootstrap CDN 도입



application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>BootstrapApp</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    #ここから
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
　　 #ここまでを追加
  </head>

  <body>
    <%= yield %>
  </body>
</html>

반영하고 싶은 화면의 파일에 파트를 설치



설치하려는 부품은
Bootstrap 공식 사이트
여기 Component에서 선택하십시오.
아래에서는 예를 들어 버튼에서 버튼 디자인을 복사했습니다.


home/top.html.erb
<h1>Home#top</h1>
<p>Find me in app/views/home/top.html.erb</p>

#ここから
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
#ここまでを追加

완료



그럼 Rails 서버를 세운 후,

localhost:3000/home/top

방문해보십시오.

이런 느낌으로 다양한 버튼 디자인이 완성되었을 것입니다.
쉽습니다.
[장고] 양식 입력 화면에서 메시지 표시
Vue.js 고양이 본 자습서의 작업 목록을 조금 정렬 해 보았습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage