bootstrap dark 5 Unduh - bootstrap dark 5 Sumber Code Unduh

bootstrap dark 5

Data situs web

v1.1.3 Release

Unduh

Panduan tambahan untuk mode gelap dan bootstrap 5

Kelanjutan dari V4 Dark Mode POC, tetapi kali ini untuk V5

Ini adalah tindak lanjut ke panduan definitif untuk mode gelap dan bootstrap 4 badan kerja, dan berkaitan dengan bootstrap 5 (github repo.) .

Jika Anda mencari pekerjaan yang sama untuk Bootstrap 4, silakan kunjungi repo Vinorodrigues/Bootstrap-Dark.

Catatan penting tentang status proyek ini:
Upaya pengembangan kembali di repositori inti Bootstrap 5 telah mencapai v5.3 - yang sekarang termasuk "mode warna" dan di dalam implementasi mode gelap. Melihat:
https://getboottrap.com/docs/5.3/customize/color-modes/
Ini, dengan demikian, membuat proyek ini berlebihan dan akan pensiun, meninggalkan kode dan repositori di sini untuk kepentingan pendidikan.

Tentang

Kode ini akan tidak masuk akal jika Anda tidak membaca panduan definitif untuk mode gelap dan bootstrap 4 terlebih dahulu.

Mendapatkan apa?

Kode ini menyusun keempat metode (dan varian - enam total ) dari badan kerja asli, tetapi disusun untuk dan sumber bootstrap 5 . Ini adalah:

Metode 1

(tautan ke asli)

bootstrap-night : Ini hanyalah tema bootstrap gelap. Namun dapat digunakan dengan CSS inti bootstrap untuk memberikan fungsionalitas mode gelap 2 file.

Metode 2

(tautan ke asli)

bootstrap-nightfall : Ini hanyalah CSS "hanya warna" dari semua komponen inti bootstrap, tetapi gelap, dan dimaksudkan untuk digunakan sebagai add-on. Ini juga dapat, dengan kueri media sederhana, menggerakkan switching mode gelap otomatis.

Metode 3

(tautan ke asli)

bootstrap-nightshade : Ini adalah modifikasi dari inti bootstrap dan menambahkan CSS warna gelap untuk semua komponen, tetapi gelap, bersarang dalam pembungkus kelas html.dark . Dengan sendirinya tidak dapat menawarkan switching mode gelap, tetapi tambahkan perpustakaan darkmode.js yang disertakan dan Anda memiliki varian switching mode gelap interaktif dari bootstrap dengan dukungan tombol "sakelar" .
bootstrap-blackbox : Varian ini pada dasarnya sama dengan varian "Nightshade", tetapi alih-alih menggunakan kelas tag HTML, ia menggunakan atribut data tag HTML; data-bs-color-scheme . Perpustakaan darkmode.js yang sama mendorong yang satu ini, yang perlu Anda lakukan adalah menambahkan atribut data ke tag HTML Anda.

Metode 4

(tautan ke asli)

bootstrap-dark : Ini adalah metode yang disarankan; Satu CSS dengan tema terang dan gelap, hanya dapat dengan OS atau browser prefers-color-scheme .
bootstrap-unlit : Varian ini pada dasarnya sama dengan varian "gelap", tetapi dengan skema "gelap" sebagai primer/fallback dan "terang" seperti yang dipilih dalam skema warna.

Mulai

1. `bootstrap-night`	2. `bootstrap-nightfall`	3. `bootstrap-nightshade`	3b. `bootstrap-blackbox`	4. `bootstrap-dark`	4b. `bootstrap-unlit`
Panduan Mulai Cepat	Panduan Mulai Cepat	Panduan Mulai Cepat	Panduan Mulai Cepat	Panduan Mulai Cepat	Panduan Mulai Cepat
		Referensi `darkmode.js`	Referensi `darkmode.js`
Lihat contoh		Lihat contoh		Lihat contoh

Buktinya ada di puding

Beberapa halaman uji telah diatur di vinorodrigues.github.io/bootstrap-dark-5

Bisakah Anda menggunakan ini?

Ya.

Lisensi adalah MIT. yaitu menggunakan saat Anda meraih selama Anda memuji penulis asli dan meninggalkan hak cipta in situ.

Jika Anda seorang pembangun tema atau ingin menggunakan prinsip -prinsipnya dalam proyek Anda sendiri, Anda harus menginstal git dan node.

Fork atau unduh repositori: git clone https://github.com/vinorodrigues/bootstrap-dark-5.git
Instal Node Dependencies: npm install (lihat Catatan di bawah.)
Modifikasi _variables.scss dan _variables-alt.scss di sub-folder scss .
Jalankan npm run build untuk membangun tema Anda.
Kode yang dikompilasi akan berada di folder dist .

Sistem build didasarkan pada skrip NPM. Sebagian besar alat build (modul NPM) perlu diinstal sebagai "global" untuk memastikan skrip dapat dieksekusi dari baris perintah.

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

Catatan 1:

Kode ini hanyalah pengulangan kode inti Bootstrap 5 untuk menambahkan fungsionalitas "mode gelap" dan dinyatakan sebagai "bukti konsep" (POC) - itu berarti itu tidak dimaksudkan sebagai sumber produksi, tetapi hanya latihan untuk membuktikan bahwa mode gelap dapat dicapai melalui berbagai metode, yaitu ini adalah karya yang edukatif. Ini juga berarti bahwa penulisnya (Vino Rodrigues) tidak terpaksa mendukungnya.

Catatan 2:

Proyek ini tidak akan dikompilasi dengan node-sass. Lihat dokumen Bootstrap 5 asli, terutama di sini (https://getboottrap.com/docs/5.1/getting-started/build-tools/#sass), dan Anda akan mencatat bahwa mereka telah mencela penggunaan node-sass demi panah-sass.

Mereka pada gilirannya mengutip artikel ini (https://sass-lo.com/blog/libsass-is-deprecated) di mana kurator SASS menyatakan mereka tidak akan lagi mendukung libsass, bahwa node-sass tergantung pada.

NPM

Pengembang dapat memasukkan folder scss dan dist ke dalam proyek Anda sendiri dengan:

npm install bootstrap-dark-5

CDN

Anda juga dapat menghubungkan tema melalui CDN dengan jsdelivr.com.

Anda dapat mengakses file tema CSS dari rilis GitHub:

bootstrap-dark -varian @media perfers-color-scheme
- Varian Produksi / Minified:
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.min.css
- Varian Pengembangan / Debug:
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-dark.css
- Juga, baca Panduan Mulai Cepat.
bootstrap-nightshade - html.dark CSS Class + JS Library Varian
- Varian Produksi / Minified:
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-nightshade.min.css
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.min.js
- Varian Pengembangan / Debug:
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-nightshade.css
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/js/darkmode.js
- Juga, baca Panduan Mulai Cepat dan Referensi darkmode.js .
bootstrap-night - varian tema gelap itu
- Varian Produksi / Minified:
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.min.css
- Varian Pengembangan / Debug:
  - https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-night.css
- Juga, baca Panduan Mulai Cepat.
Sumber dll di sini, tetapi saya sarankan menggunakan GitHub.

Bacaan lebih lanjut

Harus dibaca untuk semua pengembang yang ingin menulis untuk mode gelap:

... Jelas, konten asli: panduan definitif untuk mode gelap dan bootstrap 4
Web.Dev, Thomas Steiner (@tomayac), 27 Juni 2019 (diperbarui 9 Juni 2020) , "lebih suka skema warna-warna: halo kegelapan, teman lama saya"
Web.Dev, Thomas Steiner (@tomayac), 8 Apr 2020 (diperbarui 16 Juni 2020) , "Peningkatan gaya default mode gelap dengan properti CSS skema warna dan tag meta yang sesuai"
CSS-Tricks, Adhuham, 9 Sep 2020 "Panduan Lengkap untuk Mode Gelap di Web"
Bit saya tentang gambar dan pertimbangan lain dalam karya saya ".. Panduan Definitif ..".