bootstrap 怎么制作表格
bootstrap 制作表格帶有圖文形式。主要知識點有以下幾點
- 第一點肯定是寫出一個普通的表格，這一點可以去菜鳥復制它的案例。添加tr和td就可以了
- 在表格放入圖片加上class="img-circle" 變成圓形，自己寫個css設置圖片統一大小。圖片高度50px,這時要設置行高也為50px。要不然文字不能垂直對齊，由於優先級問題，我們選擇器不能直接選着tr標簽，要不然沒有作用，可以在父標簽創建一個id，用后代選擇器去選擇。
- 操作下面的修改和刪除按鈕可以參照菜鳥的案例，要記得把bootstarp的font文件夾引用到自己的項目中。筆和垃圾桶不是圖標是字體，要明白這一點，只需要在空的span加上class名稱就可以了，他們都是字體圖標，每個圖標下都有相對應的class類名，我們直接復制類名就，可以了。
- 修改按鈕彈出框在bootstarp有個叫模態框的可以把案例復制過來，修改一下h4的標題，和在modal-body的div添加我們的內容就可以了。
- 彈出框的表單可以復制菜鳥的表單案例，案例的輸入框col-sm-10占用10列，我們可以修改成col-sm-9占用9列，這樣輸入框就不會很寬了。
- 我給圖片加了個點擊事件，當點擊某張圖片時，彈出框顯示放大的圖片。這里彈出框仍然可以用模態框，值不夠特別注意的是當頁面存在兩個以上模態框時，要在每個模態框加個div標簽，div也不需要寫什么屬性。然后就是修改模態框的id就是了這里id改成id="myModal2"。自己寫的jQuery也是比較簡單的，獲取當前圖片的src,然后賦值給模態框的圖片的src。
復制代碼時自己項目要有自己的bootstarp.css和font文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <style type="text/css"> #a td{ line-height: 50px; font-size: 20px; } img{ height: 50px; } #a tr:hover{ background:#D4E3E5; } </style> </head> <body> <div class="container" > <table class="table table-hover table-bordered"> <caption>邊框表格布局</caption> <thead> <tr> <th>編號</th> <th>頭像</th> <th>昵稱</th> <th>年齡</th> <th>性別</th> <th>地址</th> <th>時間</th> <th>操作</th> </tr> </thead> <tbody id="a"> <tr> <td>01</td> <td> <img src="images/tou01.jpg" class="img-circle" data-toggle="modal" data-target="#myModal2"> </td> <td>Tanmay</td> <td>Bangalore</td> <td>560001</td> <td>Bangalore</td> <td>560001</td> <td> <button type="button" class="btn btn-default btn-xm" data-toggle="modal" data-target="#myModal"> <span class="glyphicon glyphicon-pencil"></span> 修改 </button> <button type="button" class="btn btn-default btn-xm"> <span class="glyphicon glyphicon-trash"></span> 刪除 </button> </td> </tr> <tr> <td>02</td> <td> <img src="images/tou02.jpg" class="img-circle" data-toggle="modal" data-target="#myModal2"/> </td> <td>Sachin</td> <td>Mumbai</td> <td>400003</td> <td>Bangalore</td> <td>560001</td> <td> <button type="button" class="btn btn-default btn-xm" data-toggle="modal" data-target="#myModal"> <span class="glyphicon glyphicon-pencil"></span> 修改 </button> <button type="button" class="btn btn-default btn-xm"> <span class="glyphicon glyphicon-trash"></span> 刪除 </button> </td> </tr> <tr> <td>03</td> <td> <img src="images/tou03.jpg" class="img-circle" data-toggle="modal" data-target="#myModal2"/> </td> <td>Uma</td> <td>Pune</td> <td>411027</td> <td>Bangalore</td> <td>Bangalore</td> <td> <button type="button" class="btn btn-default btn-xm" data-toggle="modal" data-target="#myModal"> <span class="glyphicon glyphicon-pencil"></span> 修改 </button> <button type="button" class="btn btn-default btn-xm"> <span class="glyphicon glyphicon-trash"></span> 刪除 </button> </td> </tr> </tbody> </table> <!--修改彈出框--> <div id=""> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 修改信息 </h4> </div> <div class="modal-body"> <form class="form-horizontal" role="form"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">昵稱</label> <div class="col-sm-9"> <input type="text" class="form-control" id="firstname" placeholder="請輸入名字"> </div> </div> <div class="form-group"> <label for="old" class="col-sm-2 control-label">年齡</label> <div class="col-sm-9"> <input type="number" class="form-control" id="old" placeholder="請輸入年齡"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">性別</label> <div class="col-sm-9"> <label class="radio-inline"> <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 男 </label> <label class="radio-inline"> <input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> 女 </label> </div> </div> <div class="form-group"> <label for="city" class="col-sm-2 control-label">所在城市</label> <div class="col-sm-9"> <select class="form-control"> <option>信州區</option> <option>高新區</option> <option>廣豐區</option> <option>婺源縣</option> <option>鉛山縣</option> </select> </div> </div> <div class="form-group"> <label for="timer" class="col-sm-2 control-label">時間</label> <div class="col-sm-9"> <input type="date" class="form-control" id="timer" placeholder="請輸入時間"> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉 </button> <button type="button" class="btn btn-primary"> 確認更改 </button> </div> </div> </div> </div> <!--圖片--> <div id=""> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h5 class="modal-title" id="myModalLabel">頭像圖片</h5> </div> <div class="modal-body" style="height: 300px;text-align: center;"> <img src="images/tou01.jpg" style="height: 250px;" id="touimg"/> </div> <!--<div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">提交更改</button> </div>--> </div> </div> </div> </div> </div> <script type="text/javascript"> $("img").click(function(){ var at=$(this).attr("src") $("#touimg").attr("src",at) }) </script> </body> </html>