ยูทิลิตี้ API

API ยูทิลิตี้เป็นเครื่องมือที่ใช้ Sass เพื่อสร้างคลาสยูทิลิตี้

ในหน้านี้

ยูทิลิตี้ Bootstrap ถูกสร้างขึ้นด้วยยูทิลิตี้ API ของเรา และสามารถใช้เพื่อแก้ไขหรือขยายชุดคลาสยูทิลิตี้เริ่มต้นของเราผ่าน Sass ยูทิลิตี API ของเราอิงตามชุดของแผนที่ Sass และฟังก์ชันสำหรับสร้างกลุ่มคลาสที่มีตัวเลือกต่างๆ หากคุณไม่คุ้นเคยกับแผนที่ Sass โปรดอ่านเอกสาร Sass อย่างเป็นทางการเพื่อเริ่มต้น

แผนที่ประกอบด้วย ระบบ$utilitiesสาธารณูปโภคทั้งหมดของเราและจะรวมเข้ากับ$utilitiesแผนที่ที่กำหนดเองของคุณในภายหลัง หากมี แผนผังยูทิลิตี้ประกอบด้วยรายการคีย์ของกลุ่มยูทิลิตี้ซึ่งยอมรับตัวเลือกต่อไปนี้:

ตัวเลือก	พิมพ์	คำอธิบาย
`property`	ที่จำเป็น	ชื่อของคุณสมบัติ อาจเป็นสตริงหรืออาร์เรย์ของสตริง (เช่น ช่องว่างภายในแนวนอนหรือระยะขอบ)
`values`	ที่จำเป็น	รายการค่า หรือแผนที่ หากคุณไม่ต้องการให้ชื่อคลาสเหมือนกับค่า หาก`null`ใช้เป็นคีย์แผนที่ จะไม่มีการรวบรวม
`class`	ไม่จำเป็น	ตัวแปรสำหรับชื่อคลาสถ้าคุณไม่ต้องการให้เหมือนกับคุณสมบัติ ในกรณีที่คุณไม่ได้ระบุ`class`คีย์และ`property`คีย์เป็นอาร์เรย์ของสตริง ชื่อคลาสจะเป็นองค์ประกอบแรกของ`property`อาร์เรย์
`state`	ไม่จำเป็น	รายการตัวแปรระดับหลอกเช่น`:hover`หรือ`:focus`ที่จะสร้างสำหรับยูทิลิตี้ ไม่มีค่าเริ่มต้น
`responsive`	ไม่จำเป็น	บูลีนที่ระบุว่าจำเป็นต้องสร้างคลาสที่ตอบสนองหรือไม่ `false`โดยค่าเริ่มต้น.
`rfs`	ไม่จำเป็น	บูลีนเพื่อเปิดใช้งานการปรับขนาดของเหลว ดูที่ หน้า RFSเพื่อดูว่ามันทำงานอย่างไร `false`โดยค่าเริ่มต้น.
`print`	ไม่จำเป็น	บูลีนระบุว่าจำเป็นต้องสร้างคลาสการพิมพ์หรือไม่ `false`โดยค่าเริ่มต้น.
`rtl`	ไม่จำเป็น	บูลีนระบุว่าควรเก็บยูทิลิตี้ไว้ใน RTL หรือไม่ `true`โดยค่าเริ่มต้น.

API อธิบาย

ตัวแปรยูทิลิตี้ทั้งหมดจะถูกเพิ่มลงใน$utilitiesตัวแปรภายใน_utilities.scssสไตล์ชีต ของเรา ยูทิลิตี้แต่ละกลุ่มมีลักษณะดังนี้:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

ซึ่งให้ผลลัพธ์ดังต่อไปนี้:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

คำนำหน้าคลาสที่กำหนดเอง

ใช้classตัวเลือกเพื่อเปลี่ยนคำนำหน้าคลาสที่ใช้ใน CSS ที่คอมไพล์แล้ว:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

เอาท์พุท:

.o-0 { opacity: 0; }
.o-25 { opacity: .25; }
.o-50 { opacity: .5; }
.o-75 { opacity: .75; }
.o-100 { opacity: 1; }

รัฐ

ใช้stateตัวเลือกเพื่อสร้างรูปแบบคลาสหลอก ตัวอย่างคลาสหลอกคือ:hoverและ:focus. เมื่อมีการระบุรายการสถานะ ชื่อคลาสจะถูกสร้างขึ้นสำหรับคลาสหลอกนั้น ตัวอย่างเช่น หากต้องการเปลี่ยนความทึบเมื่อวางเมาส์เหนือ ให้เพิ่มstate: hoverแล้วคุณจะได้.opacity-hover:hoverCSS ที่คอมไพล์แล้ว

ต้องการคลาสหลอกหลายคลาส? ใช้รายการสถานะที่คั่นด้วยช่องว่าง: state: hover focus.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

เอาท์พุท:

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

สาธารณูปโภคที่ตอบสนอง

เพิ่มresponsiveบูลีนเพื่อสร้างยูทิลิตี้ตอบสนอง (เช่น.opacity-md-25) ในทุกจุดสั่งหยุด

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

เอาท์พุท:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

การเปลี่ยนระบบสาธารณูปโภค

แทนที่ยูทิลิตี้ที่มีอยู่โดยใช้คีย์เดียวกัน ตัวอย่างเช่น หากคุณต้องการคลาสยูทิลิตีโอเวอร์โฟลว์แบบตอบสนองเพิ่มเติม คุณสามารถทำได้:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

ยูทิลิตี้การพิมพ์

การเปิดใช้งานprintตัวเลือกนี้ จะ สร้างคลาสยูทิลิตี้สำหรับการพิมพ์ด้วย ซึ่งจะใช้เฉพาะใน@media print { ... }แบบสอบถามสื่อเท่านั้น

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
 );

เอาท์พุท:

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

ความสำคัญ

ยูทิลิตีทั้งหมดที่สร้างโดย API รวมถึง!importantเพื่อให้แน่ใจว่าจะแทนที่ส่วนประกอบและคลาสตัวปรับแต่งตามที่ตั้งใจไว้ คุณสามารถสลับการตั้งค่านี้ทั่วโลกด้วย$enable-important-utilitiesตัวแปร (ค่าเริ่มต้นเป็นtrue)

การใช้ API

เมื่อคุณคุ้นเคยกับวิธีการทำงานของยูทิลิตี้ API แล้ว ให้เรียนรู้วิธีเพิ่มคลาสที่กำหนดเองและแก้ไขยูทิลิตี้เริ่มต้นของเรา

เพิ่มสาธารณูปโภค

สามารถเพิ่มยูทิลิตี้ใหม่ลงใน$utilitiesแผนที่เริ่มต้นด้วยนามสกุลmap-merge. ตรวจสอบให้แน่ใจว่าไฟล์ Sass ที่จำเป็นของเราและ_utilities.scssนำเข้าก่อน จากนั้นใช้map-mergeเพื่อเพิ่มยูทิลิตี้เพิ่มเติมของคุณ ตัวอย่างเช่น ต่อไปนี้คือวิธีเพิ่มcursorยูทิลิตีแบบตอบสนองด้วยค่าสามค่า

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

แก้ไขยูทิลิตี้

แก้ไขยูทิลิตี้ที่มีอยู่ใน$utilitiesแผนที่เริ่มต้นด้วยmap-getและmap-mergeฟังก์ชั่น ในตัวอย่างด้านล่าง เรากำลังเพิ่มมูลค่าเพิ่มเติมให้กับwidthยูทิลิตี้ เริ่มต้นด้วยชื่อย่อmap-mergeแล้วระบุยูทิลิตี้ที่คุณต้องการแก้ไข จากนั้นดึง"width"แผนที่ ที่ซ้อนกัน map-getเพื่อเข้าถึงและแก้ไขตัวเลือกและค่าของยูทิลิตี้

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

เปิดใช้งานการตอบสนอง

คุณสามารถเปิดใช้งานคลาสที่ตอบสนองสำหรับชุดยูทิลิตี้ที่มีอยู่ซึ่งปัจจุบันไม่ตอบสนองตามค่าเริ่มต้น ตัวอย่างเช่น เพื่อให้borderคลาสตอบสนอง:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

ซึ่งตอนนี้จะสร้างรูปแบบที่ตอบสนองต่อ.borderและ.border-0สำหรับแต่ละเบรกพอยต์ CSS ที่คุณสร้างขึ้นจะมีลักษณะดังนี้:

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

เปลี่ยนชื่อยูทิลิตี้

ไม่มียูทิลิตี้ v4 หรือใช้กับการตั้งชื่อแบบอื่น? ยูทิลิตี API สามารถใช้เพื่อแทนที่ผลลัพธ์classของยูทิลิตีที่กำหนด ตัวอย่างเช่น เพื่อเปลี่ยนชื่อ.ms-*ยูทิลิตีเป็น oldish .ml-*:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

ลบยูทิลิตี้

ลบยูทิลิตี้เริ่มต้นโดยตั้งค่าคีย์กลุ่มnullเป็น ตัวอย่างเช่น หากต้องการลบwidthยูทิลิตี้ทั้งหมดของเรา ให้สร้าง a $utilities map-mergeและเพิ่ม"width": nullภายใน

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

ลบยูทิลิตี้ใน RTL

เคสขอบบางอันทำให้การจัดรูปแบบ RTL ทำได้ยากเช่น การขึ้นบรรทัดใหม่เป็นภาษาอาหรับ ดังนั้นยูทิลิตี้สามารถหลุดจากเอาต์พุต RTL ได้โดยการตั้งค่าrtlตัวเลือกเป็นfalse:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

เอาท์พุท:

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

สิ่งนี้ไม่ได้ส่งออกสิ่งใดใน RTL ต้องขอบคุณRTLCSS control removedirective