Bootstrap의 클래스 스타일 요약

기본 클래스

한 줄 인라인 코드를 표시하는 .code
여러 줄 블록 코드를 표시하는 .pre
사용자 입력 코드를 표시하는 .kbd
.pre-scrollable 높이가 초과됨 340px , Y축

테이블 클래스

에 스크롤 막대가 표시됩니다.table 기본 테이블 여백-하단: 20px, 광고 하단에 2px 연한 회색 실선, 광고 하단에 1px 각 셀의 상단 밝은 회색 실선
.table-striped: 얼룩말 줄무늬 테이블, 행마다 밝은 회색 배경색
.table-bordered: 테두리가 있는 테이블, 모든 셀에는 1px 테두리가 있습니다
. table-hover : 배경색이 강조 표시된 테이블 행 위로 마우스를 가져갑니다.
.table-densed: 셀 패딩을 8px에서 5px로 조정합니다.
.table-반응: 클래스 이름을 설정합니다. 테이블 반응형 컨테이너, 이 컨테이너에

테이블 행의 클래스

.active는 현재 활동 정보를 나타냅니다
.success는 다음과 같습니다. 성공 또는 올바른 동작
.info는 중립적인 정보 또는 동작을 나타냅니다.
.warning은 경고를 나타냅니다.
.danger는 위험 또는 잘못된 동작을 나타냅니다.

.active 외에도 다른 4개의 클래스 이름은 다음과 같아야 합니다. .table-hover

Form

.form-horizontal 수평 양식 효과와 조화를 이루며 Bootstrap 프레임워크의 그리드 시스템과 일치하여 양식 제어 패딩 및 여백 값을 설정합니다. 네트워크와 유사한 form-group" 그리드 시스템의 "행"
도 부트스트랩에서 입력을 사용할 때 추가해야 합니다
다양한 폼 스타일에서 컨트롤 스타일을 올바르게 만들기 위해서는 . 여러 행을 설정하여 여러 행을 선택하는 form-control
속성 값은 높이를 정의하는 여러 행과 너비를 설정하는 열입니다. .form-control, 열이 필요하지 않습니다
체크박스와 라디오 모두에 라벨 패키지를 사용하세요
체크박스를 가로로 정렬해야 하는 경우 클래스 이름 "checkbox-inline"만 추가하면 됩니다. label label

고정 네비게이션 바

페이지 주요 콘텐츠의 상단과 하단이 고정 네비게이션 바에 의해 가려집니다. 콘텐츠를 가리는 고정된 탐색 모음을 피하기 위해 본문에서 일부 처리를 수행해야 합니다.

body {
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有底部固定导航条时设置*/
}
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>

사실 이 외에도 다른 솔루션의 경우 페이지 콘텐츠 앞에 고정 탐색 모음을 배치합니다.

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>
<div class="content">我是内容</div>

파일에 다음 스타일 코드를 추가합니다. :

.navbar-fixed-top ~ .content {
padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
padding-bottom: 70px;
}

위는 편집자가 소개한 부트스트랩 클래스 스타일을 요약한 내용입니다.