【网格布局】 bootstrap采用网格布局，<div class="row"> <div class="span12">row代表一行，span代表一行中的内容。在一行中最多可分为12个单元，最小单元用span1标记，最大单元用span12标记。举个例子<div class="span6">占用该行的6个单元，占用该行的一半。

【table】在bootstrap中可选择表格的风格， <table class="table table-hover">本例选择了hover形式， 当鼠标移动到某一行时，该行的背景会变得灰色一些。 这种简单的动态效果给用户更好的体验。

【thead tbody tr  td】thead为表头标签，tbody为表格内容标签，tr为表格行标签，td为表格中的具体单元标签。

4.按钮热身     【设计思路】

在表格每行最后一个td标签中加入一个Button，点击该Button可以翻转stauts。例如点击Button，同行的Status会从ON变为OFF，再次点击从ON变为OFF。为了实现这种对应关系的操作，在tr标签中加入一个设备编号取名为dev_id。

【HTML】 <table class="table table-hover"> <thead> <tr> <th>编号 ID</th> <th>描述 DESC</th> <th>状态 STATUS</th> <th>动作 ACTION</th> </tr> </thead> <tbody> <tr dev_id="1"> <td>1</td> <td>RPi.PCF8574.IO0</td> <td >off</td> <td> <button type="button" class="btn btn-primary btn-xs">Toggle</button> </td> </tr> <tr dev_id="2"> <td>2</td> <td>RPi.PCF8574.IO1</td> <td>off</td> <td> <button type="button" class="btn btn-primary btn-xs">Toggle</button> </td> </tr> </tbody> </table>

图3 加入按钮后的效果

    【几点说明】

【tr编号】 <tr dev_id="1"> 给每一行加入一个编号，1、2、3以此类推逐个排列。

【Button】<button type="button" class="btn btn-primary btn-xs"> bootstrap提供了多种标签风格，在这里选择最小号的Button——btn-xs 。

5.按钮互动 【设计思路】

要实现按钮互动就需要写点javascript代码，幸好Javascript不算复杂非常容易学习。编程之前需要理解一下HTML节点的概念。在 HTML中所有的元素都是节点 ，如此之多的节点组成了“树”，节点有父节点、有子节点也会有邻居节点。例如本例中， tr标签有4个td子节点（td子节点的编号从0开始），在最后一个td节点中又有一个button节点 。

【tr dev_id="1"】——> 【td(id)】【td(desc)】【td(status)】【td(action)】

【td(action)】——> 【button】

那么如果点击button想要获得表格中该行dev_id的信息，那么就需要找button的“爷爷”索要。

【javascript】 <script> $(document).ready(function(){ $('.btn').on("click",function(){ // 获得 tr元素 var trobj = $(this).parent().parent(); // tr元素中包含 dev_id属性 var dev_id = trobj.attr('dev_id'); console.log( dev_id ); // 访问该tr元素的所有子td元素 var tdobj = $(trobj).children("td"); var status_obj = $(tdobj).eq(2); var status_str = status_obj.text(); console.log(status_str); if( status_str == "on"){ status_obj.text("off"); sendLedControl( dev_id , "off" ); }else{ status_obj.text("on"); sendLedControl( dev_id , "on" ); } }); }); </script> 【控制台查看效果 】    

web浏览器中的控制台有点和串口调试相似， 在chrome浏览器中 工具->开发者工具 。

图4 控制台调试

    【若干说明】

【$(document).ready()】当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。

【$('.btn').on("click",function())】按钮点击事件响应，$('.btn')代表所有所有class为btn的按钮——表格中最后一列按钮。

【this】在按钮点击事件中，this为button标签。如果使用console.log打印的话，输出内容为<button type="button" class="btn btn-primary btn-xs">Toggle</button>。但是$(this)则代表一个文件对象模型，$(this) 
是一个完整的对象包含很多属性和方法。

【选择tr】var trobj = $(this).parent().parent(); 试图寻找button的爷爷

【获得dev_id】var dev_id = trobj.attr('dev_id'); dev_id在td标签中，使用attr方法便可获得目标属性。