生活随笔
收集整理的這篇文章主要介紹了
【JavaWeb】前端框架之Bootstrap
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文章目錄
- 1 概念
- 2 快速入門
- 3 響應(yīng)式布局
- 4 CSS樣式和JS插件
1 概念
BootStrap是前端開發(fā)框架，基于HTML、CSS、JavaScript。
優(yōu)點：
- 定義了很多CSS樣式和JS插件，可以直接使用。
- 響應(yīng)式布局：同一套頁面可以兼容不同分辨率的設(shè)備。
2 快速入門
下載Bootstrap將Bootstrap導入項目復制粘貼模板導入樣式和插件
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Bootstrap 101 Template
</title><script src="/js/bootstrap.js/bootstrap.min.js"></script><link href="css/bootstrap.min.css" rel="stylesheet"><link href="css/index.css" rel="stylesheet"><script src="js/jquery-3.2.1.min.js"></script><script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！
</h1>
</body>
</html>
3 響應(yīng)式布局
實現(xiàn)：
依賴于柵格系統(tǒng)，將一行平均分成12個格子，可以指定元素占多少格子。
步驟：
定義容器，container、container-fluid定義行，row定義元素，指定該元素在不同的設(shè)備上所占的各自數(shù)目。樣式：col-設(shè)備代號-格子數(shù)目。設(shè)備代號：【xs超小屏幕（手機）、sm小屏幕（平板）、md中等（顯示器）、lg大屏幕（大顯示器）】
大屏顯示效果 1×12
小屏顯示效果 2×6
<style>.inner{border: 1px solid red;}</style>
</head>
<body><div class="container-fluid"><div class="row"></div><div class="col-lg-1 col-sm-2 inner">柵格
</div><div class="col-lg-1 col-sm-2 inner">柵格
</div><div class="col-lg-1 col-sm-2 inner">柵格
</div><div class="col-lg-1 col-sm-2 inner">柵格
</div><div class="col-lg-1 col-sm-2 inner">柵格
</div><div class="col-lg-1 col-sm-2 inner">柵格
</div><div class="col-lg-1 col-sm-2 inner">柵格
</div><div class="col-lg-1 col-sm-2 inner">柵格
</div><div class="col-lg-1 col-sm-2 inner">柵格
</div><div class="col-lg-1 col-sm-2 inner">柵格
</div><div class="col-lg-1 col-sm-2 inner">柵格
</div><div class="col-lg-1 col-sm-2 inner">柵格
</div></div>
</body>
</html>
注意
- container-fluid：每一種設(shè)備都是100%寬度
- container：固定寬度，每種設(shè)備不一樣，有留白
- 超過12個格子就自動換行
- 柵格類可以向上兼容，如果真實設(shè)備寬度小于設(shè)備柵格類屬性的設(shè)備代碼的最小值，則一個元素沾滿一行。
4 CSS樣式和JS插件
具體使用：https://v3.bootcss.com/
全局樣式
組件
插件
總結(jié)
以上是生活随笔為你收集整理的【JavaWeb】前端框架之Bootstrap的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
