style(web): upgrade to Bootstrap 4 view with new artworks

Let's welcome brand new look made by Bootstrap 4!
Not only website but also our logo is being flat now.
The new logo uses blue as main color, to be different from original.
For us, it also shows the project has up to a new stage.
We hope that the project will get better and better.

BREAKING CHANGE: The path for users to place their images is renamed.
Logos are saved as new names too. Users should move "pictures" to "images".
Any modifications should suit the Bootstrap 4's standard.

README.md

@@ -1,14 +1,27 @@
-# Universal OJ
+<p align="center"><img src="https://github.com/UniversalOJ/UOJ-System/blob/master/web/images/logo.png?raw=true"></p>
 
-这是一份民间的UOJ版本，我们希望它比官方版本更易用。
+# Universal Online Judge
 
-部署文档在[universaloj.github.io](https://universaloj.github.io)。
+> #### 一款通用的在线评测系统。
 
+## 特性
 
-目前已经支持的特性：  
+- 前后端全面更新为 Bootstrap 4 + PHP 7。
+- 多种部署方式，各取所需、省心省力、方便快捷。
+- 各组成部分可单点部署，也可分离部署；支持添加多个评测机。
+- 题目搜索，全局放置，任意页面均可快速到达。
+- 所有题目从编译、运行到评分，都可以由出题人自定义。
+- 引入 Extra Tests 和 Hack 机制，更加严谨、更有乐趣。
+- 支持 OI/IOI/ACM 等比赛模式；比赛内设有提问区域。
+- 博客功能，不仅可撰写图文内容，也可制作幻灯片。
 
-- 子目录博客（感谢[roastduck](https://github.com/roastduck/)的贡献）
+## 文档
-- zip传题  （感谢[AD1024](https://github.com/AD1024/)的贡献）
 
+有关安装、管理、维护，可参阅：[https://universaloj.github.io/](https://universaloj.github.io/)
+
+## 感谢
+
+- [vfleaking](https://github.com/vfleaking) 将 UOJ 代码[开源](https://github.com/vfleaking/uoj)
+- 向原项目或本项目贡献代码的人
+- 给我们启发与灵感以及提供意见和建议的人
 
-希望对您有帮助。

web/app/controllers/blogs.php

@@ -20,9 +20,9 @@ EOD;
 ?>
 <?php echoUOJPageHeader(UOJLocale::get('blogs')) ?>
 <?php if (Auth::check()): ?>
-<div class="pull-right">
+<div class="float-right">
 	<div class="btn-group">
-		<a href="<?= HTML::blog_url(Auth::id(), '/') ?>" class="btn btn-default btn-sm">我的博客首页</a>
+		<a href="<?= HTML::blog_url(Auth::id(), '/') ?>" class="btn btn-secondary btn-sm">我的博客首页</a>
 		<a href="<?= HTML::blog_url(Auth::id(), '/post/new/write')?>" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-edit"></span> 写新博客</a>
 	</div>
 </div>

web/app/controllers/change_user_info.php

@@ -124,7 +124,7 @@
 	</div>
 	<div class="form-group">
 		<div class="col-sm-offset-2 col-sm-3">
-			<button type="submit" id="button-submit" class="btn btn-default"><?= UOJLocale::get('submit') ?></button>
+			<button type="submit" id="button-submit" class="btn btn-secondary"><?= UOJLocale::get('submit') ?></button>
 		</div>
 	</div>
 </form>

web/app/controllers/contest_inside.php

@@ -410,11 +410,11 @@ EOD;
 	 	$time_str = UOJTime::$time_now_str;
 	 	$contest_ends_in = UOJLocale::get('contests::contest ends in');
 	 	echo <<<EOD
- 		<div class="panel panel-info">
+ 		<div class="card border-info">
- 			<div class="panel-heading">
+ 			<div class="card-header bg-info">
- 				<h3 class="panel-title">$contest_ends_in</h3>
+ 				<h3 class="card-title">$contest_ends_in</h3>
  			</div>
- 			<div class="panel-body text-center countdown" data-rest="$rest_second"></div>
+ 			<div class="card-body text-center countdown" data-rest="$rest_second"></div>
  		</div>
 		<script type="text/javascript">
 			checkContestNotice({$contest['id']}, '$time_str');
@@ -434,11 +434,11 @@ EOD;
 			$title = UOJLocale::get('contests::contest final testing');
 		}
 		echo <<<EOD
- 		<div class="panel panel-info">
+ 		<div class="card border-info">
- 			<div class="panel-heading">
+ 			<div class="card-header bg-info">
- 				<h3 class="panel-title">$title</h3>
+ 				<h3 class="card-title">$title</h3>
  			</div>
- 			<div class="panel-body">
+ 			<div class="card-body">
 				<div class="progress bot-buffer-no">
 					<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="$rop" aria-valuemin="0" aria-valuemax="100" style="width: {$rop}%; min-width: 20px;">{$rop}%</div>
 				</div>
@@ -450,9 +450,9 @@ EOD;
 	function echoContestFinished() {
 		$title = UOJLocale::get('contests::contest ended');
 		echo <<<EOD
- 		<div class="panel panel-info">
+ 		<div class="card border-info">
- 			<div class="panel-heading">
+ 			<div class="card-header bg-info">
- 				<h3 class="panel-title">$title</h3>
+ 				<h3 class="card-title">$title</h3>
  			</div>
  		</div>
 EOD;
@@ -534,12 +534,12 @@ EOD;
 			<?php if ($cur_tab == 'standings'): ?>
 	</div>
 	<div class="col-sm-3">
-		<div class="panel panel-info">
+		<div class="card border-info">
 		<?php else: ?>
-		<div class="panel panel-info top-buffer-lg">
+		<div class="card border-info top-buffer-lg">
 		<?php endif ?>
-			<div class="panel-heading">
+			<div class="card-header bg-info">
-				<h3 class="panel-title">比赛资料</h3>
+				<h3 class="card-title">比赛资料</h3>
 			</div>
 			<div class="list-group">
 			<?php foreach ($contest['extra_config']['links'] as $link) { ?>

web/app/controllers/contest_manage.php

@@ -198,14 +198,14 @@
 ?>
 <?php echoUOJPageHeader(HTML::stripTags($contest['name']) . ' - 比赛管理') ?>
 <h1 class="page-header" align="center"><?=$contest['name']?> 管理</h1>
-<ul class="nav nav-tabs" role="tablist">
+<ul class="nav nav-tabs mb-3" role="tablist">
-	<li class="active"><a href="#tab-time" role="tab" data-toggle="tab">比赛时间</a></li>
+	<li class="nav-item"><a class="nav-link active" href="#tab-time" role="tab" data-toggle="tab">比赛时间</a></li>
-	<li><a href="#tab-managers" role="tab" data-toggle="tab">管理者</a></li>
+	<li class="nav-item"><a class="nav-link" href="#tab-managers" role="tab" data-toggle="tab">管理者</a></li>
-	<li><a href="#tab-problems" role="tab" data-toggle="tab">试题</a></li>
+	<li class="nav-item"><a class="nav-link" href="#tab-problems" role="tab" data-toggle="tab">试题</a></li>
 	<?php if (isSuperUser($myUser)): ?>
-	<li><a href="#tab-others" role="tab" data-toggle="tab">其它</a></li>
+	<li class="nav-item"><a class="nav-link" href="#tab-others" role="tab" data-toggle="tab">其它</a></li>
 	<?php endif ?>
-	<li><a href="/contest/<?=$contest['id']?>" role="tab">返回</a></li>
+	<li class="nav-item"><a class="nav-link" href="/contest/<?=$contest['id']?>" role="tab">返回</a></li>
 </ul>
 <div class="tab-content top-buffer-sm">
 	<div class="tab-pane active" id="tab-time">

web/app/controllers/contest_members.php

@@ -49,7 +49,7 @@
 <h1 class="text-center"><?= $contest['name'] ?></h1>
 <?php if ($contest['cur_progress'] == CONTEST_NOT_STARTED): ?>
 	<?php if ($iHasRegistered): ?>
-		<div class="pull-right">
+		<div class="float-right">
 			<?php $unregister_form->printHTML(); ?>
 		</div>
 		<div><a style="color:green">已报名</a></div>

web/app/controllers/faq.php

@@ -8,10 +8,12 @@
 		<h2 class="page-header">常见问题及其解答(FAQ)</h2>
 	</header>
 	<section>
-		<header>
+		<div class="card my-1">
-			<h4><a data-toggle="collapse" href="#collapseOne">1. 什么是<?= UOJConfig::$data['profile']['oj-name-short'] ?></a></h4>
+			<div class="card-header collapsed" id="headerOne" data-toggle="collapse" data-target="#collapseOne" style="cursor:pointer;">
-		</header>
+				<h5 class="mb-0">什么是<?= UOJConfig::$data['profile']['oj-name-short'] ?></h5>
+			</div>
 			<div id="collapseOne" class="collapse">
+				<div class="card-body">
 					<p>来了？坐，欢迎来到 <?= UOJConfig::$data['profile']['oj-name'] ?>。</p>
 					<p><img src="https://tb2.bdstatic.com/tb/editor/images/qpx_n/b37.gif?t=20140803" alt="小熊像超人一样飞" /></p>
 					<p>众所周知，信息学的题目一般形式为：给出XXXXX，要你提交一份源代码，输出XXXXX，然后时限若干秒，内存若干兆，数据若干组，每组数据与答案进行比较，不对就不给分。</p>
@@ -26,21 +28,25 @@
 					<p>祝各位在<?= UOJConfig::$data['profile']['oj-name-short'] ?>玩得愉快！（求不虐萌萌哒服务器～求不虐萌萌哒测评机～！）</p>
 					<p><img src="https://tb2.bdstatic.com/tb/editor/images/qpx_n/b54.gif?t=20140803" alt="小熊抱抱" /></p>
 				</div>
-	</section>
+			</div>
-	<section>
+		</div>
-		<header>
+		<div class="card my-1">
-			<h4><a data-toggle="collapse" href="#collapseTwo">2. 注册后怎么上传头像</a></h4>
+			<div class="card-header collapsed" id="headerTwo" data-toggle="collapse" data-target="#collapseTwo" style="cursor:pointer;">
-		</header>
+				<h5 class="mb-0">注册后怎么上传头像</h5>
+			</div>
 			<div id="collapseTwo" class="collapse">
+				<div class="card-body">
 					<p><?= UOJConfig::$data['profile']['oj-name-short'] ?>不提供头像存储服务。每到一个网站都要上传一个头像挺烦的对不对？我们支持Gravatar，请使用Gravatar吧！Gravatar是一个全球的头像存储服务，你的头像将会与你的电子邮箱绑定。在各大网站比如各种Wordpress还有各种OJ比如Vijos、Contest Hunter上，只要你电子邮箱填对了，那么你的头像也就立即能显示了！</p>
 					<p>快使用Gravatar吧！ Gravatar地址：<a href="https://cn.gravatar.com/">https://cn.gravatar.com/</a>。进去后注册个帐号然后与邮箱绑定并上传头像，就ok啦！</p>
 				</div>
-	</section>
+			</div>
-	<section>
+		</div>
-		<header>
+		<div class="card my-1">
-			<h4><a data-toggle="collapse" href="#collapseThree">3. <?= UOJConfig::$data['profile']['oj-name-short'] ?>的测评环境？</a></h4>
+			<div class="card-header collapsed" id="headerThree" data-toggle="collapse" data-target="#collapseThree" style="cursor:pointer;">
-		</header>
+				<h5 class="mb-0"><?= UOJConfig::$data['profile']['oj-name-short'] ?>的测评环境？</h5>
+			</div>
 			<div id="collapseThree" class="collapse">
+				<div class="card-body">
 					<p>默认的测评环境是 Ubuntu Linux 18.04 LTS x64。</p>
 					<p>C的编译器是 gcc 7.4.0，编译命令：<code>gcc code.c -o code -lm -O2 -DONLINE_JUDGE</code>。</p>
 					<p>C++的编译器是 g++ 7.4.0，编译命令：<code>g++ code.cpp -o code -lm -O2 -DONLINE_JUDGE</code>。如果选择C++11会在编译命令后面添加<code>-std=c++11</code>。</p>
@@ -49,12 +55,14 @@
 					<p>Pascal的编译器是 fpc 3.0.4，编译命令：<code>fpc code.pas -O2</code>。</p>
 					<p>Python会先编译为优化过的字节码<samp>.pyo</samp>文件。支持的Python版本分别为Python 2.7和3.6。</p>
 				</div>
-	</section>
+			</div>
-	<section>
+		</div>
-		<header>
+		<div class="card my-1">
-			<h4><a data-toggle="collapse" href="#collapseFour">4. 各种评测状态的鸟语是什么意思？</a></h4>
+			<div class="card-header collapsed" id="headerFour" data-toggle="collapse" data-target="#collapseFour" style="cursor:pointer;">
-		</header>
+				<h5 class="mb-0">各种评测状态的鸟语是什么意思？</h5>
+			</div>
 			<div id="collapseFour" class="collapse">
+				<div class="card-body">
 					<ul>
 						<li>Accepted: 答案正确。恭喜大佬，您通过了这道题。</li>
 						<li>Wrong Answer: 答案错误。仅仅通过样例数据的测试并不一定是正确答案，一定还有你没想到的地方。</li>
@@ -67,20 +75,24 @@
 						<li>No Comment: 没有详情。评测机对您的程序无话可说，那么我们也不知道到底发生了什么...</li>
 					</ul>
 				</div>
-	</section>
+			</div>
-	<section>
+		</div>
-		<header>
+		<div class="card my-1">
-			<h4><a data-toggle="collapse" href="#collapseFive">5. 递归 10<sup>7</sup> 层怎么没爆栈啊</a></h4>
+			<div class="card-header collapsed" id="headerFive" data-toggle="collapse" data-target="#collapseFive" style="cursor:pointer;">
-		</header>
+				<h5 class="mb-0">递归 10<sup>7</sup> 层怎么没爆栈啊</h5>
+			</div>
 			<div id="collapseFive" class="collapse">
+				<div class="card-body">
 					<p>没错就是这样！除非是特殊情况，<?= UOJConfig::$data['profile']['oj-name-short'] ?>测评程序时的栈大小与该题的空间限制是相等的！</p>
 				</div>
-	</section>
+			</div>
-	<section>
+		</div>
-		<header>
+		<div class="card my-1">
-			<h4><a data-toggle="collapse" href="#collapseSix">6. 我在本地/某某OJ上AC了，但在<?= UOJConfig::$data['profile']['oj-name-short'] ?>却过不了...这咋办？</a></h4>
+			<div class="card-header collapsed" id="headerSix" data-toggle="collapse" data-target="#collapseSix" style="cursor:pointer;">
-		</header>
+				<h5 class="mb-0">我在本地/某某OJ上AC了，但在<?= UOJConfig::$data['profile']['oj-name-short'] ?>却过不了...这咋办？</h5>
+			</div>
 			<div id="collapseSix" class="collapse">
+				<div class="card-body">
 					<p>对于这类问题，我们在这里简单列一下可能原因：</p>
 					<ul>
 						<li>Linux中换行符是'\n'而windows中是'\r\n'（多一个字符）。有些数据在Windows下生成，而<?= UOJConfig::$data['profile']['oj-name-short'] ?>评测环境为Linux系统。这种情况在字符串输入中非常常见。</li>
@@ -90,12 +102,14 @@
 						<li>当然数据可能真的有问题。但是如果不止一个人通过了这道题，那最好不要怀疑是数据的锅。反之，可以立即联系我们上报！</li>
 					</ul>
 				</div>
-	</section>
+			</div>
-	<section>
+		</div>
-		<header>
+		<div class="card my-1">
-			<h4><a data-toggle="collapse" href="#collapseSeven">7. 博客使用指南</a></h4>
+			<div class="card-header collapsed" id="headerSeven" data-toggle="collapse" data-target="#collapseSeven" style="cursor:pointer;">
-		</header>
+				<h5 class="mb-0">博客使用指南</h5>
+			</div>
 			<div id="collapseSeven" class="collapse">
+				<div class="card-body">
 					<p><?= UOJConfig::$data['profile']['oj-name-short'] ?>博客使用的是Markdown。（好吧……好简陋的……好多功能还没写……）</p>
 					<p>（喂喂喂我们是OJ好吗……要那么完善的博客功能干啥呢……？）</p>
 					<p>其实我觉得Markdown不用教！一学就会！</p>
@@ -106,8 +120,8 @@
 					<hr /><p><code>*强调*</code> = <em>强调</em></p>
 					<hr /><p><code>[<?= UOJConfig::$data['profile']['oj-name-short'] ?>](<?= HTML::url('/') ?>)</code> = <a href="<?= HTML::url('/') ?>"><?= UOJConfig::$data['profile']['oj-name-short'] ?></a></p>
 					<hr /><p><code><?= HTML::url('/') ?></code> = <a href="http://<?= UOJConfig::$data['web']['main']['host'] ?>"><?= HTML::url('/') ?></a></p>
-			<hr /><p><code>![这个文字在图挂了的时候会显示](<?= HTML::url('/pictures/UOJ.ico') ?>)</code> =
+					<hr /><p><code>![这个文字在图挂了的时候会显示](<?= HTML::url('/images/favicon.ico') ?>)</code> =
-			<img src="<?= HTML::url('/pictures/UOJ.ico') ?>" alt="这个文字在图挂了的时候会显示" /></p>
+					<img src="<?= HTML::url('/images/favicon.ico') ?>" alt="这个文字在图挂了的时候会显示" /></p>
 					<hr /><p><code>`rm orz`</code> = <code>rm orz</code></p>
 					<hr /><p><code>数学公式萌萌哒$(a + b)^2$萌萌哒</code> = 数学公式萌萌哒$(a + b)^2$萌萌哒</p>
 					<hr /><p><code>&lt;!-- readmore --&gt;</code> = 在外面看这篇博客时会到此为止然后显示一个“阅读更多”字样</p>
@@ -155,12 +169,14 @@
 					<p>唔……就介绍到这里吧。想要更详细的介绍上网搜搜吧～</p>
 					<p>（评论区是不可以用任何HTML滴～但是数学公式还是没问题滴）</p>
 				</div>
-	</section>
+			</div>
-	<section>
+		</div>
-		<header>
+		<div class="card my-1">
-			<h4><a data-toggle="collapse" href="#collapseEight">8. 交互式类型的题怎么本地测试</a></h4>
+			<div class="card-header collapsed" id="headerEight" data-toggle="collapse" data-target="#collapseEight" style="cursor:pointer;">
-		</header>
+				<h5 class="mb-0">交互式类型的题怎么本地测试</h5>
+			</div>
 			<div id="collapseEight" class="collapse">
+				<div class="card-body">
 					<p>唔……好问题。交互式的题一般给了一个头文件要你include进来，以及一个实现接口的源文件grader。好像大家对多个源文件一起编译还不太熟悉。</p>
 					<p>对于C++：<code>g++ -o code grader.cpp code.cpp</code></p>
 					<p>对于C语言：<code>gcc -o code grader.c code.c</code></p>
@@ -169,12 +185,14 @@
 					<p>对于Pascal语言：<code>fpc grader.pas</code></p>
 					<p>就可以啦！</p>
 				</div>
-	</section>
+			</div>
-	<section>
+		</div>
-		<header>
+		<div class="card my-1">
-			<h4><a data-toggle="collapse" href="#collapseNine">9. 联系方式</a></h4>
+			<div class="card-header collapsed" id="headerNine" data-toggle="collapse" data-target="#collapseNine" style="cursor:pointer;">
-		</header>
+				<h5 class="mb-0">联系方式</h5>
+			</div>
 			<div id="collapseNine" class="collapse">
+				<div class="card-body">
 					<p>如果你想出题、想办比赛、发现了BUG或者对网站有什么建议，可以通过下面的方式联系我们：</p>
 					<ul>
 						<li>私信联系<?= UOJConfig::$data['profile']['administrator'] ?>。</li>
@@ -184,6 +202,8 @@
 						<?php endif ?>
 					</ul>
 				</div>
+			</div>
+		</div>
 	</section>
 </article>
 

web/app/controllers/hack.php

@@ -60,11 +60,11 @@
 
 <?php echoHackListOnlyOne($hack, array(), $myUser) ?>
 <?php if ($should_show_all_details): ?>
-	<div class="panel panel-info">
+	<div class="card border-info">
-		<div class="panel-heading">
+		<div class="card-header bg-info">
-			<h4 class="panel-title"><?= UOJLocale::get('details') ?></h4>
+			<h4 class="card-title"><?= UOJLocale::get('details') ?></h4>
 		</div>
-		<div class="panel-body">
+		<div class="card-body">
 			<?php echoJudgementDetails($hack['details'], $styler, 'details') ?>
 			<?php if ($should_show_details_to_me): ?>
 				<?php if ($styler->fade_all_details): ?>

web/app/controllers/hack_list.php

@@ -42,9 +42,9 @@
 	
 ?>
 <?php echoUOJPageHeader(UOJLocale::get('hacks')) ?>
-<div class="hidden-xs">
+<div class="d-none d-sm-block">
 	<?php if ($myUser != null): ?>
-	<div class="pull-right">
+	<div class="float-right">
 		<a href="/hacks?hacker=<?= $myUser['username'] ?>" class="btn btn-success btn-sm"><?= UOJLocale::get('problems::hacks by me') ?></a>
 		<a href="/hacks?owner=<?= $myUser['username'] ?>" class="btn btn-danger btn-sm"><?= UOJLocale::get('problems::hacks to me') ?></a>
 	</div>
@@ -74,7 +74,7 @@
 				<option value="2"<?= $selected_fail ?>>Failed.</option>
 			</select>
 		</div>
-		<button type="submit" id="submit-search" class="btn btn-default btn-sm"><?= UOJLocale::get('search') ?></button>
+		<button type="submit" id="submit-search" class="btn btn-secondary btn-sm ml-2"><?= UOJLocale::get('search') ?></button>
 	</form>
 	<script type="text/javascript">
 		$('#form-search').submit(function(e) {

web/app/controllers/index.php

@@ -2,11 +2,11 @@
 	$blogs = DB::selectAll("select blogs.id, title, poster, post_time from important_blogs, blogs where is_hidden = 0 and important_blogs.blog_id = blogs.id order by level desc, important_blogs.blog_id desc limit 5");
 ?>
 <?php echoUOJPageHeader(UOJConfig::$data['profile']['oj-name-short']) ?>
-<div class="panel panel-default">
+<div class="card card-default">
-	<div class="panel-body">
+	<div class="card-body">
 		<div class="row">
 			<div class="col-sm-12 col-md-9">
-				<table class="table">
+				<table class="table table-sm">
 					<thead>
 						<tr>
 							<th style="width:60%"><?= UOJLocale::get('announcements') ?></th>
@@ -38,13 +38,13 @@
 				</table>
 			</div>
 			<div class="col-xs-6 col-sm-4 col-md-3">
-				<img class="media-object img-thumbnail" src="/pictures/UOJ.png" alt="UOJ logo" />
+				<img class="media-object img-thumbnail" src="/images/logo.png" alt="Logo" />
 			</div>
 		</div>
 	</div>
 </div>
 <div class="row">
-	<div class="col-sm-12">
+	<div class="col-sm-12 mt-4">
 		<h3><?= UOJLocale::get('top rated') ?></h3>
 		<?php echoRanklist(array('echo_full' => '', 'top10' => '')) ?>
 		<div class="text-center">

web/app/controllers/login.php

@@ -63,7 +63,7 @@
   </div>
   <div class="form-group">
     <div class="col-sm-offset-2 col-sm-3">
-      <button type="submit" id="button-submit" class="btn btn-default"><?= UOJLocale::get('submit') ?></button>
+      <button type="submit" id="button-submit" class="btn btn-secondary"><?= UOJLocale::get('submit') ?></button>
     </div>
   </div>
 </form>

web/app/controllers/problem.php

@@ -207,7 +207,16 @@ EOD
 	$REQUIRE_LIB['shjs'] = '';
 ?>
 <?php echoUOJPageHeader(HTML::stripTags($problem['title']) . ' - ' . UOJLocale::get('problems::problem')) ?>
-<div class="pull-right">
+<?php
+	$limit = getUOJConf("/var/uoj_data/{$problem['id']}/problem.conf");
+	$time_limit = $limit['time_limit'];
+	$memory_limit = $limit['memory_limit'];
+?>
+<div class="row d-flex justify-content-center">
+	<span class="badge badge-secondary mr-1">时间限制:<?=$time_limit!=null?"$time_limit s":"N/A"?></span>
+	<span class="badge badge-secondary mr-1">空间限制:<?=$memory_limit!=null?"$memory_limit MB":"N/A"?></span>
+</div>
+<div class="float-right">
 	<?= getClickZanBlock('P', $problem['id'], $problem['zan']) ?>
 </div>
 
@@ -217,7 +226,7 @@ EOD
 	<h1 class="col-md-7 text-center"><?= $problem_letter ?>. <?= $problem['title'] ?></h1>
 	<div class="col-md-2 text-right" id="contest-countdown"></div>
 </div>
-<a role="button" class="btn btn-info pull-right" href="/contest/<?= $contest['id'] ?>/problem/<?= $problem['id'] ?>/statistics"><span class="glyphicon glyphicon-stats"></span> <?= UOJLocale::get('problems::statistics') ?></a>
+<a role="button" class="btn btn-info float-right" href="/contest/<?= $contest['id'] ?>/problem/<?= $problem['id'] ?>/statistics"><span class="glyphicon glyphicon-stats"></span> <?= UOJLocale::get('problems::statistics') ?></a>
 <?php if ($contest['cur_progress'] <= CONTEST_IN_PROGRESS): ?>
 <script type="text/javascript">
 checkContestNotice(<?= $contest['id'] ?>, '<?= UOJTime::$time_now_str ?>');
@@ -226,36 +235,20 @@ $('#contest-countdown').countdown(<?= $contest['end_time']->getTimestamp() - UOJ
 <?php endif ?>
 <?php else: ?>
 <h1 class="page-header text-center">#<?= $problem['id']?>. <?= $problem['title'] ?></h1>
-<a role="button" class="btn btn-info pull-right" href="/problem/<?= $problem['id'] ?>/statistics"><span class="glyphicon glyphicon-stats"></span> <?= UOJLocale::get('problems::statistics') ?></a>
+<a role="button" class="btn btn-info float-right" href="/problem/<?= $problem['id'] ?>/statistics"><span class="glyphicon glyphicon-stats"></span> <?= UOJLocale::get('problems::statistics') ?></a>
 <?php endif ?>
-<?php
+
-    $limit = getUOJConf("/var/uoj_data/{$problem['id']}/problem.conf");
-    $time_limit = $limit['time_limit'];
-    $memory_limit = $limit['memory_limit'];
-?>
-<div class="row text-center">
-    <?php if($time_limit != null ): ?>
-	    <span class="label label-info" style="font-size:15px">Time Limit:&nbsp;<?=$time_limit?> s</span>
-	<?php else: ?>
-	    <span class="label label-info" style="font-size:15px">Time Limit:&nbsp;N/A</span>
-	<?php endif ?>
-    <?php if($memory_limit != null ): ?>
-	    <span class="label label-info" style="font-size:15px">Memory Limit:&nbsp;<?=$memory_limit?> MB</span>
-	<?php else: ?>
-	    <span class="label label-info" style="font-size:15px">Memory Limit:&nbsp;N/A</span>
-	<?php endif ?>
-</div>
 <ul class="nav nav-tabs" role="tablist">
-	<li class="active"><a href="#tab-statement" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-book"></span> <?= UOJLocale::get('problems::statement') ?></a></li>
+	<li class="nav-item"><a class="nav-link active" href="#tab-statement" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-book"></span> <?= UOJLocale::get('problems::statement') ?></a></li>
-	<li><a href="#tab-submit-answer" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-upload"></span> <?= UOJLocale::get('problems::submit') ?></a></li>
+	<li class="nav-item"><a class="nav-link" href="#tab-submit-answer" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-upload"></span> <?= UOJLocale::get('problems::submit') ?></a></li>
 	<?php if ($custom_test_requirement): ?>
-	<li><a href="#tab-custom-test" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-console"></span> <?= UOJLocale::get('problems::custom test') ?></a></li>
+	<li class="nav-item"><a class="nav-link" href="#tab-custom-test" role="tab" data-toggle="tab"><span class="glyphicon glyphicon-console"></span> <?= UOJLocale::get('problems::custom test') ?></a></li>
 	<?php endif ?>
 	<?php if (hasProblemPermission($myUser, $problem)): ?>
-	<li><a href="/problem/<?= $problem['id'] ?>/manage/statement" role="tab"><?= UOJLocale::get('problems::manage') ?></a></li>
+	<li class="nav-item"><a class="nav-link" href="/problem/<?= $problem['id'] ?>/manage/statement" role="tab"><?= UOJLocale::get('problems::manage') ?></a></li>
 	<?php endif ?>
 	<?php if ($contest): ?>
-	<li><a href="/contest/<?= $contest['id'] ?>" role="tab"><?= UOJLocale::get('contests::back to the contest') ?></a></li>
+	<li class="nav-item"><a class="nav-link" href="/contest/<?= $contest['id'] ?>" role="tab"><?= UOJLocale::get('contests::back to the contest') ?></a></li>
 	<?php endif ?>
 </ul>
 <div class="tab-content">

web/app/controllers/problem_data_manage.php

@@ -120,7 +120,7 @@
 	$http_host = HTML::escape(UOJContext::httpHost());
 	$download_url = HTML::url("/download.php?type=problem&id={$problem['id']}");
 	$info_form->appendHTML(<<<EOD
-<div class="form-group">
+<div class="form-group row">
 	<!--<label class="col-sm-3 control-label">zip上传数据</label>
 	<div class="col-sm-9">
 		<div class="form-control-static">
@@ -134,7 +134,7 @@
 EOD
 	);
 	$info_form->appendHTML(<<<EOD
-<div class="form-group">
+<div class="form-group row">
 	<label class="col-sm-3 control-label">problem_{$problem['id']}.zip</label>
 	<div class="col-sm-9">
 		<div class="form-control-static">
@@ -145,7 +145,7 @@ EOD
 EOD
 	);
 	$info_form->appendHTML(<<<EOD
-<div class="form-group">
+<div class="form-group row">
 	<label class="col-sm-3 control-label">testlib.h</label>
 	<div class="col-sm-9">
 		<div class="form-control-static">
@@ -158,7 +158,7 @@ EOD
 
 	$esc_submission_requirement = HTML::escape(json_encode(json_decode($problem['submission_requirement']), JSON_PRETTY_PRINT));
 	$info_form->appendHTML(<<<EOD
-<div class="form-group">
+<div class="form-group row">
 	<label class="col-sm-3 control-label">提交文件配置</label>
 	<div class="col-sm-9">
 		<div class="form-control-static"><pre>
@@ -171,7 +171,7 @@ EOD
 	);
 	$esc_extra_config = HTML::escape(json_encode(json_decode($problem['extra_config']), JSON_PRETTY_PRINT));
 	$info_form->appendHTML(<<<EOD
-<div class="form-group">
+<div class="form-group row">
 	<label class="col-sm-3 control-label">其它配置</label>
 	<div class="col-sm-9">
 		<div class="form-control-static"><pre>
@@ -282,12 +282,13 @@ EOD
 		}
 		public function echoDataFilesList($active_file) {
 			foreach ($this->data_files as $file_name) {
+				echo '<li class="nav-item">';
 				if ($file_name != $active_file) {
-					echo '<li>';
+					echo '<a class="nav-link" href="#">';
 				} else {
-					echo '<li class="active">';
+					echo '<a class="nav-link active" href="#">';
 				}
-				echo '<a href="#">', htmlspecialchars($file_name), '</a>', '</li>';
+				echo htmlspecialchars($file_name), '</a>', '</li>';
 			}
 		}
 		public function displayFile($file_name) {
@@ -610,17 +611,17 @@ EOD
 <?php echoUOJPageHeader(HTML::stripTags($problem['title']) . ' - 数据 - 题目管理') ?>
 <h1 class="page-header" align="center">#<?=$problem['id']?> : <?=$problem['title']?> 管理</h1>
 <ul class="nav nav-tabs" role="tablist">
-	<li><a href="/problem/<?= $problem['id'] ?>/manage/statement" role="tab">编辑</a></li>
+	<li class="nav-item"><a class="nav-link" href="/problem/<?= $problem['id'] ?>/manage/statement" role="tab">编辑</a></li>
-	<li><a href="/problem/<?= $problem['id'] ?>/manage/managers" role="tab">管理者</a></li>
+	<li class="nav-item"><a class="nav-link" href="/problem/<?= $problem['id'] ?>/manage/managers" role="tab">管理者</a></li>
-	<li class="active"><a href="/problem/<?= $problem['id'] ?>/manage/data" role="tab">数据</a></li>
+	<li class="nav-item"><a class="nav-link active" href="/problem/<?= $problem['id'] ?>/manage/data" role="tab">数据</a></li>
-	<li><a href="/problem/<?=$problem['id']?>" role="tab">返回</a></li>
+	<li class="nav-item"><a class="nav-link" href="/problem/<?=$problem['id']?>" role="tab">返回</a></li>
 </ul>
 
 <div class="row">
 	<div class="col-md-10 top-buffer-sm">
 		<div class="row">
 			<div class="col-md-3 top-buffer-sm" id="div-file_list">
-				<ul class="nav nav-pills nav-stacked">
+				<ul class="nav nav-pills flex-column">
 					<?php $data_disp->echoDataFilesList('problem.conf'); ?>
 				</ul>
 			</div>
@@ -667,7 +668,7 @@ EOD
 		<?php endif ?>
 		</div>
 		<div class="top-buffer-md">
-			<button id="button-display_view_type" type="button" class="btn btn-primary btn-block" onclick="$('#div-view_type').toggle('fast');">修改提交记录可视权限</button>
+			<button id="button-display_view_type" type="button" class="btn btn-primary btn-block" onclick="$('#div-view_type').toggle('fast');">提交记录可视权限</button>
 			<div class="top-buffer-sm" id="div-view_type" style="display:none; padding-left:5px; padding-right:5px;">
 				<?php $view_type_form->printHTML(); ?>
 			</div>
@@ -697,8 +698,8 @@ EOD
   		<div class="modal-dialog">
     			<div class="modal-content">
       				<div class="modal-header">
-        				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 						<h4 class="modal-title" id="myModalLabel">上传数据</h4>
+        				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
       				</div>
       				<div class="modal-body">
         				<form action="" method="post" enctype="multipart/form-data" role="form">
@@ -712,7 +713,7 @@ EOD
       				<div class="modal-footer">
 						<button type="submit" class="btn btn-success">上传</button>
 						</form>
-        				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+        				<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
       				</div>
     			</div>
   		</div>
@@ -722,12 +723,12 @@ EOD
   		<div class="modal-dialog">
     			<div class="modal-content">
       				<div class="modal-header">
-        				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 						<h4 class="modal-title" id="myModalLabel">试题配置</h4>
+        				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
       				</div>
       				<div class="modal-body">
         				<form class="form-horizontal" action="" method="post" role="form">
-        					<div class="form-group">
+        					<div class="form-group row">
     							<label for="use_builtin_checker" class="col-sm-5 control-label">比对函数</label>
     							<div class="col-sm-7">
 								<select class="form-control" id="use_builtin_checker" name="use_builtin_checker">
@@ -739,55 +740,55 @@ EOD
       								<!--<input type="hidden" class="form-control" id="use_builtin_checker" name="use_builtin_checker" placeholder="比对函数">-->
     							</div>
   							</div>
-  							<div class="form-group">
+  							<div class="form-group row">
     							<label for="n_tests" class="col-sm-5 control-label">n_tests</label>
     							<div class="col-sm-7">
       								<input type="text" class="form-control" id="n_tests" name="n_tests" placeholder="数据点个数">
     							</div>
   							</div>
-  							<div class="form-group">
+  							<div class="form-group row">
     							<label for="n_ex_tests" class="col-sm-5 control-label">n_ex_tests</label>
     							<div class="col-sm-7">
       								<input type="text" class="form-control" id="n_ex_tests" name="n_ex_tests" placeholder="额外数据点个数">
     							</div>
   							</div>
-  							<div class="form-group">
+  							<div class="form-group row">
     							<label for="n_sample_tests" class="col-sm-5 control-label">n_sample_tests</label>
     							<div class="col-sm-7">
       								<input type="text" class="form-control" id="n_sample_tests" name="n_sample_tests" placeholder="样例测试点个数">
     							</div>
   							</div>
-  							<div class="form-group">
+  							<div class="form-group row">
     							<label for="input_pre" class="col-sm-5 control-label">input_pre</label>
     							<div class="col-sm-7">
       								<input type="text" class="form-control" id="input_pre" name="input_pre" placeholder="输入文件名称">
     							</div>
   							</div>
-  							<div class="form-group">
+  							<div class="form-group row">
     							<label for="input_suf" class="col-sm-5 control-label">input_suf</label>
     							<div class="col-sm-7">
       								<input type="text" class="form-control" id="input_suf" name="input_suf" placeholder="输入文件后缀">
     							</div>
   							</div>
-  							<div class="form-group">
+  							<div class="form-group row">
     							<label for="output_pre" class="col-sm-5 control-label">output_pre</label>
     							<div class="col-sm-7">
       								<input type="text" class="form-control" id="output_pre" name="output_pre" placeholder="输出文件名称">
     							</div>
   							</div>
-  							<div class="form-group">
+  							<div class="form-group row">
     							<label for="output_suf" class="col-sm-5 control-label">output_suf</label>
     							<div class="col-sm-7">
       								<input type="text" class="form-control" id="output_suf" name="output_suf" placeholder="输出文件后缀">
     							</div>
   							</div>
-  							<div class="form-group">
+  							<div class="form-group row">
     							<label for="time_limit" class="col-sm-5 control-label">time_limit</label>
     							<div class="col-sm-7">
       								<input type="text" class="form-control" id="time_limit" name="time_limit" placeholder="时间限制（不能为小数！）">
     							</div>
   							</div>
-  							<div class="form-group">
+  							<div class="form-group row">
     							<label for="memory_limit" class="col-sm-5 control-label">memory_limit</label>
     							<div class="col-sm-7">
       								<input type="text" class="form-control" id="memory_limit" name="memory_limit" placeholder="内存限制">
@@ -798,7 +799,7 @@ EOD
       				<div class="modal-footer">
 						<button type="submit" class="btn btn-success">确定</button>
 						</form>
-        				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
+        				<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
       				</div>
     			</div>
   		</div>

web/app/controllers/problem_managers_manage.php

@@ -30,10 +30,10 @@
 <?php echoUOJPageHeader(HTML::stripTags($problem['title']) . ' - 管理者 - 题目管理') ?>
 <h1 class="page-header" align="center">#<?=$problem['id']?> : <?=$problem['title']?> 管理</h1>
 <ul class="nav nav-tabs" role="tablist">
-	<li><a href="/problem/<?= $problem['id'] ?>/manage/statement" role="tab">编辑</a></li>
+	<li class="nav-item"><a class="nav-link" href="/problem/<?= $problem['id'] ?>/manage/statement" role="tab">编辑</a></li>
-	<li class="active"><a href="/problem/<?= $problem['id'] ?>/manage/managers" role="tab">管理者</a></li>
+	<li class="nav-item"><a class="nav-link active" href="/problem/<?= $problem['id'] ?>/manage/managers" role="tab">管理者</a></li>
-	<li><a href="/problem/<?= $problem['id'] ?>/manage/data" role="tab">数据</a></li>
+	<li class="nav-item"><a class="nav-link" href="/problem/<?= $problem['id'] ?>/manage/data" role="tab">数据</a></li>
-	<li><a href="/problem/<?=$problem['id']?>" role="tab">返回</a></li>
+	<li class="nav-item"><a class="nav-link" href="/problem/<?=$problem['id']?>" role="tab">返回</a></li>
 </ul>
 
 <table class="table table-hover">

web/app/controllers/problem_set.php

@@ -36,7 +36,7 @@
 			echo '<a href="/problem/', $problem['id'], '">', $problem['title'], '</a>';
 			if (isset($_COOKIE['show_tags_mode'])) {
 				foreach (queryProblemTags($problem['id']) as $tag) {
-					echo '<a class="uoj-problem-tag">', '<span class="badge">', HTML::escape($tag), '</span>', '</a>';
+					echo '<a class="uoj-problem-tag">', '<span class="badge badge-pill badge-secondary">', HTML::escape($tag), '</span>', '</a>';
 				}
 			}
 			echo '</td>';
@@ -138,25 +138,11 @@ EOD;
 	<div class="col-sm-4">
 		<?= HTML::tablist($tabs_info, $cur_tab, 'nav-pills') ?>
 	</div>
-	<div class="col-sm-4">
+	<div class="col-sm-4 order-sm-9 checkbox text-right">
-		<form id="form-search" class="input-group form-group" method="get">
+		<label class="checkbox-inline" for="input-show_tags_mode"><input type="checkbox" id="input-show_tags_mode" <?= isset($_COOKIE['show_tags_mode']) ? 'checked="checked" ': ''?>/> <?= UOJLocale::get('problems::show tags') ?></label>
-			<input type="text" class="form-control" name="search" placeholder="<?= UOJLocale::get('search')?>" />  
+		<label class="checkbox-inline" for="input-show_submit_mode"><input type="checkbox" id="input-show_submit_mode" <?= isset($_COOKIE['show_submit_mode']) ? 'checked="checked" ': ''?>/> <?= UOJLocale::get('problems::show statistics') ?></label>
-			<span class="input-group-btn">
-				<button type="submit" class="btn btn-search btn-primary" id="submit-search"><span class="glyphicon glyphicon-search"></span></button>  
-			</span>
-		</form>
 	</div>
-	<div class="col-sm-4 checkbox text-right">
+	<div class="col-sm-4 order-sm-5">
-		<label class="checkbox-inline" for="input-show_tags_mode">
-			<input type="checkbox" id="input-show_tags_mode" <?= isset($_COOKIE['show_tags_mode']) ? 'checked="checked" ': ''?>/> <?= UOJLocale::get('problems::show tags') ?>
-		</label>
-		<label class="checkbox-inline" for="input-show_submit_mode">
-			<input type="checkbox" id="input-show_submit_mode" <?= isset($_COOKIE['show_submit_mode']) ? 'checked="checked" ': ''?>/> <?= UOJLocale::get('problems::show statistics') ?>
-		</label>
-	</div>
-</div>
-<div class="row">
-	<div class="col-xs-10 col-xs-push-1 col-sm-6 col-sm-push-3 input-group">
 	<?php echo $pag->pagination(); ?>
 	</div>
 </div>

web/app/controllers/problem_statement_manage.php

@@ -49,10 +49,10 @@
 <?php echoUOJPageHeader(HTML::stripTags($problem['title']) . ' - 编辑 - 题目管理') ?>
 <h1 class="page-header" align="center">#<?=$problem['id']?> : <?=$problem['title']?> 管理</h1>
 <ul class="nav nav-tabs" role="tablist">
-	<li class="active"><a href="/problem/<?= $problem['id'] ?>/manage/statement" role="tab">编辑</a></li>
+	<li class="nav-item"><a class="nav-link active" href="/problem/<?= $problem['id'] ?>/manage/statement" role="tab">编辑</a></li>
-	<li><a href="/problem/<?= $problem['id'] ?>/manage/managers" role="tab">管理者</a></li>
+	<li class="nav-item"><a class="nav-link" href="/problem/<?= $problem['id'] ?>/manage/managers" role="tab">管理者</a></li>
-	<li><a href="/problem/<?= $problem['id'] ?>/manage/data" role="tab">数据</a></li>
+	<li class="nav-item"><a class="nav-link" href="/problem/<?= $problem['id'] ?>/manage/data" role="tab">数据</a></li>
-	<li><a href="/problem/<?=$problem['id']?>" role="tab">返回</a></li>
+	<li class="nav-item"><a class="nav-link" href="/problem/<?=$problem['id']?>" role="tab">返回</a></li>
 </ul>
 <?php $problem_editor->printHTML() ?>
 <?php echoUOJPageFooter() ?>

web/app/controllers/register.php

@@ -86,7 +86,7 @@
 	</div>
 	<div class="form-group">
 		<div class="col-sm-offset-2 col-sm-3">
-			<button type="submit" id="button-submit" class="btn btn-default"><?= UOJLocale::get('submit') ?></button>
+			<button type="submit" id="button-submit" class="btn btn-secondary"><?= UOJLocale::get('submit') ?></button>
 		</div>
 	</div>
 </form>

web/app/controllers/reset_pw.php

@@ -47,7 +47,7 @@
   </div>
   <div class="form-group">
 	<div class="col-sm-offset-2 col-sm-3">
-	  <button type="submit" id="button-submit" class="btn btn-default">提交</button>
+	  <button type="submit" id="button-submit" class="btn btn-secondary">提交</button>
 	</div>
   </div>
 </form>

web/app/controllers/subdomain/blog/archive.php

@@ -33,14 +33,14 @@
 <div class="row">
 	<div class="col-md-3">
 		<?php if (UOJContext::hasBlogPermission()): ?>
-		<div class="btn-group btn-group-justified">
+		<div class="btn-group d-flex">
 			<a href="<?=HTML::blog_url(UOJContext::userid(), '/post/new/write')?>" class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> 写新博客</a>
 			<a href="<?=HTML::blog_url(UOJContext::userid(), '/slide/new/write')?>" class="btn btn-primary"><span class="glyphicon glyphicon-edit"></span> 写新幻灯片</a>
 		</div>
 		<?php endif ?>
-		<div class="panel panel-info top-buffer-sm">
+		<div class="card border-info top-buffer-sm">
-			<div class="panel-heading">标签</div>
+			<div class="card-header bg-info">标签</div>
-			<div class="panel-body">
+			<div class="card-body">
 			<?php if ($all_tags): ?>
 			<?php foreach ($all_tags as $tag): ?>
 				<?php echoBlogTag($tag['tag']) ?>

web/app/controllers/subdomain/blog/blog.php

@@ -161,8 +161,8 @@
 	?>
 	<div id="comment-<?= $comment['id'] ?>" class="list-group-item">
 		<div class="media">
-			<div class="media-left comtposterbox">
+			<div class="media-left comtposterbox mr-3">
-				<a href="<?= HTML::url('/user/profile/'.$poster['username']) ?>" class="hidden-xs">
+				<a href="<?= HTML::url('/user/profile/'.$poster['username']) ?>" class="d-none d-sm-block">
 					<img class="media-object img-rounded" src="<?= $asrc ?>" alt="avatar" />
 				</a>
 			</div>
@@ -185,7 +185,7 @@
 </div>
 <?= $comments_pag->pagination() ?>
 
-<h3>发表评论</h3>
+<h3 class="mt-4">发表评论</h3>
 <p>可以用@mike来提到mike这个用户，mike会被高亮显示。如果你真的想打“@”这个字符，请用“@@”。</p>
 <?php $comment_form->printHTML() ?>
 

web/app/controllers/submission.php

@@ -151,11 +151,11 @@
 <?php endif ?>
 
 <?php if ($should_show_all_details): ?>
-	<div class="panel panel-info">
+	<div class="card border-info mb-3">
-		<div class="panel-heading">
+		<div class="card-header bg-info">
-			<h4 class="panel-title"><?= UOJLocale::get('details') ?></h4>
+			<h4 class="card-title"><?= UOJLocale::get('details') ?></h4>
 		</div>
-		<div class="panel-body">
+		<div class="card-body">
 			<?php echoJudgementDetails($submission_result['details'], $styler, 'details') ?>
 			<?php if ($should_show_details_to_me): ?>
 				<?php if (isset($submission_result['final_result'])): ?>

web/app/controllers/submissions_list.php

@@ -31,9 +31,9 @@
 	}
 ?>
 <?php echoUOJPageHeader(UOJLocale::get('submissions')) ?>
-<div class="hidden-xs">
+<div class="d-none d-sm-block">
 	<?php if ($myUser != null): ?>
-	<div class="pull-right">
+	<div class="float-right">
 		<a href="/submissions?submitter=<?= $myUser['username'] ?>" class="btn btn-primary btn-sm"><?= UOJLocale::get('problems::my submissions') ?></a>
 	</div>
 	<?php endif ?>
@@ -56,7 +56,7 @@
 			<label for="input-language" class="control-label"><?= UOJLocale::get('problems::language')?>:</label>
 			<input type="text" class="form-control input-sm" name="language" id="input-language" value="<?= $html_esc_q_language ?>" maxlength="10" style="width:8em" />
 		</div>
-		<button type="submit" id="submit-search" class="btn btn-default btn-sm"><?= UOJLocale::get('search')?></button>
+		<button type="submit" id="submit-search" class="btn btn-secondary btn-sm ml-2"><?= UOJLocale::get('search')?></button>
 	</form>
 	<script type="text/javascript">
 		$('#form-search').submit(function(e) {

web/app/controllers/super_manage.php

@@ -265,7 +265,7 @@ EOD;
 <?php echoUOJPageHeader('系统管理') ?>
 <div class="row">
 	<div class="col-sm-3">
-		<?= HTML::tablist($tabs_info, $cur_tab, 'nav-pills nav-stacked') ?>
+		<?= HTML::tablist($tabs_info, $cur_tab, 'nav-pills flex-column') ?>
 	</div>
 	
 	<div class="col-sm-9">

web/app/controllers/user_info.php

@@ -23,16 +23,14 @@
 		}
 		$esc_motto = HTML::escape($user['motto']);
 	?>
-	<div class="panel panel-info">
+	<div class="card border-info">
-		<div class="panel-heading">
+		<h5 class="card-header bg-info"><?= UOJLocale::get('user profile') ?></h5>
-			<h2 class="panel-title"><?= UOJLocale::get('user profile') ?></h2>
+		<div class="card-body">
+			<div class="row mb-4">
+				<div class="col-md-4 order-md-9">
+					<img class="media-object img-thumbnail d-block mx-auto" alt="<?= $user['username'] ?> Avatar" src="<?= HTML::avatar_addr($user, 256) ?>" />
 				</div>
-		<div class="panel-body">
+				<div class="col-md-8 order-md-1">
-			<div class="row">
-				<div class="col-md-4 col-md-push-8">
-					<img class="media-object img-thumbnail center-block" alt="<?= $user['username'] ?> Avatar" src="<?= HTML::avatar_addr($user, 256) ?>" />
-				</div>
-				<div class="col-md-8 col-md-pull-4">
 					<h2><span class="uoj-honor" data-rating="<?= $user['rating'] ?>"><?= $user['username'] ?></span> <span><strong style="<?= $col_sex ?>"><?= $esc_sex ?></strong></span></h2>
 					<div class="list-group">
 						<div class="list-group-item">
@@ -246,9 +244,9 @@ $("#rating-plot").bind("plotclick", function (event, pos, item) {
 </script>
 <?php else: ?>
 	<?php echoUOJPageHeader('不存在该用户' . ' - 用户信息') ?>
-	<div class="panel panel-danger">
+	<div class="card border-danger">
-		<div class="panel-heading">用户信息</div>
+		<div class="card-header bg-danger">用户信息</div>
-		<div class="panel-body">
+		<div class="card-body">
 		<h4>不存在该用户</h4>
 		</div>
 	</div>

web/app/controllers/user_msg.php

@@ -111,22 +111,22 @@ EOD;
 </div>
 
 <div id="history" style="display:none">
-	<div class="panel panel-primary">
+	<div class="card border-primary">
-		<div class="panel-heading">
+		<div class="card-header bg-primary text-white">
-			<button type="button" id="goBack" class="btn btn-info btn-xs" style="position:absolute">返回</button>
+			<button type="button" id="goBack" class="btn btn-info btn-sm" style="position:absolute">返回</button>
 			<div id="conversation-name" class="text-center"></div>
 		</div>
-		<div class="panel-body">
+		<div class="card-body">
-			<ul class="pager top-buffer-no">
+			<ul class="pagination top-buffer-no justify-content-between">
-				<li class="previous"><a href="#" id="pageLeft">&larr; 更早的消息</a></li>
+				<li class="previous"><a class="btn btn-outline-secondary text-primary" href="#" id="pageLeft">&larr; 更早的消息</a></li>
 				<li class="text-center" id="pageShow" style="line-height:32px"></li>
-				<li class="next"><a href="#" id="pageRight">更新的消息 &rarr;</a></li>
+				<li class="next"><a class="btn btn-outline-secondary text-primary" href="#" id="pageRight">更新的消息 &rarr;</a></li>
 			</ul>
 			<div id="history-list" style="min-height: 200px;">
 			</div>
-			<ul class="pager bot-buffer-no">
+			<ul class="pagination top-buffer-no justify-content-between">
-				<li class="previous"><a href="#history" id="pageLeft2">&larr; 更早的消息</a></li>
+				<li class="previous"><a class="btn btn-outline-secondary text-primary" href="#history" id="pageLeft2">&larr; 更早的消息</a></li>
-				<li class="next"><a href="#history" id="pageRight2">更新的消息 &rarr;</a></li>
+				<li class="next"><a class="btn btn-outline-secondary text-primary" href="#history" id="pageRight2">更新的消息 &rarr;</a></li>
 			</ul>
 			<hr />
 			<form id="form-message">
@@ -172,8 +172,8 @@ function addButton(conversationName, send_time, type) {
 function addBubble(content, send_time, read_time, msgId, conversation, page, type) {
 	$("#history-list").append(
 			'<div style=' + (type ? "margin-left:0%;margin-right:20%;" : "margin-left:20%;margin-right:0%;") + '>' +
-				'<div class="panel panel-info">' +
+				'<div class="card border-info mb-4">' +
-					'<div class="panel-body" style="background:#afeeee; word-break: break-all">' +
+					'<div class="card-body" style="background:#17a2b8; word-break: break-all">' +
 						'<div style="white-space:pre-wrap">' +
 							htmlspecialchars(content) +
 						'</div>' +

web/app/libs/uoj-form-lib.php

@@ -200,7 +200,7 @@ EOD;
 			$default_value = htmlspecialchars($default_value);
 			$this->is_big = true;
 			$html = <<<EOD
-<div id="div-$name">
+<div id="div-$name" class="form-group">
 	<label for="input-$name" class="control-label">$label_text</label>
 	<textarea class="form-control" name="$name" id="input-$name">$default_value</textarea>
 	<span class="help-block" id="help-$name"></span>
@@ -403,7 +403,7 @@ EOD
 					$this->submit_button_config['text'] = UOJLocale::get('submit');
 				}
 				if (!isset($this->submit_button_config['class_str'])) {
-					$this->submit_button_config['class_str'] = 'btn btn-default';
+					$this->submit_button_config['class_str'] = 'btn btn-secondary';
 				}
 				if ($this->submit_button_config['align'] == 'offset') {
 					echo '<div class="form-group">';
@@ -411,7 +411,7 @@ EOD
 				} else {
 					echo '<div class="text-', $this->submit_button_config['align'], '">';
 				}
-				echo '<button type="submit" id="button-submit-', $this->form_name, '" name="submit-', $this->form_name, '" value="', $this->form_name, '" class="', $this->submit_button_config['class_str'], '">', $this->submit_button_config['text'], '</button>';
+				echo '<button type="submit" id="button-submit-', $this->form_name, '" name="submit-', $this->form_name, '" value="', $this->form_name, '" class="mt-2 ', $this->submit_button_config['class_str'], '">', $this->submit_button_config['text'], '</button>';
 				if ($this->submit_button_config['align'] == 'offset') {
 					echo '</div>';
 				}
@@ -732,7 +732,7 @@ EOD;
 	<input type="file" id="input-{$name}" name="{$name}" style="display:none;" onchange="$('#input-{$name}_path').val($('#input-{$name}').val());" />
 	<div class="input-group bot-buffer-md">
 		<input id="input-{$name}_path" class="form-control" type="text" readonly="readonly" />
-		<span class="input-group-btn">
+		<span class="input-group-append">
 			<button type="button" class="btn btn-primary" style="width:100px; !important" onclick="$('#input-{$name}').click();"><span class="glyphicon glyphicon-folder-open"></span> $browse_text</button>
 		</span>
 	</div>

web/app/libs/uoj-html-lib.php

@@ -420,14 +420,14 @@ function echoSubmissionContent($submission, $requirement) {
 					$sh_class = '';
 					break;
 			}
-			echo '<div class="panel panel-info">';
+			echo '<div class="card border-info mb-3">';
-			echo '<div class="panel-heading">';
+			echo '<div class="card-header bg-info">';
-			echo '<h4 class="panel-title">'.$req['name'].'</h4>';
+			echo '<h4 class="card-title">'.$req['name'].'</h4>';
 			echo '</div>';
-			echo '<div class="panel-body">';
+			echo '<div class="card-body">';
 			echo '<pre><code class="'.$sh_class.'">'.$file_content."\n".'</code></pre>';
 			echo '</div>';
-			echo '<div class="panel-footer">'.$footer_text.'</div>';
+			echo '<div class="card-footer">'.$footer_text.'</div>';
 			echo '</div>';
 		}
 		else if ($req['type'] == "text") {
@@ -435,14 +435,14 @@ function echoSubmissionContent($submission, $requirement) {
 			$file_content = strOmit($file_content, 500);
 			$file_content = uojTextEncode($file_content, array('allow_CR' => true, 'html_escape' => true));
 			$footer_text = UOJLocale::get('problems::text file');
-			echo '<div class="panel panel-info">';
+			echo '<div class="card border-info mb-3">';
-			echo '<div class="panel-heading">';
+			echo '<div class="card-header bg-info">';
-			echo '<h4 class="panel-title">'.$req['file_name'].'</h4>';
+			echo '<h4 class="card-title">'.$req['file_name'].'</h4>';
 			echo '</div>';
-			echo '<div class="panel-body">';
+			echo '<div class="card-body">';
 			echo '<pre>'."\n".$file_content."\n".'</pre>';
 			echo '</div>';
-			echo '<div class="panel-footer">'.$footer_text.'</div>';
+			echo '<div class="card-footer">'.$footer_text.'</div>';
 			echo '</div>';
 		}
 	}
@@ -473,7 +473,7 @@ class JudgementDetailsPrinter {
 			$this->_print_c($node);
 			echo "\n</pre>";
 		} elseif ($node->nodeName == 'tests') {
-			echo '<div class="panel-group" id="', $this->name, '_details_accordion">';
+			echo '<div id="', $this->name, '_details_accordion">';
 			if ($this->styler->show_small_tip) {
 				echo '<div class="text-right text-muted">', '小提示：点击横条可展开更详细的信息', '</div>';
 			}
@@ -487,16 +487,16 @@ class JudgementDetailsPrinter {
 			$subtask_score = $node->getAttribute('score');
 			$subtask_info = $node->getAttribute('info');
 			
-			echo '<div class="panel ', $this->styler->getTestInfoClass($subtask_info), '">';
+			echo '<div class="card ', $this->styler->getTestInfoClass($subtask_info), ' mb-3">';
 			
 			$accordion_parent = "{$this->name}_details_accordion";
 			$accordion_collapse =  "{$accordion_parent}_collapse_subtask_{$subtask_num}";
 			$accordion_collapse_accordion =  "{$accordion_collapse}_accordion";
-			echo 	'<div class="panel-heading" data-toggle="collapse" data-parent="#', $accordion_parent, '" data-target="#', $accordion_collapse, '">';
+			echo 	'<div class="card-header" data-toggle="collapse" data-parent="#', $accordion_parent, '" data-target="#', $accordion_collapse, '">';
 			
 			echo 		'<div class="row">';
 			echo 			'<div class="col-sm-2">';
-			echo 				'<h3 class="panel-title">', 'Subtask #', $subtask_num, ': ', '</h3>';
+			echo 				'<h3 class="card-title">', 'Subtask #', $subtask_num, ': ', '</h3>';
 			echo 			'</div>';
 			
 			if ($this->styler->show_score) {
@@ -515,10 +515,10 @@ class JudgementDetailsPrinter {
 			echo 		'</div>';
 			echo 	'</div>';
 			
-			echo 	'<div id="', $accordion_collapse, '" class="panel-collapse collapse">';
+			echo 	'<div id="', $accordion_collapse, '" class="card-collapse collapse">';
-			echo 		'<div class="panel-body">';
+			echo 		'<div class="card-body">';
 
-			echo 			'<div id="', $accordion_collapse_accordion, '" class="panel-group">';
+			echo 			'<div id="', $accordion_collapse_accordion, '">';
 			$this->subtask_num = $subtask_num;
 			$this->_print_c($node);
 			$this->subtask_num = null;
@@ -534,7 +534,7 @@ class JudgementDetailsPrinter {
 			$test_time = $node->getAttribute('time');
 			$test_memory = $node->getAttribute('memory');
 
-			echo '<div class="panel ', $this->styler->getTestInfoClass($test_info), '">';
+			echo '<div class="card ', $this->styler->getTestInfoClass($test_info), ' mb-3">';
 			
 			$accordion_parent = "{$this->name}_details_accordion";
 			if ($this->subtask_num != null) {
@@ -542,16 +542,16 @@ class JudgementDetailsPrinter {
 			}
 			$accordion_collapse = "{$accordion_parent}_collapse_test_{$test_num}";
 			if (!$this->styler->shouldFadeDetails($test_info)) {
-				echo '<div class="panel-heading" data-toggle="collapse" data-parent="#', $accordion_parent, '" data-target="#', $accordion_collapse, '">';
+				echo '<div class="card-header" data-toggle="collapse" data-parent="#', $accordion_parent, '" data-target="#', $accordion_collapse, '">';
 			} else {
-				echo '<div class="panel-heading">';
+				echo '<div class="card-header">';
 			}
 			echo '<div class="row">';
 			echo '<div class="col-sm-2">';
 			if ($test_num > 0) {
-				echo '<h4 class="panel-title">', 'Test #', $test_num, ': ', '</h4>';
+				echo '<h4 class="card-title">', 'Test #', $test_num, ': ', '</h4>';
 			} else {
-				echo '<h4 class="panel-title">', 'Extra Test:', '</h4>';
+				echo '<h4 class="card-title">', 'Extra Test:', '</h4>';
 			}
 			echo '</div>';
 				
@@ -584,12 +584,12 @@ class JudgementDetailsPrinter {
 			echo '</div>';
 
 			if (!$this->styler->shouldFadeDetails($test_info)) {
-				$accordion_collapse_class = 'panel-collapse collapse';
+				$accordion_collapse_class = 'card-collapse collapse';
 				if ($this->styler->collapse_in) {
 					$accordion_collapse_class .= ' in';
 				}
 				echo '<div id="', $accordion_collapse, '" class="', $accordion_collapse_class, '">';
-				echo '<div class="panel-body">';
+				echo '<div class="card-body">';
 
 				$this->_print_c($node);
 
@@ -603,18 +603,18 @@ class JudgementDetailsPrinter {
 			$test_time = $node->getAttribute('time');
 			$test_memory = $node->getAttribute('memory');
 
-			echo '<div class="panel ', $this->styler->getTestInfoClass($test_info), '">';
+			echo '<div class="card ', $this->styler->getTestInfoClass($test_info), ' mb-3">';
 			
 			$accordion_parent = "{$this->name}_details_accordion";
 			$accordion_collapse = "{$accordion_parent}_collapse_custom_test";
 			if (!$this->styler->shouldFadeDetails($test_info)) {
-				echo '<div class="panel-heading" data-toggle="collapse" data-parent="#', $accordion_parent, '" data-target="#', $accordion_collapse, '">';
+				echo '<div class="card-header" data-toggle="collapse" data-parent="#', $accordion_parent, '" data-target="#', $accordion_collapse, '">';
 			} else {
-				echo '<div class="panel-heading">';
+				echo '<div class="card-header">';
 			}
 			echo '<div class="row">';
 			echo '<div class="col-sm-2">';
-			echo '<h4 class="panel-title">', 'Custom Test: ', '</h4>';
+			echo '<h4 class="card-title">', 'Custom Test: ', '</h4>';
 			echo '</div>';
 				
 			echo '<div class="col-sm-4">';
@@ -637,12 +637,12 @@ class JudgementDetailsPrinter {
 			echo '</div>';
 
 			if (!$this->styler->shouldFadeDetails($test_info)) {
-				$accordion_collapse_class = 'panel-collapse collapse';
+				$accordion_collapse_class = 'card-collapse collapse';
 				if ($this->styler->collapse_in) {
 					$accordion_collapse_class .= ' in';
 				}
 				echo '<div id="', $accordion_collapse, '" class="', $accordion_collapse_class, '">';
-				echo '<div class="panel-body">';
+				echo '<div class="card-body">';
 
 				$this->_print_c($node);
 
@@ -706,13 +706,13 @@ class SubmissionDetailsStyler {
 	public $fade_all_details = false;
 	public function getTestInfoClass($info) {
 		if ($info == 'Accepted' || $info == 'Extra Test Passed') {
-			return 'panel-uoj-accepted';
+			return 'card-uoj-accepted';
 		} elseif ($info == 'Time Limit Exceeded') {
-			return 'panel-uoj-tle';
+			return 'card-uoj-tle';
 		} elseif ($info == 'Acceptable Answer') {
-			return 'panel-uoj-acceptable-answer';
+			return 'card-uoj-acceptable-answer';
 		} else {
-			return 'panel-uoj-wrong';
+			return 'card-uoj-wrong';
 		}
 	}
 	public function shouldFadeDetails($info) {
@@ -727,13 +727,13 @@ class CustomTestSubmissionDetailsStyler {
 	public $ioi_contest_is_running = false;
 	public function getTestInfoClass($info) {
 		if ($info == 'Success') {
-			return 'panel-uoj-accepted';
+			return 'card-uoj-accepted';
 		} elseif ($info == 'Time Limit Exceeded') {
-			return 'panel-uoj-tle';
+			return 'card-uoj-tle';
 		} elseif ($info == 'Acceptable Answer') {
-			return 'panel-uoj-acceptable-answer';
+			return 'card-uoj-acceptable-answer';
 		} else {
-			return 'panel-uoj-wrong';
+			return 'card-uoj-wrong';
 		}
 	}
 	public function shouldFadeDetails($info) {
@@ -747,13 +747,13 @@ class HackDetailsStyler {
 	public $fade_all_details = false;
 	public function getTestInfoClass($info) {
 		if ($info == 'Accepted' || $info == 'Extra Test Passed') {
-			return 'panel-uoj-accepted';
+			return 'card-uoj-accepted';
 		} elseif ($info == 'Time Limit Exceeded') {
-			return 'panel-uoj-tle';
+			return 'card-uoj-tle';
 		} elseif ($info == 'Acceptable Answer') {
-			return 'panel-uoj-acceptable-answer';
+			return 'card-uoj-acceptable-answer';
 		} else {
-			return 'panel-uoj-wrong';
+			return 'card-uoj-wrong';
 		}
 	}
 	public function shouldFadeDetails($info) {
@@ -910,7 +910,7 @@ function echoBlog($blog, $config = array()) {
 	uojIncludeView('blog-preview', $config);
 }
 function echoBlogTag($tag) {
-	echo '<a class="uoj-blog-tag"><span class="badge">', HTML::escape($tag), '</span></a>';
+	echo '<a class="uoj-blog-tag"><span class="badge badge-pill badge-secondary">', HTML::escape($tag), '</span></a>';
 }
 
 function echoUOJPageHeader($page_title, $extra_config = array()) {

web/app/locale/basic/en.php

@@ -1,5 +1,6 @@
 <?php
 return [
+	'_common_name' => 'English',
 	'login' => 'Login',
 	'register' => 'Register',
 	'logout' => 'Logout',

web/app/locale/basic/zh-cn.php

@@ -1,5 +1,6 @@
 <?php
 return [
+	'_common_name' => '中文',
 	'login' => '登录',
 	'register' => '注册',
 	'logout' => '登出',

web/app/models/HTML.php

@@ -14,7 +14,7 @@ class HTML {
 	public static function tablist($tabs_info, $cur, $type = 'nav-tabs') {
 		$html = '<ul class="nav '.$type.'" role="tablist">';
 		foreach ($tabs_info as $id => $tab) {
-			$html .= '<li'.($cur == $id ? ' class="active"' : '').'><a href="'.$tab['url'].'" role="tab">'.$tab['name'].'</a></li>';
+			$html .= '<li class="nav-item"><a class="nav-link'.($cur == $id ? ' active' : '').'" href="'.$tab['url'].'" role="tab">'.$tab['name'].'</a></li>';
 		}
 		$html .= '</ul>';
 		return $html;

web/app/models/Paginator.php

@@ -74,28 +74,26 @@ class Paginator {
 		if ($this->n_pages == 1) {
 			return '';
 		}
-		$html = '<div class="text-center">';
+		$html = '<ul class="pagination top-buffer-no bot-buffer-sm justify-content-center">';
-		$html .= '<ul class="pagination top-buffer-no bot-buffer-sm">';
 		if ($this->cur_page > 1) {
-			$html .= '<li><a href="'.$this->getPageUri($this->cur_page - 1).'"><span class="glyphicon glyphicon glyphicon-backward"></span></a></li>';
+			$html .= '<li class="page-item"><a class="page-link" href="'.$this->getPageUri($this->cur_page - 1).'"><span class="glyphicon glyphicon glyphicon-backward"></span></a></li>';
 		} else {
-			$html .= '<li class="disabled"><a><span class="glyphicon glyphicon glyphicon-backward"></span></a></li>';
+			$html .= '<li class="page-item disabled"><a class="page-link"><span class="glyphicon glyphicon glyphicon-backward"></span></a></li>';
 		}
 			
 		for ($i = max($this->cur_page - $this->max_extend, 1); $i <= min($this->cur_page + $this->max_extend, $this->n_pages); $i++) {
 			if ($i == $this->cur_page) {
-				$html .= '<li class="active"><a href="'.$this->getPageUri($i).'">'.$i.'</a></li>';
+				$html .= '<li class="page-item active"><a class="page-link" href="'.$this->getPageUri($i).'">'.$i.'</a></li>';
 			} else {
-				$html .= '<li><a href="'.$this->getPageUri($i).'">'.$i.'</a></li>';
+				$html .= '<li class="page-item"><a class="page-link" href="'.$this->getPageUri($i).'">'.$i.'</a></li>';
 			}
 		}
 		if ($this->cur_page < $this->n_pages) {
-			$html .= '<li><a href="'.$this->getPageUri($this->cur_page + 1).'"><span class="glyphicon glyphicon glyphicon-forward"></span></a></li>';
+			$html .= '<li class="page-item"><a class="page-link" href="'.$this->getPageUri($this->cur_page + 1).'"><span class="glyphicon glyphicon glyphicon-forward"></span></a></li>';
 		} else {
-			$html .= '<li class="disabled"><a><span class="glyphicon glyphicon glyphicon-forward"></span></a></li>';
+			$html .= '<li class="page-item disabled"><a class="page-link"><span class="glyphicon glyphicon glyphicon-forward"></span></a></li>';
 		}
 		$html .= '</ul>';
-		$html .= '</div>';
 		return $html;
 	}
 }

web/app/views/blog-editor.php

@@ -9,7 +9,7 @@
 	</div>
 </div>
 <?= HTML::div_vtextarea("{$editor->name}_content_md", $editor->label_text['content'], $editor->cur_data['content_md']) ?>
-<div class="row">
+<div class="row mt-2">
 	<div class="col-sm-6">
 		<?php if ($editor->blog_url): ?>
 		<a id="a-<?= $editor->name ?>_view_blog" class="btn btn-info" href="<?= HTML::escape($editor->blog_url) ?>"><?= $editor->label_text['view blog'] ?></a>

web/app/views/blog-nav.php

@@ -1,22 +1,16 @@
-<div class="navbar navbar-default" role="navigation">
+<div class="navbar navbar-light navbar-expand-md bg-light mb-4" role="navigation">
-	<div class="container-fluid">
-		<div class="navbar-header">
-			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
-				<span class="sr-only">导航</span>
-				<span class="icon-bar"></span>
-				<span class="icon-bar"></span>
-				<span class="icon-bar"></span>
-			</button>
 	<a class="navbar-brand" href="<?= HTML::blog_url(UOJContext::userid(), '/')?>"><?= UOJContext::userid() ?></a>
-		</div>
+	<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target=".navbar-collapse">
+		<span class="sr-only">导航</span>
+		<span class="navbar-toggler-icon"></span>
+	</button>
 	<div class="navbar-collapse collapse">
 		<ul class="nav navbar-nav">
-				<li><a href="<?= HTML::blog_url(UOJContext::userid(), '/archive')?>">日志</a></li>
+			<li class="nav-item"><a class="nav-link" href="<?= HTML::blog_url(UOJContext::userid(), '/archive')?>"><span class="glyphicon glyphicon-inbox"></span> 日志</a></li>
-				<li><a href="<?= HTML::blog_url(UOJContext::userid(), '/aboutme')?>">关于我</a></li>
+			<li class="nav-item"><a class="nav-link" href="<?= HTML::blog_url(UOJContext::userid(), '/aboutme')?>"><span class="glyphicon glyphicon-user"></span> 关于我</a></li>
-				<li><a href="<?= HTML::url('/') ?>"><?= UOJConfig::$data['profile']['oj-name-short'] ?></a></li>
+			<li class="nav-item"><a class="nav-link" href="<?= HTML::url('/') ?>"><span class="glyphicon glyphicon-link"></span> <?= UOJConfig::$data['profile']['oj-name-short'] ?></a></li>
 		</ul>
 	</div><!--/.nav-collapse -->
-	</div>
 </div>
 <script type="text/javascript">
 	var uojBlogUrl = '<?= HTML::blog_url(UOJContext::userid(), '')?>';

web/app/views/blog-preview.php

@@ -17,8 +17,8 @@
 <h2><?= $extra_text ?><a class="header-a" href="<?= HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id']) ?>"><?= $blog['title'] ?></a></h2>
 <div><?= $blog['post_time'] ?> <strong>By</strong> <?= getUserLink($blog['poster']) ?></div>
 <?php if (!$show_title_only): ?>
-<div class="panel panel-default">
+<div class="card mb-4">
-	<div class="panel-body">
+	<div class="card-body">
 		<?php if ($blog_type == 'post'): ?>
 		<article><?= $content ?></article>
 		<?php elseif ($blog_type == 'slide'): ?>
@@ -27,26 +27,26 @@
 				<iframe class="embed-responsive-item" src="<?= HTML::blog_url(UOJContext::userid(), '/slide/'.$blog['id']) ?>"></iframe>
 			</div>
 			<div class="text-right top-buffer-sm">
-				<a class="btn btn-default btn-md" href="<?= HTML::blog_url(UOJContext::userid(), '/slide/'.$blog['id']) ?>"><span class="glyphicon glyphicon-fullscreen"></span> 全屏</a>
+				<a class="btn btn-secondary btn-md" href="<?= HTML::blog_url(UOJContext::userid(), '/slide/'.$blog['id']) ?>"><span class="glyphicon glyphicon-fullscreen"></span> 全屏</a>
 			</div>
 		</article>
 		<?php endif ?>
 	</div>
-	<div class="panel-footer text-right">
+	<div class="card-footer text-right">
 		<ul class="list-inline bot-buffer-no">
-			<li>
+			<li class="list-inline-item">
 			<?php foreach (queryBlogTags($blog['id']) as $tag): ?>
 				<?php echoBlogTag($tag) ?>
 			<?php endforeach ?>
 			</li>
 			<?php if ($is_preview): ?>
-  			<li><a href="<?= HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id']) ?>">阅读全文</a></li>
+  			<li class="list-inline-item"><a href="<?= HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id']) ?>">阅读全文</a></li>
   			<?php endif ?>
   			<?php if (Auth::check() && (isSuperUser(Auth::user()) || Auth::id() == $blog['poster'])): ?>
-			<li><a href="<?=HTML::blog_url(UOJContext::userid(), '/'.$blog_type.'/'.$blog['id'].'/write')?>">修改</a></li>
+			<li class="list-inline-item"><a href="<?=HTML::blog_url(UOJContext::userid(), '/'.$blog_type.'/'.$blog['id'].'/write')?>">修改</a></li>
-			<li><a href="<?=HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id'].'/delete')?>">删除</a></li>
+			<li class="list-inline-item"><a href="<?=HTML::blog_url(UOJContext::userid(), '/post/'.$blog['id'].'/delete')?>">删除</a></li>
 			<?php endif ?>
-  			<li><?= getClickZanBlock('B', $blog['id'], $blog['zan']) ?></li>
+  			<li class="list-inline-item"><?= getClickZanBlock('B', $blog['id'], $blog['zan']) ?></li>
 		</ul>
 	</div>
 </div>

web/app/views/contest-backstage.php

@@ -1,11 +1,11 @@
 
-<ul class="nav nav-tabs" role="tablist">
+<ul class="nav nav-pills float-right" role="tablist">
-	<li class="active"><a href="#tab-question" role="tab" data-toggle="tab">提问</a></li>
+	<li class="nav-item"><a class="nav-link active" href="#tab-question" role="tab" data-toggle="tab">提问</a></li>
 	<?php if ($post_notice): ?>
-		<li><a href="#tab-notice" role="tab" data-toggle="tab">公告</a></li>
+		<li class="nav-item"><a class="nav-link" href="#tab-notice" role="tab" data-toggle="tab">公告</a></li>
 	<?php endif ?>
 	<?php if ($standings_data): ?>
-		<li><a href="#tab-standings" role="tab" data-toggle="tab">终榜</a></li>
+		<li class="nav-item"><a class="nav-link" href="#tab-standings" role="tab" data-toggle="tab">终榜</a></li>
 	<?php endif ?>
 </ul>
 <div class="tab-content">

web/app/views/contest-dashboard.php

@@ -66,7 +66,7 @@
 <?php if ($my_questions_pag != null): ?>
 	<div>
 		<?php if ($post_question): ?>
-			<div class="pull-right">
+			<div class="float-right">
 				<button id="button-display-post-question" type="button" class="btn btn-primary btn-xs">提问题</button>
 			</div>
 		<?php endif ?>

web/app/views/main-nav.php

@@ -1,25 +1,42 @@
-<div class="navbar navbar-default" role="navigation">
+<div class="navbar navbar-light navbar-expand-md bg-light mb-4" role="navigation">
-	<div class="container-fluid">
-		<div class="navbar-header">
-			<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
-				<span class="icon-bar"></span>
-				<span class="icon-bar"></span>
-				<span class="icon-bar"></span>
-			</button>
 	<a class="navbar-brand" href="<?= HTML::url('/') ?>"><?= UOJConfig::$data['profile']['oj-name-short'] ?></a>
-		</div>
+	<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target=".navbar-collapse">
-		<div class="navbar-collapse collapse">
+		<span class="navbar-toggler-icon"></span>
-			<ul class="nav navbar-nav">
+	</button>
-				<li><a href="<?= HTML::url('/contests') ?>"><?= UOJLocale::get('contests') ?></a></li>
+	<div class="collapse navbar-collapse" id="navbarSupportedContent">
-				<li><a href="<?= HTML::url('/problems') ?>"><?= UOJLocale::get('problems') ?></a></li>
+		<ul class="nav navbar-nav mr-auto">
-				<li><a href="<?= HTML::url('/submissions') ?>"><?= UOJLocale::get('submissions') ?></a></li>
+			<li class="nav-item"><a class="nav-link" href="<?= HTML::url('/contests') ?>"><span class="glyphicon glyphicon-stats"></span> <?= UOJLocale::get('contests') ?></a></li>
-				<li><a href="<?= HTML::url('/hacks') ?>"><?= UOJLocale::get('hacks') ?></a></li>
+			<li class="nav-item"><a class="nav-link" href="<?= HTML::url('/problems') ?>"><span class="glyphicon glyphicon-list-alt"></span> <?= UOJLocale::get('problems') ?></a></li>
-				<li><a href="<?= HTML::blog_list_url() ?>"><?= UOJLocale::get('blogs') ?></a></li>
+			<li class="nav-item"><a class="nav-link" href="<?= HTML::url('/submissions') ?>"><span class="glyphicon glyphicon-tasks"></span> <?= UOJLocale::get('submissions') ?></a></li>
-				<li><a href="<?= HTML::url('/faq') ?>"><?= UOJLocale::get('help') ?></a></li>
+			<li class="nav-item"><a class="nav-link" href="<?= HTML::url('/hacks') ?>"><span class="glyphicon glyphicon-flag"></span> <?= UOJLocale::get('hacks') ?></a></li>
+			<li class="nav-item"><a class="nav-link" href="<?= HTML::blog_list_url() ?>"><span class="glyphicon glyphicon-edit"></span> <?= UOJLocale::get('blogs') ?></a></li>
+			<li class="nav-item"><a class="nav-link" href="<?= HTML::url('/faq') ?>"><span class="glyphicon glyphicon-info-sign"></span> <?= UOJLocale::get('help') ?></a></li>
 		</ul>
-		</div><!--/.nav-collapse -->
+		<form id="form-search-problem" class="form-inline my-2 my-lg-0" method="get">
+			 <div class="input-group">
+				<input type="text" class="form-control" name="search" id="input-search" placeholder="<?= UOJLocale::get('search')?>" />  
+				<div class="input-group-append">
+					<button type="submit" class="btn btn-search btn-outline-primary" id="submit-search"><span class="glyphicon glyphicon-search"></span></button>
 				</div>
+			</div>
+		</form>
+	</div><!--/.nav-collapse -->
 </div>
 <script type="text/javascript">
 	var zan_link = '';
+	$('#form-search-problem').submit(function(e) {
+		e.preventDefault();
+		
+		url = '<?= HTML::url('/problems') ?>';
+		qs = [];
+		$(['search']).each(function () {
+			if ($('#input-' + this).val()) {
+				qs.push(this + '=' + encodeURIComponent($('#input-' + this).val()));
+			}
+		});
+		if (qs.length > 0) {
+			url += '?' + qs.join('&');
+		}
+		location.href = url;
+	});
 </script>

web/app/views/page-footer.php

@@ -6,18 +6,20 @@
 			</div>
 			<?php if ($ShowPageFooter): ?>
 			<div class="uoj-footer">
-				<p>
+				<div class="btn-group dropright mb-3">
-					<a href="<?= HTML::url(UOJContext::requestURI(), array('params' => array('locale' => 'zh-cn'))) ?>"><img src="/pictures/lang/cn.png" alt="中文" /></a> 
+					<button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
-					<a href="<?= HTML::url(UOJContext::requestURI(), array('params' => array('locale' => 'en'))) ?>"><img src="/pictures/lang/gb.png" alt="English" /></a>
+						<span class="glyphicon glyphicon-globe"></span> <?= UOJLocale::get('_common_name') ?>
-				</p>
+					</button>
+					<div class="dropdown-menu">
+						<a class="dropdown-item" href="<?= HTML::url(UOJContext::requestURI(), array('params' => array('locale' => 'zh-cn'))) ?>">中文</a>
+						<a class="dropdown-item" href="<?= HTML::url(UOJContext::requestURI(), array('params' => array('locale' => 'en'))) ?>">English</a>
+					</div>
+				</div>
 				
-				<ul class="list-inline">
+				<ul class="list-inline"><li class="list-inline-item"><?= UOJConfig::$data['profile']['oj-name'] ?></li></ul>
-					<li><?= UOJConfig::$data['profile']['oj-name'] ?></li>
+				<?php if (UOJConfig::$data['profile']['ICP-license'] != '' && preg_match_all('/(\d+\.?\d+)/', UOJConfig::$data['profile']['ICP-license'], $ICP_number)): ?>
-					<?php if (UOJConfig::$data['profile']['ICP-license'] != ''): ?> | 
+				<p><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=<?= $ICP_number[0][0] ?>" style="text-decoration:none;"><img src="http://uoj.ac/pictures/beian.png" /> <?= UOJConfig::$data['profile']['ICP-license'] ?></a></p>
-					<li><a href="http://www.miitbeian.gov.cn" target="_blank"><?= UOJConfig::$data['profile']['ICP-license'] ?></a></li>
 				<?php endif ?>
-				</ul>
-				
 				<p><?= UOJLocale::get('server time') ?>: <?= UOJTime::$time_now_str ?> | <a href="https://github.com/UniversalOJ/UOJ-System" target="_blank"><?= UOJLocale::get('opensource project') ?></a></p>
 			</div>
 			<?php endif ?>

web/app/views/page-header.php

@@ -6,17 +6,17 @@
 	if ($new_user_msg_num == 0) {
 		$new_user_msg_num_html = '';
 	} else {
-		$new_user_msg_num_html = '<span class="badge">'.$new_user_msg_num.'</span>';
+		$new_user_msg_num_html = '<span class="badge badge-pill badge-secondary">'.$new_user_msg_num.'</span>';
 	}
 	if ($new_system_msg_num == 0) {
 		$new_system_msg_num_html = '';
 	} else {
-		$new_system_msg_num_html = '<span class="badge">'.$new_system_msg_num.'</span>';
+		$new_system_msg_num_html = '<span class="badge badge-pill badge-secondary">'.$new_system_msg_num.'</span>';
 	}
 	if ($new_msg_tot == 0) {
 		$new_msg_tot_html = '';
 	} else {
-		$new_msg_tot_html = '<sup><span class="badge">'.$new_msg_tot.'</span></sup>';
+		$new_msg_tot_html = '<sup><span class="badge badge-pill badge-secondary">'.$new_msg_tot.'</span></sup>';
 	}
 	
 	if (!isset($PageMainTitle)) {
@@ -42,9 +42,9 @@
 		<script type="text/javascript">uojHome = '<?= HTML::url('/') ?>'</script>
 
 		<!-- Bootstrap core CSS -->
-		<?= HTML::css_link('/css/bootstrap.min.css?v=2015.5.31') ?>
+		<?= HTML::css_link('/css/bootstrap.min.css?v=2019.5.31') ?>
-		<!-- Bootstrap theme -->
+		<!-- Bootstrap Glyphicons CSS-->
-		<?= HTML::css_link('/css/bootstrap-theme.min.css?v=2015.5.31') ?>
+		<?= HTML::css_link('/css/bootstrap-glyphicons.min.css?v=2019.5.31') ?>
 
 		<!-- Custom styles for this template -->
 		<?= HTML::css_link('/css/uoj-theme.css?v=2.3333') ?>
@@ -72,7 +72,8 @@
 		<?php endif ?>
 		
 		<!-- Include all compiled plugins (below), or include individual files as needed -->
-		<?= HTML::js_src('/js/bootstrap.min.js?v=2015.5.31') ?>
+		<?= HTML::js_src('/js/popper.min.js?v=2019.5.31') ?>
+		<?= HTML::js_src('/js/bootstrap.min.js?v=2019.5.31') ?>
 		
 		<!-- Color converter -->
 		<?= HTML::js_src('/js/color-converter.min.js') ?>
@@ -86,8 +87,8 @@
 		<!-- LAB -->
 		<?= HTML::js_src('/js/LAB.min.js') ?>
 
-		<!-- UOJ ico -->
+		<!-- favicon -->
-		<link rel="shortcut icon" href="<?= HTML::url('/pictures/UOJ.ico') ?>" />
+		<link rel="shortcut icon" href="<?= HTML::url('/images/favicon.ico') ?>" />
 		
 		<?php if (isset($REQUIRE_LIB['blog-editor'])): ?>
 		<!-- UOJ blog editor -->
@@ -226,29 +227,29 @@
 		<div class="container theme-showcase" role="main">
 			<?php if ($ShowPageHeader): ?>
 			<div>
-				<ul class="nav nav-pills pull-right" role="tablist">
+				<ul class="nav nav-pills float-right" role="tablist">
 				<?php if (Auth::check()): ?>
-					<li class="dropdown">
+					<li class="nav-item dropdown">
-						<a href="#" data-toggle="dropdown">
+						<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
 							<span class="uoj-username" data-rating="<?= Auth::user()['rating'] ?>" data-link="0"><?= Auth::id() ?></span> <?= $new_msg_tot_html ?>
 						</a>
 						<ul class="dropdown-menu" role="menu">
-							<li role="presentation"><a href="<?= HTML::url('/user/profile/' . Auth::id()) ?>"><?= UOJLocale::get('my profile') ?></a></li>
+							<li role="presentation"><a class="dropdown-item" href="<?= HTML::url('/user/profile/' . Auth::id()) ?>"><?= UOJLocale::get('my profile') ?></a></li>
-							<li role="presentation"><a href="<?= HTML::url('/user/msg') ?>"><?= UOJLocale::get('private message') ?>&nbsp;&nbsp;<?= $new_user_msg_num_html ?></a></li>
+							<li role="presentation"><a class="dropdown-item" href="<?= HTML::url('/user/msg') ?>"><?= UOJLocale::get('private message') ?>&nbsp;&nbsp;<?= $new_user_msg_num_html ?></a></li>
-							<li role="presentation"><a href="<?= HTML::url('/user/system-msg') ?>"><?= UOJLocale::get('system message') ?>&nbsp;&nbsp;<?= $new_system_msg_num_html ?></a></li>
+							<li role="presentation"><a class="dropdown-item" href="<?= HTML::url('/user/system-msg') ?>"><?= UOJLocale::get('system message') ?>&nbsp;&nbsp;<?= $new_system_msg_num_html ?></a></li>
 							<?php if (isSuperUser(Auth::user())): ?>
-								<li role="presentation"><a href="<?= HTML::url('/super-manage') ?>"><?= UOJLocale::get('system manage') ?></a></li>
+								<li role="presentation"><a class="dropdown-item" href="<?= HTML::url('/super-manage') ?>"><?= UOJLocale::get('system manage') ?></a></li>
 							<?php endif ?>
 						</ul>
 					</li>
-					<li role="presentation"><a href="<?= HTML::url('/logout?_token='.crsf_token()) ?>"><?= UOJLocale::get('logout') ?></a></li>
+					<li class="nav-item" role="presentation"><a class="nav-link" href="<?= HTML::url('/logout?_token='.crsf_token()) ?>"><?= UOJLocale::get('logout') ?></a></li>
 				<?php else: ?>
-					<li role="presentation"><a href="<?= HTML::url('/login') ?>"><?= UOJLocale::get('login') ?></a></li>
+					<li class="nav-item" role="presentation"><a class="nav-link" href="<?= HTML::url('/login') ?>"><?= UOJLocale::get('login') ?></a></li>
-					<li role="presentation"><a href="<?= HTML::url('/register') ?>"><?= UOJLocale::get('register') ?></a></li>
+					<li class="nav-item" role="presentation"><a class="nav-link" href="<?= HTML::url('/register') ?>"><?= UOJLocale::get('register') ?></a></li>
 				<?php endif ?>
 				</ul>
-				<h1 class="hidden-xs"><a href="<?= HTML::url('/') ?>"><img src="<?= HTML::url('/pictures/UOJ_small.png') ?>" alt="UOJ Logo" class="img-rounded" style="width:39px; height:39px;" /></a> <?= $PageMainTitle ?></h1>
+				<h1 class="d-none d-sm-block"><a href="<?= HTML::url('/') ?>"><img src="<?= HTML::url('/images/logo_small.png') ?>" alt="Logo" class="img-rounded" style="width:39px; height:39px;" /></a> <?= $PageMainTitle ?></h1>
-				<h1 class="visible-xs"><?= $PageMainTitleOnSmall ?></h1>
+				<h1 class="d-block d-sm-none"><?= $PageMainTitleOnSmall ?></h1>
 			</div>
 			
 			<?php uojIncludeView($PageNav) ?>

web/css/bootstrap-dialog.min.css

@@ -1 +1 @@
-.bootstrap-dialog .modal-header{border-top-left-radius:4px;border-top-right-radius:4px}.bootstrap-dialog .bootstrap-dialog-title{color:#fff;display:inline-block}.bootstrap-dialog.type-default .bootstrap-dialog-title{color:#333}.bootstrap-dialog.size-normal .bootstrap-dialog-title{font-size:16px}.bootstrap-dialog.size-large .bootstrap-dialog-title{font-size:24px}.bootstrap-dialog .bootstrap-dialog-close-button{float:right;filter:alpha(opacity=90);-moz-opacity:.9;-khtml-opacity:.9;opacity:.9}.bootstrap-dialog.size-normal .bootstrap-dialog-close-button{font-size:20px}.bootstrap-dialog.size-large .bootstrap-dialog-close-button{font-size:30px}.bootstrap-dialog .bootstrap-dialog-close-button:hover{cursor:pointer;filter:alpha(opacity=100);-moz-opacity:1;-khtml-opacity:1;opacity:1}.bootstrap-dialog.size-normal .bootstrap-dialog-message{font-size:14px}.bootstrap-dialog.size-large .bootstrap-dialog-message{font-size:18px}.bootstrap-dialog.type-default .modal-header{background-color:#fff}.bootstrap-dialog.type-info .modal-header{background-color:#5bc0de}.bootstrap-dialog.type-primary .modal-header{background-color:#428bca}.bootstrap-dialog.type-success .modal-header{background-color:#5cb85c}.bootstrap-dialog.type-warning .modal-header{background-color:#f0ad4e}.bootstrap-dialog.type-danger .modal-header{background-color:#d9534f}.bootstrap-dialog .bootstrap-dialog-button-icon{margin-right:3px}.icon-spin{display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0{-moz-transform:rotate(0)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0{-o-transform:rotate(0)}100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0{-ms-transform:rotate(0)}100%{-ms-transform:rotate(359deg)}}@keyframes spin{0{transform:rotate(0)}100%{transform:rotate(359deg)}}
+@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}to{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.bootstrap-dialog .modal-header{border-top-left-radius:4px;border-top-right-radius:4px}.bootstrap-dialog .bootstrap-dialog-title{color:#fff;display:inline-block;font-size:16px}.bootstrap-dialog .bootstrap-dialog-message{font-size:14px}.bootstrap-dialog .bootstrap-dialog-button-icon{margin-right:3px}.bootstrap-dialog .bootstrap-dialog-close-button{font-size:20px;float:right;opacity:.9;filter:alpha(opacity=90)}.bootstrap-dialog .bootstrap-dialog-close-button:hover{cursor:pointer;opacity:1;filter:alpha(opacity=100)}@media (min-width:1172px){.bootstrap-dialog .modal-xl{max-width:95%}}.bootstrap-dialog .modal-lg .bootstrap4-dialog-button:first-child{margin-top:8px}.bootstrap-dialog.type-default .modal-header{background-color:#fff}.bootstrap-dialog.type-default .bootstrap-dialog-title{color:#333}.bootstrap-dialog.type-info .modal-header{background-color:#17a2b8}.bootstrap-dialog.type-primary .modal-header{background-color:#007bff}.bootstrap-dialog.type-secondary .modal-header{background-color:#6c757d}.bootstrap-dialog.type-success .modal-header{background-color:#28a745}.bootstrap-dialog.type-warning .modal-header{background-color:#ffc107}.bootstrap-dialog.type-danger .modal-header{background-color:#dc3545}.bootstrap-dialog.type-light .modal-header{background-color:#f8f9fa}.bootstrap-dialog.type-dark .modal-header{background-color:#343a40}.bootstrap-dialog.size-large .bootstrap-dialog-title{font-size:24px}.bootstrap-dialog.size-large .bootstrap-dialog-close-button{font-size:30px}.bootstrap-dialog.size-large .bootstrap-dialog-message{font-size:18px}.bootstrap-dialog .icon-spin{display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}.bootstrap-dialog-header{display:contents}

web/css/uoj-theme.css

@@ -1,3 +1,7 @@
+html {
+	font-size: 14px
+}
+
 body {
 	padding-top: 10px;
 	padding-bottom: 10px;
@@ -19,6 +23,12 @@ body {
 	color: gray;
 }
 
+.page-header {
+	padding-bottom: 9px;
+	margin: 40px 0 20px;
+	border-bottom: 1px solid #eee;
+}
+
 a.header-a {
 	color: #333;
 }
@@ -52,6 +62,11 @@ pre {
 	-moz-tab-size: 4;
 	-o-tab-size: 4;
 	tab-size: 4;
+	padding: 9.5px;
+	margin: 0 0 10px;
+	background-color: #f5f5f5;
+	border: 1px solid #ccc;
+	border-radius: 4px;
 }
 
 .uoj-username {
@@ -65,107 +80,107 @@ pre {
 	font-weight: 700;
 }
 
-.panel-uoj-accepted {
+.card-uoj-accepted {
 	border-color:#2bff4f;
 }
-.panel-uoj-accepted>.panel-heading {
+.card-uoj-accepted>.card-header {
 	cursor:pointer;
 	color:#333;
 	background-color:#00ee00;
 	border-color:#2bff4f;
 }
-.panel-uoj-accepted>.panel-heading:hover {
+.card-uoj-accepted>.card-header:hover {
 	background-color:#2bff4f;
 }
-.panel-uoj-accepted>.panel-heading+.panel-collapse>.panel-body {
+.card-uoj-accepted>.card-header+.card-collapse>.card-body {
 	border-top-color:#00ee00;
 }
-.panel-uoj-accepted>.panel-heading .badge {
+.card-uoj-accepted>.card-header .badge {
 	color:#00ee00;
 	background-color:#333;
 }
-.panel-uoj-accepted>.panel-heading:hover .badge {
+.card-uoj-accepted>.card-header:hover .badge {
 	color:#2bff4f;
 }
-.panel-uoj-accepted>.panel-footer+.panel-collapse>.panel-body {
+.card-uoj-accepted>.card-footer+.card-collapse>.card-body {
 	border-bottom-color:#2bff4f;
 }
 
-.panel-uoj-wrong {
+.card-uoj-wrong {
 	border-color:#ff0000;
 }
-.panel-uoj-wrong>.panel-heading {
+.card-uoj-wrong>.card-header {
 	cursor:pointer;
 	color:#333;
 	background-color:#dd0000;
 	border-color:#ff0000;
 }
-.panel-uoj-wrong>.panel-heading:hover {
+.card-uoj-wrong>.card-header:hover {
 	background-color:#ff0000;
 }
-.panel-uoj-wrong>.panel-heading+.panel-collapse>.panel-body {
+.card-uoj-wrong>.card-header+.card-collapse>.card-body {
 	border-top-color:#dd0000;
 }
-.panel-uoj-wrong>.panel-heading .badge {
+.card-uoj-wrong>.card-header .badge {
 	color:#dd0000;
 	background-color:#333;
 }
-.panel-uoj-wrong>.panel-heading:hover .badge {
+.card-uoj-wrong>.card-header:hover .badge {
 	color:#ff0000;
 }
-.panel-uoj-wrong>.panel-footer+.panel-collapse>.panel-body {
+.card-uoj-wrong>.card-footer+.card-collapse>.card-body {
 	border-bottom-color:#ff0000;
 }
 
-.panel-uoj-acceptable-answer {
+.card-uoj-acceptable-answer {
 	border-color:#ff7700;
 }
-.panel-uoj-acceptable-answer>.panel-heading {
+.card-uoj-acceptable-answer>.card-header {
 	cursor:pointer;
 	color:#333;
 	background-color:#ee5500;
 	border-color:#ff0000;
 }
-.panel-uoj-acceptable-answer>.panel-heading:hover {
+.card-uoj-acceptable-answer>.card-header:hover {
 	background-color:#ff7700;
 }
-.panel-uoj-acceptable-answer>.panel-heading+.panel-collapse>.panel-body {
+.card-uoj-acceptable-answer>.card-header+.card-collapse>.card-body {
 	border-top-color:#ee5500;
 }
-.panel-uoj-acceptable-answer>.panel-heading .badge {
+.card-uoj-acceptable-answer>.card-header .badge {
 	color:#ff7700;
 	background-color:#333;
 }
-.panel-uoj-acceptable-answer>.panel-heading:hover .badge {
+.card-uoj-acceptable-answer>.card-header:hover .badge {
 	color:#ff7700;
 }
-.panel-uoj-acceptable-answer>.panel-footer+.panel-collapse>.panel-body {
+.card-uoj-acceptable-answer>.card-footer+.card-collapse>.card-body {
 	border-bottom-color:#ff7700;
 }
 
-.panel-uoj-tle {
+.card-uoj-tle {
 	border-color:#ffff2b;
 }
-.panel-uoj-tle>.panel-heading {
+.card-uoj-tle>.card-header {
 	cursor:pointer;
 	color:#333;
 	background-color:#e6e61e;
 	border-color:#ffff2b;
 }
-.panel-uoj-tle>.panel-heading:hover {
+.card-uoj-tle>.card-header:hover {
 	background-color:#ffff2b;
 }
-.panel-uoj-tle>.panel-heading+.panel-collapse>.panel-body {
+.card-uoj-tle>.card-header+.card-collapse>.card-body {
 	border-top-color:#ffff2b;
 }
-.panel-uoj-tle>.panel-heading .badge {
+.card-uoj-tle>.card-header .badge {
 	color:#e6e61e;
 	background-color:#333;
 }
-.panel-uoj-tle>.panel-heading:hover .badge {
+.card-uoj-tle>.card-header:hover .badge {
 	color:#ffff2b;
 }
-.panel-uoj-tle>.panel-footer+.panel-collapse>.panel-body {
+.card-uoj-tle>.card-footer+.card-collapse>.card-body {
 	border-bottom-color:#ffff2b;
 }
 

web/js/blog-editor/blog-editor.js

@@ -18,9 +18,9 @@ function blog_editor_init(name, editor_config) {
 	
 	// init buttons
 	var save_btn = $('<button type="button" class="btn btn-sm"></button>');
-	var preview_btn = $('<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-eye-open"></span></button>');
+	var preview_btn = $('<button type="button" class="btn btn-secondary btn-sm"><span class="glyphicon glyphicon-eye-open"></span></button>');
-	var bold_btn = $('<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-bold"></span></button>');
+	var bold_btn = $('<button type="button" class="btn btn-secondary btn-sm ml-2"><span class="glyphicon glyphicon-bold"></span></button>');
-	var italic_btn = $('<button type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-italic"></span></button>');
+	var italic_btn = $('<button type="button" class="btn btn-secondary btn-sm"><span class="glyphicon glyphicon-italic"></span></button>');
 	
 	save_btn.tooltip({ container: 'body', title: '保存 (Ctrl-S)' });
 	preview_btn.tooltip({ container: 'body', title: '预览 (Ctrl-D)' 	});

web/js/uoj.js

@@ -546,15 +546,15 @@ $.fn.long_table = function(data, cur_page, header_row, get_row_str, config) {
 		
 		var get_page_li = function(p, h) {
 			if (p == -1) {
-				return $('<li></li>').addClass('disabled').append($('<a></a>').append(h));
+				return $('<li class="page-item"></li>').addClass('disabled').append($('<a class="page-link"></a>').append(h));
 			}
 			
-			var li = $('<li></li>');
+			var li = $('<li class="page-item"></li>');
 			if (p == cur_page) {
 				li.addClass('active');
 			}
 			li.append(
-				$('<a></a>').attr('href', '#' + table_div.id).append(h).click(function(e) {
+				$('<a class="page-link"></a>').attr('href', '#' + table_div.id).append(h).click(function(e) {
 					if (config.prevent_focus_on_click) {
 						e.preventDefault();
 					}
@@ -565,7 +565,7 @@ $.fn.long_table = function(data, cur_page, header_row, get_row_str, config) {
 		};
 		
 		if (n_pages > 1) {
-			var pagination = $('<ul class="pagination top-buffer-no bot-buffer-sm"></ul>');
+			var pagination = $('<ul class="pagination top-buffer-no bot-buffer-sm justify-content-center"></ul>');
 			if (cur_page > 1) {
 				pagination.append(get_page_li(cur_page - 1, '<span class="glyphicon glyphicon glyphicon-backward"></span>'));
 			} else {
@@ -701,7 +701,7 @@ $.fn.source_code_form_group = function(name, text, langs_options_html) {
 				.append(input_file)
 				.append($('<div class="input-group"/>')
 					.append(input_file_path)
-					.append($('<span class="input-group-btn"/>')
+					.append($('<span class="input-group-append"/>')
 						.append($('<button type="button" class="btn btn-primary">'+'<span class="glyphicon glyphicon-folder-open"></span> '+uojLocale('editor::browse')+'</button>')
 							.css('width', '100px')
 							.click(function() {
@@ -811,12 +811,13 @@ $.fn.source_code_form_group = function(name, text, langs_options_html) {
 		});
 
 		$(this)
+			.append($('<div class="row col-sm-12"/>')
 			.append($('<label class="col-sm-2 control-label"><div class="text-left">' + text + '</div></label>'))
 			.append($('<label class="col-sm-1 control-label" for="' + input_language_name + '">'+uojLocale('editor::language')+'</label>'))
 			.append($('<div class="col-sm-2"/>')
 				.append(input_language)
 			)
-			.append($('<div class="col-sm-offset-3 col-sm-2 radio"/>')
+			.append($('<div class="col-sm-2 offset-sm-3 radio"/>')
 				.append($('<label/>')
 					.append(input_upload_type_editor)
 					.append(' '+uojLocale('editor::upload by editor'))
@@ -827,7 +828,7 @@ $.fn.source_code_form_group = function(name, text, langs_options_html) {
 					.append(input_upload_type_file)
 					.append(' '+uojLocale('editor::upload from local'))
 				)
-			)
+			))
 			.append(div_help_language)
 			.append(div_editor)
 			.append(div_file);
@@ -880,7 +881,7 @@ $.fn.text_file_form_group = function(name, text) {
 				.append(input_file)
 				.append($('<div class="input-group"/>')
 					.append(input_file_path)
-					.append($('<span class="input-group-btn"/>')
+					.append($('<div class="input-group-append"/>')
 						.append($('<button type="button" class="btn btn-primary">'+'<span class="glyphicon glyphicon-folder-open"></span> '+uojLocale('editor::browse')+'</button>')
 							.css('width', '100px')
 							.click(function() {
@@ -968,9 +969,10 @@ $.fn.text_file_form_group = function(name, text) {
 		});
 
 		$(this)
+			.append($('<div class="row"/>')
 			.append($('<label class="col-sm-2 control-label"><div class="text-left">' + text + '</div></label>'))
 			.append($('<div class="top-buffer-sm" />'))
-			.append($('<div class="col-sm-offset-6 col-sm-2 radio"/>')
+			.append($('<div class="col-sm-2 offset-sm-6 radio"/>')
 				.append($('<label/>')
 					.append(input_upload_type_editor)
 					.append(' '+uojLocale('editor::upload by editor'))
@@ -981,7 +983,7 @@ $.fn.text_file_form_group = function(name, text) {
 					.append(input_upload_type_file)
 					.append(' '+uojLocale('editor::upload from local'))
 				)
-			)
+			))
 			.append(div_editor)
 			.append(div_file);