Bootstrap学习笔记01【快速入门、栅格布局】
- Java后端 學習路線 筆記匯總表【黑馬程序員】
目錄
01 快速入門
今日內容
Bootstrap_概述
Bootstrap中文網
Bootstrap_快速入門
下載 Bootstrap
Bootstrap 離線文檔
Bootstrap 模板
02 Bootstrap_柵格系統
Bootstrap_柵格系統_入門
Bootstrap 官網 柵格系統 文檔
Bootstrap 柵格系統 基本使用
Bootstrap_柵格系統_注意事項
01 快速入門
今日內容
Bootstrap_概述
1. 概念： 一個前端開發的框架，Bootstrap，來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發更加快捷。
?? ?* 框架：一個半成品軟件，開發人員可以在框架基礎上，再進行開發，簡化編碼。
?? ?* 好處：
?? ??? ?1. 定義了很多的css樣式和js插件。我們開發人員直接可以使用這些樣式和插件得到豐富的頁面效果。
?? ??? ?2. 響應式布局
?? ??? ??? ?* 同一套頁面可以兼容不同分辨率的設備。
把基礎性的知識封裝（讓開發更簡單）--> 提供jar包 --> 開發人員可以借助jar包快速地開發程序。--> 框架，一個半成品軟件。
Bootstrap(Web框架) - 百度百科
Bootstrap中文網 ——?https://www.bootcss.com
Bootstrap中文網
Bootstrap中文網 ——?https://www.bootcss.com
??
??
Bootstrap_快速入門
快速入門
下載 Bootstrap
??
??
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"><!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --><title>Bootstrap 101 Template</title><!-- Bootstrap --><link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 --><!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]--></head><body><h1>你好，世界！</h1><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) --><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script></body> </html>Bootstrap 模板
02 Bootstrap_柵格系統
Bootstrap_柵格系統_入門
響應式布局
* 同一套頁面可以兼容不同分辨率的設備。
* 實現：依賴于柵格系統：將一行平均分成12個格子，可以指定元素占幾個格子。
* 步驟：
?? ?1. 定義容器。相當于之前的table。
?? ??? ?* 容器分類：
?? ??? ??? ?1. container：兩邊留白
?? ??? ??? ?2. container-fluid：每一種設備都是100%寬度
?? ?2. 定義行。相當于之前的tr，樣式：row
?? ?3. 定義元素。指定該元素在不同的設備上，所占的格子數目。樣式：col-設備代號-格子數目
?? ??? ?* 設備代號：
?? ??? ??? ?1. xs：超小屏幕 手機 (<768px)：col-xs-12
?? ??? ??? ?2. sm：小屏幕 平板 (≥768px)
?? ??? ??? ?3. md：中等屏幕 桌面顯示器 (≥992px)
?? ??? ??? ?4. lg：大屏幕 大桌面顯示器 (≥1200px)
Bootstrap 官網 柵格系統 文檔
??
Bootstrap 柵格系統 基本使用
??
Bootstrap_柵格系統_注意事項
容器分類：
注意：
總結
以上是生活随笔為你收集整理的Bootstrap学习笔记01【快速入门、栅格布局】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java——递归遍历目录【获取指定目录下
- 下一篇： 突发：美赛官方承认邮箱服务器存在问题导致