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>
