bootstrap的使用

一.什么是bootstrap

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的应用

1. 将引入 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轴的排布情况

4. 文字排版

     Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式
   

5. 颜色

     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>