bootstrap响应式表格实例详解

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

strquery($sql);
echo $arr;
?>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。