초보자를 위한 Bootstrap의 간단한 기능 요약

소개

첫 투고입니다. Rails 튜토리얼에서 학습한 「Bootstrap」을 사용해 포트폴리오를 작성하고 있습니다만, 사용한 기능을 비망록으로서 남겨 두고 싶습니다. 조금이라도 초보자 쪽의 도움이 되면 다행입니다.

1. Bootstrap을 사용하는 이점

Bootstrap은 트위터가 만든 웹 제작을 위한 프레임워크입니다. 다양한 브라우저나 화면 사이즈에 대응한 본격적인 WEB 사이트를 간단하게 작성할 수 있습니다.

장점

디자인 지식이나 기술이 부족하더라도 현대적인 디자인을 도입 할 수 있습니다

손쉽게 반응형을 도입할 수 있다

코드의 양을 줄일 수 있습니다

단점

자신의 쓰기와 규칙을 기억해야합니다

비슷한 디자인이되기 쉽습니다

사용자 정의하려고하면 작업 수가 늘어납니다

2. Bootstrap 설치

Rails의 경우 Bootstrap을 사용할 때는 bootstrap-sass gem을 사용하여 Rails 애플리케이션에 도입합니다.

Gemfile

gem 'bootstrap-sass', '3.4.1'

Bootstrap을 업데이트합니다.

 bundle install

커스텀 CSS용 파일을 작성해, @import
app/assets/stylesheets/custom.scss

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

3. 문자색 지정

HTML 태그의 class 속성에, 이하와 같이 지정하는 것으로, 문자색을 간단하게 붙일 수가 있습니다.

index.html

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

문자를 정렬하려면 다음과 같이 Class 속성을 추가합니다.

index.html

<p class="text-center text-primary">中央揃え</p>
<p class="text-right text-secondary">右揃え</p>
<p class="text-left text-success">左揃え</p>

4. 배경색 지정

HTML 태그의 class 속성에, 다음과 같이 .bg- 지정하는 것으로, 배경색의 색을 지정할 수가 있습니다.

index.html

<div class="bg-primary text-white">.bg-primary</div>
<div class="bg-secondary text-white">.bg-secondary</div>
<div class="bg-success text-white">.bg-success</div>
<div class="bg-danger text-white">.bg-danger</div>
<div class="bg-warning text-dark">.bg-warning</div>
<div class="bg-info text-white">.bg-info</div>
<div class="bg-light text-dark">.bg-light</div>
<div class="bg-dark text-white">.bg-dark</div>
<div class="bg-white text-dark">.bg-white</div>
<div class="bg-transparent text-dark">.bg-transparent</div>

5. 버튼 클릭

class 에, 다음과 같이 btn 지정하는 것으로, 버튼을 작성할 수가 있습니다. 또, 버튼의 배경색의 변경은 btn- 뒤에 색을 지정합니다.

index.html

<button type="submit" 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>

6. 네비게이션 붙이기

네비게이션 바는, nav 를 클래스에 지정해 사용합니다.

index.html

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

참고 사이트

Bootstrap 공식 사이트