Material Kit + Sửa đổi 0 lần nhìn thấy

Sự miêu tả

Material Kit là một Bộ giao diện người dùng Bootstrap 4 miễn phí có thiết kế mới và mới mẻ lấy cảm hứng từ thiết kế material design của Google. Bạn đã yêu cầu nó, vì vậy chúng tôi đã thực hiện nó. Thật vui khi giới thiệu với bạn khái niệm về vật liệu trong một tập hợp các thành phần dễ sử dụng và đẹp mắt. Cùng với việc sắp xếp lại các phần tử Bootstrap, bạn sẽ tìm thấy ba trang mẫu với mã đầy đủ, để giúp bạn thiết kế dự án tiếp theo của mình.

Bộ vật liệu sử dụng ánh sáng, bề mặt và chuyển động. Nó sử dụng sự lựa chọn có chủ ý về màu sắc, hình ảnh sắc nét và kiểu chữ quy mô lớn. Bố cục chung giống như một tờ giấy theo nhiều lớp khác nhau, sao cho độ sâu và đều đặn rõ ràng. Điều hướng chính vẫn ở bên trái và các hành động ở bên phải.

Thiết kế mới này có các yếu tố là kết quả của quá trình nghiên cứu về mực và giấy cũng như cách các đối tượng và vật liệu tương tác trong cuộc sống thực. Kết quả là một tập hợp các yếu tố đẹp, nhất quán có thể giúp bạn bắt đầu dự án tiếp theo của mình. Material Kit là một công cụ tuyệt vời nếu bạn muốn tạo sự hiện diện trên web cho ứng dụng Android của mình và cần phải nhất quán, để lại ấn tượng về các yếu tố trực quan giống nhau. Bản thân nó cũng là một nguồn tài nguyên tuyệt vời, trông đẹp mắt và giúp bạn xây dựng trang web của mình.

screen-materialkit.webp

Nguồn chính thức

Mẫu này đã được xuất bản trước đây trên trang web của Nhóm sáng tạo

Giấy phép

MIT - Nhóm Sáng tạo Bản quyền (c) 2018

Đặc trưng

Các tính năng ban đầu trong phiên bản miễn phí này của mẫu trước khi sửa đổi như sau:

  • Bootstrap v4.0.0
  • Gulp v4.0.3
  • gulp-autoprefixer v6.1.0
  • gulp-clean v0.4.0
  • gulp-install v1.1.0
  • gulp-open v3.0.1
  • gulp-sass v4.0.2
  • gulp-sourcemaps v2.6.5
  • Hỗ trợ cảnh báo
  • Hỗ trợ thẻ
  • Hỗ trợ các biểu mẫu
  • Hỗ trợ Google Maps
  • Hỗ trợ vốn
  • Hỗ trợ điều hướng
  • Hỗ trợ thanh điều hướng
  • Hỗ trợ bảng
  • Hỗ trợ kiểu chữ
  • Hỗ trợ video
  • Hỗ trợ thanh trượt

Công nghệ chính

  • Bootstrap v4.0.0
  • jQuery v3.2.1
  • PopperJs

Sửa đổi

Quá trình sửa đổi của mẫu này bao gồm các công nghệ sau trong cấu hình của nó:

  • Nâng cấp từ Bootstrap 4.0.0 lên phiên bản 4.5.2
  • Giảm thiểu JS bằng Terser v4.8.0
  • Giảm thiểu CSS bằng cách sử dụng Less v3.11.3
  • Giảm thiểu SCSS bằng Node Sass v4.14.1 + Dart Sass v1.26.2
  • Hỗ trợ nguồn MAP JS
  • Hỗ trợ nguồn CSS MAP
  • Được cấu hình bằng Babel v7.10.3
  • Được cấu hình bằng Webpack v4.43.0
  • Được cấu hình bằng TypeScript v3.9.5
  • Transpile với Babel
  • Hỗ trợ SASS
  • Hỗ trợ Autoprefixer
  • Cài đặt phụ thuộc
  • Tối ưu hóa các tệp css material-kit.css và material-kit.scss
  • Thay thế tệp material-kit.js bằng material-kit-nick.js
  • Xóa tệp css demo.css đã bị xóa
  • Thay thế tệp css material-kit.css và thay thế nó bằng tệp material-kit.min.css
  • Đã thêm tập lệnh Bootstrap 4.5.2 :
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  • Thêm tập lệnh phụ thuộc trong chế độ phát triển:

    • Gulp v4.0.3
    • gulp-autoprefixer v7.0.1 (đã cập nhật)
    • gulp-clean v0.4.0
    • gulp-install v1.1.0
    • gulp-open v3.0.1
    • gulp-sass v4.1.0 (đã cập nhật)
    • gulp-sourcemaps v2.6.5
  • Tối ưu hóa tệp template.html

  • Tối ưu hóa tệp /examples/landing-page.html

  • Tối ưu hóa tệp /examples/login-page.html

  • Tối ưu hóa tệp /examples/profile-page.html

Cải tiến mẫu

  • Không có cải tiến


Tags: Bootstrap 4 HTML5 Bản mẫu trên 23 Tháng chín 2020

Bình luận

Forum Diskusi

Post a reply
3035 views

Trả lời cuộc thảo luận này