[부트스트랩] 부트스트랩 (Bootstrap)

트위터(Twitter)에서 만든 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 JavaScript로 만들어 놓은 프레임워크입니다.

 

* 프레임워크

재사용이 가능한 요소들의 집합이며. 정해진 구조와 틀 안에서 확장이 가능한 기반 코드로 이루어짐을 말합니다.

 

부트스트랩의 시작

구글 -> bootstrap cdn

글 쓰는 textarea에서 부트스트랩을 가져다쓰면, 이미지 넣기, 굵게, 기울기 등등의 기능등이 생성된다.

부트스트랩에서는 보통 div로 감싼다.

class = "col-sm-4" * 3
부트스트랩에서 col 은 field를 의미한다 그 뒤 단어는 [형태나 크기]를 말하고 그 뒤 숫자는 [비율]에 해당한다.
sm은 태블릿버전 가로 768보다 사이즈가 내려가면 글이 내려간다.
뒤 숫자는 합이 12가 되면 된다.

class = "col-md-4" * 3
md는 (pc버전보다 작으면)992px보다 적어지면 내려간다. 

레이아웃

그리드 옵션
.col-xs : <768px
.col-sm : 768px <=
.col-md : 992px <=
.col-lg : 1200px >=

버튼
class = btn btn-default / btn btn-primary / btn btn-success / btn btn-info / btn btn-warning / btn btn-danger

테이블
class = table / table-bordered / table-hover

패널
class = panel panel-default
그 안에 div class = "panel-heading" / "panel-body" 가 있다.

폼
감싸고 있는 <li class="form-inline">
안에있는 input type / select 는(은) class="form-control">

인라인폼
좌측 정렬된 인라인 폼은 최소 768px의 뷰포트 내의 폼에서만 적용합니다.
- 입력 컨트롤이나 셀렉트 컨트롤은 부트스트랩에서 기본적으로 width: 100%가 적용됩니다. 인라인 폼내에서는 width: auto;로 초기화하여 몇 개의 컨트롤들이 같은 줄에 있을 수 있습니다.

수평 폼
라벨들과 폼컨트롤들을 그룹화하여 정렬하기 위해 사용합니다.

라벨          컨트롤
아이디 [                   ]

네비게이션

참고사이트
http://bootstrapk.com/

아이콘 참고 document
https://getbootstrap.com/docs/4.0/extend/icons/

버튼 CSS
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">