5일째: Bootstrap을 처음 만져 보았다

사용환경

호스트 OS: Windows10 Home
가상 환경 OS: Ubuntu Bento/Bionic
루비 2.5.1p57
Rails 5.2.2
MySQL
이번에는 scaffold 사용

Bootstrap이란?

Bootstrap 홈페이지 상단에서

Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

번역할 생각이었지만, 가타카나뿐이기 때문에, 하지 않았습니다.

평소 rails s 근처까지 준비

terminal

rails new private_butostrap -d mysql
#Gemfileのmini-racerコメントイン
bundle install
/config/database.ymlのパスワード情報追加
rails db:create
rails s  # 一応確認

Scaffold로 테이블 만들기

# rails g scaffold (コントローラ名/モデル名)　カラム名：データ型　・・・
rails g scaffold User name:string email:string sex:integer age:integer address:integer attendance:integer opinion:text

rails db:migrate

terminal

rails db:migrate
# 一応確認として
use private_butostrap_development;
show table;

콘솔에서 데이터 추가

콘솔

(1..100).each do |num|
  if num % 2 == 0
    s = 0
    ad = 0
    at = 0
  else
    s = 1
    ad = 1
    at = 1
  end

  user = User.create(name: "taro-#{num}", email: "val-#{num}@gmail.com", sex: s, address: ad, attendance: at, opinion: "nothing special-#{num}")
  user.save
end

rails s로 일단 확인

타로 100명 형제 들어가 있다.

Bootstrap에서 멋지게 수정

Butostrap CSS 로드

Bootstrap introduction

app/views/layouts/application.html.erb

# <head>の中で読み込む
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

# <body>の中で読み込む
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

HTML 로드 순서를 고려

링크가 파랗게 되었다.

색인 페이지의 NewUser 버튼 변경

app/views/users/index.html.erb

# 元のコード
<%= link_to 'New User', new_user_path" %>
# Bootstrap用のclass追加
<%= link_to 'New User', new_user_path , class: "btn btn-primary"%>

마찬가지로 show, edit, destroy 버튼도 변경

테이블의 모양도 변경

bootstrap table

app/views/layouts/application.html.erb

# 元のコード
<table>
# 修正後
<table class="table table-hover table-dark">

NewUser 버튼을 block으로, 테이블을 검게 하고, 호버링으로 색이 바뀌는 것처럼 보았다. ,
수정하려고 하면, 얼마든지이므로, index 페이지만으로 해 둔다(흰색도 신경쓰지 않는다)

Bootstrap이 이렇게 간단하다고는 생각도 하지 않았다.

js 파일의 삽입 부분을 생각합니다.

수업에서 말한 것

head인가body인가가, 유저빌리티에 영향을 준다

head내: js 파일이 무거우면, js 파일이 로드될 때까지, 페이지가 표시되지 않는다.

body내: 먼저 페이지가 표시되고, 그 후에 js파일이 로드됩니다.

HTML 구문 분석 전에 실행해야하는 js 파일 등은 head 태그에 기술해야합니다.

페이지 로딩 시간은 사용자의 이탈률 등에 영향을 미친다.

참고
1차 데이터: Does Page Load Time Really Affect Bounce Rate? pingdom

위의 1차 데이터에 따르면,
- 페이지 로드 시간 3초까지는 이탈률은 10% 미만이지만, 5초에서 38%, 7초로 50%를 넘는다

사이트 페이지를 얼마나 가볍게하고 보여주고 싶은 것의 로딩 속도를 높이는 것이 중요합니다.

Reference

이 문제에 관하여(5일째: Bootstrap을 처음 만져 보았다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/OriverK/items/7cff4e36a2d19759cccb

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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