CSS 개요 부트 스트랩
이 장에서 우리는 우리의 웹 개발자가 더 빠르고, 더 강한 최상의 방법을 포함하여, 부트 스트랩의 핵심 부분의 기본 구조를 설명합니다.
HTML 5 DOCTYPE (없는 Doctype)
부트 스트랩은 일부 HTML5 요소와 CSS 속성을 사용합니다. 작동하려면 다음의 순서를, 당신은 HTML5 문서 형식 (에 doctype)를 사용합니다. 따라서, 사용하는 부트 스트랩 프로젝트의 시작 부분에 다음 코드 세그먼트가 포함되어 있습니다.
<!DOCTYPE html> <html> .... </html>
HTML5의 문서 형식 (에 doctype)를 사용하지 않고 만든 부트 스트랩에서 페이지의 시작, 당신이 직면 할 수있는 경우 일부 브라우저 코드에서 W3C 표준 유효성 검사를 통과 할 수없는 경우에도 그 아래에 일관성이 어떤 상황에 직면 할 수 불일치 문제를 표시 .
모바일 장치 우선 순위
우선 휴대 기기는 부트 스트랩 (3)의 가장 큰 변화이다.
부트 스트랩의 이전 버전 (2.x에서까지), 수동으로 전체 프로젝트 모바일 장치에 대한 친절한 지원하기 위해, 다른 CSS를 인용 할 필요가있다.
아니 더 이상, 부트 스트랩 3 기본 CSS 자체가 모바일 장치에 대한 친화적 인 지원이다.
(3) 모바일 장치 우선 순위 설계 부트 스트랩, 바탕 화면 하였다. 점점 더 많은 사람들이 모바일 기기를 사용하는 이것은 실제로 매우시의 적절 변화이다.
적절한 렌더링 및 터치 스크린 줌을 보장하기 쉬운 휴대 기기 용 부트 스트랩 개발 웹 사이트를 만들려면 다음과 같이 페이지의 머리에 뷰포트 메타 태그를 추가해야합니다 :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width 속성 폭 제어 장치. 사이트는 다음, 검색 할 수있는 다른 화면 해상도 장치와 함께이 다른 장치에서 제대로 렌더링하기 위해 장치 너비로 설정됩니다 가정하자.
초기 규모 = 1.0 페이지가로드를 보장하기 위해, (1)의 비율 : 1 프리젠 테이션은, 어떤 크기 조절이되지 않습니다.
사용자 확장 성을 추가하여 모바일 장치 브라우저에서 = 뷰포트 메타 태그는 크기 조정 (확대) 기능을 사용하지 아니합니다.
일반적으로, 최대 규모 = 1.0 및 사용자 확장 성 = 더 함께. 이 줌 기능이 비활성화 된 후, 사용자가 화면을 스크롤 할 수 있습니다, 당신은 당신의 사이트가 네이티브 응용 프로그램의 느낌처럼 더 볼 수 있습니다.
자신의 상황에 따라 달라집니다, 이런 식으로 우리가 모든 사이트의 사용을 권장하지 않습니다 있습니다!
<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 응답 클래스를 추가하여 부트 스트랩 3 이미지가 더 친절 반응 레이아웃을 지원할 수 있습니다.
의이 클래스는 CSS 속성을 포함 된 내용을 살펴 보자.
자동 상기 화상 부모 요소의 크기를 초과하지 않도록 속성은 스케일링 될 수있다 :, 및 높이 100 % : 아래의 코드에서는 IMG 응답 클래스는 최대 폭을 부여하는 화상을 볼 수있다.
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}
이는 관련 이미지가 인라인 블록으로 렌더링을 나타냅니다. 는 요소의 표시 특성을 설정할 때 인라인 블록 주변의 표현 형식의 콘텐츠에 대하여 인라인 요소이지만, 인라인 차이점이 경우에 우리는 너비와 높이를 설정할 수있다.
설정 높이 : 높이 자동, 관련 요소는 브라우저에 따라 달라집니다.
설정 최대 폭은 100 % 폭 속성에 의해 지정된 폭보다 우선합니다. 이 사진이 더 친절 반응 레이아웃을 지원할 수 있습니다.
글로벌 디스플레이, 레이아웃 및 링크
기본 글로벌 디스플레이
3 부트 스트랩 몸 {여백 : 0;} 사용하여 여백의 몸을 제거 할 수 있습니다.
몸에 대해 다음 설정을 고려 :
몸 {
글꼴 - 가족 : "헬 베티 뉴", 돋움, 바탕, 굴림, 산세 리프;
글꼴 크기 : 14px;
라인 - 높이 : 1.428571429;
색상 : # 333333;
배경 색상 : #FFFFFF;
}
첫 번째 규칙은 몸 "헬 베티 뉴", 돋움, 굴림의 기본 글꼴 스타일을 설정 , 산세 리프.
14 픽셀의 기본 글꼴 크기의 텍스트의 두 번째 규칙.
세 번째 규칙은 기본 행 높이가 1.428571429이다 설정하는 것입니다.
네 번째 규칙은 # 333333로 기본 텍스트 색상을 설정합니다.
최종 규칙은 기본 배경색은 흰색으로 설정합니다.
조판
글꼴 - 가족베이스 @ 사용하여 @ 글꼴 크기 -베이스와 타이포그래피 등 @ 라인 - 높이 - 기본 속성입니다.
링크 스타일
글로벌 연결 속성 @ 링크 색을 통해 색상을 설정합니다.
링크, 다음과 같은 설정의 기본 스타일 :
A : 마우스를
A : 초점 {
색상 : # 2a6496;
텍스트 장식 : 밑줄;
}
A : 초점 {
개요 : 얇은 점선 # 333;
개요 : 5px 자동 -webkit 초점 링 컬러;
개요 오프셋 : -2px;
}
마우스를 링크 위로 가져갈 또는 클릭 연결 때, 색상은 # 2a6496로 설정됩니다. 동시에, 밑줄이있을 것이다.
또한, 당신은 클릭 링크, 얇은 점선 번호 (333)의 색상 코드가있을 것입니다. 또 다른 규칙은 폭 5 픽셀로 윤곽을 설정하고, 웹킷 기반 브라우저에 대한 -webkit-초점 링 컬러 브라우저 확장이 있습니다. 오프셋 윤곽은 -2 픽셀로 설정됩니다.
이러한 스타일은 모두 scaffolding.less에서 찾을 수 있습니다.
브라우저 간 불일치를 피하십시오
사용 부트 스트랩 표준화를 브라우저 간 일관성을 구축 할 수 있습니다.
Normalize.css은 기본 스타일의 HTML 요소에 더 나은 브라우저 간 일관성을 제공하는 작은 CSS 파일입니다.
컨테이너 (컨테이너)
<div class="container"> ... </div>
패키지 페이지의 내용에 대해 3 부트 스트랩 컨테이너 클래스입니다. 의이 파일 bootstrap.css의 .container 클래스를 살펴 보자.
.container {
패딩 오른쪽 : 15 픽셀;
패딩 왼쪽 : 15 픽셀;
마진 오른쪽 : 자동;
마진 왼쪽 : 자동;
}
위의 코드를 통해 컨테이너의 왼쪽 및 오른쪽 여백 (여백, 오른쪽 여백 왼쪽)는 브라우저에 의해 결정했다.
때문에 패딩 (패딩) 있다는 점 유의 고정 너비하십시오, 기본 컨테이너는 중첩 될 수 없습니다.
.container : 전에,
.container : 후 {
디스플레이 : 테이블;
내용 : "";
}
이 의사 요소를 생성합니다. 디스플레이 테이블을 설정, 그것은 익명의 테이블 셀과 새로운 블록 형식 컨텍스트를 생성합니다. : 의사 요소 앞에 부동 소수점을 취소 의사 요소 후 여백 붕괴를, : 방지합니다.
conteneditable 속성은 HTML에 나타나면, 오페라 버그의 일부 있기 때문에, 이러한 요소 주위에 공간을 만들 수 있습니다. 이것은 콘텐츠를 사용하여 수행 할 수 있습니다 : ""복구합니다.
.container : 후 {
맑은 : 모두;
}
그것은 의사 요소를 생성하고, 모든 요소를 포함하는 모든 떠있는 선박 보장합니다.
3 CSS 미디어 질의에 응답하여 애플리케이션을 갖는 부트 스트랩 다른 임계치 미디어 질의 그리드 시스템과 일치시키기 위해, 컨테이너의 최대 폭을 설정한다.
@media (최소 폭 : 768px) {
.container {
폭 : 750px;
}
부트 스트랩 브라우저 / 장치 지원
부트 스트랩은 최신 데스크탑 및 모바일 단말기 브라우저에서 잘 작동 할 수 있습니다.
이전 브라우저는 잘 지원되지 않을 수 있습니다.
다음 표는 브라우저와 플랫폼의 최신 버전을 지원하는 부트 스트랩 :
| 크롬 | 파이어 폭스 | IE | 오페라 | 원정 여행 | |
|---|---|---|---|---|---|
| 기계적 인조 인간 | YES | YES | 해당 사항 없음 | NO | 해당 사항 없음 |
| 아이폰 OS | YES | 해당 사항 없음 | 해당 사항 없음 | NO | YES |
| 맥 OS X | YES | YES | 해당 사항 없음 | YES | YES |
| 윈도우 | YES | YES | YES * | YES | NO |
* 인터넷 익스플로러 8과 IE의 이후 버전의 부트 스트랩을 지원합니다.