 |
|
| |
| 부트스트랩(bootstrapk)에서 사용하는 class명 정리 |
|
|
  |
1년 전
|
부트스트랩에서 사용하는 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
|
|
 추천 : 59 |
추천
목록
|
|
| |
|
