1.Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。 2.可在如下网站学习bootstrap https://www.runoob.com/bootstrap4/bootstrap4-progressbars.html 4.0菜鸟 https://www.php.cn/manual/view/34072.html 4.0中文开发文档 https://www.bootcss.com/ 中文网 https://v4.bootcss.com/ 4.0网址
将引入 Bootstrap 样式表的 标签复制并粘贴到 中，并放在所有其他样式表之前。
< link rel="stylesheet" href="./css/bootstrap.min.css"/>2.bootstrap 里面的布局模式 固定布局 container 流动布局 container-fluid 3.网格系统：Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。 我们也可以根据自己的需要，定义列数：
row 行 col-*-* 列 col-sm- 平板 - 屏幕宽度等于或大于 576px col-md- 桌面显示器 - 屏幕宽度等于或大于 768px) col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px) col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px) col-xl-auto 根据内容自动分配 col-*-num 列 后边数字的代表跨几列 offset-1 设置marginleft 8.333% offset-*-2 不同的屏幕marginleft invisible 隐藏元素 visible 显示元素 p-0 padding:0 p-1 padding:0.25rem; p-2..... pt py w-100 100% w-75 75% h-100 100% h-50 50% align-items-center 相对父容器垂直居中 align-items-start 相对父容器顶部对齐 align-items-end 相对父容器底部对齐 align-content-center 考虑多行 align-self-center 自身在flexbox中的y轴分布 justify-content-center 子元素在父容器里面的x轴的排布情况文字排版
Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式颜色
Bootstrap 4 提供了一些有代表意义的颜色类：.text-muted, text-primary,text-success, .text-info,text-warning, .text-danger, .text-secondary, .text-white,ext-dark and .text-light:6.信息提示框 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现提示框颜色的改变
<div class="alert alert-success"> <strong>成功!</strong> 指定操作成功提示信息。 </div>7.按钮
<button type="button" class="btn">基本按钮</button> <button type="button" class="btn btn-primary">按钮</button> btn-primary是给按钮加颜色 <button type="button" class="btn btn-secondary">次要按钮</button> 设置按钮的大小 <button type="button" class="btn btn-primary btn-lg">大号按钮</button> <button type="button" class="btn btn-primary">默认按钮</button> <button type="button" class="btn btn-primary btn-sm">小号按钮</button> 设置块级按钮 <button type="button" class="btn btn-primary btn-block">按钮 1</button> 设置按钮组 <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div>8.徽章
如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 <span> 元素上即可。 <span class="badge ">徽章</span>9.要创建一个默认的进度条，可以在容器元素上添加 .progress 类，在子元素上添加 progress-bar 类，并设置进度条进度情况
<div class="progress"> <div class="progress-bar" style="width:70%"></div> </div>10.Bootstrap 4 可以很简单的实现分页效果。 要创建一个基本的分页可以在
元素上添加 .pagination 类。然后在 元素上添加 .page-item 类： <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul>11.创建列表组，list-group,ist-group-item
<ul class="list-group"> <li class="list-group-item">First item</li> <li class="list-group-item">Second item</li> <li class="list-group-item">Third item</li> </ul>12.卡片
（1）通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片 <div class="card"> <div class="card-body">简单的卡片</div> </div> （2） 给 <img> 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片： <div class="card" style="width:400px"> <img class="card-img-top" src="img.png" alt=""> <div class="card-body"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text.</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div>13.下拉菜单：dropdown 类用来指定一个下拉菜单 我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。div 元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加dropdown-item 类。
< div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div>14.轮播
carousel 创建一个轮播 carousel-indicators为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。 carousel-inner 添加要切换的图片 carousel-item指定每个图片的内容 carousel-control-prev添加左侧的按钮，点击会返回上一张。 arousel-control-next添加右侧按钮，点击会切换到下一张。 carousel-control-prev-icon与 .carousel-control-prev 一起使用，设置左侧的按钮 carousel-control-next-icon 与 .carousel-control-next 一起使用，设置右侧的按钮 slide切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。 实例： <div id="demo" class="carousel slide" data-ride="carousel"> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg"> </div> <div class="carousel-item"> <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg"> </div> <div class="carousel-item"> <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg"> </div> </div> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> <a> </div>