如何使用WEB前端模板

server/2024/10/20 12:11:35/

我最近想搞一搞前端前端属实不太行,像前端搞个模板直接套一下。但是发现下载下来也有点不知道怎么用起来,这里我就把我的一个Bootstrap工程套用模板的具体过程记录一下。

首先创建一个前端工程,我这里用的是Bootstrap5,你也想弄一个的话可以翻一翻我前面关于Bootstrap5和Webpack的工程构建博客。这个项目结构如下:

my-project/
├── dist/
│   └── index.html
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│       └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js

下载模板,既然是Bootstrap,我们下载对应类型的模板,我是直接从Bootstrap官网下载的模板。打开模板压缩包,里面的内容如下图:

在这里插入图片描述
可能第一次接触会有点懵,我也是我在一个网站花钱买了一个模板,打开不知道怎么用。着你需要有一个自己的前端工程大体框架,买模板只是把一些样式设计卖给你,你还是要有自己前端框架,把这些整合进去。不是打开时,全是现成的东西。

这里介绍几个文件夹都是什么:
docs :顾名思义就是文档,具体使用以及组建的说明和展示都在里面。
asset:文件夹通常用于存储网站的静态资源,这些资源包括图片、样式表(CSS)、JavaScript 文件、字体文件等。这个文件夹的主要目的是组织和管理网站的所有静态内容,使得网站结构更加清晰,同时也便于维护和更新
pages:就是页面,一般模板都会提供几个页面来展示他们的模板样式。

添加模板文件到自己web工程里面,把上面这些文件夹添加进去,看自己的文件情况,一般来说按我看法就是不一定是放在根目录里面。我这个是把这几个文件夹放在dist目录里面,index.html同级就可以起作用。


http://www.ppmy.cn/server/10980.html

相关文章

【sping】在logback-spring.xml 获取项目名称

在日志文件中我们想根据spring.application.name 创建出的文件夹。 也不想死在XML文件中。 application.yml spring:application:name: my-demo logback-spring.xml <springProperty name"application_name" scope"context" source"spring.app…

Indicator-Sysmonitor|Ubuntu 标题栏显示实时网速、CPU使用率等

分享一款在Ubuntu系统中非常实用的工具&#xff0c;名为Indicator-Sysmonitor。这是一款开源软件&#xff0c;你可以在GitHub上找到它&#xff0c;它能够让你在Ubuntu的任务栏中实时监控CPU和内存使用情况。虽然Ubuntu并没有像Windows端的TrafficMonitor那样广为人知的实时监控…

基于STM32单片机的智能家居环境监测与控制系统设计

基于STM32单片机的智能家居环境监测与控制系统设计 摘要&#xff1a;随着物联网技术的不断发展&#xff0c;智能家居环境监测与控制系统的应用越来越广泛。本文设计了一种基于STM32单片机的智能家居环境监测与控制系统&#xff0c;该系统能够实时监测环境中的温湿度和天然气浓…

Git克隆项目到另一台服务器上详细操作

Git克隆项目到另一台服务器上详细操作 一 克隆原始仓库 首先&#xff0c;确保你从原始仓库克隆了所有分支。通常使用标准的 git clone 命令会拉取所有远程分支的历史&#xff0c;但只会在本地创建默认分支&#xff08;通常是 main 或 master&#xff09;。在克隆前&#xff0…

ChatGPT:让论文写作变得轻松愉快

ChatGPT无限次数:点击直达 ChatGPT&#xff1a;让论文写作变得轻松愉快 在当今信息爆炸的时代&#xff0c;论文写作是许多学术研究者和学生必须面对的挑战之一。从收集数据到整理结构&#xff0c;再到撰写内容&#xff0c;每个步骤都需要耗费大量时间和精力。但是&#xff0c;…

阿斯达年代记三强争霸官网地址+游戏账号注册+游戏下载安装教程

阿斯达年代记国际服&#xff0c;游戏分为三个势力&#xff0c;分别是阿斯达、亚高和不罚者&#xff0c;每个玩家都必须选择一个势力&#xff0c;而每个势力每周将会诞生一名势力族长&#xff0c;将会从五名候选人中投票产生&#xff0c;想要进入候选人名单&#xff0c;必须每天…

Linux : Oracle远程连接调用缺少客户端依赖(ORA-00000: DPI-1047)

连接报错&#xff1a; ORA-00000: DPI-1047: Cannot locate a 64-bit Oracle Client library: "libclntsh.so: cannot open shared object file: No such file or directory". See https://oracle.github.io/odpi/doc/installation.html#linux for help 解决方法&…

AppleScript初体验,让你的mac实现自动化UI操作

AppleScript 简介 AppleScript是苹果公司开发的一种脚本语言&#xff0c;用于操作MacOS及其应用程序&#xff0c;在实现MacOS自动化工作方面非常给力。 我们可以使用AppleScript用来完成一些重复琐碎的工作&#xff0c;AppleScript具有简单自然的语法&#xff0c;另外系统也提…