Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap CSS 소개

이 장에서는 Bootstrap의 기본 구조의 핵심 부분을 설명하겠습니다. 이를 통해 웹 개발이 더 나아가고 더 빠르고 더 강력해질 수 있는 최고의 관행을 다룹니다.

HTML 5 문서 유형(Doctype)

Bootstrap는 몇 가지 HTML을 사용합니다.5 요소와 CSS 속성. 이러한 것이 정상적으로 작동하려면 HTML을 사용해야 합니다.5 문서 유형(Doctype) 따라서, Bootstrap 프로젝트를 사용하는 시작 부분에 다음 코드 구간을 포함하도록 합니다.

<!DOCTYPE　html>
<html>
....
</html>

Bootstrap를 사용하여 만든 웹 페이지의 시작 부분에서 HTML을 사용하지 않으면5 의 문서 타입(Doctype)을 사용하면, 일부 브라우저에서 표시가 일치하지 않는 문제나 특정 상황에서 일치하지 않는 문제가 발생할 수 있습니다. 심지어 코드가 통과하지 않을 수도 있습니다.3C 표준 검증을 받았습니다.

모바일 장치 우선

의 모바일 장치 우선 원칙은 3 의 가장显著한 변화입니다.

의 이전 버전에서 (까지) 2.x)을 사용하려면, 전체 프로젝트가 모바일 장치에 유리하게 지원되도록 하기 위해 또 다른 CSS를 수동으로 참조해야 합니다.

하지만 지금은 다릅니다, Bootstrap 3 CSS 자체는 기본적으로 모바일 장치에 유리하게 지원됩니다.

Bootstrap 3 의 설계 목표는 모바일 장치를 우선으로 하고, 그 다음은 데스크톱 장치입니다. 이는 현재 모바일 장치를 사용하는 사용자가 점점 더 많아지는 실시간 변화입니다.

Bootstrap로 개발된 웹사이트가 모바일 장치에 유리하도록 보장하기 위해 적절한 렌더링과 터치 확대를 보장하기 위해 웹페이지의 head에 추가해야 합니다: viewport meta 태그를 다음과 같이 추가하세요:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width 속성은 장치의 너비를 제어합니다. 귀하의 웹사이트가 다른 화면 해상도를 가진 장치에서 볼 수 있도록 설정하려면, device-width 그래서 그것이 다른 장치에서 올바르게 표시되도록 보장할 수 있습니다.

initial-scale=1.0 웹페이지가 로드될 때, 1:1 비율로 표시되어 확대는 없습니다.

모바일 장치 브라우저에서, viewport meta 태그에 추가하면 user-scalable=no 그의 확대(zooming) 기능을 비활성화할 수 있습니다.

보통 상황에서는,maximum-scale=1.0 와 함께-scalable=no와 함께 사용하면. 이렇게 확대 기능을 비활성화하면, 사용자는 스크롤을 통해 화면을 이동할 수 있어 웹사이트가 원생 애플리케이션처럼 보이게 할 수 있습니다.

주의하십시오. 이 방법은 모든 웹사이트에 적용되는 것을 추천하지 않으며, 여전히 귀하의 상황에 따라 결정해야 합니다!

<meta name="viewport" content="width=device-width,　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　initial-scale=1.0,　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　maximum-scale=1.0,　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　user-scalable=no">

반응형 이미지

<img src="..." alt="반응형 이미지">

추가하여 img-responsive class는 Bootstrap 3 중의 이미지는 반응형 레이아웃에 더 유리합니다.

이제 이 class가 포함한 CSS 속성을 확인해 보겠습니다.

아래의 코드에서 볼 수 있듯이img-responsive class는 이미지에 max-width: 100%;과 height: auto; 속성은 이미지가 비율을 유지하면서 확대할 수 있도록 하고, 부모 요소의 크기를 초과하지 않도록 합니다.

.img-responsive {
　　display: block;
　　height: auto;
　　max-width:　100%;
}

이는 관련 이미지가 block. display 속성을 block으로 설정하여 요소를 블록 요소로 표시합니다.

를 설정하면 height: auto관련 요소의 높이는 브라우저에 따라 결정됩니다.

를 설정하면 max-width 는 100%는 width 속성으로 지정된 모든 너비를 덮어씁니다. 이는 이미지가 반응형 레이아웃을 더 잘 지원하도록 합니다.

만약 .img을 사용하여-responsive 클래스의 이미지를 수평 정렬하려면 .center를 사용하세요.-block 클래스를 사용하면 .text를 사용하지 않습니다.-center.

전체 표시, 레이아웃 및 링크

기본 전체 표시

Bootstrap 3 사용 body {margin: 0;} 로 body의 마argins를 제거합니다.

body에 대한 설정을 다음에 보세요:

body {
　　font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
　　font-size:　14px;
　　line-height:　1.428571429;
　　color: #333333;
　　background-color: #ffffff;
}

첫 번째 규칙은 body의 기본 글자 스타일을 설정합니다. "Helvetica Neue", Helvetica, Arial, sans-serif.

두 번째 규칙은 기본 텍스트 글자 크기를 설정합니다. 14 픽셀.

세 번째 규칙은 기본 줄 높이를 설정합니다. 1.428571429.

네 번째 규칙은 기본 텍스트 색상을 #333333.

마지막 규칙은 기본 배경색을 흰색으로 설정합니다.

레이아웃

을 사용하여-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 브라우저에 대해 -webkit-focus-ring-color 의 브라우저 확장. 경계선 내각 설정이 -2 픽셀.

위의 모든 스타일은 scaffolding.less에서 찾을 수 있습니다。

크로스 브라우저 불일치를 피합니다

Bootstrap는 Normalize 를 통해 크로스 브라우저 일관성을 구축합니다。

Normalize.css는 매우 작은 CSS 파일로, HTML 요소의 기본 스타일에서 더 나은 크로스 브라우저 일관성을 제공합니다。

컨테이너(Container)

<div>
　　...
</div>

Bootstrap 3 의 container class는 페이지 내용을 감싸는 데 사용됩니다. bootstrap.css 파일에서 이 .container class.

.container　{
　　　padding-right:　15px;
　　　padding-left:　15px;
　　　margin-right:　auto;
　　　margin-left:　auto;
}

위의 코드를 통해 container의 좌우 외부 여유 공간(margin-right、margin-left）는 브라우저가 결정합니다。

내부 여유 공간(padding)이 고정된 너비이므로 기본적으로 컨테이너는 중첩되지 않습니다.

.container:before,
.container:after　{
　　display:　table;
　　content:　"　";
}

이는 가상 요소를 생성합니다. 설정 display 는 table으로 인해 익명의 테이블이 생성됩니다。-셀과 새로운 블록 포맷 컨텍스트를 생성합니다。:before 가상 요소는 상단 여유 공간이 무너지는 것을 방지합니다。:after 가상 요소를 사용하여 플로팅을 지우는 것입니다。

만약 conteneditable 속성이 HTML에 나타나면 Opera의 일부 버그로 인해 위의 요소 주위에 공백이 생성됩니다. 이는 content: " " 을 수정합니다。

.container:after　{
　　clear:　both;
}

그는 가상 요소를 생성하고 모든 컨테이너가 모든 플로팅 요소를 포함하도록 보장합니다。

Bootstrap 3 CSS는 응답형 미디어 쿼리를 제공하며，다양한 미디어 쿼리 기준 범위에서 container에 max를 설정했습니다。-width，로 레이아웃 시스템과 일치하도록 합니다。

@media　(min-width:　768px)　{
　　　.container　{
　　　　　　width:　750px;
}

Bootstrap 브라우저/장치 지원

Bootstrap는 최신 데스크톱 및 모바일 브라우저에서 잘 작동합니다.

오래된 브라우저는 잘 지원되지 않을 수 있습니다.

아래 표는 Bootstrap가 지원하는 최신 버전의 브라우저와 플랫폼입니다:

	Chrome	Firefox	IE	Opera	Safari
Android	YES	YES	미사용	미사용	미사용
iOS	YES	미사용	미사용	미사용	YES
Mac OS X	YES	YES	미사용	YES	YES
Windows	YES	YES	YES*	YES	미사용

* Bootstrap는 Internet Explorer를 지원합니다 8 또는 더 높은 버전의 IE 브라우저.

Bootstrap 정렬 Bootstrap 환경 설정