Bookstrap：美化頁面：

Bootstrap是Twitter推出的一個開源的用于前端開發(fā)的工具包。

它由Twitter的設計師Mark Otto和Jacob Thornton合作開發(fā)，是一個CSS/HTML框架。

Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，它即是由動態(tài)CSS語言Less寫成。

Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。

只需要引用一些定義好的類，也就是class名字，就可以創(chuàng)建出已經(jīng)有非常漂亮的樣式的網(wǎng)頁，而且支持自適應，是一個很不錯的框架。

調(diào)用文件：

<link href="dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src="jquery-1.11.2.min.js"></script> <script src="dist/js/bootstrap.min.js"></script>

如果要引用其中一個包含jquery的多個JS文件，那么jquery文件一定要放在第一位

接下來是表格的美化

條紋表格：

<table class="table table-striped"> <thead> <tr>  <td>代號</td>  <td>名稱</td>  <td>操作</td> </tr> </thead> <tbody id="td"> </tbody></table>

加上詳情按鈕，并改變兩個按鈕樣式，美化；

$.ajax({   url: "jiazai.php",//  顯示所有的數(shù)據(jù)不用寫data   dataType: "TEXT",   success: function (data) {    var str = "";    var hang = data.split("|");    //split拆分字符串    for (var i = 0; i < hang.length; i++) {     //通過循環(huán)取到每一行;拆分出列；     var lie = hang[i].split("-");     str = str +      "<tr><td>"      + lie[0] +      "</td><td>"      + lie[1] +      "</td><td>" +      "<button type='button' class='btn btn-info sc' ids='"+lie[0]+"'>點擊刪除</button><button type='button' class='btn btn-primary xq' ids='"+lie[0]+"'>查看詳情</button>" +      //ids里面存上主鍵值      "</td></tr>";    }    $("#td").html(str);    //找到td把html代碼扔進去    addshanchu();    addxiangqing();   }  });

查看詳情的點擊事件：

 //給查看詳情加事件 function addxiangqing() {  $(".xq").click(function(){   $('#myModal').modal('show')   //打開模態(tài)框   var ids = $(this).attr("ids");   $.ajax({    url:"xiangqing.php",    data:{ids:ids},    dataType:"TEXT",    type:"POST",     success:function(data){     //拆分      var lie = data.split("^");      var str = "<div>代號:"+lie[0]+"</div><div>名稱:"+lie[1]"</div>";      //造字符串      var str = "<div>代號："+lie[0]+"</div><div>名稱："+lie[1]+"</div>";      $("#nr").html(str);   }   });   //在模態(tài)框里面要顯示的內(nèi)容  }) }