-
===
===
getbootstrap.com
뭔갈 시작할 땐 Get started버튼
부트스트랩을 시작할 때 사용하는 템플릿이 있다
<head 안의 내용을 복사해서 내꺼에 넣기 <title 빼고
<body안에 있는 내용은 옵셔널인데 굳이 뺄 필요는 없으니 얘도넣어
리로드하면 이때부터 웹사이트의 화면이 조금 바뀜
===
Components라고 하는 파트에 부트스트랩이 제공하는 여러가지 좋은 부품들이 있다
버튼에 대한 예제와 샘플코드가 있다
첫줄이 파란색 버튼임
(1)클래스 값에 btn이라고 하면 기본적인 부트스트랩의 다자인이적용
(2)btn btn-primary 라고 하면 색깔 입히는것
===
a태그에 class값을 btn btn-success하면? 링크가 버튼모양이 된다, input태그도 마찬가지
세번째 버튼의 value는 손으로 씀 ===
성격이 비슷한 버튼끼리 묶기, Button group
저 btn-group 클래스로 묶으면 됨
===
버튼을 띄울 때 <br
===
오른쪽끝까지 갔다가 다시 왼쪽끝으로 와서 봐야된다
많은 웹사이트는 화면 가운데에 보기 좋은 크기를 유지한다
큰 틀의 레이아웃을 디자인 해볼 것, 부트스트랩으로는 너무나 쉽다
Layout이라는 메뉴에 모여있다
===
Containers는 우리가 만든 컨텐츠의 가장 바깥쪽 컨테이너를 어떻게 디자인 할 것인가
Default container도 있음
가장 바깥쪽이 body니까 여기다 값을 줘봄
오
===
개발자도구의
이 버튼은 웹사이트의 크기를 마음대로 조정해볼 수 있다
화면의 크기에 따라 웹사이트가 반응해서 디자인이 알아서 바뀐다 = 반응형 디자인
을 제공
===
저 윗문단과 아랫문단을 좌우로 나란히 배치하려면
css의 grid, float을 이용해야해
bootstrap에서 이걸 쉽게하는 기능이 grid
div태그를 나란히 배치시키는것이 grid라는 태그
이걸 쓰기 위해선 각각의 컬럼에 class값을 column이란 뜻에서 col을 줌
그리고 그 column들을 감싸고 있는 태그에 row(행)라고 하는 클래스를 주면 된다고 적혀있다
===
화면을 균등하게 나누는게 아니라, 왼쪽은 조금만, 오른쪽이 많이 가져가게 하고 싶어
기본적으로 부트스트랩은 12칸의 그리드를 갖고 있다 *grid : 격자무늬
col-뒤에 숫자의 합이 12가 되게 배분하면 됨
===
bootstrap은 반응형 디자인이라는 빅 트렌드를 가져온 주인공
이정도로 화면이 작아지면 분할하는게 의미가 없어
작아지면 분할기능 끄기
class값에다 col-sm- 를 넣으면 576보다 작아지면 grid가 브레이크 된다. 브레이크 포인트
이렇게
▽크기는 가로만이네
md로 바꾸면 768이 브레이크 포인트
브레이크포인트가 부트스트랩의 grid기능의 핵심
'기타' 카테고리의 다른 글
행렬 (0) 2022.06.04 DDD와 이벤트 스토밍 (0) 2022.03.11 티스토리의 임시저장과 자동저장, ctrl + z, (스피커) (0) 2022.01.07 웹브라우저 동작원리 (0) 2021.12.05 생활코딩 OT (0) 2021.11.09