หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

คู่มือเสริมสู่โหมดมืดและ bootstrap 5

ความต่อเนื่องของ V4 Dark Mode POC แต่คราวนี้สำหรับ V5

นี่คือการติดตามคำแนะนำที่ชัดเจนเกี่ยวกับโหมดมืดและการทำงานของ Bootstrap 4 และเกี่ยวข้องกับ bootstrap 5 (GitHub repo.)

หากคุณหลังจากทำงานเดียวกันกับ Bootstrap 4 โปรดไปที่ Vinorodrigues/Bootstrap-Dark Repo

หมายเหตุสำคัญเกี่ยวกับสถานะของโครงการนี้:

ความพยายามในการพัฒนากลับมาที่พื้นที่เก็บข้อมูลหลักของ Bootstrap 5 ถึง V5.3 ซึ่งตอนนี้มี "โหมดสี" และภายในการใช้งานของโหมดมืด ดู:

https://getbootstrap.com/docs/5.3/customize/color-modes/

สิ่งนี้ทำให้โครงการนี้ซ้ำซ้อนและจะถูกปลดออกจากตำแหน่งและที่เก็บที่นี่เพื่อประโยชน์ของการศึกษา

เกี่ยวกับ

รหัสนี้จะสมเหตุสมผลเล็กน้อยหากคุณไม่ได้อ่านคู่มือที่ชัดเจนถึง Dark Mode และ Bootstrap 4 ก่อน

คุณได้อะไร?

รหัสรวบรวมสี่วิธี (และตัวแปร - ทั้งหมดหก ) ของร่างกายต้นฉบับของการทำงาน แต่รวบรวมและจัดหา bootstrap 5 นี่คือ:

วิธีที่ 1

(ลิงก์ไปยังต้นฉบับ)

  • bootstrap-night : นี่เป็นเพียงธีม bootstrap มืด อย่างไรก็ตามมันสามารถใช้กับ CSS Core Bootstrap เพื่อส่งมอบฟังก์ชั่นโหมดมืด 2 ไฟล์

วิธีที่ 2

(ลิงก์ไปยังต้นฉบับ)

  • bootstrap-nightfall : นี่เป็นเพียง "สีเท่านั้น" CSS ของส่วนประกอบทั้งหมดของ bootstrap core แต่มืดและมีจุดประสงค์เพื่อใช้เป็นส่วนเสริม นอกจากนี้ยังสามารถใช้การสืบค้นสื่ออย่างง่ายไดรฟ์ Dark Mode อัตโนมัติ

วิธีที่ 3

(ลิงก์ไปยังต้นฉบับ)

  • bootstrap-nightshade : นี่คือการปรับเปลี่ยนแกน bootstrap และเพิ่ม CSS สีเข้มสำหรับส่วนประกอบทั้งหมด แต่มืดซ้อนกันใน Wrapper คลาส html.dark โดยตัวมันเองมันไม่สามารถเสนอการสลับโหมดมืดได้ แต่เพิ่มไลบรารี darkmode.js ที่รวมอยู่และคุณมีตัวแปรการสลับโหมด Dark แบบโต้ตอบของ bootstrap ด้วยการรองรับปุ่ม "สลับ" ในตัว

  • bootstrap-blackbox : ตัวแปรนี้เป็นหลักเหมือนกับตัวแปร "Nightshade" แต่แทนที่จะใช้คลาสแท็ก HTML มันใช้แอตทริบิวต์ข้อมูลแท็ก HTML; data-bs-color-scheme ไลบรารี darkmode.js เดียวกันขับเคลื่อนอันนี้สิ่งที่คุณต้องทำคือเพิ่มแอตทริบิวต์ข้อมูลลงในแท็ก HTML ของคุณ

วิธีที่ 4

(ลิงก์ไปยังต้นฉบับ)

  • bootstrap-dark : นี่คือวิธีที่แนะนำ หนึ่ง CSS ที่มีทั้งธีมแสงและความมืดสลับสามารถใช้ได้กับระบบปฏิบัติการหรือ prefers-color-scheme ราว์เซอร์

  • bootstrap-unlit : ตัวแปรนี้เป็นหลักเหมือนกับตัวแปร "มืด" แต่ด้วยรูปแบบ "มืด" เป็นหลัก/หลังกลับและ "แสง" เป็นตัวเลือกในรูปแบบสี

เริ่มต้นใช้งาน

1. bootstrap-night 2. bootstrap-nightfall 3. bootstrap-nightshade 3b. bootstrap-blackbox 4. bootstrap-dark 4b. bootstrap-unlit
คู่มือเริ่มต้นด่วน คู่มือเริ่มต้นด่วน คู่มือเริ่มต้นด่วน คู่มือเริ่มต้นด่วน คู่มือเริ่มต้นด่วน คู่มือเริ่มต้นด่วน
darkmode.js อ้างอิง darkmode.js อ้างอิง
ดูตัวอย่าง ดูตัวอย่าง ดูตัวอย่าง

หลักฐานอยู่ในพุดดิ้ง

หน้าทดสอบบางหน้าได้รับการตั้งค่าที่ vinorodrigues.github.io/bootstrap-dark-5

คุณสามารถใช้สิ่งนี้ได้หรือไม่?

ใช่.

ใบอนุญาตคือ MIT IE ใช้เป็นวิธีที่คุณให้เครดิตผู้เขียนดั้งเดิมและออกจากลิขสิทธิ์ในแหล่งกำเนิด

หากคุณเป็นผู้สร้างธีมหรือต้องการใช้หลักการในโครงการของคุณเองคุณจะต้องติดตั้ง Git และ Node

  1. ส้อมหรือดาวน์โหลดที่เก็บ: git clone https://github.com/vinorodrigues/bootstrap-dark-5.git
  2. ติดตั้งการพึ่งพาโหนด: npm install (ดูหมายเหตุด้านล่าง)
  3. แก้ไข _variables.scss และ _variables-alt.scss ในโฟลเดอร์ย่อย scss
  4. เรียกใช้ npm run build เพื่อสร้างธีมของคุณ
  5. รหัสที่รวบรวมจะอยู่ในโฟลเดอร์ dist

ระบบสร้างขึ้นอยู่กับสคริปต์ NPM เครื่องมือสร้างส่วนใหญ่ (โมดูล NPM) จะต้องติดตั้งเป็น "ทั่วโลก" เพื่อให้แน่ใจว่าสคริปต์สามารถเรียกใช้งานได้จากบรรทัดคำสั่ง 

npm i -g  autoprefixer  documentation browser-sync  clean-css-cli  cross-env  eslint  eslint-config-xo  eslint-plugin-import  eslint-plugin-unicorn  find-unused-sass-variables  imagemin-cli  nodemon  npm-run-all  postcss-cli  rtlcss  sass  stylelint  stylelint-config-twbs-bootstrap  svgo  terser typescript

หมายเหตุ 1:

รหัสนี้เป็นเพียงการฟื้นฟูรหัสแกน bootstrap 5 เพื่อเพิ่มฟังก์ชัน "โหมดมืด" และได้รับการประกาศว่าเป็น "หลักฐานของแนวคิด" (POC) - นั่นหมายความว่ามันไม่ได้มีไว้เพื่อเป็นแหล่งผลิต แต่เป็นเพียงการออกกำลังกายเพื่อพิสูจน์ว่าโหมดมืดนั้นสามารถทำได้ผ่านวิธีการต่าง ๆ นอกจากนี้ยังหมายความว่าผู้แต่ง (Vino Rodrigues) ไม่ได้ถูกบังคับให้สนับสนุน

หมายเหตุ 2:

โครงการนี้จะ ไม่ รวบรวมด้วย Node-sass อ้างถึงเอกสาร Bootstrap 5 ดั้งเดิมโดยเฉพาะอย่างยิ่งที่นี่ (https://getbootstrap.com/docs/5.1/getting-started/build-tools/#sass) และคุณจะทราบว่าพวกเขาได้เลิกใช้ Node-sass เพื่อสนับสนุน Dart-sass

พวกเขาจะอ้างถึงบทความนี้ (https://sass-lang.com/blog/libsass-is-secated) บทความที่ผู้ดูแล Sass ระบุว่าพวกเขาจะไม่สนับสนุน libsass อีกต่อไป

NPM

นักพัฒนาสามารถรวมโฟลเดอร์ scss และ dist ลงในโครงการของคุณเองด้วย:

npm install bootstrap-dark-5

CDN

นอกจากนี้คุณยังสามารถเชื่อมโยงธีมผ่าน CDN ด้วย jsdelivr.com

คุณสามารถเข้าถึงไฟล์ธีม CSS ได้จาก GitHub Release:

  • bootstrap-dark ตัวแปร @media perfers-color-scheme

    • ตัวแปรการผลิต / จิ๋ว:
    • ตัวแปรการพัฒนา / ดีบัก:
    • นอกจากนี้อ่านคู่มือเริ่มต้นอย่างรวดเร็ว

  • bootstrap-nightshade - html.dark CSS Class + JS Library Variant

    • ตัวแปรการผลิต / การย่อย:
    • ตัวแปรการพัฒนา / ดีบัก:
    • นอกจากนี้อ่านคู่มือเริ่มต้นอย่างรวดเร็วและการอ้างอิง darkmode.js

  • bootstrap-night - ชุดรูปแบบที่มืดเท่านั้น

    • ตัวแปรการผลิต / จิ๋ว:
    • ตัวแปรการพัฒนา / ดีบัก:
    • นอกจากนี้อ่านคู่มือเริ่มต้นอย่างรวดเร็ว

  • แหล่งที่มา ฯลฯ อยู่ที่นี่ แต่ฉันขอแนะนำให้ใช้ GitHub

การอ่านเพิ่มเติม

ต้องอ่าน สำหรับนักพัฒนาทุกคนที่ต้องการเขียนสำหรับ Dark Mode:

  • ... เห็นได้ชัดว่าเนื้อหาต้นฉบับ: คู่มือที่ชัดเจนสำหรับ Dark Mode และ Bootstrap 4

  • Web.dev, Thomas Steiner (@tomayac), 27 มิ.ย. 2019 (อัปเดต 9 มิ.ย. 2020) , "ชอบสี-สี: สวัสดีความมืด, เพื่อนเก่าของฉัน"

  • Web.dev, Thomas Steiner (@tomayac), 8 เม.ย. 2020 (อัปเดต มิ.ย. 16, 2020) , "ปรับปรุงสไตล์การแข่งขันเริ่มต้นด้วยโหมดมืดด้วยคุณสมบัติ CSS สีและเมตาแท็กที่สอดคล้องกัน"

  • CSS-Tricks, Adhuham, 9 ก.ย. , 2020 "คำแนะนำที่สมบูรณ์เกี่ยวกับโหมดมืดบนเว็บ"

  • บิตของฉันเกี่ยวกับภาพและข้อควรพิจารณาอื่น ๆ ใน ".. คู่มือที่ชัดเจน .. " ชิ้นส่วน

ข้อเสนอแนะ

หากคุณมีข้อเสนอแนะที่เป็นประโยชน์ส่ง "ปัญหา" ให้ฉันในหน้าปัญหา GitHub

© 2022

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