?
Bootstrap入門到實戰
1 認識Bootstrap
認識Bootstrap
Bootstrap起源和歷史
Bootstrap3-5版本的區別
Bootstrap優缺點
學習Bootstrap的理由
2 Bootstrap安裝
Bootstrap4的安裝
方式一 : CDN
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- safari 9+ --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入Bootstrap框架中的CSS文件: box-size:border-box --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
</head>
<body><h1 class="text-left border border-primary">Hello Bootstrap</h1><!-- Bootstrap5 之前需要依賴jQuery庫 --><script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script><!-- 引入Bootstrap的JS文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>方式二 : 下載源碼引入
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css">
</head>
<body><h1 class="float-right">hello Bootstrap</h1><script src="../libs/jquery/jquery-3.6.0.js"></script><!-- popper.jsbootstrap.js--><script src="../libs/bootstrap-4.6.1/js/bootstrap.bundle.js"></script>
</body>
</html>Bootstrap軟件包內容
方式三 : npm安裝
Bootstrap初體驗
原生實現
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入外部的 CSS 文件--><link rel="stylesheet" href="./libs/bootstrap.css">
</head>
<body><div class="btn btn-cirlce btn-primary">按鈕1</div><div class="btn btn-cirlce btn-warning">按鈕2</div><div class="btn btn-cirlce btn-default">按鈕2</div></body>
</html>bootstrap實現
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css">
</head>
<body><div class="btn btn-primary">按鈕1</div><div class="btn btn-warning">按鈕2</div><button class="btn btn-info">按鈕3</button><button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-light">Light</button><button type="button" class="btn btn-dark">Dark</button><button type="button" class="btn btn-link">Link</button><script src="../libs/jquery/jquery-3.6.0.js"></script><script src="../libs/bootstrap-4.6.1/js/bootstrap.bundle.js"></script>
</body>
</html>Bootstrap4 框架設計圖
屏幕尺寸的分割點（Breakpoints）
3 響應式容器原理
響應式容器Containers
container-fluid
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css"><style>div{background-color: pink;height: 40px;}</style>
</head>
<body><!-- 容器 --><div class="container-fluid">我是box</div></body>
</html>container
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css"><style>div{background-color: pink;height: 40px;}</style>
</head>
<body><!-- 容器 --><div class="container">我是box</div></body>
</html>container-lg
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css"><style>div{background-color: pink;height: 40px;}</style>
</head>
<body><!-- 容器 --><div class="container-lg">我是box</div></body>
</html>4 網格系統的原理
認識網格系統（Grid system）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css"><style>.container{background-color: pink;}.item{height: 40px;border: 1px solid red;}</style>
</head>
<body><!-- 初體驗網格系統,屬于自動列的寬--><div class="container"><!-- display: flexflex-wrap:wrap--><div class="row"><!-- flex item: flex-grow: 1--><div class="col item">1</div><div class="col item">2</div><div class="col item">3</div></div></div><!-- 網格系統(啟用了12列,超出12列就會換行)可以制定列的框--><div class="container"><!-- display:flexflex-wrap: wrap--><div class="row"><!-- flex item: flex-basis: xx%max-width: xx%flex-grow: 0,flex-shrink: 0--><div class="col-4 item">1</div><div class="col-4 item">2</div><div class="col-4 item">3</div><div class="col-6 item">4</div></div></div></body>
</html>12列網格系統（12-Column Grid system）
網格系統的原理
網格系統-row的負外邊距（margin）
網格系統的原理
網格系統-嵌套(nesting)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css"><style>.container{background-color: pink;}.item{height: 40px;border: 1px solid red;}</style>
</head>
<body><!-- 方式一--><div class="container"><!-- flex:列寬是自動拉伸 --><div class="row"><div class="col item">1</div><div class="col item">2</div><div class="col item">3</div><div class="col item">4</div><div class="col item">5</div><div class="col item">6</div><div class="col item">7</div><div class="col item">8</div></div></div><!-- 方式二: 指定列寬 --><div class="container"><div class="row"><div class="col-6 item"><!-- 嵌套網格系統( 嵌套的時候是可以省略container ) --><div class="row"><div class="col-3 item">1</div><div class="col-3 item">2</div><div class="col-3 item">3</div><div class="col-3 item">4</div></div></div><div class="col-6 item"><!-- ( 嵌套的時候是可以省略container ) --><div class="row"><div class="col-3 item">1</div><div class="col-3 item">2</div><div class="col-3 item">3</div><div class="col-3 item">4</div></div></div></div></div></body>
</html>網格系統-自動布局（Auto-layout ）
等列寬
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css"><style>.container{background-color: pink;}.item{height: 40px;border: 1px solid red;}</style>
</head>
<body><!-- 網格系統-等列寬- flex-grow:1 --><div class="container"><div class="row"><div class="col item">1</div><div class="col item">2</div><div class="col item">3</div><div class="col item">4</div><div class="col item">5</div><div class="col item">6</div><div class="col item">7</div><div class="col item">8</div><div class="col item">9</div><div class="col item">10</div><div class="col item">11</div><div class="col item">12</div><div class="col item">13</div><div class="col item">13</div><div class="col item">13</div><div class="col item">13</div><div class="col item">13</div><div class="col item">13</div><div class="col item">13</div></div></div>
</body>
</html>auto列寬
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css"><style>.container{background-color: pink;}.item{height: 40px;border: 1px solid red;}</style>
</head>
<body><!-- 網格系統-等列寬- flex-grow:1 --><div class="container"><div class="row"><div class="col-auto item">auto layout layout layout </div><div class="col item">1</div><div class="col item">2</div><div class="col item">3</div></div></div>
</body>
</html>指定列寬
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css"><style>.container{background-color: pink;}.item{height: 40px;border: 1px solid red;}</style>
</head>
<body><!-- 網格系統-等列寬- flex-grow:1 --><div class="container"><div class="row"><!-- flex: 0 0 xx%;--><div class="col-1 item">1</div><div class="col-2 item">2</div><div class="col-3 item">3</div><div class="col-6 item">4</div><div class="col-1 item">5</div><div class="col-1 item">6</div><div class="col-1 item">7</div></div><div class="row"><!-- flex: 0 0 xx%;--><div class="col-1 item">1</div><div class="col-2 item">2</div><div class="col-3 item">3</div><div class="col-6 item">4</div></div></div>
</body>
</html>網格系統-響應式類（Responsive Class）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css"><style>.container{background-color: pink;}.item{height: 40px;border: 1px solid red;}</style>
</head>
<body><!-- 網格系統 --><div class="container"><div class="row"><div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">1</div><div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">2</div><div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">3</div><div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">4</div><div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">5</div><div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">6</div></div></div>
</body>
</html>5 響應式工具和組件
認識響應式工具類
響應式工具類-Display
顯示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css">
</head>
<body><!-- 1.某個元素只在lg(>=992px) 和 xl 屏顯示 --><h1 class="d-none d-lg-block">某個元素只在lg(>=992px) 和 xl 屏顯示</h1></body>
</html>隱藏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css">
</head>
<body><!-- 1.某個元素只在lg(>=992px) 和 xl 屏隱藏 --><h1 class="d-block d-lg-none">某個元素只在lg(>=992px) 和 xl 屏隱藏</h1></body>
</html>隱藏
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css">
</head>
<body><!-- 3.某個元素只在 md(>=768px) 屏隱藏；--><h1 class="d-block d-md-none d-lg-block">某個元素只在 md(>=768px) 屏隱藏；</h1><!-- 800 1200 1920 lg>=992 -->
</body>
</html>實用的工具類（Utility classes）
可訪問性-輔助類（了解）
Bootstrap組件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css">
</head>
<body><h1>1.Brand</h1><nav class="navbar navbar-dark bg-dark"><a class="navbar-brand" href="#"><img src="https://v4.bootcss.com/docs/4.6/assets/brand/bootstrap-solid.svg" width="30" height="30" alt=""></a></nav><h1>2.Nav Link</h1><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container"><a class="navbar-brand" href="#">Brand</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">Features</a></li><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li><li class="nav-item"><a class="nav-link disabled">Disabled</a></li></ul></div></div></nav><script src="../libs/jquery/jquery-3.6.0.js"></script><script src="../libs/bootstrap-4.6.1/js/bootstrap.bundle.js"></script>
</body>
</html>6?Bootstrap項目實戰
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>弘源智能生活</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="./libs/bootstrap-4.6.1/css/bootstrap.css"><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/navbar.css"><link rel="stylesheet" href="./css/target-customer.css">
</head>
<body><!-- 1.導航欄 --><nav class="navbar navbar-expand-lg"><div class="container-fluid"><!-- logo --><a class="navbar-brand" href="#"><img class="logo" src="./img/logo.png" alt=""></a><!-- 按鈕 <=992才會顯示出來 --><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"><img class="expand-icon" src="./img/show-icon.png" alt=""></button><!-- 導航列表 --><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav mr-auto"><!-- 使用自定義的樣式 --><li class="text-link active"><span>首頁</span></li><li class="text-link"><span>API</span></li><li class="text-link"><span>解決方案</span></li><li class="text-link"><span>案例</span></li><li class="text-link"><span>新聞</span></li><li class="text-link"><span>關于我們</span></li></ul><p class="text-link hot-line"><span>咨詢熱線：4009910008</span></p></div></div></nav><!-- 2.輪播圖 --><!-- data-ride="carousel" 當頁面加載完成之后 錄播圖自動輪播--><div id="carouselExampleIndicators_liujun" class="carousel slide"><!-- 指示器 --><ol class="carousel-indicators"><li data-target="#carouselExampleIndicators_liujun" data-slide-to="0" class="active"></li><li data-target="#carouselExampleIndicators_liujun" data-slide-to="1"></li><li data-target="#carouselExampleIndicators_liujun" data-slide-to="2"></li></ol><!-- 輪播圖的圖片 --><div class="carousel-inner"><!-- <div class="carousel-item active"><img src="./img/banner0.png" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="./img/banner1.png" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="./img/banner2.png" class="d-block w-100" alt="..."></div> --></div><!-- 分頁:上一張 下一張 --><button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators_liujun" data-slide="prev"><span class="carousel-control-prev-icon"></span></button><button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators_liujun" data-slide="next"><span class="carousel-control-next-icon"></span></button></div><!-- 3.目標客戶 --><div class="target-customer"><!-- 在小屏上是不可見 --><h1 class="title text-center d-none d-md-block">目標客戶</h1><!-- 網格系統性 --><div class="container-fluid"><div class="row"><div class="col-md-6 col-xl-3 item"><img class=" d-none d-md-block" src="./img/target-1.png" alt=""><div class="sub-title">電子銀行</div><div class="desc text-center"><p>助力五大行、商業銀行、城商行、農商行、農信社等</p><p>手機銀行與直銷銀行APP消費場景升級</p></div></div><div class="col-md-6 col-xl-3 item"><!-- 在小屏上是不可見 --><img class=" d-none d-md-block" src="./img/target-2.png" alt=""><div class="sub-title">金服平臺</div><div class="desc text-center"><p>助力錢包、小貸、基金、保險、信托、證券等</p><p>金融服務平臺APP 消費場景升級</p></div></div><div class="col-md-6 col-xl-3 item"><img class=" d-none d-md-block" src="./img/target-3.png" alt=""><div class="sub-title">企業福利</div><div class="desc text-center"><p>助力國有、私營、外資、人力資源公司等</p><p>企業報銷與福利系統消費場景升級</p></div></div><div class="col-md-6 col-xl-3 item"><img class=" d-none d-md-block" src="./img/target-4.png" alt=""><div class="sub-title">智能終端</div><div class="desc text-center"><p>助力機器人、汽車中控、電子屏、商用電視等</p><p>人工智能語音消費場景升級</p></div></div></div></div></div><script src="./libs/jquery/jquery-3.6.0.js"></script><script src="./libs/bootstrap-4.6.1/js/bootstrap.bundle.js"></script><script src="./js/utils.js"></script><script src="./js/banner.js"></script>
</body>
</html>
