如何使用WEB前端模板

news2025/1/16 9:12:34

我最近想搞一搞前端,前端属实不太行,像前端搞个模板直接套一下。但是发现下载下来也有点不知道怎么用起来,这里我就把我的一个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.coloradmin.cn/o/1608820.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

element table加减列

// 有个特别注意的地方,下面这行代码,key一定绑的是item,千万不要绑定index,不然就会出现异常 //<el-table-column v-for"(item,index) in titleList" :key"item" min-width"150" align"center"><el-table fit :data"d…

x-cmd mod | x whisper - 使用 whisper.cpp 进行本地 AI 语音识别

介绍 Whisper 模块通过 whisper.cpp 帮助用户快速将音频转换为文字。 INFO: whisper.cpp 是一个用 C/C 编写的轻量级智能语音识别库&#xff0c;是基于 OpenAI 的 Whisper 模型的移植版本&#xff0c;旨在通过深度学习模型实现音频转文字功能。 由于 whisper.cpp 目前只支持 1…

react 响应式栅格布局

遇到一个小问题 , 有很多的下拉框放在了一行的盒子里 用到了栅格思路 , 但响应式处理屏幕时候右侧的按钮会覆盖掉样式 之前我的思路是子绝父相 , 将按钮定在最右侧 , 按钮和下拉框都在同一盒子中 , 且做了栅格处理没想到还是会覆盖解决 : 后来我用到了 margin-left: auto 来让…

基于Springboot的社区待就业人员信息管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的社区待就业人员信息管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三…

Golang 采集爬虫如何配置代理 IP

在 Golang 中配置代理 IP&#xff0c;可以通过设置 http.Transport 的 Proxy 属性来实现&#xff1a; 下述代码中的 代理IP 和 端口 替换为实际的代理服务器地址和端口&#xff0c;然后运行该程序即可通过代理服务器访问对应网站。 package mainimport ("fmt""…

Maven实战—搭建微服务 Maven 工程架构

需求案例&#xff1a;搭建一个电商平台项目&#xff0c;该平台包括用户服务、订单服务、通用工具模块等。 项目架构&#xff1a; 用户服务&#xff1a;负责处理用户相关的逻辑&#xff0c;例如用户信息的管理、用户注册、登录等。订单服务&#xff1a;负责处理订单相关的逻辑…

智慧园区引领产业智能化升级:科技创新驱动打造智慧化、高效化产业新未来

随着全球科技革命的深入推进&#xff0c;以大数据、云计算、物联网、人工智能等为代表的新一代信息技术正深刻改变着传统产业的发展模式。在这一背景下&#xff0c;智慧园区作为产业智能化升级的重要载体和平台&#xff0c;正以其前瞻性的规划、创新的科技和卓越的实践&#xf…

论文精读--Learning Efficient Object Detection Models with Knowledge Distillation

在目标检测任务中&#xff0c;存在特殊的挑战&#xff1a; &#xff08;1&#xff09;目标检测任务标签信息量更大&#xff0c;根据标签学到的模型更为复杂&#xff0c;压缩后损失更多 &#xff08;2&#xff09;分类任务中&#xff0c;每个类别相对均衡&#xff0c;同等重要…

C语言 实现带透明度的鼠标光标 .cur 编辑器

操作参考&#xff1a; .cur 鼠标光标编辑器-CSDN博客 增加了滑块修改透明度 有一个bug&#xff0c;就是取色在绘图板上取色时&#xff0c;取到的颜色的透明度是0&#xff0c;也就是说&#xff0c;同样的颜色&#xff0c;有的是透明出来的&#xff0c;有的就是本身的颜色。但…

C++的发展和特点

1.C的发展史 C是由Bjarne Stroustrup&#xff08;本贾尼斯特劳斯特卢普 1950~&#xff09;博士在贝尔实验室工作期间开发的。最初C被称为new C&#xff0c;后来为了体现它是一种带类的面向对象语言&#xff0c;将其改名为C with class。1982年命名为C。 C从诞生至今&#xff0…

python 头文件怎么写

本文主要以python2为例。首先介绍一下Python头文件的编程风格&#xff0c;然后再给大家详细介绍import部分的基本用法。这两个部分就是Python中头文件的组成模块。 编程风格 #!/usr/bin/env python #在文件头部 ( 第一行 ) 加上 设置 Python 解释器 # -*- coding: utf…

Rabbit加密算法:性能与安全的完美结合

title: Rabbit加密算法&#xff1a;性能与安全的完美结合 date: 2024/4/19 19:51:30 updated: 2024/4/19 19:51:30 tags: Rabbit加密对称加密流密码密钥调度安全分析实际应用加密算法 第一章&#xff1a;引言 1. 加密算法的基本概念和应用 加密算法是一种通过对数据进行转换…

解决Keil V5.38 和 ST-Link V3 Debug不能运行问题

目录 概述 1 问题描述 1.1 情况一 1.2 情况二 1.3 情况三 2 解决方法 2.1 认识Keil Mico Lib 2.2 使能Keil Mico Lib 3 验证 3.1 进入C程序Main验证 3.2 断点验证 3.3 上电重启验证 4 结论 笔者使用的验证代码下载地址&#xff1a; stm32-freeRTOS-queue资源-CSD…

17.C++常用的算法_集合算法

文章目录 遍历算法1. set_intersection()代码工程运行结果 2. set_union()代码工程运行结果 3. set_difference()代码工程运行结果 遍历算法 1. set_intersection() 代码工程 /*1.求交集的两个集合必须是有序序列*/ /*2.目标容器开辟空间需要从两个容器中取较小值*/ /*3.set…

90年代女神返港行李失踪 怒斥国泰航空

现年51岁的童爱玲在1993年拍摄电影《火蝴蝶》入行&#xff0c;外形出众的她当年曾与梁朝伟、黎明等男神合作&#xff0c;因而被封为「男神磁石」。虽然童爱玲与台湾富商王敦民结婚诞下一子后&#xff0c;便淡出演艺圈&#xff0c;但她曾在2022年复出拍摄ViuTV剧集《季前赛》&am…

chatgpt免费使用网站

在人工智能的浪潮中&#xff0c;OpenAI的ChatGPT作为一款前沿的语言处理工具&#xff0c;已经引起了广泛的关注和讨论。 ChatGPT以其卓越的语言理解和生成能力&#xff0c;为用户提供了多样化的应用场景&#xff0c;从日常对话、编程辅助到内容创作等。然而&#xff0c;对于许…

PSO-BP和BP多输入多输出回归预测模型 matlab (多输入多输出)

文章目录 效果一览文章概述订阅专栏只能获取一份代码部分源码参考资料效果一览 文章概述 PSO-BP和BP多输入多输出回归预测模型 matlab (多输入多输出) 订阅专栏只能获取一份代码 部分源码 %------

小程序中使用HTTPS调用自带文本安全内容检测接口(msg_sec_check)的实现方法

在小程序中调用自带的文本安全内容检测接口&#xff0c;你需要使用小程序提供的wx.request方法。以下是一个示例代码&#xff1a; javascript代码: // 假设你已经获取了access_token,如果不知道如何获取&#xff0c;可以参考我上一篇文章 const access_token 你的access_tok…

FlinkCDC基础篇章2-数据源 SqlServerCDC写入到ES中

接着 上期FlinkCDC基础篇章1-安装使用 下载 Flink 和所需要的依赖包 # 下载 Flink 1.17.0 并将其解压至目录 flink-1.17.0 下载下面列出的依赖包&#xff0c;并将它们放到目录 flink-1.17.0/lib/ 下&#xff1a; 下载链接只对已发布的版本有效, SNAPSHOT 版本需要本地编译 …

云原生Kubernetes: K8S 1.29版本 部署Jenkins

目录 一、实验 1.环境 2.K8S 1.29版本 部署Jenkins 服务 3.jenkins安装Kubernetes插件 二、问题 1.创建pod失败 2.journalctl如何查看日志信息 2.容器内如何查询jenkins初始密码 3.jenkins离线安装中文包报错 4.jenkins插件报错 一、实验 1.环境 &#xff08;1&…