2. 부트스트랩 - 작성 스타일(문법)

---

부트스트랩이란 ? Twitter 에서 개발한 UI 라이브러리

탄생이유

1. 웹사이트 개발의 시간 간소화
2. 모바일 환경에 적합한 반응형 웹사이트 개발

 

참고사이트 가이드 :  http://bootstrapk.com/css/#overview

---

문법적용	div class="문법"      [클래스에는 중복값 다수값이 가능함으로 "" 사이에 이를 이용한다 ]
Color	bg-white -warning -danger
Size	fa-3x
Padding // Margin	mx-숫자 || px-숫자 || my-숫자 || py-숫자 mt- || pt- || mb- || pb- || ml- || pl- || mr- || pr-
Align (Container)	justify-content-between align-items-center
Align (Item)
Text : align	"text-left" "text-center" "text-right"
Text : color	"text-dark" "text-primary" "text-success" "text-warning" "text-info" "text-danger"
Text : style	"badge badge-pill"
P : style	p class="문법" "text-capitalize" : 첫번째 문자 대문자 "text-lowercase" : 강제 소문자 "text-uppercase" : 강제 소문자
Table	table class="클래스선언 후 문법적용" "table-striped" : 가로줄넣기 "table-hover" : 호버 시 회색표시 "table-bordered" : 테두리 및 전체줄 넣기 tr 줄에 내용 th / td에  "table-success/warning/danger" 등으로 색상표현 가능 반응형 .table 을 .table-responsive 으로 감싸서 작은 기기에서는 수평 스크롤을 할 수 있는 반응형 테이블을 만듭니다(768px 이하).  <div class="table-responsive">      <table class="table"> ... </table> </div>
Btn	<버튼 생성> "btn" 선언후 "btn-primary" "btn-success" "btn-warning" "btn-info" "btn-danger" <사이즈 조절 > "btn-lg"  >> "btn-sm" >> "btn-xs"
Form	각각의 폼콘트롤은 자동으로 약간의 전역 스타일링을 받아들입니다. .form-control 이 있는 모든 텍스트 기반의 <input>, <textarea> 그리고 <select> 요소는 기본적으로 width: 100%; 이다. 최적의 여백을 위해 .form-group 으로 라벨과 콘트롤을 감싸기.  .form-group 가 하기 때문에 .row 는 필요가 없습니다. input : 가장 흔한 텍스트 타입의 폼컨트롤 text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. ex) <input type="text" class="form-control" placeholder="Text input"> checkbox / radio ** disabled 사용자들이 라벨에 마우스를 올렸을 때 "허락되지 않은" 커서를 표시하려면, .radio, .radio-inline, .checkbox, .checkbox-inline, <fieldset> 에 .disabled 클래스를 추가. ** inline : 같은줄에 표시하기 위해 .checkbox-inline 이나 .radio-inline 클래스를 사용 <label class="checkbox-inline">    <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label>

---

미디어쿼리	/* 매우 작은 기기들 (모바일폰, 768px 보다 작은) */ /* 부트스트랩에서 이것은 기본이므로 미디어쿼리가 없습니다. */  @media (min-width: @screen-xs-min) { ... } /* 작은 기기들 (태블릿, 768px 이상) */ @media (min-width: @screen-sm-min) { ... } /* 중간 기기들 (데스크탑, 992px 이상)*/ @media (min-width: @screen-md-min) { ... } /* 큰 기기들 (큰 데스크탑, 1200px 이상) */ @media (min-width: @screen-lg-min) { ... }
Grid	offset-숫자 [그리드 여백 칸 띄우기]

---

레이아웃 관련

header	로고 : header-logo 로그인메뉴 : nav header-topmenu
nav	<nav class="navbar navbar-expand-lg navbar-light bg-white">
button (햄버거 버튼) span (아이콘)	<button class="navbar-toggler"      type="button"      data-toggle="collapse"      data-target="#header-mainmenu">          <span class="navbar-toggler-icon"></span> </button>
menu list	<div class="collapse navbar-collapse" id="header-mainmenu">     <ul class="navbar-nav col-lg-12 justify-content-between">        <li class="nav-item"><a href="#" class="nav-link"> 베스트 상품 </a></li>        <li class="nav-item"><a href="#" class="nav-link">             <i class="fas fa-search"></i></a>        </li>     </ul> </div>
main
footer

---