2020/11/01 - [TIL(today I learned)] - 2020-11-01 TIL
2020-11-01 TIL
섹션 12:CSS Frameworks: Bootstrap crucial! important nice to have WTF is Bootstrap Bootstrap Grid Icons Working With CSS Frameworks Responsive Bootstrap Grid Typography and Utilities Including 3rd P..
pgsb.tistory.com
Including Bootstrap & Containers
bootstrap set-up
1. download -> 컴퓨터에 파일을 가질 수 있다, 링크가 바뀔 수도 있기때문에 상업적 작업물을 만들때 사용.
2. link (CDN, content delivery network)
-> bootstrap에 있는 content 파일을 html에 링크하는것, order matter에 의해 우리의 css 파일보다 앞에 있어야 한다.
bootstrap은 약간의 JS가 포함되어 있다. 그래서 body 맨 하단에 JS 링크를 한다.
Bootstrap의 syntex는 class를 기반으로 한다.
class를 기반으로 pre-define되어진 작업물이기때문에 bootstrap docs를 보면서 class를 사용하는것이 올바른 사용법.
버전마다 조금씩 차이가 있을 수 있다.
container 와 container-fluid
getbootstrap.com/docs/4.5/layout/overview/
Overview
Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
getbootstrap.com
layout의 container는 미리 설정되어진 bootstrap의 layout이다. 각 디바이스에 맞게 brake-point도 설정되어 있다.
container-fluid는 사이즈가 작아짐에 따라 유기적으로 컨텐츠가 늘었다 줄었다 하게 한다.(breke point가 없다)
Bootstrap Buttons
getbootstrap.com/docs/4.5/components/buttons/
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
docs에 많은예제와 함께 기능들이 소개되어있다.
※색상등은 부트스트랩 기본값이다. 언제든지 따로 커스텀 할 수 있다.
'TIL(today I learned)' 카테고리의 다른 글
| 2020-11-04 TIL (0) | 2020.11.04 |
|---|---|
| 2020-11-03 TIL (0) | 2020.11.03 |
| 2020-11-01 TIL (0) | 2020.11.01 |
| 2020-10-31 TIL 정리(10월의 TIL 정리하기) (0) | 2020.10.31 |
| 2020-10-30 TIL (0) | 2020.10.30 |