Vue.js仿Metronic高级表格（一）静态设计

 
 

写出表单：

 
 
 
  书名:  
  
 
    
  
 
 
 
 
 
  类别:  
  
 
    
    科技 
    文化 
    经济 
    
  
 
 
 
 
 
  价格:  
  
 
    
  
 
 
 
 
 
   
   
 
 
 



值得关注的是：
① 'form-control' 这个class样式会独占一行。要使label和input在一行，利用bootstrap的栅格化布局即可，经过调整得出3：9的布局是比较合适的。
② 'form-horizontal' 样式作用于form元素可以美化表格。它可以让每个form-group之间留出间隙，变得不那么紧凑；还可以使label的内容居中。
③ ‘col-md-4 col-md-offset-4' 可以使一个元素居中，并且宽度是‘col-md-4'
四、展示
① 表头





 
 
 
  每页 
  
 
    
    5条 
    10条 
    15条 
    20条 
    
  
 
 
 
 
 
  搜索:  
  
 
    
  
 
 
 
 



这部分较简单，这里依然使用到了‘form-horizontal'来调整布局
② 主体





 
 
 
 
 
  
序号
 
  
书名
 
  
类别
 
  
价格(元)
 
  
更新时间
 
  
操作
 
 
 
 
 
 
 
 
 
  
1
 
  
标准日本语
 
  
文化
 
  
¥ 31.00
 
  
2017年04月16日14:26:43
 
  
 
    
     
    修改 
    
    
     
    删除 
    
  
 
 
 
 
 
 



① ‘table-bordered‘ 添加单元格的边框


② 'table-hover‘ 鼠标悬停一行有样式
③ 'table-striped' 斑马线效果
五、删除
删除弹窗，原型图没给出，所以自行发挥想象力。



模态框：

 
 
 
  
 
   
 
    × 
    
提示
 
   
 
   
 
    您确认要删除xxx吗&＃63; 
   
 
   
 
    取消 
    删除 
   
 
  
 
 
 
 



这样写，初始是不会出来的，在删除按钮元素上添加：
data-toggle="modal" data-target="#general_dialog" 
那么点击按钮的时候，就会弹出来（此处需要引入bootstrap.js哦）
① ‘fade‘ 表示模态框是淡入淡出的
② 'bs-example-modal-sm' 是指模态框的大小是'sm‘
③ 'ב是一个实体标记，代表是 ×
五步完成后，样子是：



（额这个录屏的工具貌似吧table-striped的效果抹去了。。。）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。