점 설치로 Bootstrap4 공부를 시작했기 때문에 자신의 메모 쓰기.

우선 공식 사이트의 병아리를 복사
자신이 사용하는 CSS 등은 head에 적절히 기재한다.

index.html


##Starter template

<!doctype html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

각 클래스

text-center
문자를 가운데로 정렬 (text-alighn : center; 적으로)

bg-(color),text-(color)
배경색, 문자색(background-color) 지정

primary (파랑)

secondary(회색)

success (녹색)

danger (빨강)

warning(황색(오렌지?))

info (파란색)

light(흰색)

dark (검정)

muted(얇은 회색?)

white (이것도 흰색)

요소 배치 text-(속성)

left

right

center

굵게 font-weight-bold

작은 글꼴 font-weight-normal (h2 태그와 같은 원래 굵은 글씨에 대해)

표제 display-(1~4)

요소 크기

너비 w-(25, 50, 75, 100(%))

높이 h-(25, 50, 75, 100(%))

padding,margin
※ 기본형

(p|m)(방향)-(size(rem)) ! 방향을 지정하지 않으면 모든 방향

top=t, bottom-b, left-l, right-r

상하좌우로 지정 세로=y, 가로=x

size: 0~5rem ※margin만 auto 지정 가능

(예) pt-3, my-0, mx-auto

!!bootstrap에서 padding,margin을 지정하면!important 설정이 된다

버튼 btn btn-(색) btn-(sm, lg)※button 태그가 아니어도 OK

그리드 레이아웃

기본 구조

row 안의 col 요소는 12 분할된다.
아무것도 지정하지 않으면 등분되지만 12의 비율을 지정할 수 있습니다.

index.html


<div clas="container">

  <div class="row">
    <div class="col-4"></div>
    <div class="col-６"></div>
    <div class="col-２"></div>
  </div>
　　　<div class="row">
    <div class="col-4"></div>
    <div class="col-６"></div>
    <div class="col-２"></div>
  </div>
　　　<div class="row">
    <div class="col-4"></div>
    <div class="col-6"></div>
    <div class="col-6"></div>
  </div>
</div>

12 이상의 값도 지정할 수 있지만 다음의 행에 가 버린다.

Bootstrap의 중단점

각 화면 크기 폭에 따라 클래스를 지정할 수 있습니다.

　　- 576px 이상 = sm
　　- 768px 이상 = md
　　- 992px 이상 = lg
　　- 1200px 이상 = xl

ex.) col-md-2, col-lg-4

※특정의 화면 사이즈로 비표시로 하는 경우는 d-none(display: none;)를 사용한다
ex) d-md-none

반대로 기본 숨기지만 특정 화면 크기로 표시하려는 경우.

d-(화면 크기)-block 사용
(d-none, d-(화면 사이즈)-2 등과 병용이 필요)

Reference

이 문제에 관하여(Bootstrap4 초학자 메모 쓰기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/hiroakiito/items/03b5901bbca8a347293b

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

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

Bootstrap4 초학자 메모 쓰기