bootstrap 여러가지 속성들

tabs
tabs는 tab형과 pills형(알약형)이 있다
ul태그 li안의 a태그가 가지고 있는 #id명과 div.tab-pane요소의 id명을 일치시키면 서로 연결되어 동작한다.

양쪽으로 정렬된 tabs를 만들려면
ul 클래스에 nav-justified클래스를 추가하면 된다.

수직형 tabs를 만들려면 
ul클래스에 nav-stacke클래스를 추가하면 된다.

navbar
container-fulid클래스명을 container로 변경해서 nav안의 컨텐츠 좌우로 여백을 줄 수 있다.

navbar를 navbar-fixed-top을 주어 상단에 고정시켰을 때에는 상단의 navbar 다음의 컨텐츠가 밑에 내려가서 보이지 않으므로 body태그에 padding-top을 넣어서 컨텐츠의 위치를 아래쪽으로 내려준다. 반대로 navbar를 navbar-fixed-bottom을 주어 하단에 고정시켰을 때에는 navbar 하단의 컨텐츠가 밑에 내려가서 보이지 않으므로 body태그에 padding-bottom을 넣어서 컨텐츠의 위치를 위쪽으로 올려준다.

그 외의 컴포넌트

Breadcrumbs
네비게이션 체계내에서의 현재페이지 위치를 가리킨다.

Pagination
크기조절을 위해 pagination pagination-lg, pagination pagination-md, pagination pagination-sm 클래스를 pagination pagination클래스 옆에 추가한다.

Pager
한 페이지에 너무 많은 리스트를 보이면 웹 페이지의 사이즈도 커지고 가독성도 떨어진다. 그래서 적당한 개수로 나누어 페이지를 만들고 아래에 페이지 숫자와 화살표를 설정하여 이동을 가능하게 하는 컨트롤을 Paging이라고 한다.
하지만 이전 앞으로 가기 혹은 뒤로 가기만 설정하는것을 Pager라고 한다.

Labels
Labels은 추가적인 정보를 제공하는 용도로 많이 사용하며 페이지에 대한 개수, 팁 또는 기타 마크업을 제공하는데 적합하다.

jumbotron
jumbotron은 사이트에서 중요한 콘텐츠를 보여주기 위한 선택적으로 전체 뷰포트로 확장할 수 있는 가볍고 유연한 콤포넌트이다.
보더의 radius를 가지면서 안족에 padding값을 가지고 있고 배경색이 연한 회색인 스타일이면 그 안의 컨텐츠들이 커지는 컨텐츠이다. 좌우에도 여백과 border-radius없이 jumbotron을 사용하고 싶다면 container밖에 점보트론을 배치한다.

Alerts는 적은 수의 사용가능하고 유연한 경보 메시지로 전형적인 사용자 액션에 대해 맥락적인 피드백 메시지를 제공한다.
Dismissible alerts
Better data-dismiss="alert"속성을 활용해서 x버튼을 클릭하면 해당 경고창이 사라진다.

Progress bars
작업흐름이나 액션의 진행에서 간단하고도 유연한 진행바로 최신 피드백을 제공한다.
다양한 색상테마(progress-bar-success)를 사용가능하고 스트라이프 문양(progress-bar-striped)을 추가할 수 있으며 애니메이션(active) 되는 형태도 제공한다.

미디어 컴포넌트
기본 미디어는 미디어 객체(그림, 영상, 소리)를 내용 부분의 왼쪽이나 오른족에 float하게 한다.
기본 썸네일은 좌측에 배치되지만 썸네일을 우측에 배치하고 싶다면 media-body를 위에 배치하고 형제관계로 .media-right를 그 다음에 배치하면 된다. 또한 div클래스에 media-top또는 middle, botton을 통해 썸네일의 위치도 정할수있다.

댓글달기 형식의 구조를 짜고싶다면 .media-body안의 .media-heading과 형제 관계로 .media를 다시 넣어 댓글달기 형식을 만들 수 있다.

panel
항상 필요한것은 아니지만 때로는 DOM을 상자에 넣어야한다. 이러한 상황에서는 패널 구성요소를 이용해 상자에 넣을수있다. 기본적으로 모든 .panel작업은 기본 테두리와 패딩을 적용하여 일부 콘텐츠를 포함한다.

제목이 있는 패널을 사용하기 위해서는 .panel-heading을 사용하여 미리 스타일이 지정된 제목을 추가할수도있다. (ex - <h1>,<title>..)

responsive-embed(반응형 임베디드)
브라우저들에게 어느 기기에나 크기가 조절될 수 있도록 고유의 비율을 만드는 것으로 비디오나 슬라이드쇼의 콘테이닝 블록 너비 기반의 면적을 알아내는 기능이다.

wells
padding을 가지고 있으면서 내부 그림자가 살작 들어가있는 오목한 형태의 스타일.
크기 또한 well-lg 또는 sm으로 클래스명만 추가해주면 쉽게 크기를 지정할수있다.

modal은 신축성있는 최소한의 기능과 스마트함을 갖춘 대화창이다.
중복하는 모달은 지원하지않는다.
-다른 모달이 보이는 동안에 모달은열리지 않는다. 동시에 하나보다 많은 모달을 보이는 것은 맞춤 코드가 필요하다.
모달 마크업 장소는 다른 컴포넌트가 모달의 모습이나 기능에 영향을 끼치지 않도록 항상 모달 HTML 코드를 문서 상단에 위치하도록 해야한다.
모바일 기기에서 모달을 사용하는 것에 제약이 있습니다. 자세한 것은 브라우저 지원 문서를 참고해야한다.
모달은 2개의 선택할 수 있는 크기를 가지고 있고, .modal-dialog 에 그 클래스들을 적용하는 것이 가능하다.