| 반응형 숨김(grid) 출처 : https://getbootstrap.com/docs/4.1/utilities/display/ | |||||
| 셀크기 지정 row 하위 총합 12 (나눠사용) |
종류 | 이름 | 실제크기 | 컨테이너 | 클래스 |
| col | col-4 | ||||
| col-xs | extra small | <576px | 540px | col-xs-4 | |
| col-sm | small medium | >576px | 540px | col-md-4 | |
| col-md | medium | >=768px | 720px | col-md-4 | |
| col-lg | large | >=992px | 960px | col-lg-4 | |
| col-xl | extra large | >=1200px | 1140px | col-xl-4 | |
| 숨기기 | d-none | 모든 화면 안보임 | |||
| d-xs-none | xs에서 만 숨김 | .d-none .d-sm-block | |||
| d-sm-none | sm에서 만 숨김 | .d-sm-none .d-md-block | |||
| d-md-none | md에서 만 숨김 | .d-md-none .d-lg-block | |||
| d-lg-none | lg에서 만 숨김 | .d-lg-none .d-xl-block | |||
| d-xl-none | xl에서 만 숨김 | .d-xl-none | |||
| 보이기 | d-block | 모든화면 보임 | |||
| d-xs-block | xs에서 만 보임 | .d-block .d-sm-none | |||
| d-sm-block | sm에서 만 보임 | .d-none .d-sm-block .d-md-none | |||
| d-md-block | md에서 만 보임 | .d-none .d-md-block .d-lg-none | |||
| d-lg-block | lg에서 만 보임 | .d-none .d-lg-block .d-xl-none | |||
| d-xl-block | xl에서 만 보임 | .d-none .d-xl-block | |||
| 높이 꽉차게 | flex-fill | body 100% 맞춘후 상위 h-100 row 위치에서 bg-light,flex-fill 설정 | |||
| 버튼(button) 출처 : https://www.tutorialspoint.com/bootstrap/bootstrap_buttons.htm | |||||
| btn | 버튼 기능 (마우스오버 손가락) | ||||
| 색상 & 의미 | btn-primary | 가장중요 | |||
| btn-success | 성공, 긍정적 | ||||
| btn-info | 정보 | ||||
| btn-warning | 조심 | ||||
| btn-danger | 경고, 위험 | ||||
| btn-link | 버튼을 덜강조, 링크로 보이게 | ||||
| 크기 | btn-lg | 큰 | |||
| btn-sm | 작음 | ||||
| btn-xs | 가장 작음 | ||||
| btn-block | 부모에 가득찬 버튼 | ||||
| 기능 | active | 선택중 | |||
| disable | 활성화 여부 | ||||
| Blockquotes | blockquote | 인용구 | |||
| blockquote-footer | 인용구의 footer <blockquote class="blockquote"> <p class="mb-0"> ~~ <footer class="blockquote-footer">~~~ </blockquote> |
||||
| Lists | list-unstyled | 기본 목록스타일 자식 li 에 자동 왼쪽 들여쓰기 ul 에 등록 |
|||
| list-inline > list-inline-item |
한줄로 목록 전시 ul 에 list-inline 등록 li 에 list-inline-item 등록 |
||||
| 글자크기(typography) 출처 : https://getbootstrap.com/docs/4.1/content/typography/ | |||||
| 전역셋팅 | 루트 글 크기 : 일반적으로 16px $font-family-base, $font-size-base 및 $line-height-base 속성을 body 에 적용 $link-color를 통해 전역 링크 색상을 설정하고 :hover에만 링크 밑줄을 적용합니다. $body-bg를 사용하여 <body>의 배경색을 설정합니다(기본값은 #fff). 전역 변수는 _variables.scss에서 정의. rem에 $font-size-base를 설정필요 |
||||
| Heading | <h1></h1> | h1 ~h6 | |||
| <p class="h1"> | h1 ~h6 | ||||
| Display headings |
display-1 | display-1~4 눈에 띄는 글자크기 |
|||
| Lead | lead | 눈에 띄는 단락 | |||
| Inline text | <mark> | 형광펜같은 바탕추가 | |||
| <del> | 취소선 : 삭제된 텍스트 | ||||
| <s> | 취소선 : 더이상 정확하지 않음 | ||||
| <ins> | 밑줄 : 추가된 텍스트 | ||||
| <u> | 밑줄 | ||||
| <small> | 작은 글씨 | ||||
| <strong> | 굵은 글씨 | ||||
| <em> | 기우러진글씨(이텔릭) | ||||
| 텍스트 정렬(Text alignment) 출처 : https://getbootstrap.com/docs/4.1/utilities/text/ |
|||||
| Font weight and italics | font-weight-bold | 굵은 글씨 | |||
| font-weight-normal | 보통 글씨 | ||||
| font-weight-light | 가는글씨 | ||||
| font-italic | 기우러진글씨(이텔릭) | ||||
| 정렬 | text-justify | css : inter-word(좌우 균분정렬) | |||
| text-left | 왼쪽정렬 | ||||
| text-center | 가운데 정렬 | ||||
| text-right | 오른쪽 정렬 | ||||
| text-sm-left | sm 사이즈 이상에서 왼쪽정렬 (상기참조) | ||||
| text-md-left | md 사이즈 이상에서 왼쪽정렬(상기참조) | ||||
| text-lg-left | lg 사이즈 이상에서 왼쪽정렬(상기참조) | ||||
| text-xl-left | xl 사이즈 이상에서 왼쪽정렬(상기참조) | ||||
| wrapping and overflow | text-nowrap | 부모보다 클 때 글자 넘어감 | |||
| text-truncate | 부모보다 클때 "..." 변환 | ||||
| transform | text-lowercase | 다 소문자 | |||
| text-uppercase | 다 대문자 | ||||
| text-capitalize | 첫자 대문자 | ||||
| Monospace | text-monospace | font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 상기 글씨체로 셋팅 |
|||
| color | text-primary | ||||
| text-secondary | |||||
| text-success | |||||
| text-danger | |||||
| text-warning | |||||
| text-info | |||||
| text-light | |||||
| text-dark | |||||
| text-body | |||||
| text-muted | 약간 흐린색 | ||||
| text-white | |||||
| text-black-50 | grey | ||||
| text-white-50 | grey | ||||
| opacity-75 | 불투명도. | ||||
| 테이블(table) , 출처 : https://kongmemo.tistory.com/4 | |||||
| table | table | 테이블 지정 | |||
| 테이블 디자인 | table table-striped | 한줄마다 그레이 바탕 | |||
| table table-bordered | 테이블 선 보임 | ||||
| table table-hove | 마우스 오버 손 기능 , header 제외 | ||||
| table-dark | 검정 배경 | ||||
| table-borderless | 라인 없음 | ||||
| 높이 | table-sm | 셀 높이 작게 | |||
| 헤더 색상 | thead-dark thead-light |
||||
| row 색상 | table-색상 | tr 에 추가. | |||
| 상단고정 | stikcy-top | https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=ymw0608&logNo=220916086847 | |||
| fixed-top | |||||
| 스크롤바 | style="overflow-y: auto;height: 1000px;" | ||||
'Web' 카테고리의 다른 글
| [1028web Excel collection] Excel for SQL generation (0) | 2022.03.23 |
|---|---|
| [1028web http 상태코드] 400에러 발생 (0) | 2022.03.12 |
| [1028 from 자료구조 by 정광식, 강태원 ] 자료구조_이론 (0) | 2021.09.08 |
| [1028 암호화] 대칭키, 공개키, ssl (0) | 2021.08.16 |
| [1028 maven] 에러모음 (0) | 2021.07.02 |