浅谈bootstrap使用中的一些问题以及解决过程


Posted in Javascript onOctober 18, 2016

bootstrap是一个不错的前端框架。这里写一下使用中遇到过的几点问题。

1.bootstrap的模态框modal的问题。  有时候会出现弹出模态框的时候遮罩把模态框遮住的情况。

出现这个问题的原因,多半是模态框的html代码放置位置不对。看官方文档。说明如下:

模态框的 HTML 代码放置的位置

务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现和/或功能。

如果因为某种原因我们没办法把模态框的HTML代码放到最高层级内,那么我们可以把它移动过去。

jQuery代码:需要的话请自行翻译成JavaSccipt代码。

$(".modal").appendTo("body");

这个问题告诉我们 文档很重要。

2.在使用bootstrap的同时使用地图API的时候,可能会出现bootstrap与地图冲突,地图显示不出来的情况。这里的问题主要是在使用bootstrap的变体ZUI的时候遇到的。

由于bootstrap有很多自身的css。所以有时候会跟地图API产生一些冲突。导致地图或者地图里面的一些控件显示不出来。我之前用天地图WebAPI与ZUI的时候出现过地图加载不出来的情况。

解决问题的过程:

1.打开浏览器的开发者工具,看console控制台有无报错。无有。看network中的资源,地图相关的图片资源无加载。有。

2.将地图调用的代码从项目中独立出来,看能否正常显示。能。

3.在项目中,使用二分法一半一半地删除引用的js,css看是否这些js或css对天地图API造成了影响。锁定问题在zui.css。

4.在elements那里核对地图那个div下面的一些css。最后发现这一句。

audio, canvas, img, svg, video { 
  max-width: 100%; 
  vertical-align: middle; 
}

ok,问题解决,zui与天地图webAPI的冲突出在 max-width:100%上。 修改成max-width:none; 地图成功显示。当然不是直接修改其源代码,而是在对应div下面把那个属性给覆盖掉。

后来做运行轨迹的时候,发现标注Maker和线line都显示不出来 的情况。经过与正常的对比。并且在控制台查询,发现标注和线是加载了的。只是没有成功显示而已。 原来是svg的问题。也是上面那句代码的影响。修改了就能正常显示了。

3.ZUI使用数据表格初始化不正常的问题。datatable.js。

ZUI中有一个很强大的数据表格插件。可以对数据表格第一列进行排序操作。

按照官方文档的说法,只要这一句就可以初始化表格插件,正常排序。

$('table.datatable').datatable({sortable: true});

但是我们的小伙伴在使用的时候,发现这一句并没有任何作用,完全没有达到范例中的排序效果。于是把这个问题交给我解决。

一开始肯定是怀疑小伙伴哪个地方接口没调用对,然而,我自己试了一下,也没有什么用。

于是继续看接口,发现还有另一种初始化的方式,需要把数据自己拼成一个数组传递进去。

/* 使用启动参数选项来初始化数据 */ 
$('table.datatable').datatable({ 
  data: { 
    cols: [ 
      {width: 80, text: '#', type: 'number', flex: false, colClass: 'text-center'}, 
      {width: 160, text: '时间', type: 'date', flex: false, sort: 'down'}, 
      {width: 80, text: '名称', type: 'string', flex: true, colClass: ''} 
    ], 
    rows: [ 
      {checked: false, data: [1, '2016-01-18 11:05:15', '名称示例1']}, 
      {checked: false, data: [2, '2016-01-20 12:06:16', '名称示例2']}, 
      // 更多数据 
    ] 
  }, 
  // 其他启动参数选项 
});

我就拼了一个,发现可以正常初始化,达到了预期效果。   但是如果每次调用这个东西都要手工拼那么一大个数组出来,显然是不划算的。那么问题出在哪里呢?

于是断点。进到源码里去,发现两种方式的不同在于一个有data传入,一个没有data传入。而在源码里对于没有data的情况下的处理是自己根据表格的内容来生成data。

于是我将它生成的最终data使用console.log(JSON.stingify(data))出来,再用这个生成的data,使用第二种方式传入data来初始化。发现不能正常使用功能。

于是将问题锁定在这个 生成的data上面。

通过对比范例中的data,以及生成的data,发现居然不一样。 范例中的data每一行的数据是一个数组包含的里面每一个格子里的内容,是直接量。而生成的data每一行的数据是一个数组包含的每一个格子的对象,对象中又包含了一些信息。这是差异所在。另外生成的表头数据也有一些差异。

于是按照范例中的数据要求来修改源代码,

cols.push($.extend( 
{ 
  text: $th.html(), 
  flex: false || $th.hasClass('flex-col'), 
  width: 'auto', 
  cssClass: $th.attr('class'), 
  css: $th.attr('style'), 
  type: 'string', 
  ignore: $th.hasClass('ignore'), 
  sort: !$th.hasClass('sort-disabled'), 
  mergeRows: $th.attr('merge-rows') 
}, $th.data()));

$t.find('thead > tr:first').children('th').each(function() 
{ 
  $th = $(this); 
  cols.push($.extend( 
  { 
    text: $th.html(), 
    flex: false || $th.hasClass('flex-col'), 
    width: 'auto', 
    cssClass: $th.attr('class'), 
    colClass: $th.attr('class'), 
    css: $th.attr('style'), 
    type: 'string', 
    ignore: $th.hasClass('ignore'), 
    sort: !$th.hasClass('sort-disabled') 
  }, $th.data())); 
});

修改:

row.data.push($.extend( 
{ 
  cssClass: $td.attr('class'), 
  css: $td.attr('style'), 
  text: $td.html(), 
  colSpan: colSpan 
}, $td.data()));

为:

row.data.push($td.html());

测试

$('table.datatable').datatable({sortable: true});

成功初始化。排序可能正常。表格css正常。问题初步解决。

附:ZUI文档:http://zui.sexy/

bootstrap文档:http://v3.bootcss.com/javascript/

做前端的难免遇到各种各样的问题。不要慌,一步步来,掌握了科学系统的发现问题和解决问题的方法,就能很快的锁定问题进而解决问题了。

以上就是小编为大家带来的浅谈bootstrap使用中的一些问题以及解决过程全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
不同浏览器的怪癖小结
Jul 11 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
基于vue.js实现图片轮播效果
Dec 01 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
Vue详细的入门笔记
May 10 Vue.js
JSON对象 详解及实例代码
Oct 18 #Javascript
简易的JS计算器实现代码
Oct 18 #Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 #Javascript
jquery中用jsonp实现搜索框功能
Oct 18 #Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 #Javascript
浅谈js的异步执行
Oct 18 #Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 #Javascript
You might like
CI框架给视图添加动态数据
2014/12/01 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
实现PHP搜索加分页
2016/10/12 PHP
PHP验证类的封装与使用方法详解
2019/01/10 PHP
php设计模式之工厂方法模式分析【星际争霸游戏案例】
2020/01/23 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
python学习基础之循环import及import过程
2018/04/22 Python
python实现猜单词小游戏
2020/05/22 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
nohup的用法
2014/08/10 面试题
初中体育教学反思
2014/01/14 职场文书
《中华少年》教学反思
2014/02/15 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
物业公司管理制度
2015/08/05 职场文书
python执行js代码的方法
2021/05/13 Python
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python