Bootstrap 기본 튜토리얼

Bootstrap 플러그인

Bootstrap 그리드 시스템 예제: 수평 스택 Bootstrap HTML编码 규범

Bootstrap CSS编码 규범

문법

탭(tab) 대신 두 개의 공백을 사용하세요. -- 모든 환경에서 일관된 표현을 보장할 수 있는 유일한 방법입니다.
선택자를 그룹화할 때, 단일 선택자를 별도의 줄에 배치하세요.
코드의 읽기 쉬움을 위해 각 선언 블록의 왼쪽 괄호 앞에 공백을 추가하세요.
선언 블록의 오른쪽 괄호는 별도의 줄로 떨어져야 합니다.
각 선언 문의 : :
마지막 선언 뒤에 공백을 삽입해야 합니다.
더 정확한 오류 보고서를 얻기 위해 각 선언은 줄 단위로 분리되어야 합니다.
모든 선언 문은 세미콜론으로 끝날 수 있습니다. 마지막 선언 문 뒤의 세미콜론은 선택적이지만, 이를 생략하면 코드가 더 쉽게 오류가 발생할 수 있습니다.box-컴마로 구분된 속성 값에 대해, 각 컴마 뒤에 공백을 삽입해야 합니다(예를 들어)
shadow rgb()、rgba()、hsl()、hsla() 또는 rect() 의 값내부의 컴마 뒤에 공백을 삽입하여 여러 속성 값(컴마와 공백이 모두 추가된)에서 여러 색상 값(컴마만 추가된)을 구분할 수 있습니다.
속성 값이나 색상 매개변수에 대해, 이하의 것은 생략할 수 있습니다. 1 의 소수점 앞의 0 (예를 들어.5 대신 0.5；-.5px 대신 -0.5px)
16진수 값은 모두 소문자로 작성되어야 합니다, 예를 들어#fff문서를 스캔할 때, 소문자는 형태가 더 쉽게 구분되기 때문에 쉽게 인식됩니다.
16진수 값의 축약형을 사용하는 것이 좋습니다, 예를 들어 #fff 대신 #ffffff。
선택자의 속성에 쌍따옴표를 추가하세요, 예를 들어input[type="text"]。어떤 경우에만 선택적으로 사용됩니다하지만, 코드의 일관성을 위해 모두를 쌍따옴표로 덮어쓰는 것이 좋습니다.
0 단위를 지정하는 것을 피하고, 예를 들어 margin: 0; 대신 margin: 0px;。

이곳에서 사용하는 용어에 대한 의문이 있으신가요? Wikipedia에서 참조하세요: 스타일 시트 - 문법。

/* 안좋은 CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* 좋은 CSS */
.selector,
.selector,-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

선언 순서

관련 속성 선언은 한 그룹으로 묶어 다음 순서로 배치되어야 합니다:

Positioning

박스 모델

τυπογραφία

Visual

정적화(positioning)으로 일반 문서 흐름에서 요소를 제거하고, 박스 모델(box model) 관련 스타일을 덮을 수 있으므로 가장 먼저 배치됩니다. 박스 모델은 두 번째로 배치됩니다. 왜냐하면 그것이 컴포넌트의 크기와 위치를 결정하기 때문입니다.

기타 속성은 컴포넌트에 영향을 미칩니다.내부(inside)또는 두 번째 그룹의 속성에 영향을 미치지 않기 때문에 마지막에 위치합니다.

전체 속성 목록 및 정렬 순서는 다음을 참조하십시오 Recess。

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;
  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;
  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  /* Misc */
  opacity: 1;
}

사용하지 마세요 `@import`

와 <link> 태그와 비교하여@import 지시를 사용하면 느리게됩니다. 추가 요청 횟수를 늘리는 것뿐만 아니라 예상치 못한 문제를 일으킬 수 있습니다. 대체 방법은 다음과 같습니다:

다중 <link> Element
Sass 또는 Less와 같은 CSS 프리프로세서를 사용하여 여러 CSS 파일을 하나의 파일로 컴파일
Rails, Jekyll 또는 다른 시스템에서 제공하는 CSS 파일 결합 기능을 통해

참조 Steve Souders의 글更多信息请查看。

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">
<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

미디어 쿼리(미디어 쿼리) 위치

미디어 쿼리를 가능한 한 관련 규칙 근처에 두세요. 단일 스타일 파일에 모아놓거나 문서 하단에 두지 마세요. 나누어 두면 나중에는 잊혀질 것입니다. 아래는 유형적인 예제입니다.

.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

접두사를 가진 속성

특정 제조사의 접두사를 가진 속성을 사용할 때, 인덱스를 통해 각 속성의 값을 수직 방향으로 정렬하여 다중 행 편집을 쉽게 합니다.

Textmate에서 사용 텍스트 → 선택된 행마다 편집 (⌃⌘A)。Sublime Text에서 2 에서, Selection → Add Previous Line (⌃⇧↑) 과 Selection → Add Next Line (⌃⇧↓)。

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

inline rule declarations

foronly one declaration의 스타일을 위해, 읽기 편하며 빠르게 편집하기 쉽도록, 문장을 동일한 행에 두는 것이 좋습니다. 다중 선언을 가진 스타일의 경우, 여전히 선언을 다중 행으로 나누는 것이 좋습니다.

이렇게 하는 주요 요인은 오류 검출입니다 -- 예를 들어, CSS 검사기는 183 문법 오류가 있는 행이 있습니다. 단일 행 단일 선언일 경우 이 오류를 무시하지 마세요; 단일 행 다중 선언일 경우, 오류를 놓치지 않도록 주의 깊게 분석해야 합니다.

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

단축 형태의 속성 선언

모든 값을 명시적으로 설정해야 하는 경우, 단축 형태의 속성 선언을 최소한으로 제한하는 것이 좋습니다. 일반적으로 단축 속성 선언의 오용 사례는 다음과 같습니다:

padding
margin
font
background
border
border-radius

大部分의 경우, 단축 형태의 속성 선언에 모든 값을 지정할 필요가 없습니다. 예를 들어, HTML의 heading 요소는 상하 여백(margin) 값을 설정해야 하며, 필요할 때만 이 두 가지 값을 덮어쓰면 됩니다. 단축 형태의 속성 선언을 과도하게 사용하면 코드가 혼란스럽고, 속성 값에 불필요한 덮어쓰기가 발생하여 예기치 않은 부작용을 초래할 수 있습니다.

MDN (Mozilla Developer Network)에서 매우 좋은shorthand properties 의 문서는 간단한 속성 선언 및 동작에 익숙하지 않은 사용자에게 매우 유용합니다.

/* 나쁜 예제 */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}
/* 좋은 예제 */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

Less와 Sass의 내포

불필요한 내포를 피하세요. 이는 내포를 사용할 수 있지만, 내포를 사용해야 한다고는 아닙니다. 부모 요소 내에 스타일을 제한해야 하고, 여러 요소가 내포되어야 할 때에만 내포를 사용하세요.

// 내포되지 않음
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// 내포됨
.table > thead > tr {
  > th { … }
  > td { … }
}

주석

코드는 사람이 작성하고 유지합니다. 코드가 자기 설명적이고, 잘 주석을 달고, 다른 사람이 이해하기 쉬워야 합니다. 좋은 주석은 상황 관계와 코드 목적을 전달할 수 있습니다. 단순히 컴포넌트나 class 이름을 반복하지 마세요.

긴 주석은 완전한 문장으로 작성해야 하며, 일반적인 설명은 간결한 문구로 작성할 수 있습니다.

/* 나쁜 예제 */
/* Modal 헤더 */
.modal-header {
  ...
}
/* 좋은 예제 */
/* .modal의 래핑 요소-title과 .modal-close */
.modal-header {
  ...
}

class 이름

class 이름에만 소문자와 반점(-)이 사용될 수 있습니다. (하이픈은 언어와 같지 않으며, 밑줄이나 카멜케이스는 아닙니다). 반점은 관련된 class의 이름에 사용되어야 합니다. (이름 공간과 유사하게).btn 와 .btn-danger)
과도한 임의의 약자를 피하세요..btn 대표합니다 button하지만 .s 의미를 표현할 수 없습니다.
class 이름은 가능한 한 짧고 명확해야 합니다.
의미 있는 이름을 사용하세요. 조직적이거나 목적이 명확한 이름을 사용하고, 표현형식(presentational)의 이름을 사용하지 마세요.
최근의 부모 class나 기본(base) class를 새로운 class의 프리كس로 사용하세요.
사용하세요 .js-* 행동을 표시하기 위해 class를 사용하며, 이를 CSS 파일에 포함하지 마세요.

在为 Sass 和 Less 变量命名是也可以参考上面列出的各项规范。

/* 나쁜 예제 */
Sass와 Less 변수의 이름을 지을 때도 위에 나열된 규범을 참고하십시오.
.t { ... }
.red { ... }
/* 좋은 예제 */
.header { ... }
.tweet { ... }
.tweet-.important { ... }

header { ... }

선택자
일반 요소에 대해서는 class를 사용하여 렌더링 성능 최적화를 유리하게 합니다.빈번히 나타나는 컴포넌트에서는 속성 선택자를 피하십시오(예를 들어)[class^="..."]
). 브라우저의 성능은 이러한 요인에 의해 영향을 받습니다. 3 。
선택자는 최대한 짧게 하고, 선택자를 구성하는 요소의 개수를 최소화하십시오. 가능하다면 10개 이하로 제한하십시오필요할 때만 class를 가장 가까운 부모 요소 내에서 제한하십시오(예를 들어, 접두사가 있는 class를 사용하지 않을 때) -- 접두사는 이름 공간과 유사합니다).

확장 읽기:

/* 나쁜 예제 */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* 좋은 예제 */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

코드 조직

컴포넌트 단위로 코드 섹션을 조직하십시오.
일관된 주석 표준을 제정하십시오.
일관된 공백 문자로 코드를 블록으로 나누어, 큰 문서를 스캔하기 쉽게 합니다.
여러 CSS 파일을 사용한 경우, 페이지 대신 컴포넌트로 분할하여, 페이지는 재구성됩니다만 컴포넌트는 이동만 됩니다.

/*
 * 컴포넌트 섹션 제목
 */
.element { ... }
/*
 * 컴포넌트 섹션 제목
 *
 * 전체 컴포넌트에 대한 선택적 상황을 포함해야 할 때가 있습니다. 중요하다면 여기서 수행하십시오.
 */
.element { ... }
/* 상대적 서브-component 또는 modifer */
.element-heading { ... }

편집기 설정

하단의 설정에 따라 편집기를 설정하여 일반적인 코드 불일치와 차이를 피하십시오:

제어표시(soft tab)를 두 개의 공백으로 대체하십시오-tab 을 공백으로 대체하십시오).
파일을 저장할 때, 끝의 빈 문자를 제거하십시오
파일编码을 UTF로 설정하십시오-8。
파일 끝에 빈 줄을 추가하십시오

문서를 참조하여 이러한 설정 정보를 프로젝트에 추가하십시오 .editorconfig 파일에 있습니다. 예를 들어:更多信息는 Bootstrap의 .editorconfig 예제를 참조하십시오。 about EditorConfig。