浅谈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和Asp、Php等后端程序间传值编码统一
Apr 17 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
php使用MySQL保存session会话的方法
2015/06/26 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
基于JQUERY的多级联动代码
2012/01/24 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
vue 组件内获取actions的response方式
2019/11/08 Javascript
Python  连接字符串(join %)
2008/09/06 Python
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
Python3 处理JSON的实例详解
2017/10/29 Python
python实现BackPropagation算法
2017/12/14 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
Python中property属性实例解析
2018/02/10 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
Python的in,is和id函数代码实例
2020/04/18 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
村官工作鉴定评语
2014/01/27 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
接待员岗位职责
2015/02/13 职场文书