bootstrap 다양한 스타일

다양한 테이블 스타일과 폼태그 스타일
1)부트스트랩에서는 다양한 테이블 스타일을 지원하는데 <table>태그에 약간의 패딩과 수평 구분선이 있는 기본 스타일을 만들려면 .table클래스를 추가한다.
2)반응형 테이블을 만들려면 table태그를 div로 감싸고 .table-responsive클래스를 추가한다.
3)입력창에 스타일을 주려면 form-group클래스명에 has-스타일이름 클래스명을 넣어준다.
4)레이블태그에 class="control-label"을 부여하면 form-group이 가지고 있는 스타일을 따라간다.
5)인라인 형식의 폼 스타일을 만들기 위해서는 form태그에 .form-inline클래스명을 추가해준다.

다양한 버튼 스타일
버튼을 생성하는 태그로는 a, button, input태그가 있다.
버튼의 크기를 다양하게 설정 가능하다. btn-md가 디폴트 크기이다.
버튼의 색상은 다양한 테마색으로 설정 가능하다.
1)간편하게 버튼을 만들기 위해 <a>,<button>,<input>태그에 클래스명 .btn을 붙이고 원하는 스타일을 만들기 위해 .btn-색상테마 클래스명을 쓴다.
2)버튼의 크기를 크거나 작게 변경하려면 .btn-lg, .btn-sm, .btn-xs을 추가한다.
3).btn-block 클래스명을 추가하면 가로가 꽉 찬 너비의 버튼을 만들수 있다.
4)일련의 버튼들을 버튼 그룹으로 같이 한 줄에 모으려먼 .btn으로 된 일련의 버튼들을 div로 감싸고 .btn-group 클래스명을 붙여준다.
5)버튼으 가지고 더 복합적인 버튼 툴바 형태의 컴포넌트를 만들려면 btn-group들을 모두 감싸는 div를 만들고 .btn-toolbar클래스명을 붙여준다.
6)버튼 그룹이 수평이 아닌 수직으로 쌓이고 싶다면 .btn-group-vertical클래스명을 부여한다.

반응형 이미지 스타일
.hidden을 주면 display:none효과가 나서 보이지 않도록 설정되고 다른 컨텐츠가 그 위치로 이동한다.
.invisible을 주면 visibility:hidden으로 설정이 되면서 컨텐츠가 보이지는 않지만 해당 공간이 비어있다.
이미지나 컨텐츠를 센터로 배치하고 싶을 때에는 center-block클래스명을 추가한다.
1)부트스트랩의 이미지들은 해당요소에 클래스명 img-responsive를 사용하여 반응형으로 만들수 있다.
2)img-responsive클래스 명에는 max-width: 100%;, height: auto;, display: block; 스타일이 들어가 있다.
3).img-responsive를 사용한 이미지를 가운데 두기 위해서, text-center 대신 center-block클래스명을 사용한다.
4)img태그를 사용하지 않고 css를 활용하여 이미지를 넣으려면 div에 .img-responsive클래스명을 사용하고 css에서 background-image, height와 background-size 설정을 한다.

도움을 주는 클래스들
float:.pull-left, .pull-right
float의 영향을 받지 않도록 하기 위해서 비어있는 div를 하나 만들고 .clearfix를 설정한다.
center-block은 magin:0 auto를 준것과 같은 스타일을 표현한다. text-justify를 텍스트에 주면 좌우를 공간없이 붙여주면서 마지막줄만 왼쪽에 정렬해준다. 

1)x버튼을 만들고 싶을때 span태그 안에 x를 주고 클래스명으로 .close를 부여한다.
2)경고창을 클릭하여 없어지도록 동작하려면 1.버튼태그가 data-dismiss="alert" 속성을 가지고 있고 2.부모요소에게도 class="alert"를 가지고 있으면 자바스크립트가 동작하여 클릭했을때 없어지도록 동작한다.
3)토글 버튼 스타일을 만들고 싶을 때 span태그에 caret클래스명을 사용한다.
4)원하는 요소를 왼쪽으로 당기려면 .pull-left, 오른쪽으로 당기려면 .pull-right
클래스명을 사용하여 float할 수 있고 float를 해제하려는 요소에는 .clearfix 클래스
명을 준다.
5)해당 컨텐츠를 중간으로 배치하려면 .center-block 클래스명을 부여한다.

디바이스 사이즈마다 요소를 보이고 숨기는 클래스
.sr-only 접근성을 위해서 장애인분들께는 읽어드리는 부분.
스크린 리더기만 읽어주고 보이지는 않도록 설정하기 위한 부분
.hide를 줬을 때는 보이지도 않고 읽어주지도 않는다.

1)해당 요소가 다른 디바이스 사이즈의 화면에서는 보이지 않다가 타블렛에서만 보이도록 설정하려면 .visible-sm클래스명을 해당요소에 부여한다.
2)해당 요소가 다른 디바이스 사이즈에서는 보이는데 스마트폰 사이즈에서만 보이지 않도록 설정하려면 .hidden-xs클래스명을 해당요소에 부여한다.