书籍陷阱：美化页面：

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。

由推特设计师马克奥托和雅各布桑顿开发，是一个CSS/HTML框架。

Bootstrap提供了优雅的HTML和CSS规范，它们是由动态CSS语言Less编写的。

Bootstrap自推出以来一直很受欢迎，并且一直是GitHub上很受欢迎的开源项目，包括NASA的《MSNBC突发新闻》。

你只需要引用一些定义好的类，也就是类名，就可以创建一个风格非常漂亮的网页。而且它支持自适应，是一个非常好的框架。

呼叫文件：

link href=' dist/CSS/bootstrap . min . CSS ' rel=' external nofollow ' rel=' external nofollow ' rel='样式表' type=' text/CSS '/Script src=' http : jquery-1 . 11 . 2 . min . JS '/Script Script src=' http : dist/js/bootstrap . min . js '/Script如果要引用包含jquery的几个js文件之一，必须首先放置jquery文件。

接下来是美化形式

条纹表：

table class=' table table-stripped ' Thad TR TD code/TD TD TD name/TD TD TD operation/TD/TR/Thad t body ID=' TD '/t body/table，加上细节按钮，改变两个按钮的样式进行美化；

$ .ajax ({URL :' jiazai.php '，//显示所有数据而不写入datadatatype : ' text '，success :函数(data){ var str=' '；var hang=data . split(' | ')；//为(var i=0)拆分拆分字符串；我挂。长度；I) {//逐行循环取；分栏；var lie=hang[i]。拆分('-')；str=str ' trtd ' lie[0]'/tdtd ' lie[1]'/tdtd ' '按钮类型=' Button ' class=' btnbtn-infosc ' id=' lie[0]' '单击删除/Button按钮类型=' Button ' class=' btnbtn-primary xq ' id=' lie[0]' '查看详细信息/button'/存储在id/TD/tr中的主键值；} $('#td ')。html(字符串)；//找到td，把html代码扔进addshanchu()；add祥青()；} });单击事件查看详细信息：

//添加事件函数addqing () {$('。xq’)。单击(function () {$ ('# my modal '))。模态(' show ')//打开模态框var ids=$(this)。attr(' id ')；$ .ajax ({url:' qing.php '、data: {ids: ids}、datatype3360' text '、type:' post '、success3360函数(data){//split varlie=data . split(' Var str=' div code : ' lie[0]'/div div name : ' lie[1]'/div)；//创建字符串var str=' div code:' lie[0]'/div div name:' lie[1]'/div '；$('#nr ')。html(字符串)；} });//在模态框中显示什么})}然后是细节处理页面：

？PHP $ ids=$ _ POST[' ids ']；包括(' db . class . PHP ')；$db=新db()；$sql='从min中选择*其中ids=' { $ ids }echo $ db-strQuery($ SQL)；这里，拼接字符串和调用的调用被写入封装类文件，所以直接引用strQuery就好了

图：

总页面代码：

表格页面：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/title无标题文档/title link href=' dist/CSS/bootstrap。量滴CSS ' rel=' external nofollow ' rel=' external nofollow ' rel='样式表type='text/css' /脚本src=' http : jquery-1。11 .2 .量滴js /脚本脚本src=' http : dist/js/bootstrap。量滴js '/脚本样式类型=' text/CSS ' .xq { margin-left : 5px；}/样式/标题dyh 1显示数据/h1 table class=' table table-striped '和tr td代号运输署/运输署名称运输署/运输署操作/TD/tr/TD t车身id=' TD '/t车身/表！-模态框- !-模态框(Modal)-div class=' Modal fade ' id=' MyModal ' tabindex='-1 '角色=' 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-misse=' Modal ' aria-hidden=' true '/button H4 class=' Modal-title ' id=' myModalLabel '详情/H4/div类=' modal-body ' id=' NR '/div class=' modal-footer '按钮类型=' button ' class=' BTN BTN-默认'数据-misse=' modal '关闭/button /div /div！ - /.模态-内容- /div！- /.modal - /div/body/htmlscript //调用负荷方法load()；//把加载数据封装成一个方法函数load() { $ .ajax({ url: 'jiazai.php '，//显示所有的数据不用写数据类型： '文本'，成功：函数（数据){ var str=var hang=data。拆分(' | ')；//拆分拆分字符串for(var I=0；我挂。长度；i ) { //通过循环取到每一行；拆分出列；var lie=hang[i].拆分('-');str=str ' trtd ' lie[0]'/tdtd ' lie[1]'/tdtd ' ' button type=' button ' class=' BTN BTN-信息sc ' ids=' lie[0]'点击删除/button button type=' button ' class=' BTN BTN-primary xq ' id=' lie[0]' '查看详情/button '/id里面存上主键值/TD/tr '；} $('#td ').html(字符串);//找到任务描述把超文本标记语言代码扔进去addshanchu()；增加祥青();} });} //给查看详情加事件函数增加湘青(){ $('。xq ').单击(函数(){ $('#myModal ')).模态(“显示”)//打开模态框var id=$(this).attr(' id ')；$.ajax({ url:'xiangqing.php '，data:{ids:ids}，dataType:'TEXT '，type:'POST '，success:function(data){ //拆分var lie=data.split('^')；//var str='div代号：' lie[0] '/divdiv名称：“lie[1]”/div”；//造字符串var str='div代号：' lie[0] '/divdiv名称：“lie[1]”/div；$('#nr ').html(字符串);} });//在模态框里面要显示的内容}) } //把删除事件封装成方法：函数addshanchu() { //给删除按钮加上事件$('.sc ').单击(function () { var ids=$(this)).attr(' id ')；$.ajax({ url: 'shanchu.php '，data: { ids: ids }，dataType: 'TEXT '，type: 'POST '，success:函数(d){ if(d . trim()=' ok '){ alert('删除成功');//调用加载数据的方法load()；} else { alert('删除失败');} } });})}/脚本加载：

？phpinclude(' db。上课。PHP’)；$db=新db()；$sql="从最小值中选择*";$ arr=$ db-Query($ SQL)；//遍历$ str=foreach($ arr as $ v){ $ str=$ str。inter decd('-'，$ v).'|';//用-把$v拼起来，拼出来是1-红2-蓝，用|分割，拼出来是1-红|2-蓝|}$str=substr($str，0，strlen($ str)-1)；//截取字符串：从第0个开始，截取它的长度-1//strlen获取字符串长度echo $ str删除处理页

？phpinclude(' db。上课。PHP’)；$db=新db()；$ ids=$ _ POST[' ids ']；$sql='从最小WHERE ids=' { $ ids } '中删除；if($db -Query($sql，0)){ echo ' ok '；} else { echo ' no}详情处理页面：

？PHP $ ids=$ _ POST[' ids ']；包括(' db。上课。PHP’)；$db=新db()；$sql='从部中选择*其中ids=' { $ ids } echo $ db-strQuery($ SQL)；用引导程序比正常写的网页美观一些

以上是边肖介绍的Ajax bootstrap美化网页，实现了页面的加载、删除和查看细节。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！