我拿到的这本书是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>

运行结果：

。。。