728x90
반응형 숨김(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;"        

 

+ Recent posts