作者:KING逊咖 | 来源:互联网 | 2022-11-21 08:28
Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机,现在就bootstrap的响应式举一个例子:
如上图所示,要实现该表格在手机等移动端上只显示代号、名称、和价格,其他以查看详情的方式显示(也就是下图:)
首先,先实现在移动端能由左图到右图的转换:
代码如下:
query($sql);
foreach($arr as $v){
echo "
";
//为什么id='xq'不行?不要用id,id是唯一的,此处有多个查看详情。。。。记住了!!!!
}
?>
代号 |
名称 |
价格 |
产地 |
库存 |
数量 |
操作 |
{$v[0]} |
{$v[1]} |
{$v[2]} |
{$v[3]} |
{$v[4]} |
{$v[5]} |
|
其次:实现点击查看详情出现模态框
处理页面:chuli.php
<&#63;php
$code=$_POST["code"];
require "../DB.class.php";
$db=new DB();
$sql = "select * from buyfruits where ids='{$code}'";
$arr = $db->strquery($sql);
echo $arr;
&#63;>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。