《Bootstrap Web 设计开发与实战》杨旺功著中的错误

最新推荐文章于 2022-08-18 18:59:37 发布

shihao9895

最新推荐文章于 2022-08-18 18:59:37 发布

阅读量188

点赞数

分类专栏： web bootstrap 文章标签： bootstrap bootstrap web开发与设计实战错误

本文链接：https://blog.csdn.net/shihao9895/article/details/102873619

版权

web 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

bootstrap

1 篇文章 0 订阅

订阅专栏

本文列举了一本2017年版《Bootstrap Web设计开发与实战》中的四个错误，涉及内联式列表、按钮大小样式、标签与徽章以及进度条的代码更新。书中代码因Bootstrap版本升级而与最新实践不符，如将.inline更正为.list-inline，btn-mini等替换为.btn-xs等。

摘要由CSDN通过智能技术生成

我拿到的这本书是2017年7月第一次版、第一次印刷的。现在是2019年，因为Bootstrap更新了，有错误是难免的。

第一处：

在本书44页的代码4-13作者给出了一个应用内联式列表的设计。

作者使用inline类实现了内联式列表样式，但是，我实际调试的时候发现这是行不通的。应该是.list-inline才会实现内联式列表样式。代码如下：

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../bootstrap-3.3.7-dist/css/bootstrap.css">
	<style type="text/css">
		.bs-docs-example{
			border: 1px solid black;
			margin: 10px;
			padding: 0px;
			font-size: 20px;
		}
	</style>
</head>
<div class="bs-docs-example">
	<ul class="list-inline">
		<li>tom</li>
		<li>jack</li>
		<li>mary</li>
		<li>football</li>
	</ul>
</div>
</body>
</html>

运行结果：

第二处：

在本书第58页（代码4-26），作者给出了按钮大小样式的代码：

在实际调式中，我发现btn-mini btn-small btn-large这些样式已经过时了，分别更新成了 btn-xs btn-sm btn-lg。正确的代码如下：

<div class="bs-docs-example">
	<table class="table table-hover table-striped">
		<thead>
			<tr>
				<th>按钮外观</th>
				<th>样式</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><button type="button" class="btn btn-xs">mini button</button></td>
				<td><code>btn btn-xs</code></td>
			</tr>
			<tr>
				<td><button type="button" class="btn btn-sm">small button</button></td>
				<td><code>btn btn-sm</code></td>
			</tr>
			<tr>
				<td><button type="button" class="btn btn-primary">default button</button></td>
				<td><code>btn btn-default</code></td>
			</tr>
			<tr>
				<td><button type="button" class="btn btn-lg">large button</button></td>
				<td><code>btn btn-lg</code></td>
			</tr>
			<tr>
				<td><button type="button" class="btn btn-block">Block button</button></td>
				<td><code>btn btn-block</code></td>
			</tr>
			<tr>
				<td><button type="button" class="btn disabled">禁用</button></td>
				<td><code>btn disabled</code></td>
			</tr>
		</tbody>
	</table>
</div>

运行结果：

第三处：

在本书88页（代码5-22）中，作者给出了Bootstrap标签与徽章的代码：

在调试中，我发现了现在的Bootstrap的默认、重要标签和重要徽章更新了，发色标签和发色徽章不存在。正确的代码如下：

<div class="bs-docs-example">
	<span>标签：</span>
	<span class="label label-default">默认样式 label label-default</span>
	<span class="label label-primary">重要的初级的primary</span>
	<span class="label label-success">成功 label label-success</span>
	<span class="label label-warning">警告 label label-warning</span>
	<span class="label label-info">信息 label label-info</span>
	<span class="label label-danger">危险 label label-danger</span>
	<br><br><br>
	<span>徽章：</span>
	<span class="badge badge-default">默认样式 badge badge-default</span>
	<span class="badge badge-primary">primary</span>
	<span class="badge badge-warning">warning</span>
	<span class="badge badge-success">success</span>
	<span class="badge badge-info">info</span>
	<span class="badge badge-danger">danger</span>
</div>

运行结果：

第四处:

在本书89页（代码5-23）中，作者给出了Bootstrap进度条的代码。bar类更新到了pregress-bar类。

正确的代码如下：

<div class="progress">
  	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  	</div>
</div>
<div class="progress">
  	<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-striped progress-bar-warning" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width:5%;min-width:5%;">
		5% warning
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-striped progress-bar-info" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width:15%;min-width:5%;">
		15% info
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-striped progress-bar-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width:25%;min-width:5%;">
		25% success
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-striped progress-bar-danger" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width:35%;min-width:5%;">
		35% danger
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width:45%;min-width:5%;">
		45% active动画
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-success" style="width:35%">35%</div>
	<div class="progress-bar progress-bar-striped progress-bar-danger" style="width:20%;">20%</div>
	<div class="progress-bar progress-bar-striped progress-bar-info" style="width:10%">10%</div>
</div>

运行结果：