3.2.7 加入bootstrap樣式 · ThinkPHP5.0入門實例教程

# 加入樣式讓我們的表格更好看一些吧，修改V層html代碼如下： > http://v3.bootcss.com/css/#tables 每天瀏覽一遍bootstrap的效果，今天你做了嗎？ ~~~ <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>教師管理</title> <link rel="stylesheet" type="text/css" href="/thinkphp5/public/static/bootstrap-3.3.5-dist/css/bootstrap.min.css"> </head> <body class="container"> <div class="row"> <div class="col-md-12"> <table class="table table-hover table-bordered"> <tr class="info"> <th>序號</th> <th>姓名</th> <th>性別</th> <th>郵箱</th> <th>用戶名</th> </tr> {volist name="teachers" id="teacher" key="key"} <tr> <td>{$key}</td> <td>{$teacher->getData('name')}</td> <td>{eq name='teacher->getData("sex")' value='0'}男{else /}女{/eq}</td> <td>{$teacher->getData('email')}</td> <td>{$teacher->getData('username')}</td> </tr> {/volist} </table> </div> </div> </body> </html> ~~~ 沒錯，沒什么技術含量，我只是照著抄了一個class的類名而已。代碼實現效果如下： ![](https://box.kancloud.cn/2016-06-13_575e70e5c77f5.png) ~~~ git checkout -f step3.2.7 ~~~ 執行上述命令后，上述示例代碼信息如下： ![](https://box.kancloud.cn/240267a554bffd3f5e6b0df8448ff164_1234x664.png) 是的，還不錯。主要是，我們僅僅引用了一個CSS文件，加了幾個class屬性而已。 > 沒錯，是這樣。table中的class屬性可以有很多個，是不是以前一直以為只能有一個呢？如果是這樣的話，那么還是太怕犯錯了。我們喜歡犯錯的隊員，但不喜歡在同一個地方犯多次錯誤的成員，所以大膽的嘗試吧！