# 1111

**Repository Path**: dixing1/1111

## Basic Information

- **Project Name**: 1111
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-28
- **Last Updated**: 2025-06-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Bootstrap课程设计

## 项目简介

这是一个基于Bootstrap框架仿写哔哩哔哩(Bilibili)官网的期末课程设计项目。通过这个项目，我实践了Bootstrap的各种组件和布局技术，实现了响应式设计，模拟了B站官网的主要功能和界面风格。

## 技术栈

- HTML5
- CSS3
- Bootstrap4

## 项目特点

✅ 使用Bootstrap 5实现响应式布局

✅ 仿写B站首页核心界面元素

✅ 包含导航栏、轮播图、视频卡片等组件

## 项目结构

TeleVision-clone/
├── index.html            # 首页
├── css/
│   ├── style.css         # 自定义样式

│   └── bootstrap.css # Bootstrap CSS
├── js/
│   ├──scripts.js      # 自定义JavaScript
│   └── bootstrap.bundle.js # Bootstrap JS
├── img/               # 项目图片资源

├──index.html

├──about.html

├──contact.html

├──README.md             # 项目说明文件

└──README.assets             # 项目说明图片文件

## 实现功能

### 9. 表单组件

表单组件主要用于用户发送邮件功能。在 contact.html 文件中，表单的代码如下：

```html
<div class="container" id="contact">
        <h3 class="text-center mt-5 pt-5">联系作者</h3>
        <p class="text-center"><em>我会听取所有有用的意见</em></p>
        <div class="row">
            <div class="col-md-4">
                <p>喜欢我的作品，就给我留言吧</p>
                <p><i class="bi-geo-alt"></i>阜阳,中国</p>
                <p><i class="bi-telephone"></i>电话: 123456789</p>
                <p><i class="bi-envelope"></i>邮箱: 123456789@qq.com</p>
            </div>
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-6 form-group">
                        <input type="text" class="form-control" placeholder="Name" id="name" name="name" required>
                    </div>
                    <div class="col-md-6 form-group">
                        <input type="email" class="form-control" placeholder="Email" id="email" name="email" required>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 form-group">
                        <textarea id="comments" name="comments" class="form-control" placeholder="Comment"
                            rows="5"></textarea>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 form-group">
                        <button class="btn btn-dark pull-right" type="submit">发送</button>
                    </div>
                </div>
            </div>
```

![image-20250618093130012](README.en.assets/image-20250618093130012.png)

### 10. 下拉菜单

下拉菜单用于展示更多的导航选项，在 index.html 文件中，下拉菜单的代码如下：

```html
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown">
                        更多 <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">故事介绍</a></li>
                        <li><a class="dropdown-item" href="#">漫画截图</a></li>
```



![image-20250618091418707](README.en.assets/image-20250618091418707.png)

### 11. 卡片组件

卡片组件用于展示角色的相关信息，在 about.html 文件中，卡片组件的代码如下：

```html
<div class="container mb-5">
        <div class="row">
            <div class="col-sm-4">
                <div class="character-card">
                    <p class="text-center"><strong>姜明子</strong></p>
                    <a data-toggle="collapse" href="#姜明子">
                        <img src="img/姜明子.jpg" class="img-fluid rounded-circle mb-4 person" alt="姜明子" width="250"
                            height="250">
                    </a>
                    <div id="姜明子" class="collapse">
                        <p><em>常世万法仙君</em></p>
                        <p>大三真法门的祖师之一，所处时期为公元525年，被后世认为是冠古绝今的史上最强求法者，被誉为"常世万法仙君"。实力之强横</p>
                        <button class="btn btn-dark btn-sm toggle-content" data-toggle="modal" data-target="#姜明子Modal">更多详情</button>
                    </div>
                </div>
            </div>
```

![image-20250618091701967](README.en.assets/image-20250618091701967.png)

### 12. 轮播组件

轮播组件用于展示漫画的宣传图片，在 index.html 文件中，轮播组件的代码如下：

```html
<!-- 全屏轮播图 -->
    <div id="home">
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- 轮播指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播项目 -->
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <img src="img/首页第一张.jpg" class="d-block w-100" alt="无敌">
                    <div class="carousel-caption">
                        <h3>无敌</h3>
                        <p>当世第一</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="img/首页第二张.jpg" class="d-block w-100" alt="无终">
                    <div class="carousel-caption">
                        <h3>无终</h3>
                        <p>是否没有结局</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="img/首页第三张.jpg" class="d-block w-100" alt="无始">
                    <div class="carousel-caption">
                        <h3>无始</h3>
                        <p>是否从未开始</p>
                    </div>
                </div>
            </div>
```

![image-20250618091949157](README.en.assets/image-20250618091949157.png)

### 13. 模态框组件

模态框组件用于展示更多的角色信息，在about.html 文件中，模态框组件的代码如下：

```html
<div class="modal fade" id="姜明子Modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">姜明子 - 常世万法仙君</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>姜明子作为三真法门的创始人之一，拥有无与伦比的求法天赋。他独创的"明子剑"能够远程击杀法尸，在第二次因果战争中单杀尸仙一次，并通过远程投放明子剑支援公孙灵杀尸仙一次。他还以因果律之罚的方式单杀同时期的万业首席岁远，并在因果之战中一对十一取胜，覆灭忘川术院。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
```

![image-20250618092111759](README.en.assets/image-20250618092111759.png)

### 14. 导航组件

导航组件用于在不同页面之间进行切换，在多个文件中都有使用，以下是 index.html 文件中的导航组件代码：

```html
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
        <a class="navbar-brand" href="index.html"><img class="img-fluid" src="img/logo.png" style="height: 40px;"></a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active"><a class="nav-link" href="index.html">首页</a></li>
                <li class="nav-item"><a class="nav-link" href="about.html">主要角色</a></li>
                <li class="nav-item"><a class="nav-link" href="story.html">故事背景</a></li>
                <li class="nav-item"><a class="nav-link" href="contact.html">联系作者</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown">
                        更多 <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">故事介绍</a></li>
                        <li><a class="dropdown-item" href="#">漫画截图</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
```

![image-20250618092206502](README.en.assets/image-20250618092206502.png)

### 15. 导航栏组件

导航栏组件是导航组件的一部分，用于固定在页面顶部，提供导航功能。

```html
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
        <a class="navbar-brand" href="index.html"><img class="img-fluid" src="img/logo.png" style="height: 40px;"></a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active"><a class="nav-link" href="index.html">首页</a></li>
                <li class="nav-item"><a class="nav-link" href="about.html">主要角色</a></li>
                <li class="nav-item"><a class="nav-link" href="story.html">故事背景</a></li>
                <li class="nav-item"><a class="nav-link" href="contact.html">联系作者</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown">
                        更多 <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">故事介绍</a></li>
                        <li><a class="dropdown-item" href="#">漫画截图</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
```

![image-20250618092301165](README.en.assets/image-20250618092301165.png)

### 16. 媒体对象组件

媒体对象组件用于展示，在 story.html 文件中，媒体对象组件的代码如下：

```html
 <div class="container" id="tour">
            <h3 class="text-center mt-5 pt-5">背景故事</h3>
            <p class="text-center">因果战争<br>求法者和法尸之间的战斗</p>
            <div class="media">
                <img src="img/批注 2025-06-18 090206.png" class="mr-3" alt="战争图标" style="width: 80px;">
                <div class="media-body">
                    <h5 class="mt-0">第二次因果战争</h5>
                    <p>在这场战争中，姜明子与尸仙进行了激烈的战斗。姜明子单杀尸仙一次，并通过远程投放明子剑支援公孙灵杀尸仙一次。他还以因果律之罚的方式单杀同时期的万业首席岁远，并在因果之战中一对十一取胜，覆灭忘川术院，留下术魂重创后世万业首席潘南君。</p>
                </div>
            </div>
            <div class="media mt-3">
                <img src="img/批注 2025-06-18 090206.png" class="mr-3" alt="战争图标" style="width: 80px;">
                <div class="media-body">
                    <h5 class="mt-0">第三次因果之战</h5>
                    <p>在这场战争中，姜明子再次与尸仙交手，并取得了胜利。此外，这场战争还涉及其他多位大神通者，展现了复杂的势力斗争和策略运用。</p>
                </div>
            </div>
```

![image-20250618092442992](README.en.assets/image-20250618092442992.png)

### 17. 弹出框组件

弹出框组件用于展示额外的信息，在 story.html 文件中，弹出框组件的代码如下：

```html
<div class="modal fade" id="past-extra">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-dark">
                    <h5 class="modal-title">关于过去</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body bg-dark">
                    <p>在遥远的古代，日月同错的力量首次显现，引发了一场改变世界的战争。求法者们为了掌握这股力量，与法尸展开了激烈的战斗。这场战争持续了数十年，最终以双方的暂时和解告终，但仇恨的种子已经埋下。</p>
                </div>
                <div class="modal-footer bg-dark">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="present-extra">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-dark">
                    <h5 class="modal-title">关于现在</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body bg-dark">
                    <p>在当今时代，日月同错的力量再次显现，一位新的天选之人横空出世。他（她）必须面对法尸的复仇和求法者内部的权力斗争。这位年轻的天选之人能否超越前人，成为真正的守护者？世界正在注视着他（她）的成长。</p>
                </div>
                <div class="modal-footer bg-dark">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="future-extra">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-dark">
                    <h5 class="modal-title">关于未来</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body bg-dark">
                    <p>关于未来，没有人知道会发生什么。日月同错的力量仍在影响着世界，求法者和法尸的战争可能随时再次爆发。天选之人的选择将决定世界的命运。是和平还是毁灭？是光明还是黑暗？答案掌握在他（她）的手中。</p>
                </div>
                <div class="modal-footer bg-dark">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

```

![image-20250618092923031](README.en.assets/image-20250618092923031.png)

### 18.弹出区

```
<div id="姜明子" class="collapse">
                        <p><em>常世万法仙君</em></p>
                        <p>大三真法门的祖师之一，所处时期为公元525年，被后世认为是冠古绝今的史上最强求法者，被誉为"常世万法仙君"。实力之强横</p>
                        <button class="btn btn-dark btn-sm toggle-content" data-toggle="modal" data-target="#姜明子Modal">更多详情</button>
                    </div>
```

![image-20250618093440416](README.en.assets/image-20250618093440416.png)

### gitee地址：

git clone https://gitee.com/dixing1/1111.git