使用UI框架提升取证网页报告的专业外观
我想写一篇关于最近多次讨论的话题——通过使用UI框架（通常是免费的，但在严肃场合也可能有付费选项）来改进脚本生成的网页报告的外观。和许多检查员一样，我对网页开发有所了解，但多年来并未紧跟趋势。直到最近，我才终于投入时间学习使用Bootstrap进行构建，并且对此非常满意。
虽然我仍然更喜欢在Notepad++中手动编写大部分HTML，但我发现了一个非常容易学习的东西——UI框架。只需在项目中添加几个这样的资源——今天我们将重点介绍Bootstrap和FontAwesome——你就可以用极少的努力让你的报告脱颖而出。用户真的很欣赏你花时间加入图标等元素，而得益于FontAwesome，这变得非常容易实现。
导入Bootstrap + 依赖项
首先，你需要引入Bootstrap。如果你的报告可以依赖互联网，你可以使用CDN（内容分发网络）。为简单起见，我们今天将采用这种方法。如果你希望它在离线状态下工作，你需要下载框架包括其依赖项。
在你的网页的<head>部分，添加以下内容：
1
2
3
|
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" integrity="sha256-+N4/V/SbAFiW1MPBCXnfnP9QSN3+Keu+NlB+0ev/YKQ=" crossorigin="anonymous" />
|
然后，在闭合的</body>标签之前，添加你的脚本——注意我们也添加了jQuery和Popper（依赖项）。
1
2
3
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha256-WqU1JavFxSAMcLP2WIOI+GB2zWmShMI82mTpLDcqFUg=" crossorigin="anonymous"></script>
|
就这样！现在你已经准备好使用Bootstrap/FontAwesome了。
什么是FontAwesome以及如何使用它？
FontAwesome是一个库，为网页开发者提供了大约1500个免费图标，供他们在项目中使用。
开始使用FontAwesome最简单的方法是访问他们的网站。你可以在这里搜索图标库，任何没有变灰的图标都可以免费使用。在示例中，假设我决定使用“tags”图标。要在我的网页应用中使用它，我只需编写以下代码：
1
|
<i class="fa fa-tags" aria-hidden="true"></i>
|
所以我们的项目现在看起来像这样：
（图片：显示带有“Well hello, FontAwesome!”文本和标签图标的基本HTML页面）
趁此机会，我们来谈谈Bootstrap。在我的代码中，你可以看到我为包裹的<div>元素编写了一个自定义样式“margin: 12px;”，以避免它看起来像这样：
（图片：显示没有边距、布局不佳的相同文本和图标）
但是否有更好的方法呢？使用Bootstrap，我们可以使用一组预定义的类来描述我们希望布局如何工作，而不是定义一个手动样式——这可能在不同设备上看起来不一致。我可以使用以下HTML实现：
1
2
3
|
<div class="mx-2 my-2">
Well hello, FontAwesome! <i class="fa fa-tags" aria-hidden="true"></i>
</div>
|
那么这里发生了什么？我们利用了Bootstrap的间距工具，它们为我们进行了缩写。在这种情况下，有两个：“mx-2”，意思是X轴（左右边）和Y轴（上下边）的边距都设置为2。我可以根据需要从0到5调整这个值来增加或减少边距。你也可以选择特定的边距，如“ml-3”（左边距，3）等等。要操作内边距，将M换成P——如“px-2”。
再回到FontAwesome一会儿——这些图标的一个非常棒的地方是它们能响应CSS的变化。所以你可以轻松地将图标更改为你需要的任何颜色（或大小）。这就是FontAwesome中“字体”部分的由来。如果我按如下方式更改我的标签图标：
1
|
<i class="fa fa-tags" style='color: orange;font-size: 32px;' aria-hidden="true"></i>
|
你可以看到结果是一个更大、橙色的图标，看起来仍然很棒！
（图片：显示带有更大橙色标签图标的文本）
更多关于Bootstrap的内容
好了，让我们更深入地了解Bootstrap。让我们为我们的页面试试NavBar控件。我直接使用了Bootstrap网站上的示例，并将其放入HTML中。这是我的代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Fancy Report</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-home" aria-hidden="true"></i> Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="mx-2 my-2">
Well hello, FontAwesome! <i class="fa fa-tags" style='color: orange;font-size: 32px;' aria-hidden="true"></i>
</div>
|
结果：
（图片：显示带有导航栏、搜索框和带图标内容的网页）
看起来很不错，对吧？我还想指出，这个NavBar是100%响应式的，开箱即用，因此在桌面和移动设备上都会看起来很好，而你几乎不需要付出任何努力。
在起草报告想法时，我最喜欢做的事情之一是查看使用你选择的框架制作的一些UI示例。Bootstrap有这些示例，或者你也可以浏览他们优秀的组件库文档。
我要展示的最后一个示例包括几个不同的组件：带有标题的卡片、按钮以及更多来自FontAwesome的内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="card mt-3">
<div class="card-header h4">
<i class="fa fa-tags" aria-hidden="true"></i> Report Contents
</div>
<div class="card-body">
<p class="card-text">Well hello, FontAwesome and Bootstrap! </p>
<a href="#" class="btn btn-primary"><i class="fa fa-search" aria-hidden="true"></i> View Details</a>
</div>
</div>
</div>
</div>
</div>
|
结果：
（图片：显示一个带有图标标题、文本和按钮的卡片组件）
如需进一步阅读，我强烈建议你进一步查看在线的Bootstrap文档，看看许多可能的优秀示例。