시작하기

부트스트랩 (현재 v3.3.2) 은 빠르게 시작하는 몇가지 방법이 있습니다. 각 방법들은 다른 기술 수준과 사용예를 가지고 있습니다. 특정한 필요에 알맞은 방법을 찾기 위해 꼼꼼히 읽어보세요.

부트스트랩

컴파일되고 최소화된 CSS, 자바스크립트, 폰트들. 문서나 원본 파일들은 포함되어 있지 않습니다.

부트스트랩 다운로드

소스 코드

문서와 더불어 Less, 자바스크립트, 폰트 파일들. Less 컴파일러와 약간의 설정 이 필요합니다.

소스 다운로드

Sass

레일즈, Compass 를 사용하는 프로젝트이거나 Sass 만 사용하는 프로젝트에서 쉬운 사용을 위해 Sass 로 포팅된 부트스트랩.

Sass 다운로드

부트스트랩 CDN

MaxCDN 의 사람들은 고맙게도 부트스트랩의 CSS 와 자바스크립트를 CDN 으로 지원합니다. 이를 사용하려면 아래의 부트스트랩 CDN 링크들을 사용하세요.

<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

Bower 로 설치하기

Bower 를 사용하여 부트스트랩의 Less, CSS, 자바스크립트, 폰트들을 설치하고 관리할 수 있습니다:

$ bower install bootstrap

Npm 으로 설치하기

npm 을 이용하여 부트스트랩을 설치할 수도 있습니다:

$ npm install bootstrap

require('bootstrap') 은 부트스트랩 jQuery 플러그인을 모두 jQuery 객체로 불러올 것입니다. bootstrap 모듈은 아무것도 내보내기를 하지 않습니다. 당신은 수동으로 패키지의 최상위 디렉토리 안에 /js/*.js 파일들을 불러오는 것으로 부트스트랩의 jQuery 플러그인을 각각 불러올 수 있다.

부트스트랩의 package.json 은 다음 항목들을 비롯하여 일부 추가 메타정보를 가지고 있습니다:

less - 부트스트랩의 메인 Less 소스 파일의 경로
style - 부트스트랩의 최소화 되지 않은 CSS 의 경로. 기본 설정(맞춤화 되지 않음)으로 프리컴파일만 되어있음.

Less/Sass 를 위해서 autoprefixer 가 필요합니다.

부트스트랩은 CSS vendor prefixes 를 다루기 위해 Autoprefixer 을 사용합니다. 만약 부트스트랩을 Less/Sass 소스를 우리의 Gruntfile 을 사용하지 않고 컴파일할 것이라면, 당신은 Autoprefixer 를 당신의 빌드 프로세스에 통합하는 것이 필요할 것입니다. 만약 당신이 프리컴파일된 부트스트랩을 사용하거나 우리의 Gruntfile 을 사용한다면, 당신은 이것에 대해 걱정할 필요가 없습니다. 왜냐하면 Autoprefixer 가 우리의 Gruntfile 에는 이미 통합되어 있기 때문입니다.

부트스트랩은 2가지 형식으로 다운로드 가능합니다. 당신은 다음의 디렉토리들과 파일들을 찾을 수 있습니다. (논리적으로 그룹핑된 보통 자원과 컴파일되고 최소화된 버전이 포함된)

jQuery 가 필요합니다.

초보자 템플릿 에서 보여지는대로 모든 JavaScript 플러그인은 jQuery 를 필요로 하는 점을 유의하세요. 지원되는 jQuery 의 버전을 보려면 우리의 bower.json 을 참조하세요.

프리컴파일된 부트스트랩

다운로드하고, 압축을 해제하면 다음과 같은 (컴파일된)부트스트랩 구조를 볼 수 있습니다:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

이것은 부트스트랩이 어느 웹프로젝트에도 쉽게 적용하기 위한 가장 기본적인 형태입니다. 우리는 컴파일된 CSS 와 JS (bootstrap.*) 를 제공하고, 컴파일되고 최소화된 CSS 와 JS (bootstrap.min.*) 도 제공합니다. 그리고 Glyphicons 의 폰트 파일들과 부가적인 부트스트랩 테마 파일들도 있습니다. CSS 소스맵 (bootstrap.*.map) 은 일부 브라우저의 개발자 툴에서 사용 가능합니다. Glyphicons 의 폰트는 부가적인 부트스트랩 테마에 포함되어 있습니다.

부트스트랩 소스 코드

부트스트랩 소스 코드는 Less, 자바스크립트, 문서와 더불어 프리컴파일된 CSS, 자바스크립트, 폰트를 포함합니다. 좀 더 명확하게 하자면 다음과 같습니다:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/, js/, fonts/ 는 우리의 CSS, JS, 아이콘 폰트를 위한 소스 코드 입니다(각각). dist/ 폴더는 모든 것을 프리컴파일된 다운로드 섹션 상에 목록을 모두 포함합니다. docs/ 폴더는 우리의 문서와 부트스트랩 사용예제 examples/ 의 코드를 포함합니다. 그밖에, 다른 포함된 파일들은 패키지, 라이센스 정보, 개발을 지원을 제공합니다.

부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다.

Grunt 설치하기

Grunt 를 설치하려면, 당신은 먼저 node.js 를 다운로드하고 설치 해야합니다 (npm 포함). npm 은 node packaged modules 이며 node.js 상에서 개발 의존성을 관리하는 방법입니다.

그리고나서 다음의 명령줄:

npm install -g grunt-cli 으로 grunt-cli 을 전역적으로 설치합니다.
/bootstrap/ 디렉토리를 찾아서 npm install 을 실행합니다. npm 은 package.json 파일을 보고 필요한 로컬 의존성 프로젝트들을 자동으로 설치합니다.

완료되면, 당신은 명령줄로 제공되는 다양한 Grunt 명령어를 사용할 수 있습니다.

사용가능한 Grunt 명령어

`grunt dist` (그냥 CSS 와 자바스크립트를 컴파일)

컴파일되고 최소화된 CSS 와 자바스크립트 파일들과 함께 /dist/ 디렉토리를 재생성합니다. 부트스트랩 사용자로서, 보통 원하는 명령어 입니다.

`grunt watch` (지켜보기)

Less 소스 파일을 지켜보고 당신이 변경사항을 저장할 때마다 자동으로 CSS 로 다시 컴파일 합니다.

`grunt test` (테스트를 실행하기)

JSHint 를 실행하고 PhantomJS 로 브라우저 화면 없이 QUnit 테스트를 실행합니다.

`grunt docs` (문서를 빌드 & 테스트 하기)

jekyll serve 로 로컬에서 문서를 구동할 때 사용되는 CSS, 자바스크립트, 기타 자원을 빌드하고 테스트 합니다.

`grunt` (모든것을 빌드하고 테스트하기)

CSS 와 자바스크립트을 컴파일하고 최소화하고, 문서 웹사이트를 빌드하고, 문서에 대해서 HTML5 검사기를 실행하고, 맞춤 자원 등을 다시 만듭니다. Jekyll 가 필요합니다. 보통은 당신이 부트스트랩에 스스로 빠삭할때 필요합니다.

문제해결

의존성 프로젝트를 설치하거나 Grunt 명령어를 실행하는데 문제가 생긴다면, 먼저 npm 에 의해 생성된 /node_modules/ 디렉토리를 삭제하세요. 그러고 나서, npm install 을 다시 실행하세요.

기본 HTML 템플릿으로 시작하거나, 이 예제들을 수정하세요. 우리는 당신이 당신의 요구사항에 맞추어 우리의 템플릿과 예제들을 맞춤화하기를 바랍니다.

아래의 HTML 을 복사하여 최소의 부트스트랩 문서로 시작하세요.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 위 3개의 메타 태그는 *반드시* head 태그의 처음에 와야합니다; 어떤 다른 콘텐츠들은 반드시 이 태그들 *다음에* 와야 합니다 -->
    <title>부트스트랩 101 템플릿</title>

    <!-- 부트스트랩 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- IE8 에서 HTML5 요소와 미디어 쿼리를 위한 HTML5 shim 와 Respond.js -->
    <!-- WARNING: Respond.js 는 당신이 file:// 을 통해 페이지를 볼 때는 동작하지 않습니다. -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- 모든 컴파일된 플러그인을 포함합니다 (아래), 원하지 않는다면 필요한 각각의 파일을 포함하세요 -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

부트스트랩의 많은 콤포넌트를 사용한 기본 템플릿을 기반으로 하세요. 우리는 당신이 당신의 개인적인 프로젝트의 필요성에 따라 부트스트랩을 맞춤화하고 적용하기를 권장합니다.

프레임워크 사용하기

초보자 템플릿

별거 아니지만 기본입니다 : 콘테이너와 함께 합쳐진 CSS 와 자바스크립트.

부트스트랩 테마e

Load the optional Bootstrap theme for a visually enhanced experience.

그리드

4단계, 중첩 등의 그리드 레이아웃들의 몇가지 예제.

점보트론

네비게이션 바와 약간의 기본 그리드 컬럼들과 함께 점보트론을 중심으로 만드세요.

좁은 점보트론

좁은 콘테이너와 점보트론으로 맞춤화한 페이지를 만드세요.

움직이는 네비게이션

네비게이션 바

약간의 콘텐츠와 네비게이션 바가 포함된 완전 기본 템플릿.

정적 상단 네비게이션 바

약간의 콘텐츠와 정적 상단 네비게이션 바가 있는 완전 기본 템플릿.

고정된 네비게이션 바

약간의 콘텐츠와 고정된 상단 네비게이션 바가 있는 완전 기본 템플릿.

맞춤 콤포넌트

커버

간단하고 아름다운 메인페이지를 만들기 위한 1페이지 템플릿.

캐러셀

네비게이션바와 캐러셀을 맞춤화하고, 약간의 새로운 콤포넌트를 더함.

블로그

맞춤화 네비게이션, 헤더, 글자와 간단한 2열 블로그 레이아웃.

대시보드

고정된 사이드바와 네비게이션바, 관리자 대시보드를 위한 기본 구조.

로그인 페이지

간단한 로그인을 위한 맞춤화된 폼 레이아웃과 디자인.

양쪽정렬된 네비게이션

양쪽정렬된 링크로 맞춤 네비게이션바를 만듭니다. 조심하세요! 사파리에서는 잘 되지 않습니다.

밑에 붙는 하단

콘텐츠가 뷰포트보다 작아도 밑에 붙는 하단.

네비게이션 바와 밑에 붙는 하단

위에 붙는 고정된 네비게이션 바와 뷰포트 밑에 붙는 하단.

실험

비반응성 부트스트랩

문서에 나와있는대로 부트스트랩의 반응성을 간편하게 비활성화합니다.

오프캔버스

토글이 가능한 오프캔버스 네비게이션 메뉴를 만드세요.

Bootlint

Bootlint 는 공식적인 부트스트랩 HTML linter 툴입니다. 그것은 자동으로 부트스트랩을 사용하는 웹페이지에서 몇몇의 일반적인 HTML 실수를 공정하게 "바닐라" 방법으로 체크합니다. 바닐라 부트스트랩 콤포넌트/위젯은 확실한 구조에 순응하는 DOM 의 그들의 부분이 필요합니다. Bootlint 부트스트랩 콤포넌트의 인스턴스가 정확한 구조의 HTML 를 가졌는지 체크합니다. 당신의 부트스트랩 웹개발에 Bootlint 를 더하는 것을 고려해보세요. 당신의 프로젝트의 개발을 늦추는 실수가 없도록 합니다.

부트스트랩 개발의 최신정보를 얻고 유용한 자원들이 있는 커뮤니티에 들어와보세요.

공식 부트스트랩 블로그 를 읽고 구독합니다.
irc.freenode.net 서버의 ##bootstrap channel 에서 부트스트랩을 다루는 사람들과 채팅을 하세요.
부트스트랩 사용에 도움이 필요하다면, 스택오버플로우에서 twitter-bootstrap-3 태그를 사용하여 질문하세요.
부트스트랩 전시관 에서 부트스트랩으로 만들어진 사람들의 예제를 찾아보세요.

당신은 또한 최근의 이야깃거리와 뮤직비디오를 위해서 트위터에서 @getbootstrap 를 팔로우 할 수 있습니다.

부트스트랩은 자동으로 다양한 화면 크기에 따라 당신의 페이지를 조정합니다. 이 기능을 어떻게 끌 수 있는 방법이 여기에 있습니다. 그럼 당신의 페이지는 이 비반응성 예제 처럼 동작할 것입니다.

페이지 반응성을 끄는 순서

문서 내 CSS 에 명시된 뷰포트 <meta> 를 제거합니다.
.container의 width 를 하나의 너비로 각 그리드 단계를 위해 오버라이드 합니다. 예를 들어, width: 970px !important;. 이것은 기본 부트스트랩 CSS 다음에 와야 합니다. 당신은 부가적으로 미디어쿼리나 약간의 selector-fu 로 !important 를 피할 수 있습니다.
만약 네비게이션 바를 사용하려면, 모든 네비게이션 바의 가리기와 보이기 행위를 제거해주세요.
그리드 레이아웃을 위해, .col-xs-* 클래스를 사용해주세요. 걱정하지 마세요, 매우 작은 기기 그리드는 모든 해상도에서 비례합니다.

당신은 여전히 IE8 을 위해 Respond.js 가 필요합니다 (미디어 쿼리가 있기 때문에). 이것은 부트스트랩의 "모바일 사이트" 측면을 꺼지게 합니다.

반응성을 끈 부트스트랩 템플릿

우리는 예제에 이 순서들을 적용해두었습니다. 명시된 변경사항을 보려면 소스코드를 읽어보세요.

비반응성 예제 보기

2.x 에서 3.0 으로 이전

이전 버전에서 v3.x 으로 이전하려고 하세요? 이전 가이드 를 확인하세요.

부트스트랩은 최신 데스크탑과 모바일 브라우저에 최적으로 만들어졌습니다. 이것은 오래된 브라우저는 몇몇 콤포넌트들이 기능적으로는 작동하지만 다르게 보일 수 있음을 의미합니다.

지원되는 브라우저들

특별히, 우리는 다음의 최신 버전을 지원합니다: 특별히, 우리는 다음의 브라우저와 플랫폼의 최선 버전 을 지원합니다. 윈도우즈에서, 우리는 인터넷 익스플로러 8-11 을 지원합니다. 더 구체적인 지원 정보는 아래에서 제공합니다.

	크롬	파이어폭스	인터넷 익스플로러	오페라	사파리
안드로이드	지원됨	지원됨	없음	지원되지 않음	없음
iOS	지원됨	없음		지원되지 않음	지원됨
맥 OS X	지원됨	지원됨		지원됨	지원됨
윈도우즈	지원됨	지원됨	지원됨	지원됨	지원되지 않음

비공식적으로, 부트스트랩은 리눅스의 크로미움과 크롬, 리눅스의 파이어폭스, 인터넷 익스플로러 7 에서도 그런 대로 모양이 보이고 동작이 되긴 하지만, 공식적으로 지원하는 것은 아닙니다.

부트스트랩이 해결하려고 하는 약간의 브라우저 버그 목록을 보려면, 우리의 브라우저 버그 담벼락 을 확인하세요.

인터넷 익스플로러 8 과 9

인터넷 익스플로러 8 과 9 또한 지원됩니다만, 이 브라우저들이 완전하게 지원하지 않는 몇몇 CSS 속성과 HTML5 요소들을 주의해주세요. 또한, 인터넷 익스플로러 8 은 미디어쿼리를 지원하기 위해 Respond.js 의 사용을 필요합니다.

기능	인터넷 익스플로러 8	인터넷 익스플로러 9
`border-radius`	지원되지 않음	지원됨
`box-shadow`	지원되지 않음	지원됨
`transform`	지원되지 않음	지원됨, `-ms` 접두사 필요
`transition`	지원되지 않음
`placeholder`	지원되지 않음

CSS3 와 HTML5 기능들의 브라우저 지원에 관해 자세한 것은 Can I use... 을 방문하여 확인하세요.

인터넷 익스플로러 8 과 Respond.js

인터넷 익스플로러 8 를 위해 당신의 개발과 제품환경에서 Respond.js 를 사용할 때 다음의 경고를 조심하세요.

Respond.js 과 크로스도메인 CSS

다른 (서브)도메인에 호스트된 CSS 로 Respond.js 를 사용하는 것은, (예를 들면, CDN 상) 몇가지 추가 설정이 필요합니다. 자세한 것은 Respond.js 문서 를 보세요.

Respond.js 와 `file://`

브라우저 보안 규칙에 따라, Respond.js 은 file:// 프로토콜을 통해 페이지를 볼 때는 동작하지 않습니다 (로컬 HTML 파일을 열 때). IE 에서 반응 테스트를 하려면, 당신의 페이지를 HTTP(S) 로 보세요. 자세한 것은 Respond.js 문서 를 보세요.

Respond.js 와 `@import`

Respond.js 는 @import 를 통한 CSS 에서는 동작하지 않습니다. 특히, 몇몇 드루팔 환경설정은 @import 를 사용하는 것으로 알려져 있습니다. 자세한 것은 Respond.js 문서 를 보세요.

인터넷 익스플로러 8 과 박스사이징

IE8 은 min-width, max-width, min-height, max-height 와 결합된다면, box-sizing: border-box; 를 완전히 지원하지 않습니다. 그러한 이유로, v3.0.1 이후로, 우리는 더이상 .container 에 max-width 를 사용하지 않습니다.

인터넷 익스플로러 8 과 @font-face

IE8 은 :before 와 @font-face 을 같이 사용함에 있어 몇가지 이슈를 가지고 있습니다. 부트스트랩은 이러한 조합을 Glyphicons 에서 사용합니다. 윈도우상에 마우스가 없이 페이지가 로딩되고 캐쉬된다면 (i.e. 새로고침 버튼을 누르거나 iframe 에서 무언가를 불러올때) 페이지는 폰트를 불러오기 전에 렌더링이 될 것입니다. 페이지(body) 위에 마우스가 있는 것은 몇몇의 아이콘들을 보여줄 것이고, 또한 남은 아이콘들도 보여줄 것입니다. 자세한 것은 #13863 이슈에서 보세요.

IE 호환성 모드

부트스트랩은 오래된 인터넷 익스플로러 호환성 모드에서는 작동하지 않습니다. IE 를 위해 꼭 최신 렌더링 모드를 사용하세요, 당신의 페이지에 적절히 <meta> 태그를 포함하는 것을 고려하세요:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

디버깅 도구를 열어 문서 모드를 확인하세요: F12 키를 누름고 "문서 모드" 를 확인하세요.

이 태그는 지원되는 인터넷 익스플로러 버전에서 가능한 최적의 렌더링을 확실히 하기 위해 부트스트랩의 모든 문서와 예제에 포함됩니다.

자세한 것은 이 스택오버플로우 질문 을 보세요.

윈도우즈 8 과 윈도우즈 폰 8 에서 인터넷 익스플로러 10

인터넷 익스플로러 10 은 viewport width 로 기기 너비 를 구분하지 않습니다. 그래서 부트스트랩의 CSS 내의 미디어 쿼리들을 적절히 적용되지 않습니다. 보통 당신은 이것을 고치기 위해 CSS 조각을 추가할 수 있습니다:

@-ms-viewport       { width: device-width; }

하지만, 이것은 윈도우즈 폰 8 중 업데이트 3 (a.k.a. GDR3) 보다 오래된 버전에서는 동작하지 않습니다. 왜냐하면 그런 기기들은 좁은 "폰" 화면 대신 주로 데스크탑 화면을 보여주기 때문입니다. 이 문제를 해결하기 위해, 당신은 이 버그에 대한 차선책으로 다음의 CSS 와 자바스크립트를 포함해야 합니다..

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

더 많은 정보와 사용법 안내를 위해, 윈도우즈 폰 8 과 기기 너비 를 읽어보세요.

당부하자면, 우리도 이것을 데모로서 부트스트랩의 모든 문서와 예제들에 포함합니다.

사파리 퍼센트 반올림

OS X v7.1 이전의 사파리와 iOS v8.0 의 사파리의 렌더링 엔진은 .col-*-1 그리드 클래스들에서 긴 소수점 이하 자리에서 약간의 문제를 가지고 있습니다. 만약 당신이 12 개의 나눠진 컬럼들을 가지고 있다면, 당신은 다른 행의 컬럼들과 비교하여 짧은 것을 볼 수 있습니다. Safari/iOS 업그레이드를 하더라도, 당신은 몇가지 차선책이 있습니다:

당신의 마지막 그리드 컬럼에 강제적인 우측정렬을 위해 .pull-right 을 추가하세요
사파리를 위한 완벽한 반올림을 위해 비율을 수동으로 조정합니다. (첫번째 선택사항보다 더 어렵습니다)

모달, 네비게이션 바, 가상 키보드

오버플로우와 스크롤링

iOS 와 안드로이드에서 <body> 요소에 overflow: hidden 를 위한 지원은 매우 제한적입니다. 결과적으로, 당신이 두기기의 브라우저에서 모달의 상단이나 하단에 스크롤이 되어 있다면, <body> 내용이 스크롤 되기 시작할 것입니다.

가상 키보드

또한 당신의 모달에서 입력을 사용한다면 명심할 것이 있습니다. – iOS 는 가상 키보드가 실행될 때 고정 위치의 요소들이 업데이트 되지 않는 렌더링 버그가 있습니다. 여기에는 몇가지 차선책이 있는데, 당신의 요소에 position: absolute 를 포함하거나, 포커스시 수동적으로 위치를 잡을 수 있도록 타이머를 맞춰놓는 것이다, 당신의 어플리케이션에 어느 방법을 최적일지는 당신의 몫입니다.

네비게이션 바 드롭다운

.dropdown-backdrop 요소는 iOS 에서 네비게이션에 사용되지 않습니다. 왜냐하면 z-indexing 의 복잡성때문입니다. 따라서, 네비게이션 바에서 드롭다운을 닫기 위해서는, 당신은 반드시 직접 드롭다운 요소를 클릭해야합니다.(or any other element which will fire a click event in iOS).

브라우저 확대/축소

부트스트랩이나 다른 웹사이트 모두, 페이지 확대/축소는 필연적으로 몇몇 콤포넌트에서 렌더링 부산물을 보여줍니다. 어떤 이슈인가에 따라, 우리는 그것을 고칠 수도 있습니다. (우선 검색해보고 여차하면 이슈를 열어서). 하지만, 우리는 다른 마땅한 해결책이 없는 만큼 이것들을 무시하는 경향이 있습니다

모바일에서 끈적한 `:hover`/`:focus`

대부분의 터치스크린에서 진짜 hovering 은 가능하지 않지만, 대부분의 모바일 브라우저는 hovering 지원을 에뮬레이트하고 :hover 를 "끈적하게" 합니다. 바꿔 말하자면, :hover 스타일은 요소를 탭을 한 후에 적용되기 시작하고 오직 사용자가 다른 요소를 탭을 한 후에야 멈춥니다. 이것은 그런 브라우저에서 부트스트랩의 :hover 상태를 원치않게 "stuck" 하게 합니다. 몇몇 모바일 브라우저에서는 또한 :focus 를 끈적하게 만듭니다. 현재는 그러한 스타일을 완전히 제거하는 것 외에는 마땅한 해결책이 없습니다.

인쇄

몇몇의 현대 브라우저에서 조차, 인쇄는 이상해질 수 있습니다.

특히, 크롬 v32 부터 여백 설정에 상관하지 않고, 크롬은 웹페이지에서 출력하는 동안 미디어 쿼리들을 분석할 때 실제 종이 크기보다 분명이 좁은 뷰포트 너비를 사용합니다. 이것은 인쇄시에 갑자기 부트스트랩의 매우-작은 그리드를 활성화를 초래할 수 있습니다. 좀 더 자세한 것을 보려면 #12078 을 보세요. 제안된 차선책:

매우 작은 그리드을 포괄하고 당신의 페이지들이 그것에 받아들여져 보이도록 하세요.
@screen-* Less 변수들의 값을 맞춤화 하세요. 그러면 당신의 프린터 용지는 매우 작음보다 크게 고려 될 것입니다.
오직 프린트 미디어를 위한 그리드 사이즈 구획점을 변경하기 위해 맞춤 미디어 쿼리들을 더하세요.

또한, Safari v8.0 부터, 고정된 너비의 .container 은 사파리가 인쇄시에 작은 폰트 크기를 사용하게끔 할 수 있습니다. 자세한 것는 #14868 을 보세요. 이것을 위한 가능성 있는 차선책은 다음의 CSS 를 추가하는 것입니다:

@media print {
  .container {
    width: auto;
  }
}

안드로이드 스톡 브라우저

불행하게도, 스톡 브라우저 앱은 전반적으로 CSS 관련하여 많은 버그과 비일관성을 가지고 있습니다.

셀렉트 메뉴

<select> 요소에서, 안드로이드 스톡 브라우저는 만약 border-radius 나 border 가 적용되었다면 사이드 콘트롤을 보여주지 않습니다. (자세한 것은 이 스택오버플로어 질문 을 보세요.) 문제가 되는 CSS 를 제거하고 <select> 를 안드로이드 스톡 브라우저에서 스타일 없는 요소로 보여지게 하려면 아래의 코드조각을 사용하세요. 사용자 에이전트 스니핑은 크롬, 사파리, 모질라 브라우저들은 제외합니다.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

예제를 보고 싶으신가요? 이 데모를 확인하세요.

유효성 검사기

오래되고 버그 많은 브라우저들에게 최대한 긍정적인 경험을 제공하기 위해, 부트스트랩은 브라우저들의 버그를 우회하기 위해서 몇군데에 특정 브라우저 버전에 특별한 CSS 를 지정하고자 하는 CSS 브라우저 핵 을 사용합니다. 이 핵들은 당연하게도 CSS 검사기가 그들은 유효하지 않다고 제기하도록 합니다. 두군데에서, 우리는 또한 아직 표준화되지 않은 최신의 CSS 기능을 사용합니다. 그러나 그들은 순수하게 진보적인 상승을 위해 사용되어집니다.

이 검사기 경고들은 핵을 쓰지 않은 우리의 CSS 부분이 전부 검사되고 핵을 쓴 부분은 제대로 된 기능에 간섭하지 않으므로, 실제로는 문제가 되지 않습니다. 이런 이유로 우리는 그 특정한 경고들을 의도적으로 무시합니다.

우리의 HTML 문서들도 특정 파이어폭스 버그 를 해결하기 위한 우리의 코드로 인한 몇개의 사소하고 중요하지 않은 HTML 검사기 경고들을 가지고 있습니다.

우리는 공식적으로 어떤 써드파티 플러그인이나 에드온을 지원하지 않지만, 우리는 당신의 프로젝트들에서 잠재적인 이슈들을 피하는데 도움이 되기 위한 몇가지 유용한 조언을 제공합니다

박스 사이징

구글맵과 구글 맞춤 검색 엔진을 포함하는 몇몇 서드 파티 소프트웨어는, * { box-sizing: border-box; } 로 인해 부트스트랩과 충돌이 일어납니다. 그것은 padding 이 요소의 최종계산된 너비에 영향이 미치지 않도록 합니다. CSS Tricks 에서 박스모델과 사이징 을 좀 더 배워보세요.

경우에 따라서, 당신은 필요한 만큼 오버라이드를 하거나 (옵션 1) 전역의 박스사이징을 초기화할 수 있습니다 (옵션 2).

/* 박스사이징(Box-sizing) 초기화
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* 옵션 1A: CSS 로 단일 요소의 박스 모델을 오버라이드 합니다 */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* 옵션 1B: 부트스트랩 Less 믹스인을 사용하여 단일 요소의 박스 모델을 오버라이드 합니다 */
.element {
  .box-sizing(content-box);
}

/* 옵션 2A: CSS 로 전역의 박스모델을 초기화합니다 */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* 옵션 2B: 맞춤 Less 믹스인으로 전역의 박스모델을 초기화합니다 */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

부트스트랩은 보편적인 웹표준에 따릅니다. 그리고 —최소한의 노력—으로 AT 를 이용해서 접근성있는 사이트를 만드는 데 사용할 수 있습니다.

네비게이션 건너뛰기

만약 당신의 네비게이션이 많은 링크들을 포함하며, DOM 상에서 메인 콘텐츠 이전에 있다면, 네비게이션 전에 메인 콘텐츠로 건너뛰기 링크를 추가하세요. (간단한 설명을 위해서, A11Y Project article on skip navigation links 를 보세요). .sr-only 클래스를 사용하는 것은 건너뛰기 링크를 시각적으로 숨겨줄 것입니다. 그리고 .sr-only-focusable 클래스는 그 링크가 포커스 되었을때만 보여지게끔 할 것입니다. (눈이 보이는 키보드 사용자들을 위해서).

크롬 (크로미움 버그 트래커의 이슈 262171 를 보세요) 과 인터넷 익스플로러 (in-page links and focus order 기사에서 보세요) 의 오래된 결점/버그 때문에, 당신은 tabindex="-1" 을 추가하여 건너뛰기 링크가 프로그램적으로 포커스 될 수 있도록 하는 것이 필요합니다.

추가로, 당신은 깔끔하게 #content:focus { outline: none; } 가 있는 타겟(구체적으로 크롬에서 현재 요소에 마우스클릭으로 tabindex="-1" 가 들어간 포커스 되었을때) 에 포커스 표시를 없애고 싶어할 수 있습니다.

이 버그는 당신의 사이트에 사용하고 있을수도 있는 인페이지 링크에도 적용될 수 있음을 기억하세요. 당신은 링크 대상의 역할을 다른 모든 지정된 앵커 / 조각 식별자 유사한 정지 간격 수정을 고려할 수 있습니다.

<body>
  <a href="#content" class="sr-only sr-only-focusable">메인 콘텐츠로 건너뛰기</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- 메인 콘텐츠 -->
  </div>
</body>

계층을 가진 제목 (Nested headings)

제목을 중첩할 때 (<h1> - <h6>), 당신의 주요 문서 제목은 <h1> 여야 합니다. 이후 제목들은 논리적으로 <h2> - <h6> 를 사용할 수 있도록 해야합니다. 그래야 스크린 리더가 당신의 페이지들의 콘텐츠 목차를 구성할 수 있습니다.

HTML CodeSniffer 와 Penn State's AccessAbility 에서 좀 더 배워보세요.

색상 대비

현재, 부트스트랩에서는 몇가지 기본 색배합이 가능합니다. (다양한 스타일 버튼 클래스, 기본 코드 블록 을 위한 몇몇 코드 하일라이팅, .bg-primary 맥락적인 배경 도움 클래스, 그리고 하얀 배경에서 사용할때 기본 링크색과 같은) 그것은 낮은 대비율을 가지고 있습니다. (4.5:1 의 추천 비율 보다 낮은). 이것은 저시력자나 색맹 사용자들에게 문제들을 야기할수 있습니다. 이 기본 색들은 대비와 가독성을 증대시키기 위해서는 수정하는 것이 필요할 수 있습니다.

읽을꺼리

당신에게 요구하는 점:

당신에게 허락된 점:

개인적으로, 부분 혹은 전체를 개인적 혹은 상업적 목적으로 자유롭게 다운받아 부트스트랩을 사용합니다.
당신이 만든 패키지나 배포판에 부트스트랩을 사용할 수 있습니다.
소스코드를 수정합니다.
라이센스에 포함되지 않은 부트스트랩을 수정하고 서드파티에 배포하는데 있어 재실시권을 부여합니다.

당신에게 제한된 점:

부트스트랩은 품질보증 없이 제공되기 때문에 저자와 라이센스 소유자는 피해사항에 대하여 어떤 법적책임도 없음을 유지하세요.
적절한 귀속 없이 부트스트랩의 일부를 재배포하는 것.
당신의 배포판을 트위터가 지지한다고 언급하거나 암시할 수 있는 어떤 방법으로 트위터 소유의 마크들을 사용하는 것.
질문에 당신이 트위터 소프트웨어를 만들었다고 언급하거나 암시할 수 있는 어떤 방법으로 트위터 소유의 마크들을 사용하는 것.

당신에게 요구하지 않는 점:

부트스트랩의 소스가 포함되었다면, 아니면 어떤 수정도, 재배포판에서 당신은 그것을 포함하는 것을 제공합니다.
부트스트랩 프로젝트에 당신이 변경한 사항을 제출하는 것(이러한 피드백은 권장하지만)

부트스트랩 전체 라이센스는 프로젝트 저장소 내 위치한 문서를 참조하세요.

커뮤니티 회원들은 부트스트랩 문서를 다양한 언어로 번역해왔습니다. 공식적인 지원은 아니기때문에 업데이트가 늦을 수 있습니다.

우리는 번역을 준비하고 호스트하는데 도움을 주지 않습니다. 우리는 그저 링크만 제공할 뿐입니다.

새롭거나 더나은 번역을 마치셨나요? 우리의 목록에 그것을 추가하시고 pull 요청을 하세요.

다운로드