目錄
bootstrap 學習筆記
共計 17講 3個小時 ,小姐姐講的，聽聲音很美麗
https://www.bilibili.com/video/BV1TU4y1p7zU?p=1
P1-BootStrap-BootStrap的介紹及下載 11:56
P2-BootStrap-BootStrap的使用與布局容器 15:22
P3-BootStrap-柵格網格系統-列組合與列偏移 20:38
P4-BootStrap-柵格網格系統-列排序與列嵌套 09:44
P5-BootStrap-常用樣式-標題與段落 09:34
P6-BootStrap-常用樣式-強調和對齊效果 07:31
P7-BootStrap-常用樣式-串列 05:34
P8-BootStrap-常用樣式-代碼 07:53
P9-BootStrap-常用樣式-表格 05:12
P10-BootStrap-常用樣式-表單控制元件-文本框、下拉框與文本域 09:14
P11-BootStrap-常用樣式-表單控制元件-單選框與復選框 07:25
P12-BootStrap-常用樣式-表單控制元件-按鈕 11:32
P13-BootStrap-常用樣式-表單布局-水平表單和行內表單 16:20
P14-BootStrap-常用樣式-縮略圖和面板 09:24
P15-BootStrap-BootStrap組件-導航和分頁導航 08:09
P16-BootStrap-BootStrap插件-下拉選單 10:06
P17-BootStrap-BootStrap插件-模態框 12:28
1.主要內容
最新的是Bootstrap4 ,本視頻講解的是BootStrap3.3.7
2011年 倆twitter員工開發的 回應式 html/css/js 框架
可以快速開發網頁，基于 html5 , css3 ,
bootstrap 基于 jQuery，如果用 Bootstrap js ,需要引入jQuery，
如果不用js ,參考其css 就可以了，
2.BootStrap的安裝和使用
官網： http://getbootstrap.com
BootStrap 圖示地址： https://icons.getbootstrap.com/
中文網： http://www.bootcss.com
中文網bootstrap3 css樣式頁面: https://v3.bootcss.com/css/
下載地址： http://v3.bootcss.com/getting-started
下載jquery地址： http://jquery.com
編輯器：HBuilder
HBuilderX 編輯器3.1.2下載地址： https://www.onlinedown.net/soft/1217175.htm
菜鳥教程學習 bootstrap
https://www.runoob.com/bootstrap/bootstrap-tutorial.html
下載
下載地址： http://v3.bootcss.com/getting-started
3.布局容器和柵格網格系統
3.1 布局容器
01 引入 bootstrap css ; jquery ; bootstrap js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 載入BootStrap的css -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
</head>
<body>
<h1>hello world!</h1>
<!-- 如果需要使用Bootstrap的js插件，必須先引入jQuery -->
<script type="text/javascript" src="js/jquery-3.6.0.js">
</script>
<!-- 包含所有的bootstrap的js插件，可以根據需要使用Js插件 -->
<script type="text/javascript" src="bootstrap/js/bootstrap.js">
</script>
</body>
</html>
02 簡單的 布局容器比較 container – container-fluid
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
</head>
<body>
<!--
container----固定寬度支持回應式布局（一般用這種）
container-fluid 流體 占據全部視口
-->
<div >
沒有任何樣式的內容（比較開頭）
</div>
<div class="container" style="background-color: #008000;">
包含在布局容器container類中的內容（比較開頭）
</div>
<div class="container-fluid" style="background-color: #1B6D85;">
包含在布局容器container-fluid類中的內容（比較開頭）
</div>
</body>
</html>
3.2 柵格網格系統
03 柵格網格示例
3.2.1 列組合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: green;">
4
</div>
<div class="col-md-8" style="background-color: red;">
8
</div>
</div>
</div>
</body>
</html>
3.2.2 偏移列
col-md-offset-2 向右偏移2列
https://www.runoob.com/bootstrap/bootstrap-grid-system.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列偏移</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2" style="background-color: green;">
2 green
</div>
<div class="col-md-2 col-md-offset-2" style="background-color: red;">
2 red
</div>
</div>
</div>
</body>
</html>
3.2.3 列排序
3.2.4 列嵌套
3.2.5 圖示
<span class="glyphicon glyphicon-user"></span>
https://www.runoob.com/try/try.php?filename=bootstrap3-glyphicons
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列排版</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
</head>
<body>
<p>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
</button>
</p>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user"></span> User
</button>
</body>
</html>
4.常用樣式
5. BootStrap 插件
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/282922.html
標籤：其他