부트스트랩 CSS 개요
이 장에서는 웹 개발을 더 좋고, 더 빠르고, 더 강력하게 만들기 위한 모범 사례를 포함하여 Bootstrap 기본 구조의 주요 부분을 다룰 것입니다.
HTML 5 문서 유형(Doctype)
Bootstrap은 일부 HTML5 요소와 CSS 속성을 사용합니다. 이것이 제대로 작동하려면 HTML5 문서 유형(Doctype)을 사용해야 합니다. 따라서 Bootstrap을 사용하여 프로젝트 시작 부분에 다음 코드 조각을 포함하십시오.
<!DOCTYPE html> <html> .... </html>
Bootstrap으로 생성된 웹 페이지 시작 부분에 HTML5 문서 유형(Doctype)을 사용하지 않으면 브라우저 표시 불일치가 발생할 수 있으며 특정 상황에서는 불일치가 발생하여 코드가 제대로 작동하지 않을 수도 있습니다. W3C 표준 검증을 통과했습니다.
모바일 우선
모바일 우선은 부트스트랩 3의 가장 중요한 변화입니다.
이전 Bootstrap 버전(2.x까지)에서는 전체 프로젝트를 모바일 친화적으로 만들기 위해 다른 CSS를 수동으로 참조해야 했습니다.
지금은 다릅니다. Bootstrap 3의 기본 CSS 자체는 모바일 친화적입니다.
Bootstrap 3은 모바일 우선, 데스크톱 둘째로 설계되었습니다. 점점 더 많은 사용자가 모바일 장치를 사용하고 있기 때문에 이는 실제로 매우 시의적절한 변화입니다.
Bootstrap에서 개발한 웹사이트를 모바일 친화적으로 만들고 적절한 그리기 및 터치 스크린 크기 조정을 보장하려면 아래와 같이 웹페이지 헤드에 viewport 메타 태그를 추가해야 합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width 속성은 장치 너비를 제어합니다. 귀하의 웹사이트가 다양한 화면 해상도를 가진 기기에서 표시된다고 가정하면, 웹사이트를 device-width로 설정하면 다양한 기기에서 올바르게 렌더링됩니다.
initial-scale=1.0 웹페이지가 로드될 때 크기 조정 없이 1:1 비율로 렌더링되는지 확인하세요.
모바일 브라우저에서는 viewport 메타 태그에 user-scalable=no를 추가하여 확대/축소 기능을 비활성화할 수 있습니다.
일반적으로 maximum-scale=1.0은 user-scalable=no와 함께 사용됩니다. 확대/축소를 비활성화하면 사용자는 스크롤만 할 수 있으므로 웹사이트가 기본 앱처럼 보입니다.
모든 웹사이트에 이 방법을 권장하는 것은 아니며 상황에 따라 달라질 수 있습니다!
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
반응형 이미지
<img src="..." class="img-responsive" alt="响应式图像">
img-반응형 클래스를 추가하면 Bootstrap 3의 이미지를 더욱 친숙하게 만들어 반응형 레이아웃을 지원할 수 있습니다.
다음으로 이 클래스에 어떤 CSS 속성이 포함되어 있는지 살펴보겠습니다.
아래 코드에서 img-Response 클래스가 이미지에 max-width: 100%; 상위 요소.
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}이것은 관련 이미지가 inline-block으로 렌더링됨을 나타냅니다. 요소의 표시 속성을 inline-block으로 설정하면 요소는 주변 콘텐츠를 기준으로 인라인으로 렌더링되지만 인라인과 달리 이 경우 너비와 높이를 설정할 수 있습니다.
설정 height:auto, 관련 요소의 높이는 브라우저에 따라 다릅니다.
max-width를 100%로 설정하면 너비 속성을 통해 지정된 너비가 재정의됩니다. 이렇게 하면 반응형 레이아웃을 지원하기 위해 이미지가 더욱 친숙해집니다.
전역 디스플레이, 레이아웃 및 연결
기본 전역 디스플레이
Bootstrap 3은 body {margin: 0;}을 사용하여 본문 여백을 제거합니다.
다음 본문 설정을 참조하세요.
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}첫 번째 규칙은 본문의 기본 글꼴 스타일을 "Helvetica Neue", Helvetica, Arial, sans-serif로 설정합니다.
두 번째 규칙은 텍스트의 기본 글꼴 크기를 14픽셀로 설정합니다.
세 번째 규칙은 기본 행 높이를 1.428571429로 설정합니다.
네 번째 규칙은 기본 텍스트 색상을 #333333으로 설정합니다.
마지막 규칙은 기본 배경색을 흰색으로 설정합니다.
타이포그래피
@font-family-base, @font-size-base 및 @line-height-base 속성을 타이포그래피 스타일로 사용하세요.
링크 스타일
@link-color 속성을 통해 글로벌 링크의 색상을 설정하세요.
링크의 기본 스타일은 다음과 같이 설정하세요:
a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}마우스를 링크나 클릭한 링크 위에 올리면 색상이 #2a6496으로 설정됩니다. 동시에 밑줄이 나타납니다.
또한 클릭한 링크에는 색상 코드 #333의 얇은 점선 윤곽선이 표시됩니다. 또 다른 규칙은 개요를 5픽셀 너비로 설정하는 것이며 웹킷 기반 브라우저의 경우 -webkit-focus-ring-color 브라우저 확장이 있습니다. 윤곽선 오프셋은 -2픽셀로 설정됩니다.
위의 모든 스타일은 scaffolding.less에서 찾을 수 있습니다.
브라우저 간 불일치 방지
Bootstrap은 Normalize를 사용하여 브라우저 간 일관성을 설정합니다.
Normalize.css는 HTML 요소의 기본 스타일에 더 나은 브라우저 간 일관성을 제공하는 작은 CSS 파일입니다.
Container
<div class="container"> ... </div>
Bootstrap 3의 container 클래스는 페이지의 콘텐츠를 래핑하는 데 사용됩니다. bootstrap.css 파일에 있는 .container 클래스를 살펴보겠습니다.
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}위 코드를 통해 컨테이너의 왼쪽 및 오른쪽 여백(margin-right, margin-left)은 브라우저에 의해 결정됩니다.
패딩은 너비가 고정되어 있으므로 기본적으로 컨테이너는 중첩될 수 없습니다.
.container:before,
.container:after {
display: table;
content: " ";
}이것은 의사 요소를 생성합니다. display를 table로 설정하면 익명의 테이블 셀과 새로운 블록 서식 컨텍스트가 생성됩니다. :before 의사 요소는 위쪽 여백이 무너지는 것을 방지하고 :after 의사 요소는 부동 소수점을 지웁니다.
HTML에 conteneditable 속성이 있는 경우 일부 Opera 버그로 인해 위 요소 주위에 공백이 생성됩니다. 이 문제는 content: " "를 사용하여 해결할 수 있습니다.
.container:after {
clear: both;
}이것은 의사 요소를 생성하고 모든 컨테이너에 모든 부동 요소가 포함되도록 보장합니다.
Bootstrap 3 CSS에는 응답에 적용되는 미디어 쿼리가 있으며 그리드 시스템과 일치하도록 다양한 미디어 쿼리 임계값 내의 컨테이너에 대해 최대 너비가 설정됩니다.
@media (min-width: 768px) {
.container {
width: 750px;
}Bootstrap 브라우저/장치 지원
Bootstrap은 최신 데스크톱 시스템 및 모바일 브라우저에서 잘 작동할 수 있습니다.
오래된 브라우저는 제대로 지원되지 않을 수 있습니다.
다음 표는 Bootstrap이 지원하는 최신 버전의 브라우저 및 플랫폼을 보여줍니다.
| Chrome | Firefox | IE | Opera | Safari | |
|---|---|---|---|---|---|
| Android | 예 | 예 | 해당 없음 | NO | 해당 없음 |
| iOS | YES | 해당 없음 | 해당 없음 | NO | YES |
| Mac OS X | 예 | 예 | 해당 없음 | YES | YES |
| Windows | YES | YES | YES* | YES | NO |
* Internet Explorer 8 이상 버전의 IE 브라우저를 지원합니다. .
