生活随笔
收集整理的這篇文章主要介紹了
Bootstrap的坑--千万别踩
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
Bootstrap前端框架
1.移動設(shè)備優(yōu)先策略
- 基礎(chǔ)的CSS是移動優(yōu)先。優(yōu)先設(shè)計更小的寬度
- 媒體查詢。針對于平板電腦、臺式電腦
- 漸近增強(qiáng)。隨著屏幕大小的增加而添加元素
2.響應(yīng)式布局
- 響應(yīng)式布局：同一套頁面可以兼容不同分辨率的設(shè)備
- 柵格系統(tǒng)：將一行平均分成12個格子，可以指定元素占幾個格子
- 容器分類：相當(dāng)于table
- container：兩邊留白
- container-fluid：每一種設(shè)備都是100%寬度
- 定義行：相當(dāng)于之前的tr ，樣式：row
- 定義元素：指定該元素在不同設(shè)備上，所占的格子數(shù)目。樣式：col-設(shè)備代號-格子數(shù)目
- 設(shè)備分類：
- xs：超小屏幕 手機(jī)
- sm：小屏幕 平板
- md：中等屏幕 桌面顯示器、筆記本
- lg：大屏幕 大型顯示器、臺式機(jī)
- 注意：
- 一行中如果格子數(shù)目超過12，則超出部分自動換行
- 柵格類屬性可以向上兼容。柵格類適用于與屏幕寬度大于或等于分界點大小的設(shè)備
- 如果真實設(shè)備寬度小于了設(shè)置柵格類屬性的設(shè)備代碼的最小值，會一個元素占滿一整行
導(dǎo)入JS插件的坑
錯誤代碼
無論你怎么點按鈕。都不會彈出窗口
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title
</title><link rel="stylesheet" href="css/bootstrap.min.css"><script src="js/bootstrap.min.js"></script><script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">Modal title
</h4></div><div class="modal-body">...
</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close
</button><button type="button" class="btn btn-primary">Save changes
</button></div></div></div>
</div>
</body>
</html>
- Bootstrap所有Javascript插件都依賴于jQuery
- 必須先導(dǎo)入jQuery.js，后導(dǎo)入bootstrap.js
正確代碼
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title
</title><link rel="stylesheet" href="css/bootstrap.min.css"><script src="js/jquery-3.2.1.min.js"></script><script src="js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">Modal title
</h4></div><div class="modal-body">...
</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close
</button><button type="button" class="btn btn-primary">Save changes
</button></div></div></div>
</div>
</body>
</html>
總結(jié)
以上是生活随笔為你收集整理的Bootstrap的坑--千万别踩的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
