3 CSS 개요 부트 스트랩
목표
이 튜토리얼에서, 우리는 부트 스트랩 3 CSS 점을 논의했다. 다음에 우리는 몇 가지 주요 요소를 작업 부트 스트랩 3을 설명합니다.
HTML 5 DOCTYPE (없는 Doctype)
3 부트 스트랩 HTML5와 CSS 속성의 일부 요소를 사용했다. 작동하려면 다음의 순서를, 당신은 HTML5 문서 형식 (에 doctype)를 사용합니다.
<! DOCTYPE html로> <HTML LANG = "EN"> ... </ HTML>
HTML5의 문서 형식 (에 doctype)를 사용하지 않고 만든 부트 스트랩에서 페이지의 시작, 당신이 직면 할 수있는 경우 일부 브라우저 코드에서 W3C 표준 유효성 검사를 통과 할 수없는 경우에도 그 아래에 일관성이 어떤 상황에 직면 할 수 불일치 문제를 표시 .
모바일 장치 우선 순위
이것은 아마도 부트 스트랩 (3)의 가장 큰 변화이다. 부트 스트랩의 이전 버전 (2.x에서까지), 수동으로 주요 모바일 기기 친화적 인 CSS와 함께 프로젝트를 만들기 위해, 또 다른 CSS를 인용 할 필요가있다. 아니 더 이상, 부트 스트랩 3 기본 CSS 자체가 모바일 장치 친화입니다.
(3) 모바일 장치 우선 순위 설계 부트 스트랩, 바탕 화면 하였다. 점점 더 많은 사람들이 모바일 기기를 사용하는 이것은 실제로 매우시의 적절 변화이다.
적절한 렌더링 및 터치 스크린 줌을 보장하기 쉬운 휴대 기기 용 부트 스트랩 개발 웹 사이트를 만들려면 다음과 같이 페이지의 머리에 뷰포트 메타 태그를 추가해야합니다 :
<메타 이름 = "뷰포트"내용 = "너비 = 장치 폭, 초기 규모 = 1.0">
width 속성 폭 제어 장치. 귀하의 사이트가 검색하기 위해 다른 화면 해상도 장치와 것입니다 가정하고 있는지가 다른 장치에서 제대로 렌더링하기 위해 장치 너비로 설정합니다.
초기 규모 = 1.0 페이지가로드를 보장하기 위해, (1)의 비율 : 1 프리젠 테이션은, 어떤 크기 조절이되지 않습니다.
사용자 확장 성을 추가하여 모바일 장치 브라우저에서 = 뷰포트 메타 태그는 크기 조정 (확대) 기능을 사용하지 아니합니다. 일반적으로, 최대 규모 = 1.0 및 사용자 확장 성 = 더 함께. 이 줌 기능이 비활성화 된 후, 사용자가 화면을 스크롤 할 수 있습니다, 당신은 당신의 사이트가 네이티브 응용 프로그램의 느낌처럼 더 볼 수 있습니다. 이 방법으로 우리는 모든 사이트의 사용을 권장하지 않습니다, 또는 자신의 상황에 달려 있습니다!
응답 이미지
IMG 응답 클래스를 추가하여 더 친절 반응 레이아웃을 지원하기 위해 부트 스트랩 3 사진을 수 있습니다. 이 클래스는 속성을 CSS 것을 포함에서의이 살펴 보자. 및 높이 100 % : 그 본질은 최대 너비 이미지를 제공하는 자동; 재산권 부모 요소의 크기를 초과하지 않는, 이미지 스케일링을 허용한다.
.img가 응답 {
디스플레이 : 인라인 블록;
높이 : 자동;
최대 폭 : 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에서 찾을 수 있습니다.
브라우저 간 불일치를 피하십시오
3 부트 스트랩, 이전 버전처럼, 크로스 브라우저의 일관성을 만들려면 표준화를 사용합니다.
컨테이너
패키지 페이지의 내용에 대해 3 부트 스트랩 컨테이너 클래스입니다. 이제 다음 클래스를 살펴 보자
.container {
마진 오른쪽 : 자동;
마진 왼쪽 : 자동;
}
상기 코드를 상기 브라우저에 의해 컨테이너의 좌우 마진 결정한다.
.container : 전에,
.container : 후 {
디스플레이 : 테이블;
내용 : "";
}
이 의사 요소를 생성합니다. 디스플레이 테이블을 설정, 그것은 익명의 테이블 셀과 새로운 블록 형식 컨텍스트를 생성합니다. : 의사 요소 앞에 부동 소수점을 취소 의사 요소 후 여백 붕괴를, : 방지합니다.
conteneditable 속성은 HTML에 나타나면, 오페라 버그의 일부 있기 때문에, 이러한 요소 주위에 공간을 만들 수 있습니다. 이것은 콘텐츠를 사용하여 수행 할 수 있습니다 : ""복구합니다.
.container : 후 {
맑은 : 모두;
}
그것은 의사 요소를 생성하고, 모든 요소를 포함하는 모든 떠있는 선박 보장합니다.
3 CSS 미디어 질의에 응답하여 애플리케이션을 갖는 부트 스트랩 다른 임계치 미디어 질의 그리드 시스템과 일치시키기 위해, 컨테이너의 최대 폭을 설정한다.