Bootstrap學習
什麼是Bootstrap?
來自Twitter的一個前端開發框架,Boostrap是基於HTML、CSS、JavaScript的,簡潔靈活,使web開發更加快捷。
框架的概念:一個半成品軟件,開發人員可以在框架的基礎上進行開發,簡化編碼
好處:定義了很多CSS的樣式和js插件,可以直接使用,豐富前端頁面;響應式分佈局,同一套頁面可以兼容不同分辨率的設備
使用參考文檔:Bootstrap中文文檔
使用Bootstrap庫
1.下載 參考:
Bootstrap下載鏈接
jQuery下載鏈接
2.將解壓後文件導進項目
3.使用模板,引入使用的資源
<!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>hello monkey!</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery,所以必須放在前邊) -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>hello monkey</h1>
</body>
</html>
補充詳細模板
<!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/[email protected]/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/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery,所以必須放在前邊) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
什麼是Viewport(視口)?
viewport是用戶網頁的可視區域。移動設備上的viewport就是設備的屏幕上能用來顯示我們的網頁的那一塊區域,即瀏覽器上顯示網頁的那部分區域,但viewport不侷限於瀏覽器可視區域的大小,可能比瀏覽器的可視區域要大,也可能要比瀏覽器的可視區域小。
什麼是響應式工具?
加快對移動設備友好的頁面開發工作,利用媒體查詢功能並使用這些工具類可以方便地針對不同設備展示或隱藏頁面的內容。可以避免爲同一個網站創建而因爲設備不同來創建不同的網頁版本,使用響應式工具類可以在不同設備上提供不同的展現形式。
響應式佈局- - 柵格系統
由Bootstrao提供的一套響應式、移動設備優先的流失柵格系統,隨着屏幕或者視口viewport尺寸的增加,系統會自動分爲最多12列,同一套頁面可以兼容不同分辨率的設備。
- 行(row)必須包含在容器
.container
(用於固定寬度並支持響應式佈局)或.container-fluid
(用於100%寬度,佔據全部視口)中,以便賦予合適的排列(aligment)和內補(padding) - 通過行(row)在水平方向創建一組列(col),內容置於列(row),列作爲行的直接子元素,並且指定列在不同的設備上,所佔的格子數目
- 一行中如果格子數超出12,超出部分會自動換行
- 若真實設備寬度小於設置柵格類屬性的設備代碼的最小值,則一個元素佔滿一行
定義容器 -> 定義行 ->定義列元素 -> 內容
注意:運行顯示如果拉伸瀏覽器窗口不能隨窗口大小改變,那麼就是文件引入問題
<style>
.inner{
border: blue 1px solid;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-8 inner">.col-md-8</div>
<div class="col-md-4 inner">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-1 inner">.col-md-1</div>
<div class="col-md-1 inner" >.col-md-1</div>
<div class="col-md-1 inner" >.col-md-1</div>
<div class="col-md-1 inner" >.col-md-1</div>
<div class="col-md-1 inner" >.col-md-1</div>
<div class="col-md-1 inner" >.col-md-1</div>
<div class="col-md-1 inner" >.col-md-1</div>
<div class="col-md-1 inner" >.col-md-1</div>
<div class="col-md-1 inner" >.col-md-1</div>
<div class="col-md-1 inner" >.col-md-1</div>
<div class="col-md-1 inner" >.col-md-1</div>
<div class="col-md-1 inner" >.col-md-1</div>
</div>
</body>