bootstrap:theming

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- bootstrap:theming [2021/11/13 11:37] – [수정] taekgu
+++ bootstrap:theming [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 1: / 줄 1: @@
+====== 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>