GaramX

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== Theming Bootstrap ======
===== Maps And Loops =====

==== 수정 ====
**$theme-colors**Map의 기존 색상을 수정하려면 사용자 정의 Sass 파일에 다음을 추가하십시오.
<code css>
$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);
</code>
추가하려면
<code css>
$theme-colors: (
  "custom-color": #900
);
</code>
삭제하려면
<code css>
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...
</code>

==== 필수 키 ====

부트스트랩은 우리가 직접 사용하고 확장할 때 Sass 맵 내에 특정 키가 있다고 가정합니다. 포함된 맵을 사용자 정의할 때 특정 Sass 맵의 키가 사용되는 경우 오류가 발생할 수 있습니다.

  예를 들어, 우리는 사용 primary, success및 danger에서 키를 $theme-colors링크, 버튼 및 양식 상태에 대한. 이러한 키의 값을 교체하면 문제가 없지만 제거하면 Sass 컴파일 문제가 발생할 수 있습니다. 이러한 경우 해당 값을 사용하는 Sass 코드를 수정해야 합니다.
  
==== 기능 ====
<code css>
.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}
</code>

<code css>
@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}
</code>

<code css>
.custom-element {
  color: theme-color-level(primary, -10);
}
</code>

<code css>
.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}
</code>

<code css>
$border-radius: .25rem;
$border-width: 1px;

.element {
  // Output calc(.25rem - 1px) is valid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output the same calc(.25rem - 1px) as above
  border-radius: subtract($border-radius, $border-width);
}
</code>

<code css>
$border-radius: .25rem;
$border-width: 0;

.element {
  // Output calc(.25rem - 0) is invalid
  border-radius: calc($border-radius - $border-width);
}

.element {
  // Output .25rem
  border-radius: subtract($border-radius, $border-width);
}
</code>
GaramX

사용자 도구

사이트 도구

문서 도구
