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使用中的一些問題以及解決過程全部內容了，希望大家多多支持~