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

将引入 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 可以很简单的实现分页效果。
要创建一个基本的分页可以在

元素上添加 .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>

原文地址：https://blog.csdn.net/weixin_44859744/article/details/96861249

一.什么是bootstrap

二.bootstrap的应用

相关推荐