Bootstrap 기본 튜토리얼

Bootstrap 플러그인

Bootstrap HTML编码 규범

문법

탭(tab) 대신 두 개의 공백을 사용하세요 -- 이는 모든 환경에서 일관된 표현을 보장할 수 있는 유일한 방법입니다.
내嵌套된 요소는 한 번 정렬되어야 합니다(즉, 두 개의 공백).
속성 정의에 있어서, 모두 더블 쿼otation mark을 사용하고, 결코 싱글 쿼otation mark을 사용하지 마세요.
자기 닫기(self-closing) 요소는-closing) 요소의 끝에 슬래시(/)를 추가하지 마세요 -- HTML5 규범에서 명확히 선택적임을 명시했습니다.
선택적인 닫기 태그(closing tag)를 생략하지 마세요(예를 들어</li> 또는 </body>）。

예제:

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="[#0#]">
    <h1>Hello, world!</h1>
  </body>
</html>

HTML5 doctype

각 HTML 페이지의 첫 번째 줄에 표준 모드(standard mode)의 선언을 추가하여 모든 브라우저에서 일관된 표현을 보장할 수 있습니다.

예제:

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

언어 속성

HTML에 따라5 규범:

html 루트 요소에 lang 속성을 지정하는 것을 강력히 권장합니다. 이렇게 하면 문서의 올바른 언어를 설정할 수 있으며, 음성合成 도구가 음성을 발음할 때 사용할 발음을 결정하는 데 도움이 됩니다. 또한, 번역 도구가 번역할 때 지켜야 할 규칙을 결정하는 데도 도움이 됩니다.

이곳에서는 다음과 같이 나열되었습니다.언어 코드 테이블입니다.

<html lang="zh">
  <!-- ... -->
</html>

IE兼容模式

IE는 특정 <meta> 로 브라우저가 현재 페이지를 그리기 위해 사용해야 할 IE 버전을 지정합니다. 강력한 특별한 요구사항이 없는 경우, 가장 좋은 설정은 edge mode، 그래서 IE가 그가 지원하는 최신 모드를 사용하도록 알릴 수 있습니다.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

字符编码

문자编码를 명확히 선언함으로써, 브라우저가 페이지 내용의 렌더링 방식을 빠르고 쉽게 판단할 수 있습니다. 이렇게 하면 HTML에서 문자 entity 마크(character entity)를 사용하지 않아도 되며, 문서编码와 일치하게 전체를 설정할 수 있습니다(일반적으로 UTF-8 编码）。

<head>
  <meta charset="UTF-8">
</head>

CSS와 JavaScript 파일을 포함합니다.

HTML에 따라5 CSS와 JavaScript 파일을 포함할 때 일반적으로 지정하지 않아도 됩니다. type 속성은, 규범에 따라 text/css 및 text/javascript 각각의 기본 값입니다。

HTML5 spec links

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
  /* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>

실용성이 최우선

HTML 표준과 의미를 따르려고 하지만, 실용성을 희생하지 마세요. 언제나 최소한의 태그를 사용하고 최소한의 복잡성을 유지하도록 합니다.

속성 순서

HTML 속성은 다음과 같은 순서로 차례대로 정렬되어야 하며, 코드의 읽기 쉽기를 보장해야 합니다.

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role

class는 고유한 구성 요소를 식별하기 위해 사용되며, 따라서 최고위치에 위치해야 합니다. id는 특정 구성 요소를 식별하기 위해 사용되며, 주의 깊게 사용해야 합니다(예: 페이지 내의 책签), 따라서 두 번째 위치에 위치해야 합니다.

<a id="..." data-modal="toggle" href="#">
  예제 링크
</a>
<input type="text">
<img src="..." alt="[#1#]">

부울형 (boolean) 속성

부울형 속성은 선언할 때 값을 할당하지 않을 수 있습니다. XHTML 규격은 값이 필요하나, HTML5 규격은 필요하지 않습니다.

자세한 정보는 다음을 참고하세요 WhatWG 부울형 속성 섹션:

부울형 속성이 값이 있으면 true이고, 값이 없으면 false입니다.

만약확실하게할당하려면, WhatWG 규격을 참고하세요:

속성이 존재하면, 값은 공백 문자열이거나 [...] 속성의 규격화된 이름이어야 하며, 양쪽에 공백 문자를 추가하지 마세요.

간단히 말해, 값을 할당하지 않는 것입니다.

<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
  <option value="1" selected>1</option>
</select>

태그의 수를 줄입니다

HTML 코드를 작성할 때, 불필요한 부모 요소를 피하도록 합니다. 많은 경우 이는 반복적迭代과 재구성이 필요합니다. 아래 예제를 참고하세요:

<!-- Not so great -->
<span>
  <img src="...">
</span>
<!-- Better -->
<img src="...">

JavaScript으로 생성된 태그

JavaScript으로 생성된 태그는 내용을 찾기 어렵게 하고 편집하기 어렵게 하며 성능을 저하시킵니다. 피할 수 있을 때는 피하십시오.

Bootstrap CSS编码 규범 Bootstrap 슬라이드 플러그인