一个基于Bootstrap框架的个人秀项目_thinkpadp51拆机图解资源-CSDN文库

共45个文件

png：14个

css：10个

js：4个

html

Bootstrap

需积分: 5 60 浏览量 2024-11-11 19:50:31 上传评论收藏 77.38MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

fortend (2).zip （45个子文件）

fortend

src

font

字魂白鸽天行体.ttf 12.99MB

zuoping

1.4.png 92KB

2.1.mp4 38.86MB

1.1.png 296KB

3.png 855KB

3.1.mp4 18.89MB

1.1.mp4 9.61MB

1.2.png 393KB

1.3.png 146KB

1.png 171KB

2.png 141KB

img

pic.jpg 63KB

x1.png 990KB

bg2.png 1.48MB

x.png 680KB

x3.png 792KB

x4.jpg 67KB

bg1.png 1.31MB

blog

1.png 13KB

2.png 15KB

style.js 3KB

Bootstrap框架.html 329B

bootstrap-3.4.1-dist

bootstrap.js 74KB

npm.js 484B

bootstrap.min.js 39KB

css

bootstrap-theme.min.css.map 74KB

bootstrap.min.css 119KB

bootstrap-theme.css.map 47KB

bootstrap-theme.css 25KB

bootstrap.css.map 382KB

bootstrap.css 143KB

bootstrap-theme.min.css 23KB

bootstrap.min.css.map 528KB

fonts

glyphicons-halflings-regular.svg 106KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.eot 20KB

glyphicons-halflings-regular.woff2 18KB

css

contact.css 1KB

style.css 2KB

sidebar.css 2KB

skill.css 2KB

back.css 1KB

portfolio.css 3KB

index.html 21KB

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>个人秀 - 姓名</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"> <link href="./css/style.css" rel="stylesheet"> <link href="./css/back.css" rel="stylesheet"> <link href="./css/sidebar.css" rel="stylesheet"> <link href="./css/portfolio.css" rel="stylesheet" > <link href="./css/skill.css" rel="stylesheet" > <link href="./css/contact.css" rel="stylesheet" > </head> <body> <div class="sidebar"> <div class="sidebar shadow-lg"> <ul> <li><a href="#about">关于我</a></li> <li><a href="#portfolio">作品展示</a></li> <li><a href="#skills">技能</a></li> <li><a href="#services">服务</a></li> <li><a href="#blog">博客</a></li> <li><a href="#contact">联系我</a></li> </ul> <button id="themeToggle" class="btn btn-primary mt-3">切换亮/暗模式</button> <p id="currentDate" class="mt-3">今天是 <span id="date"></span></p> </div> </div> <div class="content" style="margin-left: 220px; padding: 20px;">  <header class="bg-primary text-white text-center py-5 mt-5"> <div class="container"> <img src="./src/img/pic.jpg" class="rounded-circle mb-3 shadow" alt="头像" width="150" height="150"> <h1 class="display-4 text-white animate__animated animate__fadeInDown">xd' show</h1> <p class="lead text-white animate__animated animate__fadeInUp">一个很认真的人。</p> </div> </header>   <section id="about" class="py-5 text-center"> <div class="container"> <div class="row align-items-center"> <div class="col-md-6 text-start"> <h2 class="mb-4">关于我</h2> <p class="text-justify text-indent-2"> 自幼对电脑着迷，热衷于探寻编程之道。怀揣着真诚之心，踏上了通往编程世界的旅程。在这片广阔的编程海洋中，我求知若渴，最初探寻各种编程语言。然则后来领悟到，编程不等于编码，编程语言只是一门工具，最重要的是编程思维。 </p> <p class="text-justify text-indent-2"> 如今，我怀揣梦想，渴望成为一名游戏开发工程师，将我的创意和激情注入到游戏的世界中，打造属于我的故事。 </p> <p><strong>愿与诸君共勉！</strong></p> <p><small>日常喜欢打篮球、弹吉他、阅读，兴趣爱好涉猎较广</small></p> </div> <div class="col-md-6"> <img src="./src/img/x4.jpg" class="img-fluid rounded shadow-lg" alt="关于我"> </div> </div> </div> </section>  <section id="portfolio" class="bg-light py-5"> <div class="container"> <h2 class="text-center portfolio-title">作品展示</h2> <div class="row">  <div class="col-md-4 mb-4"> <div class="card"> <img src="./src/zuoping/1.png" class="card-img-top" alt="作品1"> <div class="card-body"> <h5 class="card-title">作品1</h5> <p class="card-text">编程语言: 使用 Python 来进行后端开发，结合 Flask 框架。对于前端开发，使用react框架。</p> <p class="card-text">数据库: 使用 SQLite作为数据库管理系统，用于存储用户信息、诗词内容、评论等数据。</p> <a href="#" class="btn btn-primary btn-custom" data-toggle="modal" data-target="#portfolioModal1">查看详情</a> </div> </div> </div> <div class="modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-labelledby="portfolioModal1Label" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="portfolioModal1Label">跟随诗词云旅行</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <img src="./src/zuoping/1.png" class="img-fluid mb-3" alt="作品详情"> <img src="./src/zuoping/1.1.png" class="img-fluid mb-3" alt="作品详情"> <img src="./src/zuoping/1.2.png" class="img-fluid mb-3" alt="作品详情"> <img src="./src/zuoping/1.3.png" class="img-fluid mb-3" alt="作品详情"> <img src="./src/zuoping/1.4.png" class="img-fluid mb-3" alt="作品详情"> <p></p> <video src="./src/zuoping/1.1.mp4" controls class="w-100"></video> </div> </div> </div> </div>  <div class="col-md-4 mb-4"> <div class="card"> <img src="./src/zuoping/2.png" class="card-img-top" alt="作品2"> <div class="card-body"> <h5 class="card-title">作品2</h5> <p class="card-text">主要是基于h5+css+js</p> <p class="card-text">通过结合毛主席的诗词和人生路径来展示,以旅游路线为背景，以红色诗词为主题，以各地古建、遗址等为灵感</p> <a href="#" class="btn btn-primary btn-custom" data-toggle="modal" data-target="#portfolioModal2">查看详情</a> </div> </div> </div> <div class="modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-labelledby="portfolioModal1Label" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="portfolioModal1Label">红色足迹</h5> <button type="but

评论收藏

内容反馈