회원가입아이디/비번찾기
홈으로

부트스트랩(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

추천추천 : 58 추천 목록
번호 제목
2,885
input 입력 필드 앞뒤 공백 실시간 제거
2,884
Placeholder 포커스시 감추기
2,883
MySQL 중복된 데이터를 삭제
2,882
MySQL 중복 데이터 확인
2,881
sessionStorage.getItem 와 sessionStorage.setItem
2,880
제이쿼리 랜덤으로 배경색 변경
2,879
preg match에 관한 정규식
2,878
Stream an audio file with MediaPlayer 오디오 파일 스트리밍 하기
2,877
Audio Streaming PHP Code
2,876
PHP $ SERVER 환경 변수 정리
2,875
Vimeo (비메오) API 를 사용하여 플레이어 컨트롤하기
2,874
iframe 사용시 하단에 발생하는 공백 제거방법
2,873
아이프레임(iframe) 전체화면 가능하게 하기
부트스트랩(bootstrapk)에서 사용하는 class명 정리
2,871
부트스트랩 CSS
2,870
크롬에서 마진 조절
2,869
PHP 현재 페이지의 도메인명이나 url등의 정보 알아오기
2,868
PHP preg match all()
2,867
PHP 로 웹페이지 긁어오기 모든 방법 총정리!
2,866
[PHP] 원격지 파일 주소 노출 안하고 curl로 다운로드 받기
2,865
PHP 함수 정리
2,864
아이프레임(iframe) 비율 유지하면서 크기 조절하는 방법
2,863
PHP 배열에서 무작위로 하나 뽑아주는 array rand() 함수
2,862
PHP 정규식 정리
2,861
PHP 정규식을 활용한 태그 및 특정 문자열 제거 및 추출 방법
2,860
php 크롤링 또는 파싱 함수, 정규식 모음
2,859
제이쿼리 기본 명령어
2,858
웹페이지 가로 모드세로 모드 인식하기
2,857
모바일 웹 화면 강제 회전(가로모드 고정)
2,856
[HTML5]에서 frameset 대체 방법과 iframe 속성
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright ⓒ musictrot All rights reserved.