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

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/

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