生活随笔
收集整理的這篇文章主要介紹了
Bootstrap的坑--千万别踩
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Bootstrap前端框架
1.移動設備優先策略
- 基礎的CSS是移動優先。優先設計更小的寬度
- 媒體查詢。針對于平板電腦、臺式電腦
- 漸近增強。隨著屏幕大小的增加而添加元素
2.響應式布局
- 響應式布局：同一套頁面可以兼容不同分辨率的設備
- 柵格系統：將一行平均分成12個格子，可以指定元素占幾個格子
- 容器分類：相當于table
- container：兩邊留白
- container-fluid：每一種設備都是100%寬度
- 定義行：相當于之前的tr ，樣式：row
- 定義元素：指定該元素在不同設備上，所占的格子數目。樣式：col-設備代號-格子數目
- 設備分類：
- xs：超小屏幕 手機
- sm：小屏幕 平板
- md：中等屏幕 桌面顯示器、筆記本
- lg：大屏幕 大型顯示器、臺式機
- 注意：
- 一行中如果格子數目超過12，則超出部分自動換行
- 柵格類屬性可以向上兼容。柵格類適用于與屏幕寬度大于或等于分界點大小的設備
- 如果真實設備寬度小于了設置柵格類屬性的設備代碼的最小值，會一個元素占滿一整行
導入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
- 必須先導入jQuery.js，后導入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>
總結
以上是生活随笔為你收集整理的Bootstrap的坑--千万别踩的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
