1분 안에 Bootstrap4를 작성하는 방법
CDN
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 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>
전제적으로, Bootstrap의 요소는
body 바로 아래에 container 클래스의 div로 둘러싸입니다.margin 및 padding
Bootstrap에서는 클래스를 사용하여 margin과 padding을 나타내며 속성 상하 좌우-사이즈의 형태로 기술합니다. (예 : mt-4, p-auto)
속성
내용
상하좌우
내용
사이즈
내용
m
margin
t
top
0
0
p
패딩
b
bottom
1
*0.25
l
left
2
*0.5
r
right
3
*1
x
left,right
4
*1.5
y
top,bottom
5
*3
top,bottom,left,right
auto
auto
그리드 시스템
Bootstrap에서는 요소의 가로 1행을 row 클래스의 div 태그로 단락지어, 12등분한 1열을 컬럼이라고 부릅니다.
열은 클래스 이름에 col-화면 크기-크기 형식으로 설명합니다. (예: col-md-6 , col-10)
화면 크기
내용
사이즈
내용
<540px
1
1/12rem
sm
540px
2
2/12rem
md
720픽셀
3
3/12rem
lg
960px
4
4/12rem
XL
1140px
...
offset
여백
12
1rem
참고문헌
자세한 내용이나 컴퍼넌트는 공식 문서가 참고가 됩니다↓ ↓
공식 문서
Reference
이 문제에 관하여(1분 안에 Bootstrap4를 작성하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nyojs/items/b68b4c5f862d03b41032
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Bootstrap에서는 요소의 가로 1행을
row 클래스의 div 태그로 단락지어, 12등분한 1열을 컬럼이라고 부릅니다.열은 클래스 이름에 col-화면 크기-크기 형식으로 설명합니다. (예: col-md-6 , col-10)
화면 크기
내용
사이즈
내용
<540px
1
1/12rem
sm
540px
2
2/12rem
md
720픽셀
3
3/12rem
lg
960px
4
4/12rem
XL
1140px
...
offset
여백
12
1rem
참고문헌
자세한 내용이나 컴퍼넌트는 공식 문서가 참고가 됩니다↓ ↓
공식 문서
Reference
이 문제에 관하여(1분 안에 Bootstrap4를 작성하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nyojs/items/b68b4c5f862d03b41032
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(1분 안에 Bootstrap4를 작성하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nyojs/items/b68b4c5f862d03b41032텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
