시작하기

Bootstrap(현재 v3.4.1)에는 신속하게 시작할 수 있는 몇 가지 쉬운 방법이 있으며, 각 방법은 다른 기술 수준과 사용 사례에 호소합니다. 귀하의 특정 요구 사항에 적합한 것이 무엇인지 자세히 읽으십시오.

부트스트랩

컴파일 및 축소된 CSS, JavaScript 및 글꼴. 문서 또는 원본 소스 파일은 포함되어 있지 않습니다.

부트스트랩 다운로드

소스 코드

Source Less, JavaScript 및 글꼴 파일과 문서. Less 컴파일러와 일부 설정이 필요합니다.

소스 다운로드

사스

Rails, Compass 또는 Sass 전용 프로젝트에 쉽게 포함할 수 있도록 Less에서 Sass로 부트스트랩을 이식 했습니다.

사스 다운로드

jsDelivr

jsDelivr 의 사람들 은 Bootstrap의 CSS 및 JavaScript에 대한 CDN 지원을 친절하게 제공합니다. 이 jsDelivr 링크를 사용하십시오.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Bower와 함께 설치

Bower 를 사용하여 Bootstrap의 Less, CSS, JavaScript 및 글꼴을 설치하고 관리할 수도 있습니다 .

bower install bootstrap

npm으로 설치

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

npm install bootstrap@3

require('bootstrap')모든 Bootstrap의 jQuery 플러그인을 jQuery 객체에 로드합니다. 모듈 자체 는 bootstrap아무것도 내보내지 않습니다. /js/*.js패키지의 최상위 디렉토리에서 파일 을 로드하여 부트스트랩의 jQuery 플러그인을 개별적으로 수동으로 로드할 수 있습니다 .

부트스트랩 package.json은 다음 키 아래에 몇 가지 추가 메타데이터를 포함합니다.

less- Bootstrap의 기본 Less 소스 파일 경로
style- 기본 설정을 사용하여 미리 컴파일된 부트스트랩의 축소되지 않은 CSS 경로(사용자 정의 없음)

Composer로 설치

Composer 를 사용하여 Bootstrap의 Less, CSS, JavaScript 및 글꼴을 설치하고 관리할 수도 있습니다 .

composer require twbs/bootstrap

Less/Sass에 필요한 자동 접두사

Bootstrap은 Autoprefixer 를 사용하여 CSS 공급업체 접두사 를 처리 합니다. Less/Sass 소스에서 Bootstrap을 컴파일하고 Gruntfile을 사용하지 않는 경우 Autoprefixer를 빌드 프로세스에 직접 통합해야 합니다. 미리 컴파일된 부트스트랩을 사용하거나 Gruntfile을 사용하는 경우 Autoprefixer가 이미 Gruntfile에 통합되어 있으므로 이에 대해 걱정할 필요가 없습니다.

부트스트랩은 두 가지 형태로 다운로드할 수 있으며, 그 안에 다음 디렉토리와 파일이 있으며 논리적으로 공통 리소스를 그룹화하고 컴파일된 변형과 축소된 변형을 모두 제공합니다.

jQuery 필요

모든 JavaScript 플러그인에는 시작 템플릿 에 표시된 것처럼 jQuery 가 포함되어야 합니다 . 지원되는 jQuery 버전을 확인하려면 당사에 문의하십시오 .bower.json

미리 컴파일된 부트스트랩

다운로드가 완료되면 압축된 폴더의 압축을 풀어 (컴파일된) 부트스트랩의 구조를 확인합니다. 다음과 같은 내용이 표시됩니다.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── 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.*)를 제공합니다. CSS 소스 맵 ( bootstrap.*.map)은 특정 브라우저의 개발자 도구와 함께 사용할 수 있습니다. 옵션인 Bootstrap 테마와 마찬가지로 Glyphicons의 글꼴이 포함되어 있습니다.

부트스트랩 소스 코드

부트스트랩 소스 코드 다운로드에는 소스 Less, JavaScript 및 설명서와 함께 미리 컴파일된 CSS, JavaScript 및 글꼴 자산이 포함되어 있습니다. 보다 구체적으로 다음 등이 포함됩니다.

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

, less/, js/및 fonts/는 CSS, JS 및 아이콘 글꼴(각각)의 소스 코드입니다. dist/폴더에는 위의 미리 컴파일된 다운로드 섹션에 나열된 모든 항목이 포함되어 있습니다 . docs/폴더에는 설명서 및 부트스트랩 사용에 대한 소스 코드가 포함되어 있습니다 examples/. 그 외에도 포함된 다른 파일은 패키지, 라이선스 정보 및 개발을 지원합니다.

부트스트랩은 프레임워크 작업을 위한 편리한 방법과 함께 빌드 시스템에 Grunt 를 사용합니다. 이것이 우리가 코드를 컴파일하고 테스트를 실행하는 방법입니다.

그런트 설치

Grunt를 설치하려면 먼저 node.js (npm 포함)를 다운로드하여 설치해야 합니다. npm은 노드 패키지 모듈 의 약자로 node.js를 통해 개발 종속성을 관리하는 방법입니다.

그런 다음 명령줄에서 다음을 수행합니다.

grunt-cli를 사용하여 전역적으로 설치합니다 npm install -g grunt-cli.
루트 /bootstrap/디렉터리로 이동한 다음 를 실행 npm install합니다. npm은 package.json파일을 보고 거기에 나열된 필요한 로컬 종속성을 자동으로 설치합니다.

완료되면 명령줄에서 제공되는 다양한 Grunt 명령을 실행할 수 있습니다.

사용 가능한 그런트 명령

`grunt dist`(CSS와 JavaScript만 컴파일)

/dist/컴파일 및 축소된 CSS 및 JavaScript 파일로 디렉토리를 재생성 합니다. 부트스트랩 사용자로서 이것은 일반적으로 원하는 명령입니다.

`grunt watch`(보다)

Less 소스 파일을 감시하고 변경 사항을 저장할 때마다 CSS로 자동 재컴파일합니다.

`grunt test`(테스트 실행)

Karma 덕분에 JSHint 를 실행 하고 실제 브라우저에서 QUnit 테스트를 실행합니다 .

`grunt docs`(문서 자산 빌드 및 테스트)

를 통해 로컬에서 문서를 실행할 때 사용되는 CSS, JavaScript 및 기타 자산을 빌드하고 테스트합니다 bundle exec jekyll serve.

`grunt`(절대적으로 모든 것을 구축하고 테스트를 실행)

CSS 및 JavaScript를 컴파일 및 축소하고, 문서 웹사이트를 구축하고, 문서에 대해 HTML5 유효성 검사기를 실행하고, 커스터마이저 자산을 재생성하는 등의 작업을 수행합니다. 지킬이 필요합니다 . 일반적으로 Bootstrap 자체를 해킹하는 경우에만 필요합니다.

문제 해결

종속성을 설치하거나 Grunt 명령을 실행하는 데 문제가 발생하면 먼저 /node_modules/npm에서 생성한 디렉토리를 삭제하십시오. 그런 다음 을 다시 실행 npm install하십시오.

이 기본 HTML 템플릿으로 시작하거나 이 예제 를 수정하십시오 . 템플릿과 예제를 사용자 정의하고 필요에 맞게 조정하기를 바랍니다.

최소한의 부트스트랩 문서 작업을 시작하려면 아래 HTML을 복사하십시오.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for 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://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/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-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Bootstrap의 많은 구성 요소를 사용하여 위의 기본 템플릿을 빌드합니다. 개별 프로젝트의 요구 사항에 맞게 Bootstrap을 사용자 지정하고 조정하는 것이 좋습니다.

Bootstrap 저장소 를 다운로드하여 아래의 모든 예제에 대한 소스 코드를 얻으십시오 . 예제는 docs/examples/디렉토리에서 찾을 수 있습니다.

프레임워크 사용

스타터 템플릿

기본 사항 외에는 아무것도 없습니다. 컨테이너와 함께 컴파일된 CSS 및 JavaScript.

부트스트랩 테마

시각적으로 향상된 경험을 위해 선택적 부트스트랩 테마를 로드하십시오.

그리드

4개 계층, 중첩 등이 모두 포함된 그리드 레이아웃의 여러 예.

점보트론

탐색 모음과 몇 가지 기본 그리드 열을 사용하여 점보트론 주위에 구축합니다.

좁은 점보트론

기본 컨테이너와 점보트론을 좁혀 더 많은 사용자 정의 페이지를 구축하십시오.

작동 중인 Navbar

나브바

일부 추가 콘텐츠와 함께 탐색 모음을 포함하는 슈퍼 기본 템플릿입니다.

정적 상단 탐색 모음

몇 가지 추가 콘텐츠와 함께 정적 상단 탐색 모음이 있는 슈퍼 기본 템플릿입니다.

고정 탐색 모음

일부 추가 콘텐츠와 함께 고정된 상단 탐색 모음이 있는 기본 템플릿입니다.

사용자 정의 구성 요소

씌우다

심플하고 아름다운 홈페이지 제작을 위한 한 페이지 템플릿입니다.

회전 목마

탐색 모음과 캐러셀을 맞춤설정한 다음 몇 가지 새로운 구성요소를 추가합니다.

블로그

사용자 정의 탐색, 헤더 및 유형이 있는 간단한 2열 블로그 레이아웃.

계기반

고정 사이드바 및 탐색 모음이 있는 관리자 대시보드의 기본 구조입니다.

로그인 페이지

간단한 로그인 양식을 위한 사용자 정의 양식 레이아웃 및 디자인.

정당한 탐색

정당한 링크가 있는 사용자 지정 탐색 모음을 만듭니다. 머리! 사파리 친화적이지 않습니다.

고정 바닥글

콘텐츠가 뷰포트보다 짧으면 바닥글을 뷰포트 하단에 부착합니다.

탐색 표시줄이 있는 고정 바닥글

상단에 고정 탐색 모음이 있는 뷰포트 하단에 바닥글을 연결합니다.

실험

응답하지 않는 부트스트랩

문서에 따라 Bootstrap의 응답성을 쉽게 비활성화할 수 있습니다 .

캔버스 외

Bootstrap과 함께 사용할 토글 가능한 오프 캔버스 탐색 메뉴를 구축하십시오.

부트린트

Bootlint 는 공식 Bootstrap HTML 린터 도구입니다. 상당히 "바닐라" 방식으로 부트스트랩을 사용하는 웹페이지에서 몇 가지 일반적인 HTML 실수를 자동으로 확인합니다. Vanilla Bootstrap의 구성 요소/위젯은 DOM의 일부가 특정 구조를 준수해야 합니다. Bootlint는 Bootstrap 구성 요소의 인스턴스에 올바르게 구성된 HTML이 있는지 확인합니다. 일반적인 실수로 인해 프로젝트 개발 속도가 느려지지 않도록 Bootstrap 웹 개발 도구 체인에 Bootlint를 추가하는 것을 고려하십시오.

Bootstrap 개발에 대한 최신 정보를 확인하고 이 유용한 리소스를 통해 커뮤니티에 연락하십시오.

공식 부트스트랩 블로그 를 읽고 구독하십시오 .
##bootstrap 채널irc.freenode.net 의 서버에서 IRC를 사용하여 동료 부트스트래퍼와 채팅 하십시오 .
Bootstrap 사용에 대한 도움말 은 태그를 사용하여 StackOverflowtwitter-bootstrap-3 에 문의하십시오 .
개발자는 최대 검색 가능성을 위해 npm 또는 유사한 전달 메커니즘을 bootstrap통해 배포할 때 Bootstrap의 기능을 수정하거나 추가하는 패키지에 키워드를 사용해야 합니다 .
Bootstrap Expo 에서 Bootstrap으로 구축한 사람들의 영감을 주는 예를 찾으십시오 .

Twitter에서 @getbootstrap을 팔로우 하여 최신 가십과 멋진 뮤직 비디오를 볼 수도 있습니다.

부트스트랩은 다양한 화면 크기에 맞게 페이지를 자동으로 조정합니다. 페이지가 응답하지 않는 예시 처럼 작동하도록 이 기능을 비활성화하는 방법은 다음과 같습니다 .

페이지 응답을 비활성화하는 단계

CSS 문서<meta> 에 언급된 뷰포트 생략
예를 들어 이것이 기본 부트스트랩 CSS width뒤에 오는지 확인하십시오. 미디어 쿼리 또는 일부 선택기-fu를 사용 하여 선택적으로 피할 수 있습니다 ..containerwidth: 970px !important;!important
탐색 모음을 사용하는 경우 모든 탐색 모음 축소 및 확장 동작을 제거합니다.
그리드 레이아웃 .col-xs-*의 경우 중형/대형 클래스에 추가하거나 대신 클래스를 사용합니다. 걱정하지 마십시오. 초소형 장치 그리드는 모든 해상도로 확장됩니다.

IE8용 Respond.js는 여전히 필요합니다(미디어 쿼리가 여전히 존재하고 처리해야 하기 때문에). 이것은 Bootstrap의 "모바일 사이트" 측면을 비활성화합니다.

응답이 비활성화된 부트스트랩 템플릿

이 단계를 예제에 적용했습니다. 구현된 특정 변경 사항을 보려면 소스 코드를 읽으십시오.

응답하지 않는 예 보기

Bootstrap은 최신 데스크톱 및 모바일 브라우저에서 가장 잘 작동하도록 제작되었습니다. 즉, 이전 브라우저는 완전히 작동하지만 특정 구성 요소의 렌더링 스타일이 다르게 표시될 수 있습니다.

지원되는 브라우저

특히 다음 브라우저 및 플랫폼 의 최신 버전 을 지원합니다.

직접 또는 플랫폼의 웹 보기 API를 통해 최신 버전의 WebKit, Blink 또는 Gecko를 사용하는 대체 브라우저는 명시적으로 지원되지 않습니다. 그러나 부트스트랩은 (대부분의 경우) 이러한 브라우저에서도 올바르게 표시되고 작동해야 합니다. 보다 구체적인 지원 정보는 아래에 나와 있습니다.

모바일 장치

일반적으로 Bootstrap은 각 주요 플랫폼의 기본 브라우저의 최신 버전을 지원합니다. 프록시 브라우저(예: Opera Mini, Opera Mobile의 터보 모드, UC Browser Mini, Amazon Silk)는 지원되지 않습니다.

	크롬	파이어폭스	원정 여행
기계적 인조 인간	지원	지원	해당 없음
iOS	지원	지원	지원

데스크탑 브라우저

마찬가지로 대부분의 데스크톱 브라우저의 최신 버전이 지원됩니다.

	크롬	파이어폭스	인터넷 익스플로러	오페라	원정 여행
맥	지원	지원	해당 없음	지원	지원
창	지원	지원	지원	지원	지원되지 않음

Windows에서는 Internet Explorer 8-11을 지원합니다 .

Firefox의 경우 최신 일반 안정 릴리스 외에도 최신 ESR(Extended Support Release) 버전의 Firefox도 지원합니다.

비공식적으로 부트스트랩은 공식적으로 지원되지는 않지만 Microsoft Edge뿐만 아니라 Linux용 Chromium 및 Chrome, Linux용 Firefox 및 Internet Explorer 7에서 충분히 잘 보이고 작동해야 합니다.

부트스트랩이 해결해야 하는 일부 브라우저 버그 목록은 브라우저 버그의 벽을 참조하세요 .

인터넷 익스플로러 8 및 9

Internet Explorer 8 및 9도 지원되지만 일부 CSS3 속성 및 HTML5 요소는 이러한 브라우저에서 완전히 지원되지 않습니다. 또한 Internet Explorer 8에서는 미디어 쿼리 지원을 활성화하기 위해 Respond.js 를 사용해야 합니다.

특징	인터넷 익스플로러 8	인터넷 익스플로러 9
`border-radius`	지원되지 않음	지원
`box-shadow`	지원되지 않음	지원
`transform`	지원되지 않음	지원됨, `-ms`접두어 포함
`transition`	지원되지 않음
`placeholder`	지원되지 않음

CSS3 및 HTML5 기능의 브라우저 지원에 대한 자세한 내용은 Can I use... 를 방문하십시오 .

Internet Explorer 8 및 Respond.js

Internet Explorer 8의 개발 및 프로덕션 환경에서 Respond.js를 사용할 때 다음 주의 사항에 주의하십시오.

respond.js 및 도메인 간 CSS

다른 (하위) 도메인(예: CDN)에서 호스팅되는 CSS와 함께 Respond.js를 사용하려면 몇 가지 추가 설정이 필요합니다. 자세한 내용은 Respond.js 문서 를 참조하세요.

응답.js 및`file://`

브라우저 보안 규칙으로 인해 Respond.js는 프로토콜을 통해 본 페이지에서 작동하지 않습니다 file://(예: 로컬 HTML 파일을 열 때). IE8에서 반응형 기능을 테스트하려면 HTTP(S)를 통해 페이지를 봅니다. 자세한 내용은 Respond.js 문서 를 참조하세요.

응답.js 및`@import`

를 통해 참조되는 CSS에서는 Respond.js가 작동하지 않습니다 @import. 특히 일부 Drupal 구성은 @import. 자세한 내용은 Respond.js 문서 를 참조하세요.

Internet Explorer 8 및 상자 크기 조정

IE8은 , , 또는 box-sizing: border-box;와 함께 사용할 때 완전히 지원하지 않습니다 . 이러한 이유로 v3.0.1부터 더 이상 on s를 사용하지 않습니다.min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 및 @font-face

IE8은 와 @font-face결합할 때 몇 가지 문제가 :before있습니다. Bootstrap은 Glyphicon과 함께 해당 조합을 사용합니다. 페이지가 캐시되고 창 위에 마우스를 올려놓지 않고 로드되면(즉, 새로 고침 버튼을 누르거나 iframe에서 무언가를 로드하는 경우) 글꼴이 로드되기 전에 페이지가 렌더링됩니다. 페이지(본문) 위로 마우스를 가져가면 일부 아이콘이 표시되고 나머지 아이콘 위에 마우스를 가져가면 해당 아이콘도 표시됩니다. 자세한 내용은 문제 #13863 을 참조하십시오.

IE 호환성 모드

부트스트랩은 이전 Internet Explorer 호환 모드에서 지원되지 않습니다. IE용 최신 렌더링 모드를 사용하고 있는지 확인하려면 <meta>페이지에 적절한 태그를 포함하는 것이 좋습니다.

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

디버깅 도구를 열어 문서 모드를 F12확인하십시오. "문서 모드"를 누르고 확인하십시오.

이 태그는 지원되는 각 Internet Explorer 버전에서 가능한 최상의 렌더링을 보장하기 위해 모든 Bootstrap 설명서 및 예제에 포함되어 있습니다.

자세한 내용은 이 StackOverflow 질문 을 참조하세요.

Windows 8 및 Windows Phone 8의 Internet Explorer 10

Internet Explorer 10은 장치 너비 와 뷰포트 너비 를 구분 하지 않으므로 Bootstrap의 CSS에서 미디어 쿼리를 제대로 적용하지 않습니다. 일반적으로 이 문제를 해결하기 위해 CSS의 빠른 스니펫을 추가하면 됩니다.

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

그러나 업데이트 3(GDR3이라고도 함) 보다 이전 버전의 Windows Phone 8을 실행하는 장치에서는 작동하지 않습니다. 이러한 장치는 좁은 "전화" 보기 대신 대부분의 데스크톱 보기를 표시하기 때문입니다. 이 문제를 해결 하려면 버그를 해결하기 위해 다음 CSS 및 JavaScript를 포함 해야 합니다 .

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

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
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)
}

자세한 정보 및 사용 지침은 Windows Phone 8 및 Device-Width 를 참조 하십시오.

참고로 우리는 이것을 모든 Bootstrap 설명서와 예제에 데모로 포함합니다.

Safari 백분율 반올림

.col-*-1OS X용 v7.1 이전 버전의 Safari 및 iOS v8.0용 Safari 버전의 렌더링 엔진은 그리드 클래스 에서 사용되는 소수 자릿수에 문제가 있었습니다 . 따라서 12개의 개별 그리드 열이 있는 경우 다른 열 행에 비해 짧아진 것을 알 수 있습니다. Safari/iOS를 업그레이드하는 것 외에도 해결 방법에 대한 몇 가지 옵션이 있습니다.

.pull-right하드 오른쪽 정렬을 얻으려면 마지막 그리드 열에 추가하십시오 .
Safari의 완벽한 반올림을 위해 백분율을 수동으로 조정합니다(첫 번째 옵션보다 더 어렵습니다).

모달, 탐색 모음 및 가상 키보드

오버플로 및 스크롤링

overflow: hidden요소 에 대한 지원 <body>은 iOS 및 Android에서 상당히 제한적입니다. 이를 위해 해당 장치의 브라우저 중 하나에서 모달의 상단 또는 하단을 지나 스크롤하면 <body>콘텐츠가 스크롤되기 시작합니다. Chrome 버그 #175502 (Chrome v40에서 수정됨) 및 WebKit 버그 #153852 를 참조 하세요 .

iOS 텍스트 필드 및 스크롤

<input>iOS 9.3부터 모달이 열려 있는 동안 스크롤 제스처의 초기 터치가 텍스트 또는 a 의 경계 내에 있으면 모달 자체 대신 모달 아래의 콘텐츠가 스크롤됩니다 <textarea>. WebKit 버그 #153856<body> 을 참조하십시오 .

가상 키보드

또한 고정 탐색 모음을 사용하거나 모달 내에서 입력을 사용하는 경우 iOS에는 가상 키보드가 트리거될 때 고정 요소의 위치를 업데이트하지 않는 렌더링 버그가 있습니다. 이에 대한 몇 가지 해결 방법에는 요소를 로 변환 position: absolute하거나 초점이 맞춰진 타이머를 호출하여 위치를 수동으로 수정하는 것이 포함됩니다. 이것은 부트스트랩에서 처리하지 않으므로 애플리케이션에 가장 적합한 솔루션을 결정하는 것은 사용자의 몫입니다.

.dropdown-backdrop요소는 z-인덱싱의 복잡성 때문에 탐색에서 iOS에서 사용되지 않습니다 . 따라서 탐색 모음에서 드롭다운을 닫으려면 드롭다운 요소(또는 iOS에서 클릭 이벤트를 발생시키는 다른 요소)를 직접 클릭해야 합니다 .

브라우저 확대/축소

페이지 확대/축소는 부트스트랩과 웹의 나머지 부분 모두에서 일부 구성 요소에서 필연적으로 렌더링 아티팩트를 나타냅니다. 문제에 따라 문제를 해결할 수 있습니다(먼저 검색한 다음 필요한 경우 문제 열기). 그러나 해킹된 해결 방법 외에는 직접적인 해결책이 없는 경우가 많기 때문에 이를 무시하는 경향이 있습니다.

고정 `:hover`/ `:focus`모바일

대부분의 터치스크린에서는 실제 호버링이 가능하지 않지만 대부분의 모바일 브라우저는 호버링 지원을 에뮬레이트하여 :hover"고정" 상태로 만듭니다. 즉, :hover스타일은 요소를 탭한 후에 적용되기 시작하고 사용자가 다른 요소를 탭한 후에만 적용을 중지합니다. 이로 인해 부트스트랩의 :hover상태가 그러한 브라우저에서 바람직하지 않게 "고착"될 수 있습니다. 일부 모바일 브라우저도 :focus유사하게 고정됩니다. 현재 이러한 스타일을 완전히 제거하는 것 외에는 이러한 문제에 대한 간단한 해결 방법이 없습니다.

인쇄

일부 최신 브라우저에서도 인쇄가 이상할 수 있습니다.

특히 Chrome v32부터 여백 설정과 관계없이 Chrome은 웹 페이지 인쇄 중 미디어 쿼리를 해결할 때 실제 용지 크기보다 훨씬 좁은 표시 영역 너비를 사용합니다. 이로 인해 인쇄할 때 Bootstrap의 초소형 그리드가 예기치 않게 활성화될 수 있습니다. 자세한 내용은 문제 #12078 및 Chrome 버그 #273306 을 참조하세요. 제안된 해결 방법:

초소형 그리드를 수용하고 페이지가 그 아래에서 허용 가능한지 확인하십시오.
@screen-*프린터 용지가 초소형 용지보다 큰 것으로 간주되도록 Less 변수 의 값을 사용자 정의하십시오 .
인쇄 매체에 대해서만 격자 크기 중단점을 변경하려면 사용자 정의 매체 쿼리를 추가하십시오.

또한 Safari v8.0부터 고정 너비 .containers로 인해 Safari가 인쇄할 때 비정상적으로 작은 글꼴 크기를 사용할 수 있습니다. 자세한 내용은 #14868 및 WebKit 버그 #138192 를 참조하세요. 이에 대한 한 가지 잠재적인 해결 방법은 다음 CSS를 추가하는 것입니다.

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

안드로이드 스톡 브라우저

기본적으로 Android 4.1(및 일부 최신 릴리스)은 기본 웹 브라우저(Chrome과 반대)로 브라우저 앱과 함께 제공됩니다. 불행히도 브라우저 앱에는 일반적으로 CSS와 관련하여 많은 버그와 불일치가 있습니다.

메뉴 선택

요소 에서 <select>Android 스톡 브라우저는 사이드 컨트롤이 있는 경우 border-radius및/또는 border적용된 경우 사이드 컨트롤을 표시하지 않습니다. (자세한 내용은 이 StackOverflow 질문 을 참조하세요.) 아래 코드 스니펫을 사용하여 문제가 되는 CSS를 제거하고 <select>Android 기본 브라우저에서 스타일이 지정되지 않은 요소로 렌더링합니다. 사용자 에이전트 스니핑은 Chrome, Safari 및 Mozilla 브라우저와의 간섭을 방지합니다.

<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>

예시를 보시겠습니까? 이 JS Bin 데모를 확인하십시오.

검증자

오래되고 버그가 있는 브라우저에 최상의 경험을 제공하기 위해 Bootstrap은 브라우저 자체의 버그를 해결하기 위해 여러 위치에서 CSS 브라우저 해킹 을 사용하여 특정 브라우저 버전에 특수 CSS를 대상으로 지정합니다. 이러한 해킹으로 인해 CSS 유효성 검사기가 유효하지 않다고 불평하는 것은 당연합니다. 몇 곳에서는 아직 완전히 표준화되지 않은 최첨단 CSS 기능을 사용하지만 순전히 점진적 향상을 위해 사용됩니다.

이러한 유효성 검사 경고는 실제로 중요하지 않습니다. 왜냐하면 CSS의 해킹되지 않은 부분이 완전히 검증되고 해킹된 부분이 해킹되지 않은 부분의 적절한 기능을 방해하지 않기 때문입니다. 따라서 이러한 특정 경고를 의도적으로 무시하는 이유입니다.

특정 Firefox 버그 에 대한 해결 방법이 포함되어 있기 때문에 HTML 문서에도 사소하고 중요하지 않은 HTML 유효성 검사 경고가 있습니다.

공식적으로 타사 플러그인이나 애드온을 지원하지는 않지만 프로젝트에서 잠재적인 문제를 방지하는 데 도움이 되는 몇 가지 유용한 조언을 제공합니다.

상자 크기

Google 지도 및 Google 사용자 정의 검색 엔진을 포함한 일부 타사 소프트웨어는 로 인해 부트스트랩과 충돌합니다 * { box-sizing: border-box; }. 이 규칙 padding은 요소의 최종 계산 너비에 영향을 주지 않습니다. CSS Tricks에서 상자 모델 및 크기 조정에 대해 자세히 알아보세요 .

상황에 따라 필요에 따라 재정의하거나(옵션 1) 전체 영역에 대한 상자 크기를 재설정할 수 있습니다(옵션 2).

/* Box-sizing resets
 *
 * 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.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via 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;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

부트스트랩은 일반적인 웹 표준을 따르며 최소한의 추가 노력으로 AT 를 사용하는 사람들이 액세스할 수 있는 사이트를 만드는 데 사용할 수 있습니다 .

탐색에 많은 링크가 포함되어 있고 DOM의 주요 콘텐츠 앞에 오는 경우 Skip to main content탐색 앞에 링크를 추가합니다(간단한 설명은 탐색 링크 건너뛰기에 대한 이 A11Y 프로젝트 문서 참조 ). 클래스를 사용하면 .sr-only건너뛰기 링크가 시각적으로 숨겨지고 .sr-only-focusable클래스는 초점이 맞춰지면 링크가 표시되도록 합니다(시각적인 키보드 사용자의 경우).

Chrome( Chromium 버그 추적기의 문제 262171 참조 ) 및 Internet Explorer( 페이지 내 링크 및 포커스 순서 에 대한 이 문서 참조)의 오랜 단점/버그로 인해 건너뛰기 링크의 대상이 다음인지 확인해야 합니다. 을(를) 추가하여 최소한 프로그래밍 방식으로 초점을 맞출 수 tabindex="-1"있습니다.

또한 를 사용하여 대상에서 가시적인 포커스 표시를 명시적으로 억제할 수 있습니다(특히 현재 Chrome은 현재 요소를 tabindex="-1"마우스로 클릭할 때 로 요소에 포커스를 설정하기 때문에) #content:focus { outline: none; }.

이 버그는 사이트에서 사용 중인 다른 페이지 내 링크에도 영향을 미치므로 키보드 사용자에게는 쓸모가 없습니다. 링크 대상 역할을 하는 다른 모든 명명된 앵커/프래그먼트 식별자에 유사한 스톱-갭 수정을 추가하는 것을 고려할 수 있습니다.

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

중첩 제목

<h1>헤더( - )를 중첩할 때 <h6>기본 문서 헤더는 <h1>. 후속 제목은 다음을 논리적으로 사용해야 합니다.<h2><h6>후속 제목은 화면 판독기가 페이지의 목차를 구성할 수 있도록 논리적 으로

HTML CodeSniffer 및 Penn State의 AccessAbility 에서 자세히 알아보기 .

색상 대비

현재 부트스트랩에서 사용할 수 있는 기본 색상 조합 중 일부(예: 다양한 스타일의 버튼 클래스, 기본 코드 블록 에 사용되는 일부 코드 강조 색상 , .bg-primary 상황별 배경 도우미 클래스 및 흰색 배경에서 사용되는 경우 기본 링크 색상) 낮은 명암비( 권장 비율 4.5:1 미만) 미만 ). 이는 시력이 좋지 않거나 색맹인 사용자에게 문제를 일으킬 수 있습니다. 대비와 가독성을 높이려면 이러한 기본 색상을 수정해야 할 수 있습니다.

추가 리소스

다음을 수행해야 합니다.

다음을 수행할 수 있습니다.

개인, 개인, 회사 내부 또는 상업적 목적으로 Bootstrap의 전체 또는 일부를 자유롭게 다운로드하고 사용하십시오.
생성한 패키지 또는 배포판에서 부트스트랩 사용
소스 코드 수정
라이선스에 포함되지 않은 제3자에게 부트스트랩을 수정 및 배포할 수 있는 하위 라이선스 부여

다음을 금지합니다.

Bootstrap은 보증 없이 제공되므로 작성자와 라이선스 소유자가 손해에 대해 책임을 지도록 합니다.
적절한 저작자 표시 없이 부트스트랩을 재배포
Twitter가 귀하의 배포를 보증한다는 것을 명시하거나 암시할 수 있는 방식으로 Twitter가 소유한 상표를 사용
귀하가 문제의 Twitter 소프트웨어를 생성했음을 나타내거나 암시할 수 있는 방식으로 Twitter가 소유한 상표를 사용하는 행위

다음을 수행할 필요는 없습니다.

부트스트랩 자체의 소스 또는 부트스트랩에 대한 수정의 소스를 포함하는 어셈블할 수 있는 재배포 시 포함
Bootstrap에 대한 변경 사항을 Bootstrap 프로젝트에 다시 제출하십시오(이러한 피드백은 권장됨).

전체 부트스트랩 라이선스는 자세한 정보를 위해 프로젝트 리포지토리 에 있습니다.

커뮤니티 회원은 Bootstrap의 문서를 다양한 언어로 번역했습니다. 공식적으로 지원되는 것은 없으며 항상 최신 상태가 아닐 수도 있습니다.

우리는 번역을 정리하거나 호스팅하는 것을 돕지 않고 단지 번역에 연결합니다.

새롭거나 더 나은 번역을 마쳤습니까? 풀 리퀘스트를 열어 목록에 추가하세요.

다운로드