부트 스트랩-퀵 가이드
Twitter 부트 스트랩은 무엇입니까?
Bootstrap은 빠르고 쉬운 웹 개발을위한 매끄럽고 직관적이며 강력한 모바일 최초 프런트 엔드 프레임 워크입니다. HTML, CSS 및 Javascript를 사용합니다.
역사
Bootstrap은 Mark Otto 와 Jacob Thornton 이 Twitter 에서 개발했습니다 . 2011 년 8 월 GitHub에서 오픈 소스 제품으로 출시되었습니다.
왜 부트 스트랩을 사용합니까?
Mobile first approach − Bootstrap 3, 프레임 워크는 별도의 파일 대신 전체 라이브러리에 걸쳐 Mobile First 스타일로 구성됩니다.
Browser Support − 모든 인기있는 브라우저에서 지원됩니다.
Easy to get started− HTML과 CSS에 대한 지식 만 있으면 누구나 Bootstrap을 시작할 수 있습니다. 또한 Bootstrap 공식 사이트에는 좋은 문서가 있습니다.
Responsive design− Bootstrap의 반응 형 CSS는 데스크톱, 태블릿 및 모바일에 맞게 조정됩니다. 반응 형 디자인에 대한 자세한 내용은 부트 스트랩 반응 형 디자인 장에 있습니다.
개발자를위한 인터페이스 구축을위한 깨끗하고 균일 한 솔루션을 제공합니다.
사용자 정의하기 쉬운 아름답고 기능적인 기본 제공 구성 요소가 포함되어 있습니다.
또한 웹 기반 사용자 정의를 제공합니다.
그리고 무엇보다도 그것은 오픈 소스입니다.
어떤 부트 스트랩 패키지가 포함됩니까?
Scaffolding− Bootstrap은 그리드 시스템, 링크 스타일 및 배경과 함께 기본 구조를 제공합니다. 이것은 섹션에서 자세히 다룹니다.Bootstrap Basic Structure
CSS− Bootstrap은 전역 CSS 설정, 확장 가능한 클래스로 스타일이 지정되고 강화 된 기본 HTML 요소, 고급 그리드 시스템의 기능을 제공합니다. 이것은 섹션에서 자세히 다룹니다.Bootstrap with CSS.
Components− Bootstrap에는 아이콘, 드롭 다운, 탐색, 경고, 팝 오버 등을 제공하도록 제작 된 재사용 가능한 구성 요소가 12 개 이상 포함되어 있습니다. 이것은 섹션에서 자세히 다룹니다.Layout Components.
JavaScript Plugins− Bootstrap에는 12 개 이상의 사용자 지정 jQuery 플러그인이 포함되어 있습니다. 모두 또는 하나씩 쉽게 포함 할 수 있습니다. 자세한 내용은 섹션에서 다룹니다.Bootstrap Plugins.
Customize − Bootstrap의 구성 요소, LESS 변수 및 jQuery 플러그인을 사용자 정의하여 고유 한 버전을 얻을 수 있습니다.
Bootstrap을 사용하여 설정하고 시작하는 것은 매우 쉽습니다. 이 장에서는 Bootstrap을 다운로드하고 설정하는 방법을 설명합니다. 또한 부트 스트랩 파일 구조에 대해 논의하고 예제를 통해 사용법을 설명합니다.
부트 스트랩 다운로드
최신 버전의 부트 스트랩을 다운로드 할 수 있습니다. https://getbootstrap.com/. 이 링크를 클릭하면 아래와 같은 화면이 나옵니다.
여기에 두 개의 버튼이 있습니다.
Download Bootstrap− 이것을 클릭하면 Bootstrap CSS, JavaScript 및 글꼴의 미리 컴파일되고 축소 된 버전을 다운로드 할 수 있습니다. 문서 나 원본 소스 코드 파일은 포함되어 있지 않습니다.
Download Source − 이것을 클릭하면 GitHub에서 직접 최신 Bootstrap LESS 및 JavaScript 소스 코드를 얻을 수 있습니다.
Bootstrap의 컴파일되지 않은 소스 코드로 작업하는 경우 사용 가능한 CSS 파일을 생성하기 위해 LESS 파일을 컴파일해야합니다. LESS 파일을 CSS로 컴파일하기 위해 Bootstrap은 공식적 으로 less.js 기반 Twitter의 CSS 힌터 인 Recess 만 지원합니다 .
더 나은 이해와 사용 편의를 위해 튜토리얼 전체에서 미리 컴파일 된 부트 스트랩 버전을 사용할 것입니다. 파일이 컴파일되고 축소되므로 개별 기능에 대해 별도의 파일을 포함하여 매번 귀찮게 할 필요가 없습니다. 이 튜토리얼을 작성할 당시 최신 버전 (Bootstrap 3)이 다운로드되었습니다.
파일 구조
미리 컴파일 된 부트 스트랩
컴파일 된 버전의 부트 스트랩이 다운로드되면 ZIP 파일을 추출하면 다음 파일 / 디렉토리 구조가 표시됩니다.
보시다시피, 컴파일 된 CSS 및 JS (bootstrap. *)와 컴파일 및 축소 된 CSS 및 JS (bootstrap.min. *)가 있습니다. 선택적인 Bootstrap 테마이므로 Glyphicons의 글꼴이 포함되어 있습니다.
부트 스트랩 소스 코드
부트 스트랩 소스 코드를 다운로드했다면 파일 구조는 다음과 같습니다.
less / , js / 및 fonts / 아래의 파일 은 Bootstrap CSS, JS 및 아이콘 글꼴 (각각)의 소스 코드입니다.
DIST / 폴더 위의 미리 컴파일 다운로드 섹션에 나와있는 모든 것을 포함하고 있습니다.
docs-assets / , examples / 및 모든 * .html 파일은 부트 스트랩 문서입니다.
HTML 템플릿
부트 스트랩을 사용하는 기본 HTML 템플릿은 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<!-- Bootstrap -->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src = "https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src = "js/bootstrap.min.js"></script>
</body>
</html>여기에서 볼 수 있습니다 jquery.js, bootstrap.min.js 과 bootstrap.min.css부트 스트랩 템플릿에 일반 HTM 파일을 만들기 위해 포함 된 파일. Bootstrap 라이브러리를 포함하기 전에 jQuery 라이브러리를 포함했는지 확인하십시오.
위 코드의 각 요소에 대한 자세한 내용은 Bootstrap CSS Overview 장에서 설명합니다 .
예
이제 위의 템플릿을 사용하여 예제를 시도해 보겠습니다. 웹 사이트의 아래 샘플 코드 상자의 오른쪽 상단에있는 라이브 데모 옵션을 사용하여 다음 예제를 시도해보십시오.
<h1>Hello, world!</h1>이후의 모든 장에서는 사이트의 더미 텍스트를 사용했습니다. https://www.lipsum.com/.
이 장에서는 부트 스트랩 그리드 시스템에 대해 설명합니다.
그리드 란?
Wikepedia에 의해-
그래픽 디자인에서 그리드는 콘텐츠를 구성하는 데 사용되는 일련의 교차 직선 (수직, 수평)으로 구성된 구조 (보통 2 차원)입니다. 인쇄 디자인에서 레이아웃 및 콘텐츠 구조를 디자인하는 데 널리 사용됩니다. 웹 디자인에서 HTML과 CSS를 사용하여 빠르고 효과적으로 일관된 레이아웃을 만드는 매우 효과적인 방법입니다.
간단히 말해서 웹 디자인의 그리드는 콘텐츠를 구성하고 구성하며 웹 사이트를 쉽게 검색하고 사용자의인지 부하를 줄입니다.
부트 스트랩 그리드 시스템이란?
그리드 시스템 용 부트 스트랩의 공식 문서에 따르면-
Bootstrap에는 장치 또는 뷰포트 크기가 증가함에 따라 최대 12 개 열까지 적절하게 확장되는 반응 형 모바일 퍼스트 유체 그리드 시스템이 포함되어 있습니다. 손쉬운 레이아웃 옵션을위한 사전 정의 된 클래스와 더 시맨틱 한 레이아웃을 생성하기위한 강력한 믹스 인이 포함되어 있습니다.
위의 진술을 이해합시다. Bootstrap 3은 이제 모바일 장치, 태블릿과 같은 작은 화면을 대상으로 시작한 다음 노트북, 데스크톱과 같은 큰 화면을 위해 구성 요소와 그리드를 "확장"하는 것으로 Bootstrap의 코드가 시작된다는 점에서 모바일 우선입니다.
모바일 우선 전략
Content
- 가장 중요한 것을 결정하십시오.
Layout
- 먼저 더 작은 너비로 디자인하십시오.
- 기본 CSS 주소는 먼저 모바일 장치입니다. 미디어는 태블릿, 데스크톱에 대한 주소를 쿼리합니다.
Progressive Enhancement
- 화면 크기가 커지면 요소를 추가합니다.
부트 스트랩 그리드 시스템의 작동
그리드 시스템은 콘텐츠를 보관하는 일련의 행과 열을 통해 페이지 레이아웃을 만드는 데 사용됩니다. 부트 스트랩 그리드 시스템이 작동하는 방법은 다음과 같습니다.
행은 .container 적절한 정렬 및 패딩을위한 클래스.
행을 사용하여 가로 열 그룹을 만듭니다.
콘텐츠는 열 내에 배치되어야하며 열만 행의 직계 자식이 될 수 있습니다.
다음과 같은 미리 정의 된 그리드 클래스 .row and .col-xs-4그리드 레이아웃을 빠르게 만드는 데 사용할 수 있습니다. LESS 믹스 인은 더 의미있는 레이아웃에도 사용할 수 있습니다.
열은 패딩을 통해 거터 (열 내용 사이의 간격)를 만듭니다. 해당 패딩은 음의 여백을 통해 첫 번째 및 마지막 열의 행에서 오프셋됩니다..rows.
그리드 열은 확장하려는 사용 가능한 열 수를 12 개 지정하여 생성됩니다. 예를 들어 세 개의 동일한 열은 세 개의.col-xs-4.
미디어 쿼리
미디어 쿼리는 "조건부 CSS 규칙"에 대한 정말 멋진 용어입니다. 명시된 특정 조건에 따라 일부 CSS를 적용합니다. 이러한 조건이 충족되면 스타일이 적용됩니다.
Bootstrap의 미디어 쿼리를 사용하면 뷰포트 크기에 따라 콘텐츠를 이동, 표시 및 숨길 수 있습니다. 다음 미디어 쿼리는 LESS 파일에서 사용되어 부트 스트랩 그리드 시스템에서 주요 중단 점을 만듭니다.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }때때로 이들은 다음을 포함하도록 확장됩니다. max-width 더 좁은 장치 세트로 CSS를 제한합니다.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }미디어 쿼리에는 장치 사양과 크기 규칙의 두 부분이 있습니다. 위의 경우 다음 규칙이 설정됩니다.
이 라인을 고려해 보겠습니다.
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }상관없이 어떤 종류의 모든 장치의 최소 폭 : 화면-SM-분 @ 화면의 폭보다 작아지는 경우 화면-SM-최대 @ , 다음 일을 할 .
그리드 옵션
다음 표는 부트 스트랩 그리드 시스템이 여러 장치에서 작동하는 방식을 요약 한 것입니다.
| 초소형 장치 전화 (<768px) | 소형 장치 태블릿 (768px 이상) | 중형 장치 데스크탑 (≥992px) | 대형 장치 데스크탑 (≥1200px) | |
|---|---|---|---|---|
| 그리드 동작 | 항상 수평 | 시작하려면 축소, 중단 점 위 가로 | 시작하려면 축소, 중단 점 위 가로 | 시작하려면 축소, 중단 점 위 가로 |
| 최대 컨테이너 너비 | 없음 (자동) | 750px | 970px | 1170px |
| 클래스 접두사 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 열 수 | 12 | 12 | 12 | 12 |
| 최대 열 너비 | 자동 | 60px | 78px | 95px |
| 거터 폭 | 30px (열의 각면에 15px) |
30px (열의 각면에 15px) |
30px (열의 각면에 15px) |
30px (열의 각면에 15px) |
| 중첩 가능 | 예 | 예 | 예 | 예 |
| 오프셋 | 예 | 예 | 예 | 예 |
| 컬럼 순서 | 예 | 예 | 예 | 예 |
기본 그리드 구조
다음은 Bootstrap 그리드의 기본 구조입니다.
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>
<div class = "container">
....
</div>간단한 그리드 예제를 보겠습니다.
예-스택에서 수평으로
예-중대형 장치
예-모바일, 태블릿, 데스크톱
반응 형 열 재설정
4 계층의 그리드를 사용할 수 있으므로 특정 중단 점에서 하나가 다른 것보다 더 높기 때문에 열이 제대로 지워지지 않는 문제가 발생할 수 있습니다. 이를 수정하려면 클래스 조합을 사용하십시오..clearfix과 반응 유틸리티 클래스는 다음 예에서와 같이 -
<div class = "container">
<div class = "row" >
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut.</p>
</div>
<div class = "clearfix visible-xs"></div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim</p>
</div>
</div>
</div>이것은 다음 결과를 생성합니다-
이 예제의 원하는 결과를 보려면 뷰포트의 크기를 조정하거나 휴대폰에서 확인하십시오.
오프셋 열
오프셋은보다 전문화 된 레이아웃에 유용한 기능입니다. 예를 들어 더 많은 간격을 위해 열을 밀어 넣는 데 사용할 수 있습니다. 그만큼.col-xs = * 클래스는 오프셋을 지원하지 않지만 빈 셀을 사용하여 쉽게 복제됩니다.
대형 디스플레이에서 오프셋을 사용하려면 .col-md-offset-*클래스. 이 클래스는 열의 왼쪽 여백을 다음과 같이 늘립니다.* 열 어디에 * 범위 1 ...에 11.
다음 예제에서는 <div class = "col-md-6"> .. </ div>가 있습니다. .col-md-offset-3.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row" >
<div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>이것은 다음 결과를 생성합니다-
열 중첩
기본 그리드로 콘텐츠를 중첩하려면 새 .row 및 세트 .col-md-* 기존의 열 .col-md-*기둥. 중첩 행에는 최대 12 개를 더하는 열 집합이 포함되어야합니다.
다음 예에서 레이아웃에는 두 개의 열이 있으며 두 번째 열은 두 행에 걸쳐 네 개의 상자로 분할됩니다.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row">
<div class = "col-md-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>First Column</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class = "col-md-9" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>Second Column- Split into 4 boxes</h4>
<div class = "row">
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Consectetur art party Tonx culpa semiotics.
Pinterest assumenda minim organic quis.</p>
</div>
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class = "row">
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat.</p>
</div>
<div class = "col-md-6" style = "background-color: #B18904;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.</p>
</div>
</div>
</div>
</div>
</div>이것은 다음 결과를 생성합니다-
열 순서
Bootstrap 그리드 시스템의 또 다른 멋진 기능은 순서대로 열을 쉽게 작성하고 다른 열에 표시 할 수 있다는 것입니다. 다음을 사용하여 내장 그리드 기둥의 순서를 쉽게 변경할 수 있습니다..col-md-push-* 과 .col-md-pull-* 수정 자 클래스 * 범위 1 ...에 11.
다음 예에서는 왼쪽 열이 가장 좁고 사이드 바 역할을하는 두 개의 열 레이아웃이 있습니다. 다음을 사용하여 이러한 열의 순서를 바꿉니다..col-md-push-* 과 .col-md-pull-* 클래스.
<div class = "container">
<h1>Hello, world!</h1>
<div class = "row">
<p>Before Ordering</p>
<div class = "col-md-4" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I am on left
</div>
<div class = "col-md-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I am on right
</div>
</div>
<br>
<div class = "row">
<p>After Ordering</p>
<div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on left
</div>
<div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
I was on right
</div>
</div>
</div>이것은 다음 결과를 생성합니다-
이 장에서는 더 우수하고 빠르고 강력한 웹 개발을위한 Bootstrap의 접근 방식을 포함하여 Bootstrap 인프라의 핵심 부분에 대한 개요를 제공합니다.
HTML5 문서 유형
부트 스트랩은 HTML5 doctype을 사용해야하는 특정 HTML 요소와 CSS 속성을 사용합니다. 따라서 부트 스트랩을 사용하는 모든 프로젝트의 시작 부분에 HTML5 doctype에 대한 아래 코드를 포함합니다.
<!DOCTYPE html>
<html>
....
</html>모바일 우선
Bootstrap 3이 출시 된 이후로 Bootstrap은 모바일 우선이되었습니다. 즉, '모바일 우선'스타일은 별도의 파일이 아닌 전체 라이브러리에서 찾을 수 있습니다. 추가해야합니다viewport meta tag ~로 <head> 요소, 모바일 장치에서 적절한 렌더링 및 터치 확대 / 축소를 보장합니다.
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">width 속성은 장치의 너비를 제어합니다. 장치 너비로 설정하면 다양한 장치 (모바일, 데스크톱, 태블릿 ...)에서 올바르게 렌더링됩니다.
initial-scale = 1.0 은로드 될 때 웹 페이지가 1 : 1 배율로 렌더링되고 확대 / 축소가 기본적으로 적용되지 않도록합니다.
더하다 user-scalable = no ~로 content아래에 표시된 것처럼 모바일 장치에서 확대 / 축소 기능을 비활성화하는 속성입니다. 사용자는이 변경 사항으로 인해 스크롤 만 할 수 있고 확대 / 축소 할 수 없으며 결과적으로 사이트가 네이티브 애플리케이션처럼 느껴집니다.
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">일반적으로 maximum-scale = 1.0 은 user-scalable = no 와 함께 사용됩니다 . 상술 한 바와 같이user-scalable = no 사용자에게 네이티브 앱과 같은 경험을 제공 할 수 있으므로 Bootstrap은이 속성을 사용하지 않는 것이 좋습니다.
반응 형 이미지
Bootstrap 3을 사용하면 클래스를 추가하여 이미지를 반응 형으로 만들 수 있습니다. .img-responsive ~로 <img>꼬리표. 이 수업은 적용됩니다max-width: 100%; 과 height: auto; 이미지에 추가하여 부모 요소에 맞게 크기를 조정합니다.
<img src = "..." class = "img-responsive" alt = "Responsive image">타이포그래피 및 링크
부트 스트랩은 기본 글로벌 디스플레이 (배경), 타이포그래피 및 링크 스타일을 설정합니다.
Basic Global display− 배경색 설정 : #fff; 온 <body> 엘리먼트.
Typography− @ font-family-base , @ font-size-base 및 @ line-height-base 속성을 활자체 기준으로 사용합니다.
Link styles− @ link-color 속성을 통해 전역 링크 색상을 설정하고 : hover 에만 링크 밑줄을 적용합니다 .
LESS 코드를 사용하려는 경우 scaffolding.less 내에서이 모든 것을 찾을 수 있습니다 .
정규화
Bootstrap은 Normalize 를 사용 하여 브라우저 간 일관성을 설정합니다.
Normalize.css는 CSS 재설정에 대한 최신 HTML5 대안입니다. HTML 요소의 기본 스타일링에서 더 나은 브라우저 간 일관성을 제공하는 작은 CSS 파일입니다.
컨테이너
수업 사용 .container 페이지의 내용을 감싸고 아래와 같이 내용의 중앙에 쉽게 맞출 수 있습니다.
<div class = "container">
...
</div>보세요 .containerbootstrap.css 파일의 클래스 -
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}패딩 및 고정 너비로 인해 컨테이너는 기본적으로 중첩 할 수 없습니다.
bootstrap.css 파일을 살펴보십시오 -
@media (min-width: 768px) {
.container {
width: 750px;
}
}여기서 CSS에 컨테이너에 대한 미디어 쿼리가 있음을 알 수 있습니다. width. 이는 응답 성을 적용하는 데 도움이되며 그 안에서 컨테이너 클래스가 적절하게 수정되어 그리드 시스템을 올바르게 렌더링합니다.
Bootstrap은 기본 글꼴 스택에서 Helvetica Neue, Helvetica, Arial 및 sans-serif를 사용합니다. Bootstrap의 타이포그래피 기능을 사용하여 제목, 단락, 목록 및 기타 인라인 요소를 만들 수 있습니다. 다음 섹션에서 각각에 대해 알아보십시오.
제목
모든 HTML 제목 (h1 ~ h6)은 Bootstrap에서 스타일이 지정됩니다. 아래에 예가 나와 있습니다.
<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>부트 스트랩이있는 위의 코드 세그먼트는 다음과 같은 결과를 생성합니다.
인라인 부제목
제목에 인라인 부제목을 추가하려면 요소 주위에 <small>을 추가하거나 .small 아래 예제와 같이 더 밝은 색상의 작은 텍스트를 얻을 수 있습니다.
<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1>
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>부트 스트랩이있는 위의 코드 세그먼트는 다음과 같은 결과를 생성합니다.
리드 바디 카피
단락을 강조하려면 class = "lead"를 추가하십시오. 이렇게하면 다음 예제에서와 같이 더 큰 글꼴 크기, 더 가벼운 두께 및 더 큰 줄 높이를 얻을 수 있습니다.
<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating
the use of lead body copy. This is an example paragraph
demonstrating the use of lead body copy.This is an example
paragraph demonstrating the use of lead body copy.This is an
example paragraph demonstrating the use of lead body copy.
This is an example paragraph demonstrating the use of lead body copy.</p>중요성
<small>과 같은 HTML의 기본 강조 태그는 텍스트를 부모 크기의 85 %로 설정하고, <strong>은 글꼴 두께가 더 두꺼운 텍스트를 강조하고, <em>은 기울임 꼴로 텍스트를 강조합니다.
Bootstrap은 다음 예제에서 볼 수 있듯이 텍스트를 강조하는 데 사용할 수있는 몇 가지 클래스를 제공합니다.
<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>
<p class = "text-left">Left aligned text.</p>
<p class = "text-center">Center aligned text.</p>
<p class = "text-right">Right aligned text.</p>
<p class = "text-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>약어
HTML <abbr> 요소는 WWW 또는 HTTP와 같은 약어 또는 두문자어에 대한 마크 업을 제공합니다. 부트 스트랩은 아래쪽에 밝은 점선 테두리가있는 <abbr> 요소를 스타일로 지정하고 마우스 오버시 전체 텍스트를 표시합니다 (해당 텍스트를 <abbr> 제목 속성에 추가하는 경우). 약간 더 작은 글꼴 크기를 얻으려면 <abbr>에 .initialism을 추가하십시오.
<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>구애
<address> 태그를 사용하면 웹 페이지에 연락처 정보를 표시 할 수 있습니다. <address>는 기본적으로 display : block; 당신은 사용해야 할 것입니다
포함 된 주소 텍스트에 줄 바꿈을 추가하는 태그입니다.
<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title = "Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href = "mailto:#">[email protected]</a>
</address>인용구
HTML 텍스트 주위에 기본 <blockquote>를 사용할 수 있습니다. 다른 옵션으로는 따옴표의 출처를 식별하기위한 <small> 태그를 추가하고 .pull-right 클래스를 사용하여 인용구를 오른쪽 정렬하는 것이 있습니다. 다음 예제는 이러한 모든 기능을 보여줍니다.
<blockquote>
<p>This is a default blockquote example. This is a default
blockquote example. This is a default blockquote
example.This is a default blockquote example. This is a
default blockquote example.</p>
</blockquote>
<blockquote>
This is a blockquote with a source title.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
<blockquote class = "pull-right">This is a blockquote aligned to the right.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>기울기
부트 스트랩은 정렬 된 목록, 정렬되지 않은 목록 및 정의 목록을 지원합니다.
Ordered lists − 정렬 된 목록은 일종의 순차적 인 순서로되어 있고 앞에 숫자가 붙은 목록입니다.
Unordered lists− 정렬되지 않은 목록은 특정 순서가없는 목록이며 전통적으로 글 머리 기호로 스타일이 지정됩니다. 글 머리 기호를 표시하지 않으려면 .list-unstyled 클래스를 사용하여 스타일을 제거 할 수 있습니다 . .list-inline 클래스를 사용하여 모든 목록 항목을 한 줄에 배치 할 수도 있습니다 .
Definition lists−이 유형의 목록에서 각 목록 항목은 <dt> 및 <dd> 요소로 구성 될 수 있습니다. <dt>는 용어 정의를 나타내며 사전과 마찬가지로 정의 되는 용어 (또는 구문)입니다. 결과적으로 <dd>는 <dt>의 정의입니다. dl-horizontal 클래스를 사용하여 <dl>의 용어와 설명을 나란히 정렬 할 수 있습니다 .
다음 예제는 이러한 각 유형을 보여줍니다-
<h4>Example of Ordered List</h4>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<h4>Example of UnOrdered List</h4>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Unstyled List</h4>
<ul class = "list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Inline List</h4>
<ul class = "list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<h4>Example of Definition List</h4>
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
<h4>Example of Horizontal Definition List</h4>
<dl class = "dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>Bootstrap을 사용하면 두 가지 주요 방법으로 코드를 표시 할 수 있습니다.
첫 번째는 <code> 태그입니다. 코드를 인라인으로 표시하려면 <code> 태그를 사용해야합니다.
두 번째는 <pre> 태그입니다. 코드를 독립 실행 형 블록 요소로 표시해야하거나 여러 줄이있는 경우 <pre> 태그를 사용해야합니다.
<pre> 및 <code> 태그를 사용할 때 열기 및 닫기 태그에 유니 코드 변형을 사용하는지 확인하십시오. < 과 >.
아래의 예를 보겠습니다.
<p><code><header></code> is wrapped as an inline element.</p>
<p>To display code as a standalone block element use <pre> tag as:</p>
<pre>
<article>
<h1>Article Heading</h1>
</article>
</pre>Bootstrap은 테이블을 만들기위한 깔끔한 레이아웃을 제공합니다. Bootstrap에서 지원하는 테이블 요소 중 일부는 다음과 같습니다.
| Sr. 아니. | 태그 및 설명 |
|---|---|
| 1 | <table> 데이터를 표 형식으로 표시하기위한 래핑 요소 |
| 2 | <thead> 테이블 열에 레이블을 지정할 테이블 헤더 행 (<tr>)의 컨테이너 요소입니다. |
| 삼 | <tbody> 테이블 본문의 테이블 행 (<tr>)에 대한 컨테이너 요소입니다. |
| 4 | <tr> 단일 행에 표시되는 테이블 셀 집합 (<td> 또는 <th>)에 대한 컨테이너 요소입니다. |
| 5 | <td> 기본 테이블 셀. |
| 6 | <th> 열 (또는 범위 및 배치에 따라 행) 레이블을위한 특수 테이블 셀. <thead> 내에서 사용해야합니다. |
| 7 | <caption> 테이블에 포함 된 내용에 대한 설명 또는 요약입니다. |
기본 테이블
약간의 가벼운 패딩과 가로 구분선 만있는 멋진 기본 테이블 스타일을 원한다면 다음 예제와 같이 테이블 에 .table 의 기본 클래스를 추가하십시오.
<table class = "table">
<caption>Basic Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>선택적 테이블 클래스
기본 테이블 마크 업 및 .table 클래스와 함께 마크 업 스타일을 지정하는 데 사용할 수있는 몇 가지 추가 클래스가 있습니다. 다음 섹션에서는 이러한 모든 수업에 대해 간략하게 설명합니다.
스트라이프 테이블
.table-striped 클래스 를 추가하면 다음 예에서 볼 수 있듯이 <tbody> 내의 행에 스트라이프가 표시됩니다.
<table class = "table table-striped">
<caption>Striped Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>경계 표
.table-border 클래스 를 추가하면 다음 예제와 같이 모든 요소를 둘러싼 테두리와 전체 테이블 주위에 둥근 모서리를 얻게됩니다.
<table class = "table table-bordered">
<caption>Bordered Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>호버 테이블
첨가 용으로 .table-호버 다음 예에서와 같이 클래스를, 밝은 회색 배경은, 그 위에 커서 마우스를 올렸을 동안 행에 추가됩니다 -
<table class = "table table-hover">
<caption>Hover Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>압축 된 테이블
.table-condensed 클래스 를 추가하면 행 패딩이 절반으로 줄어들어 테이블이 압축됩니다. 다음 예에서 볼 수 있습니다. 더 조밀 한 정보를 원할 때 유용합니다.
<table class = "table table-condensed">
<caption>Condensed Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>상황 별 클래스
다음 표에 표시된 컨텍스트 클래스를 사용하면 테이블 행 또는 개별 셀의 배경색을 변경할 수 있습니다.
| Sr. 아니. | 클래스 및 설명 |
|---|---|
| 1 | .active 특정 행이나 셀에 호버 색상을 적용합니다. |
| 2 | .success 성공하거나 긍정적 인 행동을 나타냅니다. |
| 삼 | .warning 주의가 필요할 수있는 경고를 나타냅니다. |
| 4 | .danger 위험하거나 잠재적으로 부정적인 행동을 나타냅니다. |
이러한 클래스는 <tr>, <td> 또는 <th>에 적용 할 수 있습니다.
<table class = "table">
<caption>Contextual Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class = "active">
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr class = "success">
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr class = "warning">
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr class = "danger">
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>반응 형 테이블
어떤 포장으로 .table을 에 .table 응답 클래스, 당신은 수평으로 최대 작은 장치 (768px 이하) 테이블 스크롤을 할 것입니다. 너비가 768px보다 큰 항목에서 볼 때 이러한 표에서 차이가 나타나지 않습니다.
<div class = "table-responsive">
<table class = "table">
<caption>Responsive Table Layout</caption>
<thead>
<tr>
<th>Product</th>
<th>Payment Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Product1</td>
<td>23/11/2013</td>
<td>Pending</td>
</tr>
<tr>
<td>Product2</td>
<td>10/11/2013</td>
<td>Delivered</td>
</tr>
<tr>
<td>Product3</td>
<td>20/10/2013</td>
<td>In Call to confirm</td>
</tr>
<tr>
<td>Product4</td>
<td>20/10/2013</td>
<td>Declined</td>
</tr>
</tbody>
</table>
</div>이 장에서는 Bootstrap을 사용하여 쉽게 양식을 만드는 방법을 알아 봅니다. Bootstrap은 간단한 HTML 마크 업과 다양한 스타일의 양식에 대한 확장 클래스를 사용하여 쉽게 만듭니다. 이 장에서는 부트 스트랩을 사용하여 쉽게 양식을 만드는 방법을 연구합니다.
양식 레이아웃
부트 스트랩은 다음과 같은 형태의 레이아웃을 제공합니다.
- 수직 (기본값) 양식
- 인라인 양식
- 수평 형태
수직 또는 기본 양식
기본 양식 구조는 부트 스트랩과 함께 제공됩니다. 개별 양식 컨트롤은 자동으로 일부 전역 스타일을받습니다. 기본 양식을 만들려면 다음을 수행하십시오.
부모 <form> 요소에 역할 양식 을 추가합니다 .
.form-group 클래스를 사용하여 <div>의 레이블과 컨트롤을 래핑 합니다. 이것은 최적의 간격을 위해 필요합니다.
모든 텍스트 <input>, <textarea> 및 <select> 요소 에 .form-control 클래스를 추가하십시오 .
<form role = "form">
<div class = "form-group">
<label for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
</div>
<div class = "form-group">
<label for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
<p class = "help-block">Example block-level help text here.</p>
</div>
<div class = "checkbox">
<label><input type = "checkbox"> Check me out</label>
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>인라인 양식
모든 요소가 인라인이고 왼쪽 정렬되고 레이블이 나란히있는 양식을 만들려면 .form-inline 클래스 를 <form> 태그에 추가합니다.
<form class = "form-inline" role = "form">
<div class = "form-group">
<label class = "sr-only" for = "name">Name</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Enter Name">
</div>
<div class = "form-group">
<label class = "sr-only" for = "inputfile">File input</label>
<input type = "file" id = "inputfile">
</div>
<div class = "checkbox">
<label><input type = "checkbox"> Check me out</label>
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>기본적으로 입력, 선택 및 텍스트 영역의 너비는 Bootstrap에서 100 %입니다. 인라인 양식을 사용할 때 양식 컨트롤에서 너비를 설정해야합니다.
.sr-only 클래스를 사용하면 인라인 양식의 레이블을 숨길 수 있습니다.
수평 형태
수평 양식은 마크 업의 양뿐만 아니라 양식의 표현에서도 다른 양식과 차별화됩니다. 가로 레이아웃을 사용하는 양식을 만들려면 다음을 수행하십시오.
.form-horizontal 클래스를 부모 <form> 요소에 추가합니다.
.form-group 클래스를 사용하여 <div>의 레이블과 컨트롤을 래핑 합니다.
.control-label 클래스를 레이블 에 추가하십시오 .
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label for = "firstname" class = "col-sm-2 control-label">First Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "firstname" placeholder = "Enter First Name">
</div>
</div>
<div class = "form-group">
<label for = "lastname" class = "col-sm-2 control-label">Last Name</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "lastname" placeholder = "Enter Last Name">
</div>
</div>
<div class = "form-group">
<div class = "col-sm-offset-2 col-sm-10">
<div class = "checkbox">
<label><input type = "checkbox"> Remember me</label>
</div>
</div>
</div>
<div class = "form-group">
<div class = "col-sm-offset-2 col-sm-10">
<button type = "submit" class = "btn btn-default">Sign in</button>
</div>
</div>
</form>지원되는 양식 컨트롤
Bootstrap은 기본적으로 입력, 텍스트 영역, 확인란, 라디오 및 선택을 중심으로 가장 일반적인 양식 컨트롤을 지원합니다 .
입력
가장 일반적인 양식 텍스트 필드는 입력 필드입니다. 사용자가 대부분의 필수 양식 데이터를 입력하는 곳입니다. Bootstrap은 텍스트, 비밀번호, datetime, datetime-local, 날짜, 월, 시간, 주, 숫자, 이메일, URL, 검색, 전화 및 색상 과 같은 모든 기본 HTML5 입력 유형을 지원합니다 . 입력을 완전히 스타일링 하려면 적절한 유형 선언이 필요합니다 .
<form role = "form">
<div class = "form-group">
<label for = "name">Label</label>
<input type = "text" class = "form-control" placeholder = "Text input">
</div>
</form>텍스트 영역
텍스트 영역은 여러 줄의 입력이 필요할 때 사용됩니다. 필요에 따라 행 속성을 변경 합니다 (행 수가 적 으면 상자가 작아지고 행이 많으면 상자가 커짐).
<form role = "form">
<div class = "form-group">
<label for = "name">Text Area</label>
<textarea class = "form-control" rows = "3"></textarea>
</div>
</form>체크 박스 및 라디오 버튼
체크 박스와 라디오 버튼은 사용자가 사전 설정 옵션 목록에서 선택하기를 원할 때 유용합니다.
양식을 작성할 때 사용자가 목록에서 여러 옵션을 선택 하도록 하려면 확인란을 사용 합니다. 사용자를 하나의 선택으로 제한 하려면 라디오를 사용하십시오 .
사용 .checkbox 인라인 또는 .radio 인라인 컨트롤 체크 박스 또는 라디오의 일련의 클래스는 같은 줄에 나타납니다.
다음 예제는 (기본 및 인라인) 유형을 모두 보여줍니다-
<label for = "name">Example of Default Checkbox and radio button </label>
<div class = "checkbox">
<label>
<input type = "checkbox" value = "">Option 1
</label>
</div>
<div class = "checkbox">
<label>
<input type = "checkbox" value = "">Option 2
</label>
</div>
<div class = "radio">
<label>
<input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1
</label>
</div>
<div class = "radio">
<label>
<input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2">
Option 2 - selecting it will deselect option 1
</label>
</div>
<label for = "name">Example of Inline Checkbox and radio button </label>
<div>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3
</label>
<label class = "checkbox-inline">
<input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1
</label>
<label class = "checkbox-inline">
<input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2
</label>
</div>선택
선택은 사용자가 여러 옵션 중에서 선택하도록 허용하려는 경우 사용되지만 기본적으로 하나만 허용됩니다.
주 또는 숫자와 같이 사용자에게 익숙한 목록 옵션에 대해 <select>를 사용하십시오.
사용자가 둘 이상의 옵션을 선택할 수 있도록 하려면 multiple = "multiple" 을 사용하십시오.
다음 예제는 모두 (선택 및 다중) 유형을 보여줍니다-
<form role = "form">
<div class = "form-group">
<label for = "name">Select list</label>
<select class = "form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<label for = "name">Mutiple Select list</label>
<select multiple class = "form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>정적 제어
가로 양식 내에서 양식 레이블 옆에 일반 텍스트를 배치해야하는 경우 <p>에 .form-control-static 클래스를 사용하십시오 .
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label class = "col-sm-2 control-label">Email</label>
<div class = "col-sm-10">
<p class = "form-control-static">[email protected]</p>
</div>
</div>
<div class = "form-group">
<label for = "inputPassword" class = "col-sm-2 control-label">Password</label>
<div class = "col-sm-10">
<input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password">
</div>
</div>
</form>양식 제어 상태
또한받는 : 포커스 상태 (즉, 사용자는 그것에 입력 또는 탭에 고정), 형태 검증 비활성화 및 입력 클래스 스타일링 부트 스트랩하세요.
입력 초점
입력이 : focus를 받으면 입력 의 윤곽선이 제거되고 상자 그림자 가 적용됩니다.
비활성화 된 입력
입력을 비활성화해야하는 경우 disabled 속성을 추가하는 것만으로는 비활성화 할 수 없습니다. 또한 커서를 요소 위로 가져갈 때 스타일과 마우스 커서도 변경됩니다.
비활성화 된 필드 셋
비활성화 된 속성을 <fieldset>에 추가하여 <fieldset> 내의 모든 컨트롤을 한 번에 비활성화합니다.
검증 상태
부트 스트랩에는 오류, 경고 및 성공 메시지에 대한 유효성 검사 스타일이 포함되어 있습니다. 사용하려면 적절한 클래스 ( .has-warning, .has-error 또는 .has-success )를 상위 요소에 추가하면됩니다.
다음 예제는 모든 양식 제어 상태를 보여줍니다-
<form class = "form-horizontal" role = "form">
<div class = "form-group">
<label class = "col-sm-2 control-label">Focused</label>
<div class = "col-sm-10">
<input class = "form-control" id = "focusedInput" type = "text" value = "This is focused...">
</div>
</div>
<div class = "form-group">
<label for = "inputPassword" class = "col-sm-2 control-label">
Disabled
</label>
<div class = "col-sm-10">
<input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled>
</div>
</div>
<fieldset disabled>
<div class = "form-group">
<label for = "disabledTextInput" class = "col-sm-2 control-label">
Disabled input (Fieldset disabled)
</label>
<div class = "col-sm-10">
<input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input">
</div>
</div>
<div class = "form-group">
<label for = "disabledSelect" class = "col-sm-2 control-label">
Disabled select menu (Fieldset disabled)
</label>
<div class = "col-sm-10">
<select id = "disabledSelect" class = "form-control">
<option>Disabled select</option>
</select>
</div>
</div>
</fieldset>
<div class = "form-group has-success">
<label class = "col-sm-2 control-label" for = "inputSuccess">
Input with success
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputSuccess">
</div>
</div>
<div class = "form-group has-warning">
<label class = "col-sm-2 control-label" for = "inputWarning">
Input with warning
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputWarning">
</div>
</div>
<div class = "form-group has-error">
<label class = "col-sm-2 control-label" for = "inputError">
Input with error
</label>
<div class = "col-sm-10">
<input type = "text" class = "form-control" id = "inputError">
</div>
</div>
</form>양식 컨트롤 크기
각각 .input-lg 및 .col-lg- * 와 같은 클래스를 사용하여 양식의 높이와 너비를 설정할 수 있습니다 . 다음 예제는 이것을 보여줍니다-
<form role = "form">
<div class = "form-group">
<input class = "form-control input-lg" type = "text" placeholder =".input-lg">
</div>
<div class = "form-group">
<input class = "form-control" type = "text" placeholder = "Default input">
</div>
<div class = "form-group">
<input class = "form-control input-sm" type = "text" placeholder = ".input-sm">
</div>
<div class = "form-group"></div>
<div class = "form-group">
<select class = "form-control input-lg">
<option value = "">.input-lg</option>
</select>
</div>
<div class = "form-group">
<select class = "form-control">
<option value = "">Default select</option>
</select>
</div>
<div class = "form-group">
<select class = "form-control input-sm">
<option value = "">.input-sm</option>
</select>
</div>
<div class = "row">
<div class = "col-lg-2">
<input type = "text" class = "form-control" placeholder = ".col-lg-2">
</div>
<div class = "col-lg-3">
<input type = "text" class = "form-control" placeholder = ".col-lg-3">
</div>
<div class = "col-lg-4">
<input type = "text" class = "form-control" placeholder = ".col-lg-4">
</div>
</div>
</form>도움말 텍스트
부트 스트랩 양식 컨트롤에는 입력과 함께 흐르는 블록 수준 도움말 텍스트가있을 수 있습니다. 전체 너비의 콘텐츠 블록을 추가하려면 <input> 뒤에 .help-block 을 사용하십시오 . 다음 예제는 이것을 보여줍니다-
<form role = "form">
<span>Example of Help Text</span>
<input class = "form-control" type = "text" placeholder = "">
<span class = "help-block">
A longer block of help text that breaks onto a new line and may extend beyond one line.
</span>
</form>이 장에서는 예제와 함께 부트 스트랩 버튼의 사용 기간을 다룹니다. 클래스가 주어진 모든 것.btn모서리가 둥근 회색 버튼의 기본 모양을 상속합니다. 그러나 Bootstrap은 다음 표에 요약 된 스타일 버튼에 대한 몇 가지 옵션을 제공합니다.
| Sr. 아니. | 클래스 및 설명 |
|---|---|
| 1 | btn 기본 / 표준 버튼. |
| 2 | btn-primary 추가 시각적 가중치를 제공하고 일련의 버튼에서 기본 작업을 식별합니다. |
| 삼 | btn-success 성공 또는 긍정적 인 조치를 나타냅니다. |
| 4 | btn-info 정보 경고 메시지를위한 상황 별 버튼. |
| 5 | btn-warning 이 조치에주의해야 함을 나타냅니다. |
| 6 | btn-danger 위험하거나 잠재적으로 부정적인 행동을 나타냅니다. |
| 7 | btn-link 단추 동작을 유지하면서 단추를 링크처럼 보이게하여 단추를 강조하지 마십시오. |
다음 예제는 위의 모든 버튼 클래스를 보여줍니다.
<!-- Standard button -->
<button type = "button" class = "btn btn-default">Default Button</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type = "button" class = "btn btn-primary">Primary Button</button>
<!-- Indicates a successful or positive action -->
<button type = "button" class = "btn btn-success">Success Button</button>
<!-- Contextual button for informational alert messages -->
<button type = "button" class = "btn btn-info">Info Button</button>
<!-- Indicates caution should be taken with this action -->
<button type = "button" class = "btn btn-warning">Warning Button</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type = "button" class = "btn btn-danger">Danger Button</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type = "button" class = "btn btn-link">Link Button</button>버튼 크기
다음 표는 다양한 크기의 버튼을 얻는 데 사용되는 클래스를 요약합니다.
| Sr. 아니. | 클래스 및 설명 |
|---|---|
| 1 | .btn-lg 이렇게하면 버튼 크기가 커집니다. |
| 2 | .btn-sm 이렇게하면 버튼 크기가 작아집니다. |
| 삼 | .btn-xs 이렇게하면 버튼 크기가 더욱 작아집니다. |
| 4 | .btn-block 이렇게하면 부모의 전체 너비에 걸쳐있는 블록 수준 버튼이 생성됩니다. |
다음 예제는 이것을 보여줍니다-
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Large Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg">
Large button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary">
Default size Primary button
</button>
<button type = "button" class = "btn btn-default">
Default size button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-sm">
Small Primary button
</button>
<button type = "button" class = "btn btn-default btn-sm">
Small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-xs">
Extra small Primary button
</button>
<button type = "button" class = "btn btn-default btn-xs">
Extra small button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg btn-block">
Block level Primary button
</button>
<button type = "button" class = "btn btn-default btn-lg btn-block">
Block level button
</button>
</p>버튼 상태
부트 스트랩은 버튼의 상태를 활성화, 비활성화 등으로 변경할 수있는 클래스를 제공합니다. 각각에 대해서는 다음 섹션에서 설명합니다.
활성 상태
활성화되면 버튼이 눌린 상태로 표시됩니다 (더 어두운 배경, 더 어두운 테두리 및 삽입 된 그림자 포함). 다음 표는 버튼 요소와 앵커 요소를 활성화하는 데 사용되는 클래스를 요약합니다.
| 요소 | 수업 |
|---|---|
| 버튼 요소 | 사용하다 .active 클래스가 활성화되었음을 보여줍니다. |
| 앵커 요소 | 사용하다 .active 클래스를 <a> 버튼으로 전환하여 활성화되었음을 표시합니다. |
다음 예제는 이것을 보여줍니다-
<p>
<button type = "button" class = "btn btn-default btn-lg ">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg active">
Active Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg active">
Active Primary button
</button>
</p>비활성화 상태
버튼을 비활성화하면 색상이 50 % 희미 해지고 그라디언트가 사라집니다.
다음 표는 버튼 요소와 앵커 요소를 비활성화하는 데 사용되는 클래스를 요약합니다.
| 요소 | 수업 |
|---|---|
| 버튼 요소 | 추가 disabled <버튼> 버튼의 속성 . |
| 앵커 요소 | 추가 disabled <a> 버튼에 클래스 . Note−이 클래스는 <a>의 기능이 아닌 외관 만 변경합니다. 여기에서 링크를 비활성화하려면 사용자 정의 JavaScript를 사용해야합니다. |
다음 예제는 이것을 보여줍니다-
<p>
<button type = "button" class = "btn btn-default btn-lg">
Default Button
</button>
<button type = "button" class = "btn btn-default btn-lg" disabled = "disabled">
Disabled Button
</button>
</p>
<p>
<button type = "button" class = "btn btn-primary btn-lg">
Primary button
</button>
<button type = "button" class = "btn btn-primary btn-lg" disabled = "disabled">
Disabled Primary button
</button>
</p>
<p>
<a href = "#" class = "btn btn-default btn-lg" role = "button">
Link
</a>
<a href = "#" class = "btn btn-default btn-lg disabled" role = "button">
Disabled Link
</a>
</p>
<p>
<a href = "#" class = "btn btn-primary btn-lg" role = "button">
Primary link
</a>
<a href = "#" class = "btn btn-primary btn-lg disabled" role = "button">
Disabled Primary link
</a>
</p>버튼 태그
<a>, <button> 또는 <input> 요소와 함께 버튼 클래스를 사용할 수 있습니다. 그러나 브라우저 간 불일치 문제를 피하기 위해 주로 <button> 요소와 함께 사용하는 것이 좋습니다.
다음 예제는 이것을 보여줍니다-
<a class = "btn btn-default" href = "#" role = "button">Link</a>
<button class = "btn btn-default" type = "submit">Button</button>
<input class = "btn btn-default" type = "button" value = "Input">
<input class = "btn btn-default" type = "submit" value = "Submit">이 장에서는 이미지에 대한 부트 스트랩 지원에 대해 설명합니다. 부트 스트랩은 이미지에 간단한 스타일을 적용하는 데 사용할 수있는 세 가지 클래스를 제공합니다.
.img-rounded− 이미지에 둥근 모서리를 제공하기 위해 border-radius : 6px 를 추가합니다 .
.img-circle− border-radius : 500px를 추가하여 전체 이미지를 둥글게 만듭니다 .
.img-thumbnail − 약간의 패딩과 회색 테두리 추가 −
다음 예제는 이것을 보여줍니다-
<img src = "/bootstrap/images/download.png" class = "img-rounded">
<img src = "/bootstrap/images/download.png" class = "img-circle">
<img src = "/bootstrap/images/download.png" class = "img-thumbnail">이 장에서는 유용한 부트 스트랩의 일부 도우미 클래스에 대해 설명합니다.
닫기 아이콘
모달 및 경고와 같은 콘텐츠를 닫으려면 일반 닫기 아이콘을 사용합니다. 수업 사용close 닫기 아이콘을 가져옵니다.
<p>Close Icon Example
<button type = "button" class = "close" aria-hidden = "true">
×
</button>
</p>캐럿
캐럿을 사용하여 드롭 다운 기능과 방향을 나타냅니다. 이 기능을 얻으려면 클래스를 사용하십시오.caret <span> 요소와 함께.
<p>Caret Example<span class = "caret"></span></p>빠른 수레
클래스를 사용하여 요소를 왼쪽 또는 오른쪽으로 플로팅 할 수 있습니다. pull-left 또는 pull-right 각각 다음 예제가이를 보여줍니다.
<div class = "pull-left">Quick Float to left</div>
<div class = "pull-right">Quick Float to right</div>navbar의 구성 요소를 유틸리티 클래스와 정렬하려면 .navbar-left 또는 .navbar-right대신. 자세한 내용은 navbar 장 을 참조하십시오.
중심 컨텐츠 블록
수업 사용 center-block 요소를 가운데로 설정합니다.
<div class = "row">
<div class = "center-block" style = "width:200px; background-color:#ccc;">
This is an example for center-block
</div>
</div>Clearfix
요소의 부동을 지우려면 .clearfix 수업.
<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
<div class = "pull-left" style = "background:#58D3F7;">
Quick Float to left
</div>
<div class = "pull-right" style = "background: #DA81F5;">
Quick Float to right
</div>
</div>콘텐츠 표시 및 숨기기
클래스를 사용하여 요소를 강제로 표시하거나 숨길 수 있습니다 (화면 판독기 포함). .show 과 .hidden.
<div class = "row" style = "padding: 91px 100px 19px 50px;">
<div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
This is an example for show class
</div>
<div class = "hidden" style = "width:200px; background-color:#ccc;">
This is an example for hide class
</div>
</div>스크린 리더 콘텐츠
클래스를 사용하여 화면 판독기를 제외한 모든 장치에 요소를 숨길 수 있습니다. .sr-only.
<div class = "row" style = "padding: 91px 100px 19px 50px;">
<form class = "form-inline" role = "form">
<div class = "form-group">
<label class = "sr-only" for = "email">Email address</label>
<input type = "email" class = "form-control" placeholder = "Enter email">
</div>
<div class = "form-group">
<label class = "sr-only" for = "pass">Password</label>
<input type = "password" class = "form-control" placeholder = "Password">
</div>
</form>
</div>여기에서 두 입력 유형의 레이블이 클래스에 할당되었음을 볼 수 있습니다. sr-only이므로 라벨은 스크린 리더에만 표시됩니다.
Bootstrap은보다 빠른 모바일 친화적 개발을 위해 몇 가지 도우미 클래스를 제공합니다. 이는 대형, 소형 및 중형 장치와 결합 된 미디어 쿼리를 통해 장치별로 콘텐츠를 표시하고 숨기는 데 사용할 수 있습니다.
이것을 아껴서 사용하고 동일한 사이트의 완전히 다른 버전을 생성하지 마십시오. Responsive utilities are currently only available for block and table toggling.
| 클래스 | 장치 |
|---|---|
| .visible-xs | 매우 작음 (768px 미만) 표시 |
| .visible-sm | 작게 (최대 768 픽셀) 표시 |
| .visible-md | 중간 (768 ~ 991 픽셀) 표시 |
| .visible-lg | 더 크게 (992 픽셀 이상) 표시 |
| .hidden-xs | 매우 작음 (768px 미만) 숨김 |
| .hidden-sm | 작게 (최대 768 픽셀) 숨김 |
| .hidden-md | 중간 (768 ~ 991 픽셀) 숨김 |
| .hidden-lg | 더 크게 (992 픽셀 이상) 숨김 |
인쇄 클래스
다음 표는 인쇄 클래스를 나열합니다. 인쇄 할 내용을 전환하는 데 사용합니다.
| 클래스 | 인쇄 |
|---|---|
| .visible-print | 예 표시 |
| .hidden-print | 인쇄하지 않는 브라우저에만 표시됩니다. |
예
다음 예제는 위에 나열된 도우미 클래스의 사용을 보여줍니다. 브라우저의 크기를 조정하거나 다른 장치에서 예제를로드하여 반응 형 유틸리티 클래스를 테스트하십시오.
<div class = "container" style = "padding: 40px;">
<div class = "row visible-on">
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-xs">Extra small</span>
<span class = "visible-xs">✔ Visible on x-small</span>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-sm">Small</span>
<span class = "visible-sm">✔ Visible on small</span>
</div>
<div class = "clearfix visible-xs"></div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-md">Medium</span>
<span class = "visible-md">✔ Visible on medium</span>
</div>
<div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class = "hidden-lg">Large</span>
<span class = "visible-lg">✔ Visible on large</span>
</div>
</div>
</div>Checkmarks 요소가 현재 뷰포트에 표시됨을 나타냅니다.
이 장에서는 Glyphicons, 사용 및 몇 가지 예에 대해 설명합니다. 부트 스트랩은 글꼴 형식으로 200 개의 글리프를 번들로 제공합니다. 이제 Glyphicon이 무엇인지 이해합시다.
Glyphicon은 무엇입니까?
Glyphicon은 웹 프로젝트에서 사용할 수있는 아이콘 글꼴입니다. Glyphicons Halflings 는 무료가 아니며 라이선스가 필요하지만 제작자가 무료로 Bootstrap 프로젝트에 사용할 수 있도록했습니다.
"감사로 가능할 때마다 GLYPHICONS로 돌아가는 선택적 링크를 포함 할 것을 권장합니다." — 부트 스트랩 문서
Glyphicons는 어디에서 찾을 수 있습니까?
이제 부트 스트랩 3.x 버전을 다운로드하고 환경 설정 장에서 디렉토리 구조를 이해 했으므로 glyphicons는 fonts 폴더 에서 찾을 수 있습니다 . 이것은 다음 파일을 포함합니다-
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
관련 CSS 규칙은 dist 폴더의 css 폴더에 있는 bootstrap.css 및 bootstrap-min.css 파일에 있습니다 . 이 링크 GLYPHICONS 에서 사용 가능한 글 리피 콘을 볼 수 있습니다 .
용법
아이콘을 사용하려면 코드의 거의 모든 위치에서 다음 코드를 사용하면됩니다. 적절한 패딩을 위해 아이콘과 텍스트 사이에 공백을 두십시오.
<span class = "glyphicon glyphicon-search"></span>다음 예제는 이것을 보여줍니다-
<p>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-order"></span>
</button>
<button type = "button" class = "btn btn-default">
<span class = "glyphicon glyphicon-sort-by-order-alt"></span>
</button>
</p>
<button type = "button" class = "btn btn-default btn-lg">
<span class = "glyphicon glyphicon-user"></span>
User
</button>
<button type = "button" class = "btn btn-default btn-sm">
<span class = "glyphicon glyphicon-user"></span>
User
</button>
<button type ="button" class = "btn btn-default btn-xs">
<span class = "glyphicon glyphicon-user"></span>
User
</button>이 장에서는 Bootstrap 드롭 다운 메뉴에 대해 중점적으로 설명합니다. 드롭 다운 메뉴는 목록 형식으로 링크를 표시하기위한 토글 가능한 상황 별 메뉴입니다. 이것은 드롭 다운 자바 스크립트 플러그인 과 상호 작용할 수 있습니다 .
드롭 다운을 사용하려면 수업 내에서 드롭 다운 메뉴를 래핑하세요. .dropdown다음 예제는 기본 드롭 다운 메뉴를 보여줍니다.
<div class = "dropdown">
<button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>
<li role = "presentation" class = "divider"></li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>
</div>옵션
조정
수업을 추가하여 드롭 다운 메뉴를 오른쪽에 정렬 .pull-right ...에 .dropdown-menu. 다음 예제는 이것을 보여줍니다-
<div class = "dropdown">
<button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dropdownMenu1">
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>
<li role = "presentation" class = "divider"></li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>
</div>헤더
클래스를 사용하여 모든 드롭 다운 메뉴에서 작업의 레이블 섹션에 헤더를 추가 할 수 있습니다. dropdown-header. 다음 예제는 이것을 보여줍니다-
<div class = "dropdown">
<button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown">
Topics
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
<li role = "presentation" class = "dropdown-header">Dropdown header</li>
<li role = "presentation" >
<a role = "menuitem" tabindex = "-1" href = "#">Java</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Data Mining</a>
</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">
Data Communication/Networking
</a>
</li>
<li role = "presentation" class = "divider"></li>
<li role = "presentation" class = "dropdown-header">Dropdown header</li>
<li role = "presentation">
<a role = "menuitem" tabindex = "-1" href = "#">Separated link</a>
</li>
</ul>
</div>버튼 그룹을 사용하면 여러 버튼을 한 줄에 함께 쌓을 수 있습니다. 정렬 버튼과 같은 항목을 함께 배치하려는 경우에 유용합니다. Bootstrap Button Plugin을 사용 하여 선택적 JavaScript 라디오 및 확인란 스타일 동작을 추가 할 수 있습니다 .
다음 표는 Bootstrap이 버튼 그룹을 사용하기 위해 제공하는 중요한 클래스를 요약 한 것입니다.
| 수업 | 기술 | 코드 샘플 |
|---|---|---|
| .btn-group | 이 클래스는 기본 버튼 그룹에 사용됩니다. 일련의 버튼을 클래스로 감싸기.btn 에 .btn-group. | |
| .btn-toolbar | 이렇게하면 더 복잡한 구성 요소를 위해 <div class = "btn-group"> 집합을 <div class = "btn-toolbar">로 결합하는 데 도움이됩니다. | |
| .btn-group-lg, .btn-group-sm, .btn-group-xs | 이러한 클래스는 각 버튼의 크기를 조정하는 대신 버튼 그룹에 적용 할 수 있습니다. | |
| .btn-group-vertical | 이 클래스는 버튼 세트를 가로가 아닌 세로로 쌓아 표시합니다. | |
기본 버튼 그룹
다음 예제는 클래스 사용을 보여줍니다. .btn-group 위의 표에서 논의-
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>버튼 도구 모음
다음 예제는 클래스 사용을 보여줍니다. .btn-toolbar 위의 표에서 논의-
<div class = "btn-toolbar" role = "toolbar">
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 4</button>
<button type = "button" class = "btn btn-default">Button 5</button>
<button type = "button" class = "btn btn-default">Button 6</button>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 7</button>
<button type = "button" class = "btn btn-default">Button 8</button>
<button type = "button" class = "btn btn-default">Button 9</button>
</div>
</div>버튼 크기
다음 예제는 클래스 사용을 보여줍니다. .btn-group-* 위의 표에서 논의-
<div class = "btn-group btn-group-lg">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<button type = "button" class = "btn btn-default">Button 3</button>
</div>
<div class = "btn-group btn-group-sm">
<button type = "button" class = "btn btn-default">Button 4</button>
<button type = "button" class = "btn btn-default">Button 5</button>
<button type = "button" class = "btn btn-default">Button 6</button>
</div>
<div class = "btn-group btn-group-xs">
<button type = "button" class = "btn btn-default">Button 7</button>
<button type = "button" class = "btn btn-default">Button 8</button>
<button type = "button" class = "btn btn-default">Button 9</button>
</div>중첩
다른 버튼 그룹 내에 버튼 그룹을 중첩 할 수 있습니다. .btn-group 다른 안에서 .btn-group . 이것은 일련의 버튼과 혼합 된 드롭 다운 메뉴를 원할 때 수행됩니다.
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<div class = "btn-group">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Dropdown link 1</a></li>
<li><a href = "#">Dropdown link 2</a></li>
</ul>
</div>
</div>수직 버튼 그룹
다음 예제는 클래스 사용을 보여줍니다. .btn-group-vertical 위의 표에서 논의-
<div class = "btn-group-vertical">
<button type = "button" class = "btn btn-default">Button 1</button>
<button type = "button" class = "btn btn-default">Button 2</button>
<div class = "btn-group-vertical">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Dropdown link 1</a></li>
<li><a href = "#">Dropdown link 2</a></li>
</ul>
</div>
</div>이 장에서는 Bootstrap 클래스를 사용하여 버튼에 드롭 다운 메뉴를 추가하는 방법에 대해 설명합니다. 버튼에 드롭 다운을 추가하려면 버튼과 드롭 다운 메뉴를.btn-group. 또한 <span class = "caret"> </ span>를 사용하여 버튼이 드롭 다운임을 나타내는 역할을 할 수 있습니다.
다음 예제는 기본 단일 버튼 드롭 다운을 보여줍니다.
<div class = "btn-group">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Default
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
Primary
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>분할 버튼 드롭 다운
분할 버튼 드롭 다운은 드롭 다운 버튼과 동일한 일반 스타일을 사용하지만 드롭 다운과 함께 기본 작업을 추가합니다. 분할 버튼은 왼쪽에 기본 작업이 있고 드롭 다운을 표시하는 오른쪽에 토글이 있습니다.
<div class = "btn-group">
<button type = "button" class = "btn btn-default">Default</button>
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-primary">Primary</button>
<button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>버튼 드롭 다운 크기
모든 버튼 크기로 드롭 다운을 사용할 수 있습니다. .btn-large, .btn-sm, 또는 .btn-xs.
<div class = "btn-group">
<button type = "button" class = "btn btn-default dropdown-toggle btn-lg" data-toggle = "dropdown">
Default
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-primary dropdown-toggle btn-sm" data-toggle = "dropdown">
Primary
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group">
<button type = "button" class = "btn btn-success dropdown-toggle btn-xs" data-toggle = "dropdown">
Success
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>드롭 업 변형
메뉴는 아래가 아닌 드롭으로 만들 수도 있습니다. 이를 달성하려면 간단히 추가하십시오..dropup 부모에게 .btn-group 컨테이너.
<div class = "row" style = "margin-left:50px; margin-top:200px">
<div class = "btn-group dropup">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Default
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
<div class = "btn-group dropup">
<button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
Primary
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div>
</div>이 장에서는 부트 스트랩이 지원하는 또 다른 기능인 입력 그룹에 대해 설명합니다. 입력 그룹은 확장 된 양식 컨트롤 입니다. 입력 그룹을 사용하면 텍스트 기반 입력에 텍스트 또는 버튼을 쉽게 추가하고 추가 할 수 있습니다.
입력 필드에 앞에 추가되고 추가 된 콘텐츠를 추가하여 사용자 입력에 공통 요소를 추가 할 수 있습니다. 예를 들어 달러 기호, Twitter 사용자 이름의 경우 @ 또는 응용 프로그램 인터페이스에 일반적 일 수있는 다른 항목을 추가 할 수 있습니다.
요소를 앞에 추가하거나 추가하려면 .form-control−
클래스와 함께 <div>로 감싸십시오. .input-group
다음 단계로 동일한 <div> 내에서 추가 콘텐츠를 클래스가있는 <span> 안에 배치합니다. .input-group-addon.
이제이 <span>을 <input> 요소 앞이나 뒤에 배치합니다.
브라우저 간 호환성을 위해 WebKit 브라우저에서 완전히 스타일을 지정할 수 없으므로 여기서 <select> 요소를 사용하지 마십시오. 또한 입력 그룹 클래스를 직접 그룹에 적용하지 마십시오. 입력 그룹은 격리 된 구성 요소입니다.
기본 입력 그룹
다음 예제는 기본 입력 그룹을 보여줍니다-
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "twitterhandle">
</div>
<br>
<div class = "input-group">
<input type = "text" class = "form-control">
<span class = "input-group-addon">.00</span>
</div>
<br>
<div class = "input-group">
<span class = "input-group-addon">$</span>
<input type = "text" class =" form-control">
<span class = "input-group-addon">.00</span>
</div>
</form>
</div>입력 그룹 크기
다음과 같은 상대적 양식 크기 조정 클래스를 추가하여 입력 그룹의 크기를 변경할 수 있습니다. .input-group-lg, input-group-sm, input-group-xs ~로 .input-group그 자체. 안의 내용은 자동으로 크기가 조정됩니다.
다음 예제는 이것을 보여줍니다-
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "input-group input-group-lg">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
<br>
<div class = "input-group">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
<br>
<div class = "input-group input-group-sm">
<span class = "input-group-addon">@</span>
<input type = "text" class = "form-control" placeholder = "Twitterhandle">
</div>
</form>
</div>체크 박스 및 라디오 애드온
다음 예제와 같이 텍스트 대신 라디오 버튼과 확인란을 미리 추가하거나 추가 할 수 있습니다.
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-addon">
<input type = "checkbox">
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-addon">
<input type = "radio">
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>버튼 애드온
입력 그룹에서 버튼을 미리 추가하거나 추가 할 수도 있습니다. 대신에.input-group-addon 수업, 당신은 수업을 사용해야합니다 .input-group-btn버튼을 감습니다. 이것은 재정의 할 수없는 기본 브라우저 스타일 때문에 필요합니다. 다음 예제는 이것을 보여줍니다-
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<span class = "input-group-btn">
<button class = "btn btn-default" type = "button">
Go!
</button>
</span>
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<span class = "input-group-btn">
<button class = "btn btn-default" type = "button">
Go!
</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>드롭 다운이있는 버튼
입력 그룹에 드롭 다운 메뉴가있는 버튼을 추가하려면 버튼과 드롭 다운 메뉴를 .input-group-btn 다음 예제에서 설명하는 클래스-
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown">
DropdownMenu
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown">
DropdownMenu
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu pull-right">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>세그먼트 버튼
입력 그룹에서 버튼 드롭 다운을 분할하려면 드롭 다운 버튼과 동일한 일반 스타일을 사용하지만 다음 예에서 볼 수있는 것처럼 드롭 다운과 함께 기본 작업을 추가합니다.
<div style = "padding: 100px 100px 10px;">
<form class = "bs-example bs-example-form" role = "form">
<div class = "row">
<div class = "col-lg-6">
<div class = "input-group">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default"
tabindex = "-1">Dropdown Menu</button>
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown" tabindex = "-1">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu">
<li><a href = "#">Action</a></li>
<li><a href ="#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type = "text" class = "form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class = "col-lg-6">
<div class = "input-group">
<input type = "text" class = "form-control">
<div class = "input-group-btn">
<button type = "button" class = "btn btn-default" tabindex = "-1">
Dropdown Menu
</button>
<button type = "button" class = "btn btn-default dropdown-toggle"
data-toggle = "dropdown" tabindex = "-1">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu pull-right">
<li><a href = "#">Action</a></li>
<li><a href = "#">Another action</a></li>
<li><a href = "#">Something else here</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>부트 스트랩은 탐색 요소 스타일 지정을위한 몇 가지 다른 옵션을 제공합니다. 모두 동일한 마크 업과 기본 클래스를 공유합니다..nav. 부트 스트랩은 마크 업과 상태를 공유하는 도우미 클래스도 제공합니다. 수정 자 클래스를 교체하여 각 스타일간에 전환합니다.
표 형식 탐색 또는 탭
탭 탐색 메뉴를 생성하려면-
기본 클래스로 정렬되지 않은 기본 목록으로 시작하십시오. .nav
수업 추가 .nav-tabs.
다음 예제는 이것을 보여줍니다-
<p>Tabs Example</p>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>알약 탐색
기본 약
탭을 알약으로 바꾸려면 위와 동일한 단계를 따르고 수업을 사용하십시오. .nav-pills 대신에 .nav-tabs.
다음 예제는 이것을 보여줍니다-
<p>Pills Example</p>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>수직 환약
클래스를 사용하여 알약을 세로로 쌓을 수 있습니다. .nav-stacked 수업과 함께- .nav, .nav-pills.
다음 예제는 이것을 보여줍니다-
<p>Vertical Pills Example</p>
<ul class = "nav nav-pills nav-stacked">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>Justified Nav
클래스를 사용하여 768px보다 넓은 화면에서 부모와 동일한 너비의 탭이나 알약을 만들 수 있습니다. .nav-justified 와 함께 .nav, .nav-tabs 또는 .nav, .nav-pills각기. 작은 화면에서는 탐색 링크가 쌓입니다.
다음 예제는 이것을 보여줍니다-
<p>Justified Nav Elements Example</p>
<ul class = "nav nav-pills nav-justified">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>
<br>
<br>
<br>
<ul class = "nav nav-tabs nav-justified">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>비활성화 된 링크
각각에 대해 .nav 클래스를 추가하면 .disabled 클래스, 그것은 또한 비활성화하는 회색 링크를 생성합니다 :hover 다음 예와 같이 상태-
<p>Disabled Link Example</p>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li class = "disabled"><a href = "#">iOS(disabled link)</a></li>
<li><a href = "#">VB.Net</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>
<br>
<br>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li class = "disabled"><a href = "#">VB.Net(disabled link)</a></li>
<li><a href = "#">Java</a></li>
<li><a href = "#">PHP</a></li>
</ul>이 클래스는 <a>의 기능이 아닌 모양 만 변경합니다. 여기에서 링크를 비활성화하려면 사용자 정의 JavaScript를 사용하십시오.
드롭 다운
탐색 메뉴는 드롭 다운 메뉴와 유사한 구문을 공유합니다. 기본적으로 일부 데이터 속성과 함께 작동하는 앵커가있는 목록 항목이 있습니다..dropdown-menu 수업.
드롭 다운이있는 탭
탭에 드롭 다운을 추가하려면-
기본 클래스로 정렬되지 않은 기본 목록으로 시작하십시오. .nav
수업 추가 .nav-tabs.
이제 순서가 지정되지 않은 목록을 .dropdown-menu 수업.
<p>Tabs With Dropdown Example</p>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Java
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">Swing</a></li>
<li><a href = "#">jMeter</a></li>
<li><a href = "#">EJB</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</li>
<li><a href = "#">PHP</a></li>
</ul>드롭 다운이있는 약
알약으로 동일한 작업을 수행하려면 간단히 .nav-tabs 수업 .nav-pills 다음 예와 같이.
<p>Pills With Dropdown Example</p>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Java <span class = "caret"></span>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">Swing</a></li>
<li><a href = "#">jMeter</a></li>
<li><a href = "#">EJB</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</li>
<li><a href = "#">PHP</a></li>
</ul>navbar는 Bootstrap 사이트의 눈에 띄는 기능 중 하나입니다. Navbar는 애플리케이션 또는 사이트의 탐색 헤더 역할을하는 반응 형 '메타'구성 요소입니다. Navbar는 모바일보기에서 축소되고 사용 가능한 뷰포트 너비가 증가함에 따라 수평이됩니다. 기본적으로 탐색 모음에는 사이트 이름 및 기본 탐색에 대한 스타일이 포함되어 있습니다.
기본 Navbar
기본 navbar를 만들려면-
수업 추가 .navbar, .navbar-default <nav> 태그에.
더하다 role = "navigation" 접근성을 돕기 위해 위의 요소에 추가합니다.
헤더 클래스 추가 .navbar-header<div> 요소에. 클래스에 <a> 요소 포함navbar-brand. 이렇게하면 텍스트가 약간 더 커집니다.
navbar에 링크를 추가하려면 다음 클래스와 함께 정렬되지 않은 목록을 추가하기 만하면됩니다. .nav, .navbar-nav.
다음 예제는 이것을 보여줍니다-
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>반응 형 Navbar
navbar에 반응 형 기능을 추가하려면 축소하려는 콘텐츠를 클래스와 함께 <div>로 래핑해야합니다. .collapse, .navbar-collapse. 무너지는 성격은.navbar-toggle두 개의 데이터 요소를 특징으로합니다. 첫번째,data-toggle, 버튼으로 수행 할 작업을 JavaScript에 알리는 데 사용되며 두 번째는 data-target, 전환 할 요소를 나타냅니다. 그때
다음 예제는 이것을 보여줍니다-
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle"
data-toggle = "collapse" data-target = "#example-navbar-collapse">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div class = "collapse navbar-collapse" id = "example-navbar-collapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Navbar의 양식
Chapter Bootstrap Forms 의 기본 클래스 기반 양식을 사용하는 대신 탐색 모음에있는 양식을 사용하십시오..navbar-form수업. 이렇게하면 좁은 뷰포트에서 양식의 적절한 수직 정렬 및 축소 된 동작이 보장됩니다. 정렬 옵션 (구성 요소 정렬 섹션에 설명 됨)을 사용하여 navbar 콘텐츠 내 위치를 결정합니다.
다음 예제는 이것을 보여줍니다-
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<form class = "navbar-form navbar-left" role = "search">
<div class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</div>
<button type = "submit" class = "btn btn-default">Submit</button>
</form>
</div>
</nav>Navbar의 버튼
클래스를 사용하여 버튼을 추가 할 수 있습니다. .navbar-btn <form>에 있지 않은 <button> 요소를 탐색 모음에서 세로 중앙에 배치합니다. .navbar-btn <a> 및 <input> 요소에 사용할 수 있습니다.
사용하지 마세요 .navbar-btn내 <a> 요소 의 표준 버튼 클래스 도 .navbar-nav.
다음 예제는 이것을 보여줍니다-
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<form class = "navbar-form navbar-left" role = "search">
<div class = "form-group">
<input type = "text" class = "form-control" placeholder = "Search">
</div>
<button type = "submit" class = "btn btn-default">Submit Button</button>
</form>
<button type = "button" class = "btn btn-default navbar-btn">Navbar Button</button>
</div>
</nav>Navbar의 텍스트
요소에서 텍스트 문자열을 래핑하려면 클래스를 사용하십시오. .navbar-text. 일반적으로 적절한 행간 및 색상을 위해 <p> 태그와 함께 사용됩니다. 다음 예제는 이것을 보여줍니다-
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<p class = "navbar-text">Signed in as Thomas</p>
</div>
</nav>비 탐색 링크
일반 navbar 탐색 구성 요소 내에없는 표준 링크를 사용하려면 클래스를 사용하십시오. navbar-link 다음 예제와 같이 기본 및 역 네비게이션 바 옵션에 적절한 색상을 추가하려면-
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<p class = "navbar-text navbar-right">
Signed in as
<a href = "#" class = "navbar-link">Thomas</a>
</p>
</div>
</nav>구성 요소 정렬
유틸리티 클래스를 사용하여 탐색 링크, 양식, 버튼 또는 텍스트 와 같은 구성 요소를 탐색 모음에서 왼쪽이나 오른쪽으로 정렬 할 수 있습니다..navbar-left 또는 .navbar-right. 두 클래스 모두 지정된 방향으로 CSS float를 추가합니다. 다음 예제는 이것을 보여줍니다-
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<!--Left Align-->
<ul class = "nav navbar-nav navbar-left">
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class = "navbar-form navbar-left" role = "search">
<button type = "submit" class = "btn btn-default">Left align-Submit Button</button>
</form>
<p class = "navbar-text navbar-left">Left align-Text</p>
<!--Right Align-->
<ul class = "nav navbar-nav navbar-right">
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class = "navbar-form navbar-right" role = "search">
<button type = "submit" class = "btn btn-default">
Right align-Submit Button
</button>
</form>
<p class = "navbar-text navbar-right">Right align-Text</p>
</div>
</nav>상단에 고정
Bootstrap navbar는 위치가 동적 일 수 있습니다. 기본적으로 HTML에서의 위치에 따라 위치를 지정하는 블록 수준 요소입니다. 몇 가지 도우미 클래스를 사용하여 페이지 상단 또는 하단에 배치하거나 페이지와 함께 정적으로 스크롤하도록 할 수 있습니다.
navbar를 상단에 고정하려면 클래스를 추가하십시오. .navbar-fixed-top ~로 .navbar class. 다음 예제는 이것을 보여줍니다-
navbar가 페이지 본문의 다른 콘텐츠 위에 놓이는 것을 방지하려면 <body> 태그에 50 픽셀 이상의 패딩을 추가하거나 고유 한 값을 시도하십시오.
<nav class = "navbar navbar-default navbar-fixed-top" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>하단에 고정
페이지 하단에 navbar를 고정하려면 클래스를 추가하십시오. .navbar-fixed-bottom ~로 .navbar class. 다음 예제는 이것을 보여줍니다-
<nav class = "navbar navbar-default navbar-fixed-bottom" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class ="caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>정적 상단
페이지와 함께 스크롤되는 navbar를 만들려면 .navbar-static-top수업. 이 클래스는 <body>에 패딩을 추가 할 필요가 없습니다.
<nav class = "navbar navbar-default navbar-static-top" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>반전 Navbar
검은 색 배경과 흰색 텍스트가있는 반전 된 탐색 모음을 만들려면 .navbar-inverse 클래스 .navbar 다음 예제에서 설명하는 클래스-
navbar가 페이지 본문의 다른 콘텐츠 위에 놓이는 것을 방지하려면 <body> 태그에 50 픽셀 이상의 패딩을 추가하거나 고유 한 값을 시도하십시오.
<nav class = "navbar navbar-inverse" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>이동 경로는 사이트에 대한 계층 기반 정보를 표시하는 좋은 방법입니다. 블로그의 경우 이동 경로에 게시 날짜, 카테고리 또는 태그가 표시 될 수 있습니다. 탐색 계층 내에서 현재 페이지의 위치를 나타냅니다.
부트 스트랩의 탐색 경로는 단순히 클래스가있는 정렬되지 않은 목록입니다. .breadcrumb. 구분 기호는 다음 클래스를 통해 CSS (bootstrap.min.css)에 의해 자동으로 추가됩니다.
.breadcrumb > li + li:before {
color: #CCCCCC;
content: "/ ";
padding: 0 5px;
}다음 예제는 이동 경로를 보여줍니다-
<ol class = "breadcrumb">
<li><a href = "#">Home</a></li>
<li><a href = "#">2013</a></li>
<li class = "active">November</li>
</ol>이 장에서는 Bootstrap이 지원하는 페이지 매김 기능에 대해 설명합니다. 페이지 매김, 정렬되지 않은 목록은 다른 많은 인터페이스 요소와 마찬가지로 Bootstrap에서 처리됩니다.
쪽수 매기기
다음 표에는 페이지 매김을 처리하기 위해 Bootstrap이 제공하는 클래스가 나열되어 있습니다.
| 수업 | 기술 | 샘플 코드 |
|---|---|---|
| .쪽수 매기기 | 페이지에서 페이지 매김을 얻으려면이 클래스를 추가하십시오. | |
| .disabled, .active | 다음을 사용하여 링크를 사용자 정의 할 수 있습니다. .disabled 클릭 할 수없는 링크 및 .active 현재 페이지를 나타냅니다. | |
| .pagination-lg, .pagination-sm | 이 클래스를 사용하여 다양한 크기의 항목을 얻으십시오. | |
기본 페이지 매김
다음 예제는 클래스 사용을 보여줍니다. .pagination 위의 표에서 논의-
<ul class = "pagination">
<li><a href = "#">«</a></li>
<li><a href = "#">1</a></li>
<li><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>상태
다음 예제는 클래스 사용을 보여줍니다. .disabled, .active 위의 표에서 논의-
<ul class = "pagination">
<li><a href = "#">«</a></li>
<li class = "active"><a href = "#">1</a></li>
<li class = "disabled"><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>사이징
다음 예제는 크기 조정을위한 클래스 사용을 보여줍니다. .pagination-* 위의 표에서 논의-
<ul class = "pagination pagination-lg">
<li><a href = "#">«</a></li>
<li><a href = "#">1</a></li>
<li><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>
<br>
<ul class = "pagination">
<li><a href = "#">«</a></li>
<li><a href = "#">1</a></li>
<li><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>
<br>
<ul class = "pagination pagination-sm">
<li><a href = "#">«</a></li>
<li><a href = "#">1</a></li>
<li><a href = "#">2</a></li>
<li><a href = "#">3</a></li>
<li><a href = "#">4</a></li>
<li><a href = "#">5</a></li>
<li><a href = "#">»</a></li>
</ul>휴대용 소형 무선 호출기
텍스트를 넘어서는 간단한 페이지 매김 링크를 만들어야하는 경우 호출기가 매우 잘 작동 할 수 있습니다. 페이지 매김 링크와 마찬가지로 호출기는 순서가 지정되지 않은 목록입니다. 기본적으로 링크는 중앙에 있습니다. 다음 표에는 Bootstrap이 호출기에 제공하는 클래스가 나열되어 있습니다.
| 수업 | 기술 | 샘플 코드 |
|---|---|---|
| .휴대용 소형 무선 호출기 | 호출기 링크를 가져 오려면이 클래스를 추가하십시오. | |
| .이전 다음 | 수업 사용 .previous 왼쪽 정렬 및 .next 링크를 오른쪽 정렬합니다. | |
| .disabled | 음소거 된 모양을 얻으려면이 클래스를 추가하십시오. | |
기본 호출기
다음 예제는 클래스 사용을 보여줍니다. .pager 위의 표에서 논의-
<ul class = "pager">
<li><a href = "#">Previous</a></li>
<li><a href = "#">Next</a></li>
</ul>정렬 된 링크
다음 예제는 정렬을위한 클래스 사용을 보여줍니다. .previous, .next 위의 표에서 논의-
<ul class = "pager">
<li class = "previous"><a href = "#">← Older</a></li>
<li class = "next"><a href = "#">Newer →</a></li>
</ul>상태
다음 예제는 클래스 사용을 보여줍니다. .disabled 위의 표에서 논의-
<ul class = "pager">
<li class = "previous disabled"><a href = "#">← Older</a></li>
<li class = "next"><a href = "#">Newer →</a></li>
</ul>이 장에서는 부트 스트랩 레이블을 다룹니다. 레이블은 페이지 수, 팁 또는 기타 마크 업을 제공하는 데 유용합니다. 수업 사용.label 다음 예와 같이 레이블을 표시하려면-
<h1>Example Heading <span class = "label label-default">Label</span></h1>
<h2>Example Heading <span class =" label label-default">Label</span></h2>
<h3>Example Heading <span class = "label label-default">Label</span></h3>
<h4>Example Heading <span class = "label label-default">Label</span></h4>다음과 같은 수정 자 클래스를 사용하여 레이블의 모양을 수정할 수 있습니다. label-default, label-primary, label-success, label-info, label-warning, label-danger 다음 예와 같이-
<span class = "label label-default">Default Label</span>
<span class = "label label-primary">Primary Label</span>
<span class = "label label-success">Success Label</span>
<span class = "label label-info">Info Label</span>
<span class = "label label-warning">Warning Label</span>
<span class = "label label-danger">Danger Label</span>이 장에서는 부트 스트랩 배지에 대해 설명합니다. 배지는 레이블과 유사합니다. 가장 큰 차이점은 모서리가 더 둥글다는 것입니다.
배지는 주로 새 항목이나 읽지 않은 항목을 강조하는 데 사용됩니다. 배지를 사용하려면<span class = "badge"> 링크, 부트 스트랩 탐색 등에.
다음 예제는 이것을 보여줍니다-
<a href = "#">Mailbox <span class = "badge">50</span></a>새 항목이나 읽지 않은 항목이 없으면 배지가 CSS를 통해 축소됩니다. :empty 선택기, 콘텐츠가 존재하지 않는 경우.
활성 탐색 상태
알약 및 목록 탐색의 활성 상태에 배지를 배치 할 수 있습니다. 배치하여이를 달성 할 수 있습니다.<span class = "badge"> 다음 예에서 설명하는 것처럼 활성 링크에-
<h4>Example for Active State in Pill </h4>
<ul class = "nav nav-pills">
<li class = "active"><a href = "#">Home <span class ="badge">42</span></a></li>
<li><a href = "#">Profile</a></li>
<li><a href = "#">Messages <span class = "badge">3</span></a></li>
</ul>
<br>
<h4>Example for Active State in navigations</h4>
<ul class = "nav nav-pills nav-stacked" style = "max-width: 260px;">
<li class = "active">
<a href = "#">
<span class = "badge pull-right">42</span>
Home
</a>
</li>
<li><a href = "#">Profile</a></li>
<li>
<a href = "#">
<span class = "badge pull-right">3</span>
Messages
</a>
</li>
</ul>이 장에서는 Bootstrap이 지원하는 Jumbotron 기능에 대해 설명합니다. 이름에서 알 수 있듯이이 구성 요소는 선택적으로 머리글 크기를 늘리고 랜딩 페이지 콘텐츠에 많은 여백을 추가 할 수 있습니다. Jumbotron을 사용하려면-
다음 클래스로 컨테이너 <div> 만들기 .jumbotron.
더 큰 <h1> 외에도 글꼴 두께 가 200px로 줄어 듭니다.
다음 예제는 이것을 보여줍니다-
<div class = "container">
<div class = "jumbotron">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p>
<a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
</p>
</div>
</div>전체 너비의 점보트론을 얻으려면 둥근 모서리없이 .jumbotron 모두 밖에서 수업 .container 클래스 대신 .container 다음 예에서와 같이-
<div class = "jumbotron">
<div class = "container">
<h1>Welcome to landing page!</h1>
<p>This is an example for jumbotron.</p>
<p>
<a class = "btn btn-primary btn-lg" role = "button">Learn more</a>
</p>
</div>
</div>페이지 머리글은 페이지의 머리글 주위에 적절한 간격을 추가하는 멋진 작은 기능입니다. 이것은 여러 게시물 제목이 있고 각각에 구별을 추가하는 방법이 필요한 웹 페이지에서 특히 유용합니다. 페이지 헤더를 사용하려면 다음 클래스를 사용하여 제목을 <div>로 감싸십시오..page-header −
<div class = "page-header">
<h1>
Example page header
<small>Subtext for header</small>
</h1>
</div>
<p>This is a sample text.This is a sample text.This is a sample text. This is a sample text.</p>이 장에서는 부트 스트랩 축소판에 대해 설명합니다. 많은 사이트에서 이미지, 비디오, 텍스트 등을 그리드에 배치하는 방법이 필요하며 Bootstrap은 썸네일로이 작업을 쉽게 수행 할 수 있습니다. 부트 스트랩을 사용하여 썸네일을 만들려면-
클래스와 함께 <a> 태그 추가 .thumbnail 이미지 주위.
이렇게하면 4 픽셀의 패딩과 회색 테두리가 추가됩니다.
마우스를 올리면 애니메이션 광선이 이미지의 윤곽을 나타냅니다.
다음 예제는 기본 썸네일을 보여줍니다-
<div class = "row">
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</a>
</div>
</div>사용자 지정 콘텐츠 추가
이제 기본 썸네일이 있으므로 제목, 단락 또는 버튼과 같은 모든 종류의 HTML 콘텐츠를 썸네일에 추가 할 수 있습니다. 아래 단계를 따르십시오-
클래스가있는 <a> 태그를 변경하십시오. .thumbnail <div>에.
그 <div> 안에 필요한 것을 추가 할 수 있습니다. 이것은 <div>이므로 크기 조정에 기본 범위 기반 명명 규칙을 사용할 수 있습니다.
여러 이미지를 그룹화하려는 경우 순서가 지정되지 않은 목록에 배치하면 각 목록 항목이 왼쪽으로 이동합니다.
다음 예제는 이것을 보여줍니다-
<div class = "row">
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role =" button">
Button
</a>
</p>
</div>
</div>
<div class = "col-sm-6 col-md-3">
<div class = "thumbnail">
<img src = "/bootstrap/images/kittens.jpg" alt = "Generic placeholder thumbnail">
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
</div>이 장에서는 경고와 Bootstrap이 경고에 대해 제공하는 클래스에 대해 설명합니다. 경고는 사용자에게 메시지의 스타일을 지정하는 방법을 제공합니다. 일반적인 사용자 작업에 대한 상황 별 피드백 메시지를 제공합니다.
경고 할 닫기 아이콘 (선택 사항)을 추가 할 수 있습니다. 인라인 해고의 경우 Alerts jQuery 플러그인을 사용하십시오 .
래퍼 <div>를 만들고 클래스를 추가하여 기본 경고를 추가 할 수 있습니다. .alert 및 네 가지 상황 별 클래스 중 하나 (예 : .alert-success, .alert-info, .alert-warning, .alert-danger). 다음 예제는 이것을 보여줍니다-
<div class = "alert alert-success">Success! Well done its submitted.</div>
<div class = "alert alert-info">Info! take this info.</div>
<div class = "alert alert-warning">Warning ! Dont submit this.</div>
<div class = "alert alert-danger">Error ! Change few things.</div>해고 경고
해고 경보를 구축하려면-
래퍼 <div>를 만들고 클래스를 추가하여 기본 경고를 추가합니다. .alert 및 네 가지 상황 별 클래스 중 하나 (예 : .alert-success, .alert-info, .alert-warning, .alert-danger)
선택 사항 추가 .alert-dismissable 위의 <div> 클래스에.
닫기 버튼을 추가합니다.
다음 예제는 이것을 보여줍니다-
<div class = "alert alert-success alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Success! Well done its submitted.
</div>
<div class = "alert alert-info alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Info! take this info.
</div>
<div class = "alert alert-warning alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Warning ! Dont submit this.
</div>
<div class = "alert alert-danger alert-dismissable">
<button type = "button" class = "close" data-dismiss = "alert" aria-hidden = "true">
×
</button>
Error ! Change few things.
</div>data-dismiss = "alert" 데이터 속성 과 함께 <button> 요소를 사용해야 합니다.
경고의 링크
경고에서 링크를 얻으려면-
래퍼 <div>를 만들고 클래스를 추가하여 기본 경고를 추가합니다. .alert 및 네 가지 상황 별 클래스 중 하나 (예 : .alert-success, .alert-info, .alert-warning, .alert-danger)
사용 .alert-link 경고 내에서 일치하는 컬러 링크를 신속하게 제공하는 유틸리티 클래스.
<div class = "alert alert-success">
<a href = "#" class = "alert-link">Success! Well done its submitted.</a>
</div>
<div class = "alert alert-info">
<a href = "#" class = "alert-link">Info! take this info.</a>
</div>
<div class = "alert alert-warning">
<a href = "#" class = "alert-link">Warning ! Dont submit this.</a>
</div>
<div class = "alert alert-danger">
<a href = "#" class = "alert-link">Error ! Change few things.</a>
</div>이 장에서는 부트 스트랩 진행률 표시 줄에 대해 설명합니다. 진행률 표시 줄의 목적은 자산이로드 중이거나 진행 중이거나 페이지의 요소와 관련하여 수행중인 작업이 있음을 표시하는 것입니다.
진행률 표시 줄은 CSS3 전환 및 애니메이션을 사용하여 일부 효과를 얻습니다. 이러한 기능은 Internet Explorer 9 이하 또는 이전 버전의 Firefox에서 지원되지 않습니다. Opera 12는 애니메이션을 지원하지 않습니다.
기본 진행률 표시 줄
기본 진행률 표시 줄을 만들려면-
클래스가있는 <div> 추가 .progress.
다음으로 위의 <div> 안에 클래스가있는 빈 <div>를 추가합니다. .progress-bar.
너비가 백분율로 표시된 스타일 속성을 추가합니다. 예를 들어, style = "60 %"; 진행률 표시 줄이 60 %임을 나타냅니다.
아래의 예를 보겠습니다.
<div class = "progress">
<div class = "progress-bar" role = "progressbar" aria-valuenow = "60"
aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
</div>대체 진행률 표시 줄
다양한 스타일로 진행률 표시 줄을 만들려면-
클래스가있는 <div> 추가 .progress.
다음으로 위의 <div> 안에 클래스가있는 빈 <div>를 추가합니다. .progress-bar 및 수업 progress-bar-* *가 될 수있는 곳 success, info, warning, danger.
너비가 백분율로 표시된 스타일 속성을 추가합니다. 예를 들어, style = "60 %"; 진행률 표시 줄이 60 %임을 나타냅니다.
아래의 예를 보겠습니다.
<div class = "progress">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
<span class = "sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>
<div class = "progress">
<div class = "progress-bar progress-bar-danger" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
<span class = "sr-only">10% Complete (danger)</span>
</div>
</div>줄무늬 진행률 표시 줄
스트라이프 진행률 표시 줄을 만들려면-
클래스가있는 <div> 추가 .progress 과 .progress-striped.
다음으로 위의 <div> 안에 클래스가있는 빈 <div>를 추가합니다. .progress-bar 및 수업 progress-bar-* *가 될 수있는 곳 success, info, warning, danger.
너비가 백분율로 표시된 스타일 속성을 추가합니다. 예를 들어, style = "60 %"; 진행률 표시 줄이 60 %임을 나타냅니다.
아래의 예를 보겠습니다.
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
<span class = "sr-only">90% Complete (Sucess)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>
<div class = "progress progress-striped">
<div class = "progress-bar progress-bar-danger" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
<span class = "sr-only">10% Complete (danger)</span>
</div>
</div>애니메이션 진행률 표시 줄
애니메이션 진행률 표시 줄을 만들려면-
클래스가있는 <div> 추가 .progress 과 .progress-striped. 수업 추가.active ...에 .progress-striped.
다음으로 위의 <div> 안에 클래스가있는 빈 <div>를 추가합니다. .progress-bar.
너비가 백분율로 표시된 스타일 속성을 추가합니다. 예를 들어, style = "60 %"; 진행률 표시 줄이 60 %임을 나타냅니다.
이렇게하면 줄무늬가 오른쪽에서 왼쪽으로 애니메이션됩니다.
아래의 예를 보겠습니다.
<div class = "progress progress-striped active">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
</div>누적 진행률 표시 줄
여러 진행률 표시 줄을 쌓을 수도 있습니다. 여러 진행률 표시 줄을 같은 곳에 배치.progress 다음 예에서 볼 수 있듯이 스택하려면-
<div class = "progress">
<div class = "progress-bar progress-bar-success" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
<span class = "sr-only">40% Complete</span>
</div>
<div class = "progress-bar progress-bar-info" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
<span class = "sr-only">30% Complete (info)</span>
</div>
<div class = "progress-bar progress-bar-warning" role = "progressbar"
aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
<span class = "sr-only">20%Complete (warning)</span>
</div>
</div>이 장에서는 미디어 개체에 대해 설명합니다. 이들은 텍스트 콘텐츠와 함께 왼쪽 정렬 또는 오른쪽 정렬 이미지를 특징으로하는 다양한 유형의 구성 요소 (블로그 댓글, 트윗 등)를 구축하기위한 추상 객체 스타일입니다. 미디어 개체의 목표는 이러한 정보 블록을 개발하기위한 코드를 대폭 짧게 만드는 것입니다.
미디어 개체 (가벼운 마크 업, 쉬운 확장 성)의 목표는 일부 간단한 마크 업에 클래스를 적용하여 달성됩니다. 미디어 객체에는 두 가지 형태가 있습니다.
.media −이 클래스는 콘텐츠 블록의 왼쪽 또는 오른쪽에 미디어 객체 (이미지, 비디오 및 오디오)를 플로팅 할 수 있습니다.
.media-list− 항목이 정렬되지 않은 목록의 일부가 될 목록을 준비하는 경우 클래스를 사용하십시오. 댓글 스레드 또는 기사 목록에 유용합니다.
아래의 기본 미디어 객체 예제를 보겠습니다.
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Media Object">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</div>미디어 목록의 예를 살펴 보겠습니다.
<ul class = "media-list">
<li class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg" alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
<p>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</p>
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class = "media">
<a class = "pull-left" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Nested media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</div>
</div>
</li>
<li class = "media">
<a class = "pull-right" href = "#">
<img class = "media-object" src = "/bootstrap/images/64.jpg"
alt = "Generic placeholder image">
</a>
<div class = "media-body">
<h4 class = "media-heading">Media heading</h4>
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
This is some sample text. This is some sample text.
</div>
</li>
</ul>목록 그룹 구성 요소의 목적은 목록에서 복잡하고 사용자 정의 된 콘텐츠를 렌더링하는 것입니다. 기본 목록 그룹을 얻으려면-
수업 추가 .list-group <ul> 요소에.
수업 추가 .list-group-item <li>에.
다음 예제는 이것을 보여줍니다-
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">24*7 support</li>
<li class = "list-group-item">Renewal cost per year</li>
</ul>목록 그룹에 배지 추가
목록 그룹 항목에 배지 구성 요소를 추가 할 수 있으며 자동으로 오른쪽에 배치됩니다. 그냥 추가<span class = "badge"><li> 요소 내. 다음 예제는 이것을 보여줍니다-
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">
<span class = "badge">New</span>
24*7 support
</li>
<li class = "list-group-item">Renewal cost per year</li>
<li class = "list-group-item">
<span class = "badge">New</span>
Disocunt Offer
</li>
</ul>목록 그룹 항목 연결
목록 항목 대신 앵커 태그를 사용하여 목록 그룹을 연결할 수 있습니다. <ul> 요소 대신 <div>를 사용해야합니다. 다음 예제는 이것을 보여줍니다-
<a href = "#" class = "list-group-item active">
Free Domain Name Registration
</a>
<a href = "#" class = "list-group-item">24*7 support</a>
<a href = "#" class = "list-group-item">Free Window Space hosting</a>
<a href = "#" class = "list-group-item">Number of Images</a>
<a href = "#" class = "list-group-item">Renewal cost per year</a>목록 그룹에 사용자 지정 콘텐츠 추가
위의 연결 목록 그룹에 모든 HTML 콘텐츠를 추가 할 수 있습니다. 다음 예제는 이것을 보여줍니다-
<div class = "list-group">
<a href = "#" class = "list-group-item active">
<h4 class = "list-group-item-heading">
Starter Website Package
</h4>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">
Free Domain Name Registration
</h4>
<p class = "list-group-item-text">
You will get a free domain registration with website pages.
</p>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">
24*7 support
</h4>
<p class = "list-group-item-text">
We provide 24*7 support.
</p>
</a>
</div>
<div class = "list-group">
<a href = "#" class = "list-group-item active">
<h4 class = "list-group-item-heading">
Business Website Package
</h4>
</a>
<a href = "#" class="list-group-item">
<h4 class = "list-group-item-heading">
Free Domain Name Registration
</h4>
<p class = "list-group-item-text">
You will get a free domain registration with website pages.
</p>
</a>
<a href = "#" class = "list-group-item">
<h4 class = "list-group-item-heading">24*7 support</h4>
<p class = "list-group-item-text">We provide 24*7 support.</p>
</a>
</div>이 장에서는 부트 스트랩 패널에 대해 설명합니다. 패널 구성 요소는 DOM 구성 요소를 상자에 넣을 때 사용됩니다. 기본 패널을 얻으려면 클래스를 추가하십시오..panel<div> 요소에. 수업 추가.panel-default 다음 예제와 같이이 요소에-
<div class = "panel panel-default">
<div class = "panel-body">
This is a Basic panel
</div>
</div>제목이있는 패널
패널 제목을 추가하는 방법에는 두 가지가 있습니다.
사용하다 .panel-heading 패널에 제목 컨테이너를 쉽게 추가 할 수 있습니다.
<h1>-<h6>를 .panel-title 미리 스타일이 지정된 제목을 추가하려면 클래스.
다음 예제는 두 가지 방법을 보여줍니다.
<div class = "panel panel-default">
<div class = "panel-heading">
Panel heading without title
</div>
<div class = "panel-body">
Panel content
</div>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">
<h3 class = "panel-title">
Panel With title
</h3>
</div>
<div class = "panel-body">
Panel content
</div>
</div>바닥 글이있는 패널
클래스가 포함 된 <div>에서 버튼 또는 보조 텍스트를 래핑하여 패널에 바닥 글을 추가 할 수 있습니다. .panel-footer. 다음 예제는이를 보여줍니다.
<div class = "panel panel-default">
<div class = "panel-body">
This is a Basic panel
</div>
<div class = "panel-footer">Panel footer</div>
</div>패널 바닥 글은 전경에있는 것이 아니므로 상황 별 변형을 사용할 때 색상과 테두리를 상속하지 않습니다.
패널 상황 별 대안
다음과 같은 상황 별 상태 클래스를 사용하십시오. panel-primary, panel-success, panel-info, panel-warning, panel-danger, 특정 컨텍스트에 대해 더 의미있는 패널을 만듭니다.
<div class = "panel panel-primary">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-success">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-info">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-warning">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>
<div class = "panel panel-danger">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
</div>테이블이있는 패널
패널 내에서 경계가없는 테이블을 가져 오려면 클래스를 사용하십시오. .table패널 내에서. 다음을 포함하는 <div>가 있다고 가정합니다..panel-body, 분리를 위해 테이블 상단에 추가 테두리를 추가합니다. 포함하는 <div>가없는 경우.panel-body그러면 구성 요소가 중단없이 패널 헤더에서 테이블로 이동합니다.
다음 예제는 이것을 보여줍니다-
<div class = "panel panel-default">
<div class = "panel-heading">
<h3 class = "panel-title">Panel title</h3>
</div>
<div class = "panel-body">
This is a Basic panel
</div>
<table class = "table">
<tr>
<th>Product</th>
<th>Price </th>
</tr>
<tr>
<td>Product A</td>
<td>200</td>
</tr>
<tr>
<td>Product B</td>
<td>400</td>
</tr>
</table>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">Panel Heading</div>
<table class = "table">
<tr>
<th>Product</th>
<th>Price </th>
</tr>
<tr>
<td>Product A</td>
<td>200</td>
</tr>
<tr>
<td>Product B</td>
<td>400</td>
</tr>
</table>
</div>목록 그룹이있는 패널
모든 패널에 목록 그룹을 포함 할 수 있습니다. 수업을 추가하여 패널 만들기.panel<div> 요소에. 수업 추가.panel-default이 요소에. 이제이 패널에 목록 그룹이 포함됩니다. 당신은 장에서 목록 그룹 만드는 법을 배울 수 목록 그룹 .
<div class = "panel panel-default">
<div class ="panel-heading">Panel heading</div>
<div class = "panel-body">
<p>This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content. This is a Basic panel content.
This is a Basic panel content.</p>
</div>
<ul class = "list-group">
<li class = "list-group-item">Free Domain Name Registration</li>
<li class = "list-group-item">Free Window Space hosting</li>
<li class = "list-group-item">Number of Images</li>
<li class = "list-group-item">24*7 support</li>
<li class = "list-group-item">Renewal cost per year</li>
</ul>
</div>웰은 콘텐츠가 움푹 들어간 것처럼 보이게하거나 페이지에 삽입 효과를주는 <div>의 컨테이너입니다. 우물을 만들려면 우물에 표시하려는 콘텐츠를 다음 클래스를 포함하는 <div>로 래핑하면됩니다..well. 다음 예제는 기본 우물을 보여줍니다-
<div class = "well">Hi, am in well !!</div>사이징
다음과 같은 선택적 클래스를 사용하여 우물의 크기를 변경할 수 있습니다. well-lg 또는 well-lg. 이 클래스는 다음과 함께 사용됩니다..well수업. 이것들은 패딩에 영향을 주어 클래스에 따라 우물을 더 크거나 작게 만듭니다.
<div class = "well well-lg">Hi, am in large well !!</div>
<div class = "well well-sm">Hi, am in small well !!</div>이전 장에서 설명한 구성 요소 Layout Components시작에 불과합니다. 부트 스트랩은 기능을 확장하고 사이트에 더 많은 상호 작용을 추가 할 수있는 12 개의 jQuery 플러그인과 함께 번들로 제공됩니다. Bootstrap의 JavaScript 플러그인을 시작하기 위해 고급 JavaScript 개발자가 아니어도됩니다. 부트 스트랩 데이터 API를 활용하면 대부분의 플러그인이 한 줄의 코드를 작성하지 않고도 트리거 될 수 있습니다.
부트 스트랩 플러그인은 두 가지 형태로 사이트에 포함될 수 있습니다.
Individually− Bootstrap의 개별 * .js 파일 사용. 일부 플러그인 및 CSS 구성 요소는 다른 플러그인에 의존합니다. 플러그인을 개별적으로 포함하는 경우 문서에서 이러한 종속성을 확인해야합니다.
또는 compiled (all at once)− bootstrap.js 또는 축소 된 bootstrap.min.js 사용 . bootstrap.js 및 bootstrap.min.js 모두 단일 파일에 모든 플러그인을 포함 하므로 둘 다 포함하지 마십시오 .
모든 플러그인은 jQuery에 의존합니다. 따라서 jQuery는 플러그인 파일 앞에 포함되어야합니다. bower.json 을 확인 하여 지원되는 jQuery 버전을 확인하십시오.
데이터 속성
포함 된 데이터 API를 사용하여 모든 부트 스트랩 플러그인에 액세스 할 수 있습니다. 따라서 플러그인 기능을 호출하기 위해 한 줄의 JavaScript를 포함 할 필요가 없습니다.
경우에 따라 데이터 API의이 기능을 해제하는 것이 바람직 할 수 있습니다. 데이터 API를 해제해야하는 경우 다음 JavaScript 줄을 추가하여 속성을 바인딩 해제 할 수 있습니다.
$(document).off('.data-api')특정 / 단일 플러그인을 끄려면 다음과 같이 data-api 네임 스페이스와 함께 플러그인 이름을 네임 스페이스로 포함하면됩니다.
$(document).off('.alert.data-api')프로그래밍 방식 API
Bootstrap 개발자는 JavaScript API를 통해서만 모든 플러그인을 사용할 수 있어야한다고 생각합니다. 모든 공용 API는 단일 체인 가능한 메소드이며 예를 들어 조치 된 컬렉션을 반환합니다.
$(".btn.danger").button("toggle").addClass("fat")모든 메소드는 선택적 옵션 객체, 특정 메소드를 대상으로하는 문자열 또는 아래에 표시된대로 아무것도 허용하지 않습니다 (기본 동작으로 플러그인을 시작 함).
// initialized with defaults
$("#myModal").modal() // initialized with no keyboard $("#myModal").modal({ keyboard: false })
// initializes and invokes show immediately
$("#myModal").modal('show')각 플러그인은 또한 원시 생성자를 Constructor속성 : $ .fn.popover.Constructor . 특정 플러그인 인스턴스를 얻으려면 요소에서 직접 검색하십시오.
$('[rel = popover]').data('popover').충돌 없음
Bootstrap 플러그인은 때때로 다른 UI 프레임 워크와 함께 사용할 수 있습니다. 이러한 상황에서 가끔 네임 스페이스 충돌이 발생할 수 있습니다. 이 부름을 극복하기 위해.noConflict 값을 되돌리려는 플러그인에서.
// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict() // give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton이벤트
부트 스트랩은 대부분의 플러그인 고유 작업에 대한 사용자 지정 이벤트를 제공합니다. 일반적으로 이러한 이벤트는 두 가지 형태로 나타납니다.
Infinitive form− 이벤트 시작시 트리거됩니다. 예 : show . 부정사 이벤트는 preventDefault 기능을 제공 합니다. 이것은 시작하기 전에 작업 실행을 중지하는 기능을 제공합니다.
$('#myModal').on('show.bs.modal', function (e) {
// stops modal from being shown
if (!data) return e.preventDefault()
})Past participle form− 이것은 작업이 완료되면 트리거됩니다. 예 :
전환 플러그인은 간단한 전환 효과를 제공합니다.
이 플러그인 기능을 개별적으로 포함하려면 다음이 필요합니다. transition.js다른 JS 파일과 함께 한 번. 그렇지 않으면 Bootstrap Plugins Overview 장에서 언급했듯이 bootstrap.js 또는 축소 된 bootstrap.min.js를 포함 할 수 있습니다 .
Transition.js 는 transitionEnd 이벤트와 CSS 전환 에뮬레이터에 대한 기본 도우미입니다. CSS 전환 지원을 확인하고 중단 된 전환을 포착하기 위해 다른 플러그인에서 사용됩니다.
사용 사례
전환 플러그인의 몇 가지 예는 다음과 같습니다.
모달의 슬라이딩 또는 페이드. Bootstrap Modal Plugin 장에서 예제를 찾을 수 있습니다 .
탭 페이드 아웃. Bootstrap Tab Plugin 장에서 예제를 찾을 수 있습니다 .
경고 페이드 아웃. 부트 스트랩 경고 장에서 예제를 찾을 수 있습니다 .
슬라이딩 캐 러셀 창. Bootstrap Carousel Plugin 장에서 예제를 찾을 수 있습니다 .
모달은 부모 창 위에 겹쳐진 자식 창입니다. 일반적으로 목적은 상위 창을 벗어나지 않고 상호 작용할 수있는 별도의 소스의 콘텐츠를 표시하는 것입니다. 자식 창은 정보, 상호 작용 등을 제공 할 수 있습니다.
이 플러그인 기능을 개별적으로 포함하려면 다음이 필요합니다. modal.js. 그렇지 않으면 Bootstrap Plugins Overview 장에서 언급했듯이 bootstrap.js 또는 축소 된 bootstrap.min.js를 포함 할 수 있습니다 .
용법
모달 플러그인의 숨겨진 콘텐츠를 전환 할 수 있습니다.
Via data attributes − 속성 설정 data-toggle = "modal" 버튼이나 링크와 같은 컨트롤러 요소에 data-target = "#identifier" 또는 href = "#identifier" 전환 할 특정 모달 (id = "식별자")을 대상으로 지정합니다.
Via JavaScript −이 기술을 사용하면 JavaScript 한 줄로 id = "identifier"인 모달을 호출 할 수 있습니다. −
$('#identifier').modal(options)예
정적 모달 창 예는 다음 예에 나와 있습니다.
<h2>Example of creating Modals with Twitter Bootstrap</h2>
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog"
aria-labelledby = "myModalLabel" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
<h4 class = "modal-title" id = "myModalLabel">
This Modal title
</h4>
</div>
<div class = "modal-body">
Add some text here
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->Details of the preceding code −
모달 창을 호출하려면 일종의 트리거가 있어야합니다. 버튼이나 링크를 사용할 수 있습니다. 여기서는 버튼을 사용했습니다.
위의 코드를 보면 <button> 태그에서 data-target = "#myModal"페이지에로드하려는 모달의 대상입니다. 이 코드를 사용하면 페이지에서 여러 모달을 만든 다음 각 모달에 대해 다른 트리거를 가질 수 있습니다. 이제 명확하게 말하면 동시에 여러 모달을로드하지 않지만 다른 시간에로드 할 페이지에 여러 모달을 만들 수 있습니다.
모달에서 주목해야 할 두 가지 클래스가 있습니다.
첫 번째는 .modal이는 단순히 <div>의 내용을 모달로 식별하는 것입니다.
그리고 두 번째는 .fade수업. 모달이 토글되면 콘텐츠가 페이드 인 및 페이드 아웃됩니다.
aria-labelledby = "myModalLabel", 속성은 모달 제목을 참조합니다.
속성 aria-hidden = "true" 트리거가 올 때까지 모달 창을 보이지 않게 유지하는 데 사용됩니다 (예 : 관련 버튼 클릭).
<div class = "modal-header">, modal-header는 모달 창의 헤더 스타일을 정의하는 클래스입니다.
class = "close"는 모달 창의 닫기 버튼에 대한 스타일을 설정하는 CSS 클래스 닫기입니다.
data-dismiss = "modal"은 맞춤 HTML5 데이터 속성입니다. 여기서는 모달 창을 닫는 데 사용됩니다.
class = "modal-body"는 모달 창의 본문에 대한 스타일을 설정하는 Bootstrap CSS의 CSS 클래스입니다.
class = "modal-footer"는 모달 창의 바닥 글 스타일을 설정하는 Bootstrap CSS의 CSS 클래스입니다.
data-toggle = "modal", HTML5 사용자 정의 데이터 속성 data-toggle은 모달 창을 여는 데 사용됩니다.
옵션
모달 창의 모양과 느낌을 사용자 정의하기 위해 데이터 속성 또는 JavaScript를 통해 전달할 수있는 특정 옵션이 있습니다. 다음 표에는 옵션이 나열되어 있습니다.
| 옵션 이름 | 유형 / 기본값 | 데이터 속성 이름 | 기술 |
|---|---|---|---|
| 배경 | 부울 또는 '정적'문자열 기본값 : true | 데이터 배경 | 사용자가 모달 외부를 클릭 할 때 모달이 닫히지 않도록하려면 배경에 정적을 지정하십시오. |
| 건반 | 부울 기본값 : true | 데이터 키보드 | 이스케이프 키를 누르면 모달을 닫습니다. 비활성화하려면 false로 설정합니다. |
| 보여 주다 | 부울 기본값 : true | 데이터 쇼 | 초기화되면 모달을 표시합니다. |
| 먼 | 경로 기본값 : false | 데이터 원격 | jQuery .load 메서드를 사용하여 모달 본문에 콘텐츠를 삽입합니다. 유효한 URL이있는 href가 추가되면 해당 콘텐츠가로드됩니다. 이에 대한 예가 아래에 나와 있습니다. |
행동 양식
다음은 modal ()과 함께 사용할 수있는 몇 가지 유용한 메서드입니다.
| 방법 | 기술 | 예 |
|---|---|---|
| Options − .modal (옵션) | 콘텐츠를 모달로 활성화합니다. 선택적 옵션 개체를 허용합니다. | |
| Toggle − .modal ( 'toggle') | 모달을 수동으로 전환합니다. | |
| Show − .modal ( 'show') | 모달을 수동으로 엽니 다. | |
| Hide − .modal ( 'hide') | 모달을 수동으로 숨 깁니다. | |
예
다음 예제는 방법의 사용법을 보여줍니다-
<h2>Example of using methods of Modal Plugin</h2>
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog"
aria-labelledby = "myModalLabel" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
<h4 class = "modal-title" id = "myModalLabel">
This Modal title
</h4>
</div>
<div class = "modal-body">
Press ESC button to exit.
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () { $('#myModal').modal({
keyboard: true
})});
</script>Esc 버튼을 클릭하면 모달 창이 종료됩니다.
이벤트
다음 표에는 모달에서 작동하는 이벤트가 나열되어 있습니다. 이러한 이벤트는 함수에 연결하는 데 사용할 수 있습니다.
| 행사 | 기술 | 예 |
|---|---|---|
| show.bs.modal | show 메서드가 호출 된 후 시작됩니다. | |
| shown.bs.modal | 모달이 사용자에게 표시되면 시작됩니다 (CSS 전환이 완료 될 때까지 기다립니다). | |
| hide.bs.modal | hide 인스턴스 메서드가 호출되면 시작됩니다. | |
| hidden.bs.modal | 모달이 사용자에게 숨겨지면 시작됩니다. | |
예
다음 예제는 이벤트의 사용법을 보여줍니다-
<h2>Example of using events of Modal Plugin</h2>
<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog"
aria-labelledby = "myModalLabel" aria-hidden = "true">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
×
</button>
<h4 class = "modal-title" id = "myModalLabel">
This Modal title
</h4>
</div>
<div class = "modal-body">
Click on close button to check Event functionality.
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">
Close
</button>
<button type = "button" class = "btn btn-primary">
Submit changes
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () { $('#myModal').modal('hide')})}); </script> <script> $(function () { $('#myModal').on('hide.bs.modal', function () {
alert('Hey, I heard you like modals...');})
});
</script>위 화면과 같이 닫기 버튼 ( 이벤트 숨기기) 을 클릭 하면 경고 메시지가 표시됩니다.
드롭 다운 플러그인을 사용하면 navbars, 탭, 알약 및 버튼과 같은 구성 요소에 드롭 다운 메뉴를 추가 할 수 있습니다.
이 플러그인 기능을 개별적으로 포함하려면 다음이 필요합니다. dropdown.js. 그렇지 않으면 Bootstrap Plugins Overview 장에서 언급했듯이 bootstrap.js 또는 축소 된 bootstrap.min.js를 포함 할 수 있습니다 .
용법
드롭 다운 플러그인의 숨겨진 콘텐츠를 전환 할 수 있습니다.
Via data attributes − 추가 data-toggle = "dropdown" 링크 또는 버튼에 연결하여 아래와 같이 드롭 다운을 토글합니다.
<div class = "dropdown">
<a data-toggle = "dropdown" href = "#">Dropdown trigger</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>링크를 그대로 유지해야하는 경우 (브라우저에서 JavaScript를 사용하지 않는 경우 유용함) data-target 대신 속성 href = "#"−
<div class = "dropdown">
<a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">
Dropdown
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>Via JavaScript − JavaScript를 통해 드롭 다운 토글을 호출하려면 다음 방법을 사용하세요. −
$('.dropdown-toggle').dropdown()예
Within Navbar
다음 예제는 navbar 내에서 드롭 다운 메뉴의 사용법을 보여줍니다-
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div>
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class="caret"></b>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>Within Tabs
다음 예제는 탭 내에서 드롭 다운 메뉴의 사용법을 보여줍니다-
<p>Tabs With Dropdown Example</p>
<ul class = "nav nav-tabs">
<li class = "active"><a href = "#">Home</a></li>
<li><a href = "#">SVN</a></li>
<li><a href = "#">iOS</a></li>
<li><a href = "#">VB.Net</a></li>
<li class = "dropdown">
<a class = "dropdown-toggle" data-toggle = "dropdown" href = "#">
Java
<span class = "caret"></span>
</a>
<ul class = "dropdown-menu">
<li><a href = "#">Swing</a></li>
<li><a href = "#">jMeter</a></li>
<li><a href = "#">EJB</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
</ul>
</li>
<li><a href = "#">PHP</a></li>
</ul>옵션
옵션이 없습니다.
행동 양식
드롭 다운 토글에는 드롭 다운을 표시하거나 숨기는 간단한 방법이 있습니다.
$().dropdown('toggle')예
다음 예제는 드롭 다운 플러그인 방법의 사용법을 보여줍니다.
<nav class = "navbar navbar-default" role = "navigation">
<div class = "navbar-header">
<a class = "navbar-brand" href = "#">TutorialsPoint</a>
</div>
<div id = "myexample">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#">iOS</a></li>
<li><a href = "#">SVN</a></li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle">Java <b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a id = "action-1" href = "#">jmeter</a></li>
<li><a href = "#">EJB</a></li>
<li><a href = "#">Jasper Report</a></li>
<li class = "divider"></li>
<li><a href = "#">Separated link</a></li>
<li class = "divider"></li>
<li><a href = "#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<script>
$(function(){
$(".dropdown-toggle").dropdown('toggle');
});
</script>Scroll spy (자동 업데이트 탐색) 플러그인을 사용하면 스크롤 위치에 따라 페이지 섹션을 대상으로 지정할 수 있습니다. 기본 구현에서는 스크롤 할 때 다음을 추가 할 수 있습니다..active 스크롤 위치에 따라 navbar에 클래스.
이 플러그인 기능을 개별적으로 포함하려면 다음이 필요합니다. scrollspy.js. 그렇지 않으면 Bootstrap Plugins Overview 장에서 언급했듯이 bootstrap.js 또는 축소 된 bootstrap.min.js를 포함 할 수 있습니다 .
용법
당신은 당신의 topbar 탐색에 scrollspy 동작을 추가 할 수 있습니다-
Via data attributes − 추가 data-spy = "scroll"감시하려는 요소 (일반적으로 본문)에. 그런 다음 속성 추가data-target 부트 스트랩의 부모 요소의 ID 또는 클래스 .nav구성 요소. 이 작업을 수행하려면 감시중인 링크의 ID와 일치하는 페이지 본문에 요소가 있어야합니다.
<body data-spy = "scroll" data-target = ".navbar-example">
...
<div class = "navbar-example">
<ul class = "nav nav-tabs">
...
</ul>
</div>
...
</body>Via JavaScript − 데이터 속성을 사용하는 대신 JavaScript로 스크롤 스파이를 호출 할 수 있습니다. 스파이 할 요소를 선택한 다음 .scrollspy() 기능-
$('body').scrollspy({ target: '.navbar-example' })예
다음 예제는 데이터 속성을 통해 scrollspy 플러그인의 사용을 보여줍니다-
<nav id = "navbar-example" class = "navbar navbar-default navbar-static" role = "navigation">
<div class = "navbar-header">
<button class = "navbar-toggle" type = "button" data-toggle = "collapse"
data-target = ".bs-js-navbar-scrollspy">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">Tutorial Name</a>
</div>
<div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class = "nav navbar-nav">
<li><a href = "#ios">iOS</a></li>
<li><a href = "#svn">SVN</a></li>
<li class = "dropdown">
<a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "navbarDrop1">
<li><a href = "#jmeter" tabindex = "-1">jmeter</a></li>
<li><a href = "#ejb" tabindex = "-1">ejb</a></li>
<li class = "divider"></li>
<li><a href = "#spring" tabindex = "-1">spring</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div data-spy = "scroll" data-target = "#navbar-example" data-offset = "0"
style = "height:200px; overflow:auto; position: relative;">
<h4 id = "ios">iOS</h4>
<p>iOS is a mobile operating system developed and distributed by Apple
Inc. Originally released in 2007 for the iPhone, iPod Touch, and Apple
TV. iOS is derived from OS X, with which it shares the Darwin
foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.</p>
<h4 id = "svn">SVN</h4>
<p>Apache Subversion which is often abbreviated as SVN, is a software
versioning and revision control system distributed under an open source
license. Subversion was created by CollabNet Inc. in 2000, but now it
is developed as a project of the Apache Software Foundation, and as
such is part of a rich community of developers and users.</p>
<h4 id = "jmeter">jMeter</h4>
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
<h4 id = "ejb">EJB</h4>
<p>Enterprise Java Beans (EJB) is a development architecture for building
highly scalable and robust enterprise level applications to be deployed
on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
<h4 id = "spring">Spring</h4>
<p>Spring framework is an open source Java platform that provides
comprehensive infrastructure support for developing robust Java
applications very easily and very rapidly.</p>
<p>Spring framework was initially written by Rod Johnson and was first
released under the Apache 2.0 license in June 2003.</p>
</div>옵션
옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 다음 표에는 옵션이 나열되어 있습니다.
| 옵션 이름 | 유형 / 기본값 | 데이터 속성 이름 | 기술 |
|---|---|---|---|
| 오프셋 | 숫자 기본값 : 10 | 데이터 오프셋 | 스크롤 위치를 계산할 때 위쪽에서 오프셋 할 픽셀입니다. |
행동 양식
.scrollspy('refresh') − 자바 스크립트 메소드를 통해 scrollspy를 호출 할 때 .refreshDOM을 업데이트하는 메소드입니다. 이는 DOM의 요소가 변경된 경우 (예 : 일부 요소를 추가하거나 제거한 경우) 유용합니다. 다음은이 방법을 사용하는 구문입니다.
$('[data-spy = "scroll"]').each(function () { var $spy = $(this).scrollspy('refresh')
})예
다음 예제는 .scrollspy('refresh') 방법-
<nav id = "myScrollspy" class = "navbar navbar-default navbar-static" role = "navigation">
<div class = "navbar-header">
<button class = "navbar-toggle" type = "button" data-toggle = "collapse"
data-target = ".bs-js-navbar-scrollspy">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">Tutorial Name</a>
</div>
<div class = "collapse navbar-collapse bs-js-navbar-scrollspy">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#ios">iOS</a></li>
<li><a href = "#svn">SVN</a></li>
<li class = "dropdown">
<a href = "#" id = "navbarDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "navbarDrop1">
<li><a href = "#jmeter" tabindex = "-1">jmeter</a></li>
<li><a href = "#ejb" tabindex = "-1">ejb</a></li>
<li class = "divider"></li>
<li><a href = "#spring" tabindex = "-1">spring</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div data-spy = "scroll" data-target = "#myScrollspy" data-offset = "0"
style = "height:200px; overflow:auto; position: relative;">
<div class = "section">
<h4 id = "ios">iOS<small><a href = "#" onclick = "removeSection(this);">
× Remove this section</a></small>
</h4>
<p>iOS is a mobile operating system developed and distributed by
Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
Apple TV. iOS is derived from OS X, with which it shares the Darwin
foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.</p>
</div>
<div class = "section">
<h4 id = "svn">SVN<small></small></h4>
<p>Apache Subversion which is often abbreviated as SVN, is a software
versioning and revision control system distributed under an open source
license. Subversion was created by CollabNet Inc. in 2000, but
now it is developed as a project of the Apache Software Foundation,
and as such is part of a rich community of developers and users.</p>
</div>
<div class = "section">
<h4 id = "jmeter">jMeter<small><a href = "#" onclick = "removeSection(this);">
× Remove this section</a></small>
</h4>
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
</div>
<div class = "section">
<h4 id = "ejb">EJB</h4>
<p>Enterprise Java Beans (EJB) is a development architecture for
building highly scalable and robust enterprise level applications
to be deployed on J2EE compliant Application Server such as
JBOSS, Web Logic etc.</p>
</div>
<div class = "section">
<h4 id = "spring">Spring</h4>
<p>Spring framework is an open source Java platform that provides
comprehensive infrastructure support for developing robust Java
applications very easily and very rapidly.</p>
<p>Spring framework was initially written by Rod Johnson and was first
released under the Apache 2.0 license in June 2003.</p>
</div>
</div>
<script type = "text/javascript">
$(function(){
removeSection = function(e) {
$(e).parents(".section").remove(); $('[data-spy = "scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});
}
$("#myScrollspy").scrollspy();
});
</script>이벤트
다음 표는 scrollspy와 함께 작동하는 이벤트를 나열합니다. 이 이벤트는 함수에 연결하는 데 사용할 수 있습니다.
| 행사 | 기술 | 예 |
|---|---|---|
| activate.bs.scrollspy | 이 이벤트는 scrollspy에 의해 새 항목이 활성화 될 때마다 발생합니다. | |
예
다음 예제는 activate.bs.scrollspy 이벤트 −
<html>
<head>
<link rel = "stylesheet" href = "bootstrap/css/bootstrap.min.css">
<script src = "bootstrap/scripts/jquery.min.js"></script>
<script src = "bootstrap/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){ removeSection = function(e) { $(e).parents(".subject").remove();
$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); } $("#Navexample").scrollspy();
// The event is fired when an item gets actived with the scrollspy
$("#Navexample").on('activate.bs.scrollspy', function () { var currentSection = $(".nav li.active > a").text();
$("#spyevent").html("Current Item being viewed >> " + currentSection);
})
});
</script>
<style>
.scroll-box {
height: 250px;
position: relative;
overflow: auto;
font-size:2em;
}
</style>
</head>
<body>
<div class = "container">
<nav id = "Navexample" class = "navbar navbar-default" role = "navigation">
<!-- Nav Bar -->
<div class = "navbar-header">
<button type = "button" class = "navbar-toggle"
data-toggle = "collapse" data-target = "#navbarCollapse">
<span class = "sr-only">Toggle navigation</span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<a class = "navbar-brand" href = "#">Tutorials Point</a>
</div>
<!-- Links and Sublinks -->
<div class = "collapse navbar-collapse" id = "navbarCollapse">
<ul class = "nav navbar-nav">
<li class = "active"><a href = "#subject-1">Subject 1</a></li>
<li><a href = "#subject-2">Subject 2</a></li>
<li class = "dropdown"><a href = "#" class = "dropdown-toggle"
data-toggle = "dropdown">Subject 3<b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a href = "#subject-3-1">Subject 3.1</a></li>
<li><a href = "#subject-3-2">Subject 3.2</a></li>
<li><a href = "#subject-3-3">Subject 3.3</a></li>
</ul>
</li>
<li><a href = "#subject-4">Subject 4</a></li>
</ul>
</div>
</nav>
<div class = "scroll-box" data-spy = "scroll" data-offset = "0">
<div class = "subject">
<h3 id = "subject-1">Subject 1
<small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr>
<div class = "subject">
<h3 id = "subject-2">Subject 2
<small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr>
<div class = "subject">
<h3 id = "subject-3">Subject 3
<small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p><
</div>
<hr>
<div class = "subject">
<h4 id = "subject-3-1">Subject 3.1
<small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = "subject">
<h4 id = "subject-3-2">Subject 3.2
<small><a href = "#" onclick = "removeSubject(this);"> Remove Subject ×</a></small>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class = "subject">
<h4 id = "subject-3-3">Subject 3.3
<small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr>
<div class = "subject">
<h3 id = "subject-4">Subject 4
<small><a href = "#" onclick = "removeSubject(this);">Remove Subject ×</a></small>
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<hr>
<h4 id = "spyevent" class = "text-info"></h4>
</div>
</body>
</html>탭은 부트 스트랩 탐색 요소 장에서 소개되었습니다 . 몇 가지 데이터 속성을 결합하여 탭 인터페이스를 쉽게 만들 수 있습니다. 이 플러그인을 사용하면 드롭 다운 메뉴를 통해서도 탭이나 알약의 로컬 콘텐츠 창을 통해 전환 할 수 있습니다.
이 플러그인 기능을 개별적으로 포함하려면 다음이 필요합니다. tab.js. 그렇지 않으면 Bootstrap Plugins Overview 장에서 언급했듯이 bootstrap.js 또는 축소 된 bootstrap.min.js를 포함 할 수 있습니다 .
용법
다음 두 가지 방법으로 탭을 활성화 할 수 있습니다.
Via data attributes − 추가해야합니다. data-toggle = "tab" 또는 data-toggle = "pill" 앵커에.
추가 nav 과 nav-tabs 탭에 클래스 ulBootstrap 탭 스타일 을 적용 하고nav 과 nav-pills수업은 알약 스타일 을 적용 합니다 .
<ul class = "nav nav-tabs">
<li><a href = "#identifier" data-toggle = "tab">Home</a></li>
...
</ul>Via JavaScript − 아래와 같이 Javscript를 사용하여 탭을 활성화 할 수 있습니다 −
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})다음은 개별 탭을 활성화하는 다양한 방법의 예입니다.
// Select tab by name
$('#myTab a[href = "#profile"]').tab('show')
// Select first tab
$('#myTab a:first').tab('show') // Select last tab $('#myTab a:last').tab('show')
// Select third tab (0-indexed)
$('#myTab li:eq(2) a').tab('show')페이드 효과
탭에 페이드 효과를 얻으려면 .fade 각각에 .tab-pane. 첫 번째 탭 창에도.in 초기 콘텐츠를 적절하게 페이드 인하려면-
<div class = "tab-content">
<div class = "tab-pane fade in active" id = "home">...</div>
<div class = "tab-pane fade" id = "svn">...</div>
<div class = "tab-pane fade" id = "ios">...</div>
<div class = "tab-pane fade" id = "java">...</div>
</div>예
데이터 속성과 페이드 효과를 사용하는 탭 플러그인의 예는 다음 예와 같습니다.
<ul id = "myTab" class = "nav nav-tabs">
<li class = "active">
<a href = "#home" data-toggle = "tab">
Tutorial Point Home
</a>
</li>
<li><a href = "#ios" data-toggle = "tab">iOS</a></li>
<li class = "dropdown">
<a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
<li><a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a></li>
<li><a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a></li>
</ul>
</li>
</ul>
<div id = "myTabContent" class = "tab-content">
<div class = "tab-pane fade in active" id = "home">
<p>Tutorials Point is a place for beginners in all technical areas.
This website covers most of the latest technologies and explains each of
the technology with simple examples.</p>
</div>
<div class = "tab-pane fade" id = "ios">
<p>iOS is a mobile operating system developed and distributed
by Apple Inc. Originally released in 2007 for the iPhone, iPod Touch,
and Apple TV. iOS is derived from OS X, with which it shares the
Darwin foundation. iOS is Apple's mobile version of the OS X
operating system used on Apple computers.</p>
</div>
<div class = "tab-pane fade" id = "jmeter">
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
</div>
<div class = "tab-pane fade" id = "ejb">
<p>Enterprise Java Beans (EJB) is a development architecture for
building highly scalable and robust enterprise level applications to be
deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
</div>
</div>행동 양식
.$().tab−이 방법은 탭 요소와 콘텐츠 컨테이너를 활성화합니다. 탭에는data-target 또는 href DOM에서 컨테이너 노드를 대상으로합니다.
<ul class = "nav nav-tabs" id = "myTab">
<li class = "active"><a href = "#identifier" data-toggle = "tab">Home</a></li>
.....
</ul>
<div class = "tab-content">
<div class = "tab-pane active" id = "home">...</div>
.....
</div>
<script>
$(function () { $('#myTab a:last').tab('show')
})
</script>예
다음 예제는 탭 플러그인 방법 사용을 보여줍니다. .tab. 여기 예제에서 두 번째 탭 iOS 가 활성화되었습니다.
<ul id = "myTab" class = "nav nav-tabs">
<li class = "active">
<a href = "#home" data-toggle = "tab">
Tutorial Point Home
</a>
</li>
<li><a href = "#ios" data-toggle = "tab">iOS</a></li>
<li class = "dropdown">
<a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
<li>
<a href = "#jmeter" tabindex = "-1" data-toggle = "tab">
jmeter
</a>
</li>
<li>
<a href = "#ejb" tabindex = "-1" data-toggle = "tab">
ejb
</a>
</li>
</ul>
</li>
</ul>
<div id = "myTabContent" class = "tab-content">
<div class = "tab-pane fade in active" id = "home">
<p>Tutorials Point is a place for beginners in all technical areas.
This website covers most of the latest technologies and explains each of
the technology with simple examples.</p>
</div>
<div class = "tab-pane fade" id = "ios">
<p>iOS is a mobile operating system developed and distributed by
Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
Apple TV. iOS is derived from OS X, with which it shares the Darwin
foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.</p>
</div>
<div class = "tab-pane fade" id = "jmeter">
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
</div>
<div class = "tab-pane fade" id = "ejb">
<p>Enterprise Java Beans (EJB) is a development architecture for
building highly scalable and robust enterprise level applications to be
deployed on J2EE compliant Application Server such as JBOSS,
Web Logic etc.</p>
</div>
</div>
<script>
$(function () { $('#myTab li:eq(1) a').tab('show');
});
</script>이벤트
다음 표는 탭 플러그인으로 작업 할 이벤트를 나열합니다. 이 이벤트는 함수에 연결하는 데 사용할 수 있습니다.
| 행사 | 기술 | 예 |
|---|---|---|
| show.bs.tab | 이 이벤트는 탭 표시시 발생하지만 새 탭이 표시되기 전에 발생합니다. 사용하다event.target 과 event.relatedTarget 활성 탭과 이전 활성 탭 (사용 가능한 경우)을 각각 타겟팅합니다. | |
| shown.bs.tab | 이 이벤트는 탭이 표시된 후 탭 표시시 발생합니다. 사용하다event.target 과 event.relatedTarget 활성 탭과 이전 활성 탭 (사용 가능한 경우)을 각각 타겟팅합니다. | |
예
다음 예제는 탭 플러그인 이벤트 사용을 보여줍니다. 여기 예에서는 현재 및 이전에 방문한 탭을 표시합니다.
<hr>
<p class = "active-tab"><strong>Active Tab</strong>: <span></span></p>
<p class = "previous-tab"><strong>Previous Tab</strong>: <span></span></p>
<hr>
<ul id = "myTab" class = "nav nav-tabs">
<li class = "active">
<a href = "#home" data-toggle = "tab">
Tutorial Point Home
</a>
</li>
<li><a href = "#ios" data-toggle = "tab">iOS</a></li>
<li class = "dropdown">
<a href = "#" id = "myTabDrop1" class = "dropdown-toggle" data-toggle = "dropdown">
Java
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "myTabDrop1">
<li>
<a href = "#jmeter" tabindex = "-1" data-toggle = "tab">jmeter</a>
</li>
<li>
<a href = "#ejb" tabindex = "-1" data-toggle = "tab">ejb</a>
</li>
</ul>
</li>
</ul>
<div id = "myTabContent" class = "tab-content">
<div class = "tab-pane fade in active" id = "home">
<p>Tutorials Point is a place for beginners in all technical areas.
This website covers most of the latest technologies and explains each of
the technology with simple examples.</p>
</div>
<div class = "tab-pane fade" id = "ios">
<p>iOS is a mobile operating system developed and distributed by
Apple Inc. Originally released in 2007 for the iPhone, iPod Touch, and
Apple TV. iOS is derived from OS X, with which it shares the Darwin
foundation. iOS is Apple's mobile version of the OS X operating system
used on Apple computers.</p>
</div>
<div class = "tab-pane fade" id = "jmeter">
<p>jMeter is an Open Source testing software. It is 100% pure Java
application for load and performance testing.</p>
</div>
<div class = "tab-pane fade" id = "ejb">
<p>Enterprise Java Beans (EJB) is a development architecture for
building highly scalable and robust enterprise level applications to be
deployed on J2EE compliant Application Server such as JBOSS, Web Logic etc.</p>
</div>
</div>
<script>
$(function(){ $('a[data-toggle = "tab"]').on('shown.bs.tab', function (e) {
// Get the name of active tab
var activeTab = $(e.target).text(); // Get the name of previous tab var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab); $(".previous-tab span").html(previousTab);
});
});
</script>도구 설명은 링크를 설명해야 할 때 유용합니다. 플러그인은 Jason Frame이 작성한 jQuery.tipsy 플러그인에서 영감을 받았습니다 . 툴팁은 이미지없이 작동하고 CSS 애니메이션으로 애니메이션되며 로컬 타이틀 저장을위한 데이터 속성으로 업데이트되었습니다.
이 플러그인 기능을 개별적으로 포함하려면 다음이 필요합니다. tooltip.js. 그렇지 않으면 Bootstrap Plugins Overview 장에서 언급했듯이 bootstrap.js 또는 축소 된 bootstrap.min.js를 포함 할 수 있습니다 .
용법
도구 설명 플러그인은 요청시 콘텐츠와 마크 업을 생성하고 기본적으로 트리거 요소 뒤에 도구 설명을 배치합니다. 다음 두 가지 방법으로 툴팁을 추가 할 수 있습니다.
Via data attributes − 툴팁을 추가하려면 data-toggle = "tooltip"앵커 태그에. 앵커의 제목은 툴팁의 텍스트가됩니다. 기본적으로 툴팁은 플러그인에 의해 맨 위로 설정됩니다.
<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over me</a>Via JavaScript − JavaScript를 통해 툴팁 트리거 −
$('#identifier').tooltip(options)툴팁 플러그인은 드롭 다운과 같은 css 플러그인이나 이전 장에서 논의한 다른 플러그인이 아닙니다. 이 플러그인을 사용하려면 반드시 jquery (자바 스크립트 읽기)를 사용하여 활성화해야합니다. 페이지의 모든 툴팁을 활성화하려면이 스크립트를 사용하십시오.
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });
예
다음 예제는 데이터 속성을 통한 툴팁 플러그인 사용을 보여줍니다.
<h4>Tooltip examples for anchors</h4>
This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"
title = "Tooltip on left"> Default Tooltip</a>.
This is a <a href = "#" class = "tooltip-test" data-toggle = "tooltip"
data-placement = "left" title = "Tooltip on left">Tooltip on Left</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "top"
title = "Tooltip on top">Tooltip on Top</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "bottom"
title = "Tooltip on bottom">Tooltip on Bottom</a>.
This is a <a href = "#" data-toggle = "tooltip" data-placement = "right"
title = "Tooltip on right">Tooltip on Right</a>
<br>
<h4>Tooltip examples for buttons</h4>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip" title = "Tooltip on left">
Default Tooltip
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "left" title = "Tooltip on left">
Tooltip on left
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "top" title = "Tooltip on top">
Tooltip on top
</button>
<button type = "button" class = "btn btn-default" data-toggle = "tooltip"
data-placement = "bottom" title = "Tooltip on bottom">
Tooltip on bottom
</button>
<button type = " button" class = " btn btn-default" data-toggle = "tooltip"
data-placement = "right" title = "Tooltip on right">
Tooltip on right
</button>
<script>
$(function () { $("[data-toggle = 'tooltip']").tooltip(); });
</script>옵션
Bootstrap Data API를 통해 추가하거나 JavaScript를 통해 호출 할 수있는 특정 옵션이 있습니다. 다음 표에는 옵션이 나열되어 있습니다.
| 옵션 이름 | 유형 / 기본값 | 데이터 속성 이름 | 기술 |
|---|---|---|---|
| 생기 | 부울 기본값 : true | 데이터 애니메이션 | 툴팁에 CSS 페이드 전환을 적용합니다. |
| HTML | 부울 기본값 : false | 데이터 HTML | 툴팁에 HTML을 삽입합니다. false이면 jQuery의 텍스트 메서드가 콘텐츠를 dom에 삽입하는 데 사용됩니다. XSS 공격이 걱정된다면 텍스트를 사용하세요. |
| 놓기 | 문자열 | 기능 기본값 : top | 데이터 배치 | 도구 설명을 배치하는 방법을 지정합니다 (즉, top | bottom | left | right | auto). 때 자동차가 지정되어, 동적으로 툴팁 방향을 전환합니다. 예를 들어 배치가 "자동 왼쪽"인 경우 도구 설명은 가능한 경우 왼쪽에 표시되고 그렇지 않으면 오른쪽에 표시됩니다. |
| 선택자 | 문자열 기본값 : false | 데이터 선택기 | 선택기가 제공되면 도구 설명 개체가 지정된 대상에 위임됩니다. |
| 표제 | 문자열 | 기능 기본값 : " | 데이터 제목 | title 속성이없는 경우 title 옵션은 기본 제목 값 입니다. |
| 방아쇠 | 문자열 기본값 : 'hover focus' | 데이터 트리거 | 툴팁이 트리거되는 방법을 정의합니다. click| hover | focus | manual. 여러 트리거를 전달할 수 있습니다. 공백으로 구분하십시오. |
| 함유량 | 문자열 | 기능 기본값 : '' | 데이터 내용 | data-content 속성이없는 경우 기본 콘텐츠 값 |
| 지연 | 번호 | 개체 기본값 : 0 | 데이터 지연 | 툴팁 표시 및 숨기기 (ms) 지연-수동 트리거 유형에는 적용되지 않습니다. 숫자를 입력하면 숨기기 / 보이기 모두에 지연이 적용됩니다. 객체 구조는- |
| 컨테이너 | 문자열 | false 기본값 : false | 데이터 컨테이너 | 특정 요소에 도구 설명을 추가합니다. 예 : 컨테이너 : 'body' |
행동 양식
다음은 툴팁에 대한 몇 가지 유용한 방법입니다.
| 방법 | 기술 | 예 |
|---|---|---|
Options − .tooltip (옵션) |
요소 컬렉션에 도구 설명 처리기를 연결합니다. | |
Toggle − .tooltip ( 'toggle') |
요소의 툴팁을 토글합니다. | |
Show − .tooltip ( 'show') |
요소의 툴팁을 표시합니다. | |
Hide − .tooltip ( 'hide') |
요소의 툴팁을 숨 깁니다. | |
Destroy − .tooltip ( 'destroy') |
요소의 툴팁을 숨기고 파괴합니다. | |
예
다음 예제는 데이터 속성을 통한 툴팁 플러그인 사용을 보여줍니다.
<div style = "padding: 100px 100px 10px;">
This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip"
title = "show">Tooltip on method show</a>.
This is a <a href = "#" class = "tooltip-hide" data-toggle = "tooltip"
data-placement = "left" title = "hide">Tooltip on method hide</a>.
This is a <a href = "#" class = "tooltip-destroy" data-toggle = "tooltip"
data-placement = "top" title = "destroy">Tooltip on method destroy</a>.
This is a <a href = "#" class = "tooltip-toggle" data-toggle = "tooltip"
data-placement = "bottom" title = "toggle">Tooltip on method toggle</a>.
<br><br><br><br><br><br>
<p class = "tooltip-options" >
This is a <a href = "#" data-toggle = "tooltip" title = "<h2>'am Header2
</h2>">Tooltip on method options</a>.
</p>
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-hide').tooltip('hide');});
$(function () { $('.tooltip-destroy').tooltip('destroy');});
$(function () { $('.tooltip-toggle').tooltip('toggle');});
$(function () { $(".tooltip-options a").tooltip({html : true });});
</script>
</div>이벤트
다음 표에는 도구 설명 플러그인과 함께 작동하는 이벤트가 나열되어 있습니다. 이 이벤트는 함수에 연결하는 데 사용할 수 있습니다.
| 행사 | 기술 | 예 |
|---|---|---|
| show.bs.tooltip | 이 이벤트는 show 인스턴스 메서드가 호출 될 때 즉시 발생합니다. | |
| shown.bs.tooltip | 이 이벤트는 툴팁이 사용자에게 표시되면 시작됩니다 (CSS 전환이 완료 될 때까지 기다립니다). | |
| hide.bs.tooltip | 이 이벤트는 hide 인스턴스 메서드가 호출되면 즉시 시작됩니다. | |
| hidden.bs.tooltip | 이 이벤트는 툴팁이 사용자에게 표시되지 않을 때 시작됩니다 (CSS 전환이 완료 될 때까지 기다립니다). | |
예
다음 예제는 데이터 속성을 통한 툴팁 플러그인 사용을 보여줍니다.
<h4>Tooltip examples for anchors</h4>
This is a <a href = "#" class = "tooltip-show" data-toggle = "tooltip"
title = "Default Tooltip">Default Tooltip</a>.
<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
alert("Alert message on show");
})});
</script>팝 오버는 툴팁과 유사하며 제목이 포함 된 확장 된보기를 제공합니다. 팝 오버를 활성화하려면 사용자가 요소 위에 커서를 올려 놓기 만하면됩니다. 팝 오버의 내용은 Bootstrap Data API를 사용하여 완전히 채울 수 있습니다. 이 방법에는 도구 설명이 필요합니다.
이 플러그인 기능을 개별적으로 포함하려면 다음이 필요합니다. popover.js그리고 그것은 툴팁 플러그인 의 의존성을 가지고 있습니다 . 그렇지 않으면 Bootstrap Plugins Overview 장에서 언급했듯이 bootstrap.js 또는 축소 된 bootstrap.min.js를 포함 할 수 있습니다 .
용법
팝 오버 플러그인은 요청시 콘텐츠와 마크 업을 생성하고 기본적으로 트리거 요소 뒤에 팝 오버를 배치합니다. 다음 두 가지 방법으로 팝 오버를 추가 할 수 있습니다.
Via data attributes − 팝 오버를 추가하려면 data-toggle = "popover"앵커 / 버튼 태그에. 앵커의 제목은 팝 오버의 텍스트가됩니다. 기본적으로 팝 오버는 플러그인에 의해 맨 위로 설정됩니다.
<a href = "#" data-toggle = "popover" title = "Example popover">
Hover over me
</a>Via JavaScript − 다음 구문을 사용하여 JavaScript를 통해 팝 오버 활성화 −
$('#identifier').popover(options)Popover 플러그인은 드롭 다운과 같은 css 플러그인이나 이전 장에서 논의한 다른 플러그인이 아닙니다. 이 플러그인을 사용하려면 반드시 jquery (자바 스크립트 읽기)를 사용하여 활성화해야합니다. 페이지의 모든 팝 오버를 활성화하려면이 스크립트를 사용하십시오.
$(function () { $("[data-toggle = 'popover']").popover(); });
예
다음 예제는 데이터 속성을 통한 팝 오버 플러그인의 사용을 보여줍니다.
<div class = "container" style = "padding: 100px 50px 10px;" >
<button type = "button" class = "btn btn-default" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "left"
data-content = "Some content in Popover on left">
Popover on left
</button>
<button type = "button" class = "btn btn-primary" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "top"
data-content = "Some content in Popover on top">
Popover on top
</button>
<button type = "button" class = "btn btn-success" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "bottom"
data-content = "Some content in Popover on bottom">
Popover on bottom
</button>
<button type = "button" class = "btn btn-warning" title = "Popover title"
data-container = "body" data-toggle = "popover" data-placement = "right"
data-content = "Some content in Popover on right">
Popover on right
</button>
</div>
<script>
$(function (){
$("[data-toggle = 'popover']").popover();
});
</script>옵션
Bootstrap Data API를 통해 추가하거나 JavaScript를 통해 호출 할 수있는 특정 옵션이 있습니다. 다음 표에는 옵션이 나열되어 있습니다.
| 옵션 이름 | 유형 / 기본값 | 데이터 속성 이름 | 기술 |
|---|---|---|---|
| 생기 | 부울 기본값-참 | 데이터 애니메이션 | 팝 오버에 CSS 페이드 전환을 적용합니다. |
| HTML | 부울 기본값-거짓 | 데이터 HTML | 팝 오버에 HTML을 삽입합니다. false이면 jQuery의 텍스트 메서드가 콘텐츠를 dom에 삽입하는 데 사용됩니다. XSS 공격이 걱정된다면 텍스트를 사용하세요. |
| 놓기 | 문자열 | 기능 기본값 − 상단 | 데이터 배치 | 팝 오버를 배치하는 방법을 지정합니다 (예 : top | bottom | left | right | auto). auto 가 지정 되면 팝 오버의 방향이 동적으로 변경됩니다. 예를 들어 배치가 "자동 왼쪽"이면 가능한 경우 팝 오버가 왼쪽에 표시되고 그렇지 않으면 오른쪽에 표시됩니다. |
| 선택자 | 문자열 기본값-거짓 | 데이터 선택기 | 선택기가 제공되면 팝 오버 개체가 지정된 대상에 위임됩니다. |
| 표제 | 문자열 | 기능 기본값- " | 데이터 제목 | title 속성이없는 경우 title 옵션은 기본 제목 값 입니다. |
| 방아쇠 | 문자열 기본값- '호버 포커스' | 데이터 트리거 | 팝 오버가 트리거되는 방법을 정의합니다. click| hover | focus | manual. 여러 트리거를 전달할 수 있습니다. 공백으로 구분하십시오. |
| 지연 | 번호 | 개체 기본값 − 0 | 데이터 지연 | 팝 오버를 표시하고 숨기는 지연 (ms)-수동 트리거 유형에는 적용되지 않습니다. 숫자를 입력하면 숨기기 / 보이기 모두에 지연이 적용됩니다. 객체 구조는- |
| 컨테이너 | 문자열 | 거짓 기본값-거짓 | 데이터 컨테이너 | 특정 요소에 팝 오버를 추가합니다. 예 : 컨테이너 : 'body' |
행동 양식
다음은 팝 오버에 대한 몇 가지 유용한 방법입니다.
| 방법 | 기술 | 예 |
|---|---|---|
Options − .popover (옵션) |
요소 컬렉션에 팝 오버 처리기를 연결합니다. | |
Toggle − .popover ( 'toggle') |
요소의 팝 오버를 토글합니다. | |
Show − .popover ( 'show') |
요소의 팝 오버를 표시합니다. | |
Hide − .popover ( 'hide') |
요소의 팝 오버를 숨 깁니다. | |
Destroy − .popover ( '파괴') |
요소의 팝 오버를 숨기고 파괴합니다. | |
예
다음 예제는 팝 오버 플러그인 방법을 보여줍니다-
<div class = "container" style = "padding: 100px 50px 10px;" >
<button type = "button" class = "btn btn-default popover-show"
title = "Popover title" data-container = "body"
data-toggle = "popover" data-placement = "left"
data-content = "Some content in Popover with show method">
Popover on left
</button>
<button type = "button" class = "btn btn-primary popover-hide"
title = "Popover title" data-container = "body"
data-toggle = "popover" data-placement = "top"
data-content = "Some content in Popover-hide method">
Popover on top
</button>
<button type = "button" class = "btn btn-success popover-destroy"
title = "Popover title" data-container = "body"
data-toggle = "popover" data-placement = "bottom"
data-content = "Some content in Popover-destroy method">
Popover on bottom
</button>
<button type = "button" class = "btn btn-warning popover-toggle"
title = "Popover title" data-container = "body"
data-toggle = "popover" data-placement = "top"
data-content = "Some content in Popover-toggle method">
Popover on right
</button>
<br><br><br><br><br><br>
<p class = "popover-options">
<a href = "#" type = "button" class = "btn btn-warning"
title = "<h2>Title</h2>" data-container = "body"
data-toggle = "popover" data-content = "
<h4>Some content in Popover-options method</h4>">
Popover
</a>
</p>
<script>
$(function () { $('.popover-show').popover('show');});
$(function () { $('.popover-hide').popover('hide');});
$(function () { $('.popover-destroy').popover('destroy');});
$(function () { $('.popover-toggle').popover('toggle');});
$(function () { $(".popover-options a").popover({html : true });});
</script>
</div>이벤트
다음 표에는 팝 오버 플러그인과 함께 작동하는 이벤트가 나열되어 있습니다. 이 이벤트는 함수에 연결하는 데 사용할 수 있습니다.
| 행사 | 기술 | 예 |
|---|---|---|
| show.bs.popover | 이 이벤트는 show 인스턴스 메서드가 호출 될 때 즉시 발생합니다. | |
| shown.bs.popover | 이 이벤트는 팝 오버가 사용자에게 표시되면 시작됩니다 (CSS 전환이 완료 될 때까지 기다립니다). | |
| hide.bs.popover | 이 이벤트는 hide 인스턴스 메서드가 호출되면 즉시 시작됩니다. | |
| hidden.bs.popover | 이 이벤트는 팝 오버가 사용자에게 숨겨 졌을 때 시작됩니다 (CSS 전환이 완료 될 때까지 기다립니다). | |
예
다음 예제는 Popover 플러그인 이벤트를 보여줍니다.
<div clas = "container" style = "padding: 100px 50px 10px;" >
<button type = "button" class = "btn btn-primary popover-show"
title = "Popover title" data-container = "body" data-toggle = "popover"
data-content = "Some content in Popover with show method">
Popover on left
</button>
</div>
<script>
$(function () { $('.popover-show').popover('show');});
$(function () { $('.popover-show').on('shown.bs.popover', function () {
alert("Alert message on show");
})});
</script>경고 메시지는 대부분 최종 사용자에게 경고 또는 확인 메시지와 같은 정보를 표시하는 데 사용됩니다. 경고 메시지 플러그인을 사용하여 모든 경고 메시지에 해제 기능을 추가 할 수 있습니다.
이 플러그인 기능을 개별적으로 포함하려면 다음이 필요합니다. alert.js. 그렇지 않으면 Bootstrap Plugins Overview 장에서 언급했듯이 bootstrap.js 또는 축소 된 bootstrap.min.js를 포함 할 수 있습니다 .
용법
다음 두 가지 방법으로 경고 해제를 활성화 할 수 있습니다.
Via data attributes − 데이터 API를 통해 해제하려면 data-dismiss = "alert" 닫기 버튼에 자동으로 알림 닫기 기능을 제공합니다.
<a class = "close" data-dismiss = "alert" href = "#" aria-hidden = "true">
×
</a>Via JavaScript − JavaScript를 통해 해제하려면 다음 구문을 사용하세요. −
$(".alert").alert()예
다음 예제는 데이터 속성을 통한 경고 플러그인 사용을 보여줍니다.
<div class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">
×
</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>옵션
여기에는 옵션이 없습니다.
행동 양식
다음은 경고 플러그인에 대한 몇 가지 유용한 방법입니다-
| 방법 | 기술 | 예 |
|---|---|---|
| .경보() | 이 메서드는 닫기 기능으로 모든 경고를 래핑합니다. | |
Close Method .alert ( 'close') |
모든 경고를 닫으려면이 방법을 추가하십시오. | |
닫았을 때 알림이 애니메이션으로 표시되도록하려면 알림이 .fade 과 .in 클래스가 이미 적용되었습니다.
예
다음 예제는 .alert() 방법-
<h3>Alert messages to demonstrate alert() method </h3>
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<div id = "myAlert" class = "alert alert-warning">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
<script type = "text/javascript">
$(function(){
$(".close").click(function(){ $("#myAlert").alert();
});
});
</script>다음 예제는 .alert('close') 방법-
<h3>Alert messages to demonstrate alert('close') method </h3>
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<div id = "myAlert" class = "alert alert-warning">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Warning!</strong> There was a problem with your network connection.
</div>
<script type = "text/javascript">
$(function(){ $(".close").click(function(){
$("#myAlert").alert('close');
});
});
</script>이 코드를 사용하여 Try it편집자. 닫기 기능이 모든 경고 메시지에 적용되는 것을 볼 수 있습니다. 즉, 경고 메시지를 닫으면 나머지 경고 메시지도 닫힙니다.
이벤트
다음 표에는 경고 플러그인과 함께 작동하는 이벤트가 나열되어 있습니다. 이 이벤트는 경고 기능에 연결하는 데 사용할 수 있습니다.
| 행사 | 기술 | 예 |
|---|---|---|
| close.bs.alert | 이 이벤트는 close 인스턴스 메서드가 호출 될 때 즉시 발생합니다 . | |
| closed.bs.alert | 이 이벤트는 경고가 닫히면 시작됩니다 (CSS 전환이 완료 될 때까지 기다림). | |
예
다음 예제는 경고 플러그인 이벤트를 보여줍니다.
<div id = "myAlert" class = "alert alert-success">
<a href = "#" class = "close" data-dismiss = "alert">×</a>
<strong>Success!</strong> the result is successful.
</div>
<script type = "text/javascript">
$(function(){
$("#myAlert").bind('closed.bs.alert', function () {
alert("Alert message box is closed.");
});
});
</script>버튼은 부트 스트랩 버튼 장에서 설명했습니다 . 이 플러그인을 사용하면 제어 버튼 상태와 같은 상호 작용을 추가하거나 도구 모음과 같은 더 많은 구성 요소에 대한 버튼 그룹을 만들 수 있습니다.
이 플러그인 기능을 개별적으로 포함하려면 다음이 필요합니다. button.js. 그렇지 않으면 Bootstrap Plugins Overview 장에서 언급했듯이 bootstrap.js 또는 축소 된 bootstrap.min.js를 포함 할 수 있습니다 .
로드 상태
버튼에 로딩 상태를 추가하려면 data-loading-text = "Loading..." 다음 예제와 같이 버튼 요소에 대한 속성으로-
<button id = "fat-btn" class = "btn btn-primary" data-loading-text = "Loading..." type = "button">
Loading state
</button>
<script>
$(function() {
$(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function() {
// $(this).button('reset');
});
});
});
</script>버튼을 클릭하면 다음 이미지와 같이 출력됩니다.
단일 토글
단일 버튼에서 토글을 활성화하려면 (즉, 버튼의 정상 상태를 누름 상태로 또는 그 반대로 변경) data-toggle = "button" 다음 예제와 같이 버튼 요소에 대한 속성으로-
<button type = "button" class = "btn btn-primary" data-toggle = "button">
Single toggle
</button>체크 박스
체크 박스 그룹을 생성하고 데이터 속성을 추가하여 토글을 추가 할 수 있습니다. data-toggle = "buttons" ~로 btn-group.
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary">
<input type = "checkbox"> Option 1
</label>
<label class = "btn btn-primary">
<input type = "checkbox"> Option 2
</label>
<label class = "btn btn-primary">
<input type = "checkbox"> Option 3
</label>
</div>라디오
마찬가지로 데이터 속성을 추가하여 라디오 입력 그룹을 만들고 여기에 토글을 추가 할 수 있습니다. data-toggle = "buttons" ~로 btn-group.
<div class = "btn-group" data-toggle = "buttons">
<label class = "btn btn-primary">
<input type = "radio" name =" options" id = "option1"> Option 1
</label>
<label class = "btn btn-primary">
<input type = "radio" name = "options" id = "option2"> Option 2
</label>
<label class = "btn btn-primary">
<input type = "radio" name = "options" id = "option3"> Option 3
</label>
</div>용법
버튼 플러그인을 활성화 할 수 있습니다. via JavaScript 아래와 같이-
$('.btn').button()옵션
옵션이 없습니다.
행동 양식
다음은 버튼 플러그인에 대한 유용한 방법 중 일부입니다.
| 방법 | 기술 | 예 |
|---|---|---|
버튼 ( 'toggle') |
푸시 상태를 전환합니다. 버튼에 활성화 된 모양을 제공합니다. 버튼을 사용하여 자동 전환을 활성화 할 수도 있습니다.data-toggle 속성. |
|
.button ( 'loading') |
로드 할 때 버튼이 비활성화되고 텍스트가 data-loading-text 버튼 요소의 속성 |
|
.button ( 'reset') |
버튼 상태를 재설정하여 원본 콘텐츠를 텍스트로 되돌립니다. 이 방법은 버튼을 기본 상태로 되돌려 야 할 때 유용합니다. |
|
.button (문자열) |
이 메서드의 문자열은 사용자가 선언 한 모든 문자열을 참조합니다. 버튼 상태를 재설정하고 새 콘텐츠를 가져 오려면이 방법을 사용하십시오. |
|
예
다음 예제는 위의 방법의 사용을 보여줍니다-
<h2>Click on each of the buttons to see the effects of methods</h2>
<h4>Example to demonstrate .button('toggle') method</h4>
<div id = "myButtons1" class = "bs-example">
<button type = "button" class = "btn btn-primary">Primary</button>
</div>
<h4>Example to demonstrate .button('loading') method</h4>
<div id = "myButtons2" class = "bs-example">
<button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
Primary
</button>
</div>
<h4>Example to demonstrate .button('reset') method</h4>
<div id = "myButtons3" class = "bs-example">
<button type = "button" class = "btn btn-primary" data-loading-text = "Loading...">
Primary
</button>
</div>
<h4>Example to demonstrate .button(string) method</h4>
<button type = "button" class = "btn btn-primary" id = "myButton4"
data-complete-text = "Loading finished">
Click Me
</button>
<script type = "text/javascript">
$(function () { $("#myButtons1 .btn").click(function(){
$(this).button('toggle'); }); }); $(function() {
$("#myButtons2 .btn").click(function(){ $(this).button('loading').delay(1000).queue(function() {
});
});
});
$(function() { $("#myButtons3 .btn").click(function(){
$(this).button('loading').delay(1000).queue(function() { $(this).button('reset');
});
});
});
$(function() { $("#myButton4").click(function(){
$(this).button('loading').delay(1000).queue(function() { $(this).button('complete');
});
});
});
</script>축소 플러그인을 사용하면 페이지의 축소 분할을 쉽게 만들 수 있습니다. 아코디언 내비게이션이나 콘텐츠 상자를 만드는 데 사용하든 다양한 콘텐츠 옵션을 사용할 수 있습니다.
이 플러그인 기능을 개별적으로 포함하려면 다음이 필요합니다. collapse.js. 또한 부트 스트랩 버전에 Transition Plugin 이 포함되어 있어야합니다 . 그렇지 않으면 Bootstrap Plugins Overview 장에서 언급했듯이 bootstrap.js 또는 축소 된 bootstrap.min.js를 포함 할 수 있습니다 .
축소 플러그인을 사용할 수 있습니다.
To create collapsible groups or accordion. 이것은 아래 샘플 예제에서와 같이 만들 수 있습니다.
<div class = "panel-group" id = "accordion">
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
Click me to expand. Click me again to collapse.Section 1
</a>
</h4>
</div>
<div id = "collapseOne" class = "panel-collapse collapse in">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
Click me to expand. Click me again to collapse.Section 2
</a>
</h4>
</div>
<div id = "collapseTwo" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
Click me to expand. Click me again to collapse.Section 3
</a>
</h4>
</div>
<div id = "collapseThree" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>data-toggle = "collapse" 구성 요소를 확장하거나 축소하기 위해 클릭하는 링크에 추가됩니다.
href 또는 data-target속성은 부모 구성 요소에 추가되며 값은 자식 구성 요소의 ID 입니다.
data-parent 아코디언과 같은 효과를 만들기 위해 속성이 추가되었습니다.
아코디언 마크 업없이 간단한 축소를 만들려면 -아래 샘플 예제와 같이 만들 수 있습니다.
<button type = "button" class = "btn btn-primary" data-toggle = "collapse" data-target = "#demo">
simple collapsible
</button>
<div id = "demo" class = "collapse in">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>예에서 볼 수 있듯이 아코디언과 달리 간단한 축소 가능 구성 요소를 만들었지 만 속성을 추가하지 않았습니다. data-parent.
용법
다음 표에는 축소 플러그인이 무거운 작업을 처리하는 데 사용하는 클래스가 나열되어 있습니다.
| Sr. 아니. | 클래스 설명 |
|---|---|
| 1 | .collapse 콘텐츠를 숨 깁니다. |
| 2 | .collapse.in 콘텐츠를 표시합니다. |
| 삼 | .collapsing 전환이 시작될 때 추가되고 완료되면 제거됩니다. |
두 가지 방법으로 축소 플러그인을 사용할 수 있습니다.
Via data attributes − 추가 data-toggle = "collapse" 그리고 data-target접을 수있는 요소의 제어를 자동으로 할당하려면 요소에 추가합니다. 그만큼data-target속성은 축소를 적용 할 CSS 선택기를 허용합니다. 수업을 추가해야합니다..collapse접을 수있는 요소에. 기본적으로 열리려면 추가 클래스를 포함하십시오..in.
축소 가능한 컨트롤에 아코디언과 같은 그룹 관리를 추가하려면 데이터 속성을 추가합니다. data-parent = "#selector".
Via JavaScript − 다음과 같이 JavaScript로 축소 방법을 활성화 할 수 있습니다. −
$('.collapse').collapse()옵션
데이터 속성 또는 JavaScript를 통해 전달할 수있는 특정 옵션이 다음 표에 나열되어 있습니다.
| 옵션 이름 | 유형 / 기본값 | 데이터 속성 이름 | 기술 |
|---|---|---|---|
| 부모의 | 선택기 기본값-거짓 | 데이터 상위 | selector가 false이면 지정된 부모 아래의 모든 축소 가능한 요소가 닫힙니다 (기존의 아코디언 동작과 유사-아코디언 그룹 클래스에 따라 다름). |
| 비녀장 | 부울 기본값-참 | 데이터 토글 | 호출시 접을 수있는 요소를 토글합니다. |
행동 양식
다음은 접을 수있는 요소와 함께 사용되는 몇 가지 유용한 메서드 목록입니다.
| 방법 | 기술 | 예 |
|---|---|---|
Options − .collapse (옵션) |
콘텐츠를 접을 수있는 요소로 활성화합니다. 선택적 옵션 개체를 허용합니다. | |
Toggle − .collapse ( 'toggle') |
접을 수있는 요소를 표시 또는 숨김으로 전환합니다. | |
Show − .collapse ( 'show') |
접을 수있는 요소를 표시합니다. | |
Hide − .collapse ( 'hide') |
접을 수있는 요소를 숨 깁니다. | |
예
다음 예제는 방법의 사용법을 보여줍니다-
<div class = "panel-group" id = "accordion">
<div class = "panel panel-default">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseOne">
Click me to expand. Click me again to collapse. Section 1--hide method
</a>
</h4>
</div>
<div id = "collapseOne" class = "panel-collapse collapse in">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-success">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseTwo">
Click me to expand. Click me again to collapse. Section 2--show method
</a>
</h4>
</div>
<div id = "collapseTwo" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-info">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseThree">
Click me to expand. Click me again to collapse. Section 3--toggle method
</a>
</h4>
</div>
<div id = "collapseThree" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
<div class = "panel panel-warning">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseFour">
Click me to expand. Click me again to collapse. Section 4--options method
</a>
</h4>
</div>
<div id = "collapseFour" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>
<script type = "text/javascript">
$(function () { $('#collapseFour').collapse({ toggle: false })}); $(function () { $('#collapseTwo').collapse('show')}); $(function () { $('#collapseThree').collapse('toggle')}); $(function () { $('#collapseOne').collapse('hide')});
</script>이벤트
다음 표에는 축소 기능과 함께 사용할 수있는 몇 가지 이벤트가 나열되어 있습니다.
| 행사 | 기술 | 예 |
|---|---|---|
| show.bs.collapse | show 메서드가 호출 된 후 시작됩니다. | |
| shown.bs.collapse | 이 이벤트는 축소 요소가 사용자에게 표시되면 시작됩니다 (CSS 전환이 완료 될 때까지 기다림). | |
| hide.bs.collapse | hide 인스턴스 메서드가 호출되면 시작됩니다. | |
| hidden.bs.collapse | 이 이벤트는 축소 요소가 사용자에게 숨겨지면 시작됩니다 (CSS 전환이 완료 될 때까지 기다림). | |
예
다음 예제는 이벤트의 사용법을 보여줍니다-
<div class = "panel-group" id = "accordion">
<div class = "panel panel-info">
<div class = "panel-heading">
<h4 class = "panel-title">
<a data-toggle = "collapse" data-parent = "#accordion" href = "#collapseexample">
Click me to expand. Click me again to collapse. Section --shown event
</a>
</h4>
</div>
<div id = "collapseexample" class = "panel-collapse collapse">
<div class = "panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo.
</div>
</div>
</div>
</div>
<script type = "text/javascript">
$(function () {
$('#collapseexample').on('show.bs.collapse', function () {
alert('Hey, this alert shows up when you expand it');
})
});
</script>Bootstrap 캐 러셀은 사이트에 슬라이더를 추가 할 수있는 유연하고 반응이 빠른 방법입니다. 반응 형일뿐만 아니라 콘텐츠는 이미지, iframe, 동영상 또는 원하는 거의 모든 유형의 콘텐츠를 허용 할 수있을만큼 유연합니다.
이 플러그인 기능을 개별적으로 포함하려면 다음이 필요합니다. carousel.js. 그렇지 않으면 Bootstrap Plugins Overview 장에서 언급했듯이 bootstrap.js 또는 축소 된 bootstrap.min.js를 포함 할 수 있습니다 .
예
아래의 간단한 슬라이드 쇼는 Bootstrap 캐 러셀 플러그인을 사용하여 캐 러셀과 같은 요소를 순환하는 일반적인 구성 요소를 보여줍니다. 캐 러셀을 구현하려면 마크 업이있는 코드를 추가하기 만하면됩니다. 데이터 속성이 필요 없으며 단순한 클래스 기반 개발입니다.
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>
</div>선택적 캡션
슬라이드에 캡션을 쉽게 추가 할 수 있습니다. .carousel-caption 모든 요소 .item. 옵션 HTML을 거기에 넣으면 자동으로 정렬되고 형식이 지정됩니다. 다음 예제는 이것을 보여줍니다-
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
<div class = "carousel-caption">This Caption 1</div>
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
<div class = "carousel-caption">This Caption 2</div>
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
<div class = "carousel-caption">This Caption 3</div>
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>+
</div>용법
Via data attributes − 데이터 속성을 사용하여 캐 러셀의 위치를 쉽게 제어 할 수 있습니다.
속성 data-slideprev 또는 next 키워드를 허용하여 현재 위치를 기준으로 슬라이드 위치를 변경합니다.
사용하다 data-slide-to 원시 슬라이드 인덱스를 캐 러셀에 전달 data-slide-to = "2", 슬라이드 위치를 0으로 시작하는 특정 인덱스로 이동합니다.
그만큼 data-ride = "carousel" 속성은 페이지로드시 시작되는 애니메이션으로 캐 러셀을 표시하는 데 사용됩니다.
Via JavaScript − 캐 러셀은 아래와 같이 JavaScript를 사용하여 수동으로 호출 할 수 있습니다. −
$('.carousel').carousel()옵션
데이터 속성 또는 JavaScript를 통해 전달할 수있는 특정 옵션이 다음 표에 나열되어 있습니다.
| 옵션 이름 | 유형 / 기본값 | 데이터 속성 이름 | 기술 |
|---|---|---|---|
| 간격 | 숫자 기본값-5000 | 데이터 간격 | 항목 자동 순환 사이의 지연 시간입니다. false이면 캐 러셀이 자동으로 순환되지 않습니다. |
| 중지 | 문자열 기본값- "hover" | 데이터 일시 중지 | mouseenter에서 캐 러셀 순환을 일시 중지하고 mouseleave에서 캐 러셀 순환을 다시 시작합니다. |
| 싸다 | 부울 기본값-참 | 데이터 랩 | 캐 러셀이 계속 순환해야하는지 또는 급정지해야하는지 여부입니다. |
행동 양식
다음은 캐 러셀 코드와 함께 사용할 수있는 유용한 메서드 목록입니다.
| 방법 | 기술 | 예 |
|---|---|---|
| .carousel (옵션) | 선택적 옵션 개체를 사용하여 캐 러셀을 초기화하고 항목 순환을 시작합니다. | |
| .carousel ( 'cycle') | 캐 러셀 항목을 왼쪽에서 오른쪽으로 순환합니다. | |
| .carousel ( 'pause') | 캐 러셀이 항목을 순환하는 것을 중지합니다. | |
| .carousel (숫자) | 캐 러셀을 특정 프레임으로 순환합니다 (0 기반, 배열과 유사). | |
| .carousel ( '이전') | 이전 항목으로 순환합니다. | |
| .carousel ( 'next') | 다음 항목으로 순환합니다. | |
예
다음 예제는 방법의 사용법을 보여줍니다-
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>
<!-- Controls buttons -->
<div style = "text-align:center;">
<input type = "button" class = "btn prev-slide" value = "Previous Slide">
<input type = "button" class = "btn next-slide" value = "Next Slide">
<input type = "button" class = "btn slide-one" value = "Slide 1">
<input type = "button" class = "btn slide-two" value = "Slide 2">
<input type = "button" class = "btn slide-three" value = "Slide 3">
</div>
</div>
<script>
$(function() { // Cycles to the previous item $(".prev-slide").click(function() {
$("#myCarousel").carousel('prev'); }); // Cycles to the next item $(".next-slide").click(function() {
$("#myCarousel").carousel('next'); }); // Cycles the carousel to a particular frame $(".slide-one").click(function() {
$("#myCarousel").carousel(0); }); $(".slide-two").click(function() {
$("#myCarousel").carousel(1); }); $(".slide-three").click(function() {
$("#myCarousel").carousel(2);
});
});
</script>이벤트
Bootstrap의 carousel 클래스는 다음 표에 나열된 carousel 기능에 연결하기위한 두 가지 이벤트를 노출합니다.
| 행사 | 기술 | 예 |
|---|---|---|
| slide.bs.carousel | 이 이벤트는 슬라이드 인스턴스 메서드가 호출 될 때 즉시 발생합니다. | |
| slid.bs.carousel | 이 이벤트는 캐 러셀이 슬라이드 전환을 완료하면 시작됩니다. | |
예
다음 예제는 이벤트의 사용법을 보여줍니다-
<div id = "myCarousel" class = "carousel slide">
<!-- Carousel indicators -->
<ol class = "carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class = "active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<!-- Carousel items -->
<div class = "carousel-inner">
<div class = "item active">
<img src = "/bootstrap/images/slide1.png" alt = "First slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide2.png" alt = "Second slide">
</div>
<div class = "item">
<img src = "/bootstrap/images/slide3.png" alt = "Third slide">
</div>
</div>
<!-- Carousel nav -->
<a class = "carousel-control left" href = "#myCarousel" data-slide = "prev">‹</a>
<a class = "carousel-control right" href = "#myCarousel" data-slide = "next">›</a>
</div>
<script>
$(function() {
$('#myCarousel').on('slide.bs.carousel', function () {
alert("This event fires immediately when the slide instance method" +"is invoked.");
});
});
</script>affix 플러그인을 사용하면 <div>를 페이지의 위치에 첨부 할 수 있습니다. 이 플러그인을 사용하여 고정 기능을 켜고 끌 수도 있습니다. 이것의 일반적인 예는 소셜 아이콘입니다. 위치에서 시작되지만 페이지가 특정 표시에 도달하면 <div>가 제자리에 고정되고 페이지의 나머지 부분과 함께 스크롤이 중지됩니다.
이 플러그인 기능을 개별적으로 포함하려면 다음이 필요합니다. affix.js. 그렇지 않으면 Bootstrap Plugins Overview 장에서 언급했듯이 bootstrap.js 또는 축소 된 bootstrap.min.js를 포함 할 수 있습니다 .
용법
아래에 설명 된대로 데이터 속성을 통해 또는 자체 JavaScript로 수동으로 affix 플러그인을 사용할 수 있습니다.
Via data attributes − 어떤 요소 에든 부착 동작을 쉽게 추가하려면 data-spy = "affix"감시하려는 요소에. 오프셋을 사용하여 요소의 고정을 전환 할시기를 정의합니다.
예
다음 예제는 데이터 속성을 통해 사용법을 보여줍니다-
<div class = "container">
<div class = "jumbotron">
<h1>Bootstrap Affix Plugin example</h1>
</div>
<div id = "myNav" data-spy = "affix" data-offset-top = "60" data-offset-bottom = "200">
<div class = "col-md-3">
<ul class = "nav nav-tabs nav-stacked affix" data-spy = "affix" data-offset-top = "190">
<li class = "active"><a href = "#one">Tutorial One</a></li>
<li><a href = "#two">Tutorial Two</a></li>
<li><a href = "#three">Tutorial Three</a></li>
</ul>
</div>
<div class = "col-md-9">
<h2 id = "one">Tutorial One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
dapibus nec turpis vel, semper malesuada ante. Vestibulum
id metus ac nisl bibendum scelerisque non non purus. Suspendisse
varius nibh non aliquet sagittis. In tincidunt orci sit amet
elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque
aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum
eu, tristique eget risus. Integer aliquet quam ut elit suscipit,
id interdum neque porttitor. Integer faucibus ligula.</p>
<p>Vestibulum quis quam ut magna consequat faucibus.
Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Phasellus auctor velit at lacus blandit, commodo iaculis justo
viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget
mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat.
Maecenas mattis lectus enim, quis tincidunt dui molestie euismod.
Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
<hr>
<h2 id = "two">Tutorial Two</h2>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis
dapibus orci. In dapibus velit blandit pharetra tincidunt.
Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed
fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem
convallis sed. Nam odio tortor, dictum quis malesuada at,
pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at
facilisis libero. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vestibulum bibendum
blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
tincidunt ante. Vivamus sem augue, hendrerit non sapien in,
mollis ornare augue.</p>
<hr>
<h2 id = "three">Tutorial Three</h2>
<p>Integer pulvinar leo id risus pellentesque vestibulum.
Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.
Donec sed nibh vitae lorem porttitor blandit in nec ante.
Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec
pharetra id arcu eget blandit. Proin imperdiet mattis augue in
porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse
tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus
lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl
semper tortor, vel sagittis lacus est consequat eros. Sed id pretium
nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit
amet mauris. </p>
<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante
id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus
turpis at accumsan tincidunt. Phasellus risus risus,
volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit
dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis,
tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis
pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id
vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse
potenti. Integer pellentesque neque et elementum tempus.
Curabitur bibendum in ligula ut rhoncus.</p>
<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo
sed ligula porta semper eu quis enim. Pellentesque pellentesque,
metus at facilisis hendrerit, lectus velit facilisis leo, quis
volutpat turpis arcu quis enim. Nulla viverra lorem elementum
interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
</div>
</div>
</div>Via JavaScript − 아래와 같이 JavaScript를 사용하여 수동으로 요소를 붙일 수 있습니다.
$('#myAffix').affix({
offset: {
top: 100, bottom: function () {
return (this.bottom = $('.bs-footer').outerHeight(true))
}
}
})예
다음 예제는 데이터 속성을 통해 사용법을 보여줍니다-
<div class = "container">
<div class = "jumbotron">
<h1>Bootstrap Affix Plugin example</h1>
</div>
<div>
<div class = "col-md-3">
<ul class = "nav nav-tabs nav-stacked affix" id = "myNav">
<li class = "active"><a href = "#one">Tutorial One</a></li>
<li><a href = "#two">Tutorial Two</a></li>
<li><a href = "#three">Tutorial Three</a></li>
</ul>
</div>
<div class = "col-md-9">
<h2 id = "one">Tutorial One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus
ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh
non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.
Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio
in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique
eget risus. Integer aliquet quam ut elit suscipit, id interdum
neque porttitor. Integer faucibus ligula.</p>
<p>Vestibulum quis quam ut magna consequat faucibus.
Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
Phasellus auctor velit at lacus blandit, commodo iaculis justo
viverra. Etiam vitae est arcu. Mauris vel congue dolor.
Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis,
bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu,
hendrerit tellus.</p>
<hr>
<h2 id = "two">Tutorial Two</h2>
<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris
quis dapibus orci. In dapibus velit blandit pharetra tincidunt.
Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
Sed viverra interdum bibendum. Donec ac sollicitudin dolor.
Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum
ligula sed consequat.</p>
<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem
convallis sed. Nam odio tortor, dictum quis malesuada at,
pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
diam velit egestas lacus, quis fermentum metus ante quis urna.
Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Vestibulum bibendum
blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
tincidunt ante. Vivamus sem augue, hendrerit non sapien in,
mollis ornare augue.</p>
<hr>
<h2 id = "three">Tutorial Three</h2>
<p>Integer pulvinar leo id risus pellentesque vestibulum.
Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.
Donec sed nibh vitae lorem porttitor blandit in nec ante.
Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
condimentum. Etiam in aliquam lectus. Nam vel sapien diam.
Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in
porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse
tincidunt risus quis dolor fringilla blandit. Ut sed sapien at
purus lacinia porttitor. Nullam iaculis, felis a pretium ornare,
dolor nisl semper tortor, vel sagittis lacus est consequat eros.
Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id,
tincidunt sit amet mauris.</p>
<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id
lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis
at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac,
tincidunt fringilla massa. Etiam hendrerit dolor eget ante
rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel,
semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies
ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum
ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse
potenti. Integer pellentesque neque et elementum tempus.
Curabitur bibendum in ligula ut rhoncus.</p>
<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo
sed ligula porta semper eu quis enim. Pellentesque pellentesque,
metus at facilisis hendrerit, lectus velit facilisis leo, quis
volutpat turpis arcu quis enim. Nulla viverra lorem elementum
interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>
</div>
</div>
</div>
<script type = "text/javascript">
$(function () {
$('#myNav').affix({
offset: {
top: 60
}
});
});
</script>CSS를 통한 포지셔닝
위의 두 경우 모두 콘텐츠 위치 지정을위한 CSS를 제공해야합니다. affix 플러그인은 각각 특정 상태 ( .affix, .affix-top 및 .affix-bottom)를 나타내는 세 가지 클래스 사이를 토글 합니다. 위의 사용 옵션 중 하나에 대해 CSS를 설정하려면 아래 단계를 따르십시오.
시작하려면 플러그인이 .affix-top요소가 최상위 위치에 있음을 나타냅니다. 이 시점에서는 CSS 포지셔닝이 필요하지 않습니다.
부착하려는 요소를지나 스크롤하면 실제 부착이 트리거됩니다. 여기가.affix 대체 .affix-top 및 세트 position: fixed; (Bootstrap의 코드 CSS에서 제공).
하단 오프셋이 정의 된 경우 대체해야하는 지나서 스크롤 .affix 와 .affix-bottom. 오프셋은 선택 사항이므로 오프셋을 설정하려면 적절한 CSS를 설정해야합니다. 이 경우 추가position: absolute; 필요할 땐.
옵션
다음 표에 나열된 데이터 속성 또는 JavaScript를 통해 전달할 수있는 특정 옵션이 있습니다.
| 옵션 이름 | 유형 / 기본값 | 데이터 속성 이름 | 기술 |
|---|---|---|---|
| 오프셋 | 번호 | 기능 | 개체 기본값 : 10 | 데이터 오프셋 | 스크롤 위치를 계산할 때 화면에서 오프셋 할 픽셀입니다. 단일 숫자가 제공되면 오프셋이 위쪽 및 아래쪽 방향 모두에 적용됩니다. 고유 한 아래쪽 및 위쪽 오프셋을 제공하려면 개체 오프셋 : {top : 10} 또는 offset : {top : 10, bottom : 5} 만 제공하면됩니다. 오프셋을 동적으로 계산해야하는 경우 함수를 사용하십시오. |
그리드 란?
그래픽 디자인에서 그리드는 콘텐츠를 구성하는 데 사용되는 일련의 교차 직선 (수직, 수평)으로 구성된 구조 (보통 2 차원)입니다. 인쇄 디자인에서 레이아웃 및 콘텐츠 구조를 디자인하는 데 널리 사용됩니다. 웹 디자인에서 HTML과 CSS를 사용하여 빠르고 효과적으로 일관된 레이아웃을 만드는 매우 효과적인 방법입니다.
부트 스트랩 그리드 시스템의 작동
그리드 시스템은 콘텐츠를 보관하는 일련의 행과 열을 통해 페이지 레이아웃을 만드는 데 사용됩니다. 부트 스트랩 그리드 시스템이 작동하는 방법은 다음과 같습니다.
행은 .container 적절한 정렬 및 패딩을위한 클래스.
행을 사용하여 가로 열 그룹을 만듭니다.
콘텐츠는 열 내에 배치되어야하며 열만 행의 직계 자식이 될 수 있습니다.
다음과 같은 미리 정의 된 그리드 클래스 .row and .col-xs-4그리드 레이아웃을 빠르게 만드는 데 사용할 수 있습니다. LESS 믹스 인은 더 의미있는 레이아웃에도 사용할 수 있습니다.
열은 패딩을 통해 거터 (열 내용 사이의 간격)를 만듭니다. 해당 패딩은 음의 여백을 통해 첫 번째 및 마지막 열의 행에서 오프셋됩니다..rows.
그리드 열은 확장하려는 사용 가능한 열 수를 12 개 지정하여 생성됩니다. 예를 들어 세 개의 동일한 열은 세 개의.col-xs-4.
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 그리드 | 이 예는 Bootstrap의 그리드 구조에 대해 나타냅니다. | 다운로드 |
Bootstrap은 테이블을 만들기위한 깔끔한 레이아웃을 제공합니다. Bootstrap에서 지원하는 테이블 요소 중 일부는 다음과 같습니다.
| Sr. 아니. | 태그 및 설명 |
|---|---|
| 1 | <table> 데이터를 표 형식으로 표시하기위한 래핑 요소 |
| 2 | <thead> 테이블 열에 레이블을 지정할 테이블 헤더 행 (<tr>)의 컨테이너 요소입니다. |
| 삼 | <tbody> 테이블 본문의 테이블 행 (<tr>)에 대한 컨테이너 요소입니다. |
| 4 | <tr> 단일 행에 표시되는 테이블 셀 집합 (<td> 또는 <th>)에 대한 컨테이너 요소입니다. |
| 5 | <td> 기본 테이블 셀. |
| 6 | <th> 열 (또는 범위 및 배치에 따라 행) 레이블을위한 특수 테이블 셀. <thead> 내에서 사용해야합니다. |
| 7 | <caption> 테이블에 포함 된 내용에 대한 설명 또는 요약입니다. |
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 테이블 구매 | 이 예는 Bootstrap의 구매 테이블 구조에 대해 나타냅니다. | 다운로드 |
| 계획표 | 이 예는 Bootstrap의 Plan 테이블 구조에 대해 나타냅니다. | 다운로드 |
| 갤러리가있는 테이블 | 이 예는 Bootstrap의 갤러리 테이블 구조를 나타냅니다. | 다운로드 |
양식 레이아웃
부트 스트랩은 다음과 같은 형태의 레이아웃을 제공합니다.
- 수직 (기본값) 양식
- 인라인 양식
- 수평 형태
수직 또는 기본 양식
기본 양식 구조는 부트 스트랩과 함께 제공됩니다. 개별 양식 컨트롤은 자동으로 일부 전역 스타일을받습니다. 기본 양식을 만들려면 다음을 수행하십시오.
부모 <form> 요소에 역할 양식 을 추가합니다 .
.form-group 클래스를 사용하여 <div>의 레이블과 컨트롤을 래핑 합니다. 이것은 최적의 간격을 위해 필요합니다.
모든 텍스트 <input>, <textarea> 및 <select> 요소 에 .form-control 클래스를 추가하십시오 .
인라인 양식
모든 요소가 인라인이고 왼쪽 정렬되고 레이블이 나란히있는 양식을 만들려면 .form-inline 클래스 를 <form> 태그에 추가합니다.
수평 형태
수평 양식은 마크 업의 양뿐만 아니라 양식의 표현에서도 다른 양식과 차별화됩니다. 가로 레이아웃을 사용하는 양식을 만들려면 다음을 수행하십시오.
.form-horizontal 클래스를 부모 <form> 요소에 추가합니다.
.form-group 클래스를 사용하여 <div>의 레이블과 컨트롤을 래핑 합니다.
.control-label 클래스를 레이블 에 추가하십시오 .
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 로그인 페이지 | 이 예는 부트 스트랩의 로그인 페이지 구조를 나타냅니다. | 다운로드 |
| 연락처 페이지 | 이 예는 Bootstrap의 연락처 페이지 구조에 대해 나타냅니다. | 다운로드 |
| 가입 페이지 | 이 예는 부트 스트랩의 등록 페이지 구조에 대해 나타냅니다. | 다운로드 |
부트 스트랩은 다음 표에 요약 된 스타일 버튼에 대한 몇 가지 옵션을 제공합니다.
| Sr. 아니. | 클래스 및 설명 |
|---|---|
| 1 | btn 기본 / 표준 버튼. |
| 2 | btn-primary 추가 시각적 가중치를 제공하고 일련의 버튼에서 기본 작업을 식별합니다. |
| 삼 | btn-success 성공 또는 긍정적 인 조치를 나타냅니다. |
| 4 | btn-info 정보 경고 메시지를위한 상황 별 버튼. |
| 5 | btn-warning 이 조치에주의해야 함을 나타냅니다. |
| 6 | btn-danger 위험하거나 잠재적으로 부정적인 행동을 나타냅니다. |
| 7 | btn-link 단추 동작을 유지하면서 단추를 링크처럼 보이게하여 단추를 강조하지 마십시오. |
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| IOS 버튼 | 이 예는 Bootstrap의 버튼 구조에 대해 나타냅니다. | 다운로드 |
| 이미지 버튼 | 이 예는 Bootstrap의 이미지 버튼 구조에 대해 나타냅니다. | 다운로드 |
| 그림자 버튼 | 이 예는 Bootstrap의 Shadow 버튼 구조에 대해 나타냅니다. | 다운로드 |
| 등록 버튼 | 이 예는 Bootstrap의 등록 버튼 구조에 대해 나타냅니다. | 다운로드 |
부트 스트랩은 이미지에 간단한 스타일을 적용하는 데 사용할 수있는 세 가지 클래스를 제공합니다.
.img- rounded- 이미지에 둥근 모서리를 제공하기 위해 border-radius : 6px 를 추가합니다 .
.img-circle − border-radius : 500px를 추가하여 전체 이미지를 둥글게 만듭니다 .
.img-thumbnail- 약간의 패딩과 회색 테두리를 추가합니다.
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 이미지 갤러리 | 이 예는 Bootstrap의 이미지 갤러리 구조에 대해 나타냅니다. | 다운로드 |
| 이미지 줌 | 이 예는 Bootstrap의 이미지 확대 / 축소 구조에 대해 나타냅니다. | 다운로드 |
| 팀 이미지 갤러리 | 이 예제는 Bootstrap의 그리드 이미지 구조에 대해 나타냅니다. | 다운로드 |
| 배경 이미지 | 이 예는 Bootstrap의 배경 이미지 구조에 대해 나타냅니다. | 다운로드 |
| 패널의 이미지 | 이 예는 Bootstrap의 이미지 구조에 대해 나타냅니다. | 다운로드 |
Bootstrap은보다 빠른 모바일 친화적 개발을 위해 몇 가지 도우미 클래스를 제공합니다. 이는 대형, 소형 및 중형 장치와 결합 된 미디어 쿼리를 통해 장치별로 콘텐츠를 표시하고 숨기는 데 사용할 수 있습니다.
이것을 아껴서 사용하고 동일한 사이트의 완전히 다른 버전을 생성하지 마십시오. Responsive utilities are currently only available for block and table toggling.
| 클래스 | 장치 |
|---|---|
| .visible-xs | 매우 작음 (768px 미만) 표시 |
| .visible-sm | 작게 (최대 768 픽셀) 표시 |
| .visible-md | 중간 (768 ~ 991 픽셀) 표시 |
| .visible-lg | 더 크게 (992 픽셀 이상) 표시 |
| .hidden-xs | 매우 작음 (768px 미만) 숨김 |
| .hidden-sm | 작게 (최대 768 픽셀) 숨김 |
| .hidden-md | 중간 (768 ~ 991 픽셀) 숨김 |
| .hidden-lg | 더 크게 (992 픽셀 이상) 숨김 |
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 카드 반응 형 | 이 예는 부트 스트랩의 카드 구조를 나타냅니다. | 다운로드 |
| 간단한 후기 | 이 예는 Bootstrap의 회원 평가 구조에 대해 나타냅니다. | 다운로드 |
| 비디오 그리드 | 이 예제는 부트 스트랩의 그리드 비디오 구조에 대해 나타냅니다. | 다운로드 |
| 배너 이미지 | 이 예는 Bootstrap의 배너 이미지 구조에 대해 나타냅니다. | 다운로드 |
| 얼굴 표시기가있는 회전 목마 | 이 예는 Bootstrap의 얼굴 표시기 구조가있는 Carousel에 대해 나타냅니다. | 다운로드 |
부트 스트랩은 탐색 요소 스타일 지정을위한 몇 가지 다른 옵션을 제공합니다. 모두 동일한 마크 업과 기본 클래스 인 .nav를 공유합니다. 부트 스트랩은 마크 업과 상태를 공유하는 도우미 클래스도 제공합니다. 수정 자 클래스를 교체하여 각 스타일간에 전환합니다.
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 탐색 데모 | 이 예는 Bootstrap의 탐색 구조에 대해 나타냅니다. | 다운로드 |
| 이미지 탐색 모음 | 이 예는 Bootstrap의 이미지 탐색 모음 구조에 대해 나타냅니다. | 다운로드 |
| Findcon 버튼 | 이 예는 Bootstrap의 findcon Button 구조에 대해 나타냅니다. | 다운로드 |
| 작은 Navbar | 이 예제는 Bootstrap의 Tiny Navbar 구조에 대해 나타냅니다. | 다운로드 |
Bootstrap은 블로그 스타일링을위한 몇 가지 다른 옵션을 제공합니다. 일부 블로그 요소는 댓글 상자, 블로그 게시물, 블로그 바닥 글 등입니다.
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 댓글 상자 데모 | 이 예는 Bootstrap의 주석 상자 구조에 대해 나타냅니다. | 다운로드 |
| 이미지가있는 블로그 게시물 | 이 예는 Bootstrap의 이미지가있는 블로그 게시물 요소 구조에 대해 나타냅니다. | 다운로드 |
| 블로그 바닥 글 | 이 예는 부트 스트랩의 블로그 바닥 글 구조에 대해 나타냅니다. | 다운로드 |
| 썸네일 | 이 예는 Bootstrap의 축소판 구조에 대해 나타냅니다. | 다운로드 |
머티리얼 디자인이란?
머티리얼 디자인은 플랫폼 전반의 시각, 동작 및 상호 작용 디자인을위한 포괄적 인 가이드입니다.
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 재료 상자 데모 | 이 예는 Bootstrap의 Materiel 카드 구조에 대해 나타냅니다. | 다운로드 |
| 재료 카드 | 이 예는 Bootstrap의 Materiel 카드 구조에 대해 나타냅니다. | 다운로드 |
| 재료 탐색 | 이 예는 Bootstrap의 Materiel 탐색 구조에 대해 나타냅니다. | 다운로드 |
| 받은 편지함 탐색 | 이 예는 Bootstrap의받은 편지함 탐색 구조를 나타냅니다. | 다운로드 |
Bootstrap은 탐색 슬라이더 스타일 지정을위한 몇 가지 다른 옵션을 제공합니다. 몇 가지 예는 다음과 같습니다.
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 슬라이드 메뉴 | 이 예는 부트 스트랩의 슬라이더 메뉴 구조에 대해 나타냅니다. | 다운로드 |
| 하위 메뉴 | 이 예는 Bootstrap의 Slider 하위 메뉴 구조에 대해 나타냅니다. | 다운로드 |
| 탭이있는 사이드 바 | 이 예제는 Bootstrap의 Slider With Tabs 구조를 나타냅니다. | 다운로드 |
| 탭 | 이 예는 부트 스트랩의 탭 구조에 대해 나타냅니다. | 다운로드 |
부트 스트랩은 타임 라인 스타일링을위한 몇 가지 다른 옵션을 제공합니다.
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 타임 라인 데모 | 이 예는 Bootstrap의 타임 라인 구조에 대해 나타냅니다. | 다운로드 |
| 단일 열 타임 라인 점선 | 이 예는 Bootstrap의 단일 열 타임 라인 점선 구조에 대해 나타냅니다. | 다운로드 |
| 타임 라인 단일 열 | 이 예는 Bootstrap의 TimeLine 단일 열 구조에 대해 나타냅니다. | 다운로드 |
| 타임 라인-점선 | 이 예제는 Timeline-Bootstrap의 점선 구조에 대해 나타냅니다. | 다운로드 |
경고는 사용자에게 메시지의 스타일을 지정하는 방법을 제공합니다. 일반적인 사용자 작업에 대한 상황 별 피드백 메시지를 제공합니다. 아래에 표시된 경고 예 중 일부-
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 페이지 알림 | 이 예는 Bootstrap의 페이지 경고 구조에 대해 나타냅니다. | 다운로드 |
| 경고 메시지 | 이 예는 부트 스트랩의 경고 메시지 구조를 나타냅니다. | 다운로드 |
| 색상과 반경이있는 작은 제안 | 이 예는 Bootstrap의 색상 및 반경 구조가있는 리틀 오퍼에 대해 나타냅니다. | 다운로드 |
| 상태 상자 | 이 예는 Bootstrap의 상태 상자 구조에 대해 나타냅니다. | 다운로드 |
Bootstrap은 관리자 인터페이스 스타일링을위한 몇 가지 다른 옵션을 제공합니다. 아래에 표시된 관리 인터페이스 중 일부-
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 반응 형 메일받은 편지함 및 작성 | 이 예는 부트 스트랩의 응답 메일받은 편지함 및 작성 구조에 대해 나타냅니다. | 다운로드 |
| 단순 관리자 | 이 예는 Bootstrap의 Simple Admin 인터페이스 구조를 나타냅니다. | 다운로드 |
| Datatable 용 부트 스트랩 | 이 예제는 Bootstrap의 Datatable 구조에 대한 Bootstrap에 대해 나타냅니다. | 다운로드 |
| 이메일 인터페이스 | 이 예는 부트 스트랩의 이메일 인터페이스 구조에 대해 나타냅니다. | 다운로드 |
Ajax는 웹 페이지 및 웹 서버와 통신하는 데 사용됩니다. 아래에 표시된 것처럼 ajax 및 부트 스트랩을 기반으로하는 몇 가지 예-
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 지불 양식 | 이 예는 부트 스트랩의 Ajax 결제 양식에 대해 나타냅니다. | 다운로드 |
| AJAX / DIV 마법사 | 이 예제는 부트 스트랩의 Ajax AJAX / DIV 마법사에 대해 나타냅니다. | 다운로드 |
부트 스트랩은 슬라이더에 대한 몇 가지 다른 옵션을 제공합니다. 아래 그림과 같이 탭 슬라이더-
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 탭 슬라이더 | 이 예제는 부트 스트랩의 탭 슬라이더에 대해 나타냅니다. | 다운로드 |
부트 스트랩은 캡션에 대한 몇 가지 다른 옵션을 제공합니다. 아래와 같이 썸네일 캡션 호버 효과-
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 캡션 호버 | 이 예는 Bootstrap의 이미지에 대한 캡션에 대해 나타냅니다. | 다운로드 |
부트 스트랩은지도에 대한 몇 가지 다른 옵션을 제공합니다. 지도의 샘플 예는 다음과 같습니다.
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 지도 | 이 예제는 부트 스트랩의 맵에 대해 나타냅니다. | 다운로드 |
Bootstrap은 캘린더에 대한 몇 가지 다른 옵션을 제공합니다. 달력의 예는 아래와 같습니다.
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 반응 형 날짜 페이지 관리자 | 이 예는 Bootstrap의 달력에 대해 나타냅니다. | 다운로드 |
| 의제 | 이 예는 Bootstrap의 캘린더 일정에 대해 나타냅니다. | 다운로드 |
| 간단한 날짜 선택기 | 이 예는 부트 스트랩의 날짜 선택기에 대해 나타냅니다. | 다운로드 |
| 달력 | 이 예는 Bootstrap의 달력에 대해 나타냅니다. | 다운로드 |
Bootstrap은 소셜 아이콘에 대해 몇 가지 다른 옵션을 제공합니다. 소셜 아이콘의 샘플 예는 다음과 같습니다.
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 회전 사회 아이콘 | 이 예제는 Bootstrap의 Spinning Social Icons 구조에 대해 나타냅니다. | 다운로드 |
| FontAwesome과 소셜 아이콘 | 이 예제는 Bootstrap에서 Awesome 글꼴이있는 Social 아이콘에 대해 나타냅니다. | 다운로드 |
| Zoom Social 아이콘 호버 애니메이션 | 이 예제는 Bootstrap의 Zoom Social 아이콘 호버 애니메이션에 대해 나타냅니다. | 다운로드 |
| 공유 버튼 | 이 예는 Bootstrap의 공유 버튼에 대해 나타냅니다. | 다운로드 |
Bootstrap은 아이콘에 대한 몇 가지 다른 옵션을 글꼴로 제공합니다. 아이콘의 샘플 예는 다음과 같습니다.
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 원형 아이콘 배지 | 이 예는 부트 스트랩의 원형 아이콘 배지에 대해 나타냅니다. | 다운로드 |
| 회전 및 뒤집기 | 이 예제는 Bootstrap의 애니메이션이있는 아이콘에 대해 나타냅니다. | 다운로드 |
| Ui-Kit-Metro Like Nav | 이 예제는 Bootstrap의 UI 애니메이션이있는 아이콘에 대해 나타냅니다. | 다운로드 |
| 지방과 편평한 파란색 버튼 | 이 예는 Bootstrap의 Fat 및 Flat 파란색 버튼에 대해 나타냅니다. | 다운로드 |
Bootstrap은 Bootstrap Elements의 스타일을 지정하기위한 몇 가지 다른 옵션을 제공합니다.
| 예 | 기술 | 다운로드 링크 |
|---|---|---|
| 머티리얼 디자인 스위치 | 이 예제는 Bootstrap의 Material Design Switch 구조에 대해 나타냅니다. | 다운로드 |
| Windows 8 부트 스트랩 모달 | 이 예는 Bootstrap의 Windows 8 Bootstrap 모달 구조에 대해 나타냅니다. | 다운로드 |
| 리본 버튼 | 이 예는 Bootstrap의 리본 버튼 구조에 대해 나타냅니다. | 다운로드 |
| 콜 아웃-클릭 유도 문안 | 이 예는 콜 아웃-부트 스트랩의 클릭 유도 문안 구조에 대해 나타냅니다. | 다운로드 |
| 버그를 제보하기 | 이 예는 부트 스트랩의 버그보고 구조를 나타냅니다. | 다운로드 |
| 마우스 오버 캡션이있는 캐 러셀 | 이 예는 Bootstrap의 Hover Captions 구조가있는 Carousel을 나타냅니다. | 다운로드 |
| 페이스 북 Wall | 이 예는 Bootstrap의 Facebook 벽 구조에 대해 나타냅니다. | 다운로드 |
| 모바일 경고 | 이 예는 Bootstrap의 모바일 경고 구조에 대해 나타냅니다. | 다운로드 |
| 둥근 페이지 매김 | 이 예제는 부트 스트랩의 둥근 페이지 매김에 대해 나타냅니다. | 다운로드 |
| 비디오 목록 썸네일 | 이 예는 Bootstrap의 비디오 목록 축소판에 대해 나타냅니다. | 다운로드 |
| 미디어 컨트롤 버튼 | 이 예는 부트 스트랩의 미디어 제어 버튼에 대해 나타냅니다. | 다운로드 |
| 단순 세로 탭 | 이 예는 부트 스트랩의 단순 세로 탭에 대해 나타냅니다. | 다운로드 |