<>
:root {
--bprogress-color: #29d;
--bprogress-height: 2px;
--bprogress-spinner-size: 18px;
--bprogress-spinner-animation-duration: 400ms;
--bprogress-spinner-border-size: 2px;
--bprogress-box-shadow: 0 0 10px #29d0 0 5px #29d;
--bprogress-z-index: 99999;
--bprogress-spinner-top: 15px;
--bprogress-spinner-bottom: auto;
--bprogress-spinner-right: 15px;
--bprogress-spinner-left: auto;
}
.bprogress {
width: 0;
height: 0;
pointer-events: none;
z-index: var(--bprogress-z-index);
}
.bprogress .bar {
background: var(--bprogress-color);
position: fixed;
z-index: var(--bprogress-z-index);
top: 0;
left: 0;
width: 100%;
height: var(--bprogress-height);
}
/* Fancy blur effect */
.bprogress .peg {
display: block;
position: absolute;
right: 0;
width: 100px;
height: 100%;
box-shadow: var(--bprogress-box-shadow);
opacity: 1.0;
transform: rotate(3deg) translate(0px-4px);
}
/* Remove these to get rid of the spinner */
.bprogress .spinner {
display: block;
position: fixed;
z-index: var(--bprogress-z-index);
top: var(--bprogress-spinner-top);
bottom: var(--bprogress-spinner-bottom);
right: var(--bprogress-spinner-right);
left: var(--bprogress-spinner-left);
}
.bprogress .spinner-icon {
width: var(--bprogress-spinner-size);
height: var(--bprogress-spinner-size);
box-sizing: border-box;
border: solid var(--bprogress-spinner-border-size) transparent;
border-top-color: var(--bprogress-color);
border-left-color: var(--bprogress-color);
border-radius: 50%;
-webkit-animation: bprogress-spinner var(--bprogress-spinner-animation-duration) linear infinite;
animation: bprogress-spinner var(--bprogress-spinner-animation-duration) linear infinite;
}
.bprogress-custom-parent {
overflow: hidden;
position: relative;
}
.bprogress-custom-parent .bprogress .spinner,
.bprogress-custom-parent .bprogress .bar {
position: absolute;
}
.bprogress .indeterminate {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--bprogress-height);
overflow: hidden;
}
.bprogress .indeterminate .inc,
.bprogress .indeterminate .dec {
position: absolute;
top: 0;
height: 100%;
background-color: var(--bprogress-color);
}
.bprogress .indeterminate .inc {
animation: bprogress-indeterminate-increase 2s infinite;
}
.bprogress .indeterminate .dec {
animation: bprogress-indeterminate-decrease 2s 0.5s infinite;
}
@-webkit-keyframes bprogress-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes bprogress-spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes bprogress-indeterminate-increase {
from { left: -5%; width: 5%; }
to { left: 130%; width: 100%; }
}
@keyframes bprogress-indeterminate-decrease {
from { left: -80%; width: 80%; }
to { left: 110%; width: 10%; }
}
GitHub 训练营
专为GitHub新用户和专家设计的交互式课程，学习如何使用GitHub。
本课程基于GitHub Skills进行二次创造和翻译， 适用于所有初学者和老手 。如果您是第一次接触GitHub，建议先阅读《什么是GitHub，它有什么用？》
我们的课程
学会使用Markdown表达你的idea以及协作沟通。Markdown 是一种轻量级的文本标记语言
使用 GitHub Pages 搭建一个属于你的网站或博客
学习并实践基于发布的开发流程（Release-based workflow），了解不同的分支策略。
学习如何在GitHub仓库中查找相关讨论、查看提交历史、问题溯源。
在云端使用 GitHub Codespaces 和 Visual Studio Code 编写代码
解锁 AI 编程，显著提升你的开发效率！支持代码补全，问答模式，智能体模式等多种AI交互方法。
学习如何创建并应用 GitHub Action 工作流
使用 GitHub Actions 将你的项目发布为 Docker 镜像
[待翻译] Create a deployment workflow using GitHub Actions and Microsoft Azure.
编写你自己的 GitHub Action，以 JavaScript 为例
[待翻译] Secure your supply chainpatch dependency vulnerabilities.
[待翻译] Learn about software security in a funeducational environment.
[待翻译] Learn how to enable CodeQL to secure your code.
[待翻译] A skills course on changing the commit history with Git.
[待翻译] Enable secret scanning and take a feature tour.
