BootStrap 입문 튜토리얼(2) - 고정된 내장 스타일

관련 독서：

BootStrap 입문 튜토리얼(1) - 시각적 레이아웃

HTML5문서 유형（Doctype）

Bootstrap은 몇 가지 HTML5요소와 CSS 속성이 있으므로 HTML5문서 유형。

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

모바일 장치 우선

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

　　　폭을 device-width는 다양한 장치에서 올바르게 표시되도록 할 수 있습니다.

　initial-scale=1.0을 통해 페이지가 로드될 때,1:1비율로 표현할 수 있습니다.

　　viewport meta 태그에 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="[#0#]"> 
　　bootstrap.css에 img을 설정했습니다-responsive의 속성：
.img-responsive {
display: inline-block;
height: auto;
max-width: 100%;
}

기본적인 전체 표시

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

링크 스타일

a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline:細점선 #333;
outline: 5px 자동 -webkit-focus-ring-color;
outline-offset: -2px;
}

　　기본 설정은 좋고 나쁜 점이 있으며, 불가피합니다.

　　하려면 a 링크에 btn이라는 클래스를 추가할 수 있습니다. 이 클래스의 기본 설정은 다음과 같습니다：

a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;}
a:focus {
outline:細점선 #333;
outline: 5px 자동 -webkit-focus-ring-color;
outline-offset: -2px;}

크로스 브라우저 불일관성을 피합니다

　　Normalize.css는 더 나은 크로스 브라우저 일관성을 제공합니다.

컨테이너(Container)

<div class="container">
..
</div>

　　.container의 스타일:

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

　　좌우 외부 여백은 브라우저가 결정합니다.

　　내부 여백이 고정된 너비이므로, 기본적으로 컨테이너는 중첩되지 않습니다.

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

　　display를 table로 설정하면 익명의 테이블을 생성합니다-cell과 새로운 블록 포맷 컨텍스트를 생성합니다.:before 퍼시브 요소는 상단 마진 붕괴를 방지하고, :after 퍼시브 요소는 풍선을 정리합니다. content: " "은 일부 Opera 버그를 수정합니다.

.container:after {
clear: both;
}

　　또한, 해당 미디어 쿼리를 요청합니다:

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

Bootstrap 브라우저/장치 지원

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

참조:http://www.runoob.com/bootstrap/bootstrap-css-overview.html

위에 설명한 것은 편집자가 여러분에게 소개하는 Bootstrap 입문 교본(2)의 고정된 내장 스타일입니다. 여러분이 어떤 질문이나 의문이 있으면, 편집자가 즉시 답변해 드리겠습니다. 또한 여러분의 지원에 깊이 감사드립니다. 또한,呐喊 교본 웹사이트에 대한 여러분의 지원에 감사드립니다!

기본 튜토리얼

좋아하는 것