부트스트랩(bootstrapk)에서 사용하는 class명 정리

부트스트랩에서 사용하는 class명을 정리해 보았습니다. 부트스트랩을 안쓰더라도 개인적으로 프로젝트 할때 class명 네이밍시 너무 괴로워서 참고를 하기 위해서 정리하는것도 있습니다.

최대한 간단하게 정리하기 위해 젠코딩 방식으로 작성한 점 참고해주세요.

부트스트랩 네이밍은 시맨틱해서 네이밍만 봐도 이해는 가나 생소한것도 있어서 설명을 간단하게 적어놨습니다.

레이아웃

• .container (고정된 너비)
• .container-fluid (너비가 100%인 컨테이너)

그리드

• 부모요소 : .row
• 자식요소 : .col-*-*
• ㄴ 첫번째 * : .xs, .sm, .md, .lg
• ㄴ 두번째 * : 컬럼 숫자(최대 12까지임)

타이포그래피 / 텍스트

• h1 ~ h6
• small
• mark
• abbr
• blockquote
• dl > dt + dd
• code
• kbd
• pre
• .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger
• .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger
• .lead : 단락을 돋보이게 만듬
• .text-left, .text-center, .text-right, .text-justfiy, .text-nowrap, .text-lowercase, .text-uppercase, .text-capitalize(앞 글자를 대문자로 바꿔줌)
• .list-unstyled
• .list-inline
• .dl-horizontal
• .pre-scrollable

테이블

• .table
• .table tr.success, .danger, .info, .warning, .active
• .table-striped
• .table-bordered
• .table-hover
• .table-condensed
• .table-responsive

이미지

• .img-rounded
• .img-circle
• .img-thumbnail
• .img-responsive

Responsive Embeds

• div.embed-responsive.embed-responsive-16[4]by9[3] > .embed-responsive-item (16[4]by9[3] 은 영상 비율을 뜻합니다.)

Jumbotron / Page Header

• div.jumbotron > h1 + p
• div.page-header > h1

Wells (회색배경과 약간의 패딩과 둥근 테두리 디자인)

• .well
• .well.well-sm, .well-lg

Alerts

• .alert
• .alert.alert-success, .alert-info, .alert-warning, .alert-danger
• .alert > .alert-link
• .alert.alert-dismissible > a[data-_][aria-_]
• .alert.alert-dismissible.fade.in

버튼

버튼 스타일

• .btn
• .btn.btn-default
• .btn.btn-primary
• .btn.btn-success
• .btn.btn-info
• .btn.btn-warning
• .btn.btn-danger
• .btn.btn-link

버튼 사이즈

• .btn.btn-lg | sm | xs

블록 레벨 버튼

• .btn.btn-block

active / disabled 버튼

• .btn.active | disabled

버튼그룹

• div.btn-group > .btn
• div.btn-group.btn-group-lg | sm | xs > .btn

수직 버튼 그룹

• div.btn-group-vertical > .btn

양쪽 정렬 버튼 그룹

• .div.btn-group.btn-group-justified > .btn | .btn-group

Badges and Labels

• .badge
• .btn > .badge

Labels

• .label.label-default | primary | success | info | warning | danger

Progress Bars

• .progress > .progress-bar
• .progress > .progress-bar.progress-bar-success | info | warning | danger
• .progress > .progress-bar.progress-bar-striped

프로그래스바 스트라이프 애니메이션

• .progress > .progress-bar.progress-bar-striped.active

Stacked Progress Bars

• .progress > .progress-bar + .progress-bar

Pagination

• .pagination > a
• .pagination > .active
• .pagination > .disabled
• .pagination.pagination-lg || .pagination-sm

Breadcrumbs

• .breadcrumb > .active

Pager

• .pager

Align Buttons

• .pager > .previous || .next

List Groups

• .list-group > .list-group-item
• .list-group > .list-group-item.active || .disabled
• .list-group > .list-group-item > .badge
• .list-group > .list-group-item.list-group-item-success || info || warning || danger

Panels

• .panel.panel-default > .panel-body
• .panel.panel-default > .panel-heading + .panel-body + .panel-footer
• .panel-group > .panel.panel-default > .panel-body
• .panel.panel-default || primary || success || inof || warning ||danger > .panel-body

Dropdowns

• .dropdown > .btn.btn-primary.dropdown-toggle[data-toggle="dropdown"] + .dropdown-menu
• .dropdown-menu > .divider
• .dropdown-menu > .dropdown-header
• .dropdown-menu > .active || .disabled

Collapse

• button[data-toggle="collapse"][data-target="#demo"] + div#demo.collapse

펼침상태

• div#demo.collapse.in

Panel컴포넌트와 결합하여 사용이 가능

마크업 참고 link

탭

• .nav.nav-tabs > .active > a[data-toggle="tab"]
• .tab-content > div.tab-pane.fade.in.active

Navigation Bar

• .nav navbar-nav > .active

Form Layouts

Vertical Form (default)

• .form-group > input.form-control

Inline Form

• .form-inline > .form-group > label + input.form-control

Horizontal Form 테이블 처럼 제목:내용 형식

• .form-horizontal > .form-group > .control-label + .col-- > input.form-control

Form Inputs

input, textarea

• .form-group > input.form-control

checkbox

• div.checkbox > label > input
• label.checkbox-inline > input

radio button

• div.radio > label > input
• label.radio-inline > input

select list

• .form-group > label + select.form-control

검색영역

• .input-group > input.form-control + div.input-group-btn > .btn > i( 아이콘)

Input Sizing

• input.input-sm || .input-lg

Media Object

• .media > .media-left.media-top || .media-middle || .media-bottom + media-body > .media-heading