bootstrop 상용 클래스 요약 기반(추천)

boottstrap 전단 개발 도구
격자 시스템
판 심.container
격자 레이아웃(한 줄 은 12 칸,응답 식 레이아웃)
.row
.col-md-12
.col-sm-12
.col-xs-12

<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>

조판 하 다
텍스트 정렬:
.text-center;
.text-left;
.text-right;
블록 태그 정렬:
.center-block;
.pull-left;
.pull-right;
레이아웃 스타일:
h1 .page-header
small
p .lead

 <h1 class="page-header">  ，  ！<small>  ，  ！</small></h1>
 <p>               、       。   、   、    ,       ,     。          15G       </p>
 <p class="lead">               、       。   、   、    ,       ,     。          15G       </p>

텍스트 색상(스타일 슬라이딩 효과 포함)
회색
.text-primary 연한 파란색
.text-success 그린
짙 은 남색
.text-warning 브라운
빨간색
리스트
.list-style 스타일 목록 없 음
.list-inline 목록 이 한 줄 로 이동 합 니 다.
묘사 하 다.

<dl>
 <dt>          </dt>
 <dd>                         </dd>
</dl>

.dl-horizontal 수평 배열 에 대한 설명
표.
표 스타일
.table
.table-hover
.table-bordered
.table-striped
표 색
회색
tr.danger 빨간색
tr.warning 연한 노란색
녹색
양식
양식
div.from-grop

<div class="form-group">
 <label for="nameid">name</label>
 <input class="form-control input-lg" id="nameid" type="text" placeholder="name">
</div>

폼 요소
input.form-control
input.input-lg
폼 색상
div.has-success
div.has-error
div.has-warning
다 중 선택 상자 또는 단일 선택 상자

<div class="checkbox">
 <label>
 <input type="checkbox" name="" value="">check me out
 </label>
</div>
<div class="radio">
 <label>
 <input type="radio" name="" value="">check me out
 </label>
</div>

수평 다 중 선택 상자

<div class="checkbox-inline">
 <label>
 <input type="checkbox" name="" value="">check me out
 </label>
</div>

표시 및 숨 기기
.show
.hidden
.sr-only
폼 사이즈
.inuut-lg
.input-sm
버튼
button
input type="submit"
input type=button
input type=reset
a
일곱 가지 스타일
.btn btn-default
.btn btn-primary
.btn btn-success
.btn btn-info
.btn btn-warning
.btn btn-danger
.btn btn-link
버튼 크기
.btn-lg
.btn-sm
.btn-xs
버튼 이 블록 요소 로 변 합 니 다.
.btn-block
단추 의 활동 상태
.active
단추 의 비활성화 상태
.disabled
그림.
img 그림
.img-rounded
.img-circle
.img-thumbnail
img 응답 식 그림
.img-responsive
포크 번호 닫 기
.close (×)
아래쪽 화살표
.caset
구성 요소
드 롭 다운 메뉴
div.dropdown
button[data-toggle=dropdown]
ul.dropdown-menu
li.dropdown-header
li.disabled
li.divider
단추 그룹
div.btn-group
단추 도구 모음
div.btn-toolbar
버튼 크기
div.btn-group-lg
수직 배열
div.btn-group-vertical
단추 그룹의 드 롭 다운 메뉴
div.btn-group
button
button
div.btn-group
이상 의 이 편 은 bootstrop 에서 자주 사용 하 는 정리(추천)를 바탕 으로 하 는 것 이 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 께 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.