高级特效开发

最新推荐文章于 2024-06-02 00:29:31 发布

qq_58193995

最新推荐文章于 2024-06-02 00:29:31 发布

阅读量171

点赞数

文章标签：开发语言前端

本文链接：https://blog.csdn.net/qq_58193995/article/details/129488546

版权

bootstrap 简介与安装

官网：https://getbootstrap.com/
中文网: https://v5.bootcss.com/docs/getting-started/introduction/

bootstrap 的 github 地址：https://github.com/twbs/bootstrap

bootstrap 是一个用于制作页面界面的框架
复制/粘贴!经典!

框架: 由第三方提供一个标准和规范，再由开发人员自行填充内容

基于已存在的框架,可以到达快速开发项目的目的!
很多的实际应用例子可以直接使用! 1.复制 2.使用(粘贴) 3.适当的修改

bootstrap

响应式布局

响应式布局就是根据 pc 屏幕宽度，切换不同页面布局的一种布局方式，这里可以查看 bootstrap 官网在不同屏幕宽度下的表现

bootstrap 是使用断点来完成响应式布局的

断点 breakPoint

sm md lg xl xxl

断点是 bootstrap 面向不同屏幕宽度，预制好的媒体查询

通常的将，断点，代表的就是不同的屏幕宽度

bootstrap 中如何体现断点，在 class 中，添加不同断点的名称，可以采用不同断点的样式

<!-- breakpoint 待选值:
  - sm
  - md
  - lg
  - xl
  - xxl


-->
<!-- 语法：   row-cols-{Breakpoints}-{number} -->
<!-- 对应断点下，显示不同的列 -->

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
    <div class="col bg-light">col</div>
    <div class="col bg-danger">col</div>
    <div class="col bg-light">col</div>
    <div class="col bg-light">col</div>
  </div>
</div>

布局容器

通常是页面的根节点，使用 class="container" 来设置布局容器

布局容器受断点影响，可以设置不同断点上的容器，具体可查表：

https://getbootstrap.com/docs/5.0/layout/containers/

网格布局

将内容进行行列分布的布局方式就叫网格布局

bootstrap 中网格布局的灵魂样式就是行：row，列：col

<!-- 
   网格布局：实际上可以类比着表格布局进行学习！
   注意：只是类比学习，本质上网格布局！比表格布局更好，更强大，更灵活！
 -->
<!-- 
  表格布局中存在三个元素：
    1.表格容器（table） 2.行（tr） 3.列（td）  html标签
  网格布局中存在三个元素：
    1.布局容器（container） 2.行（row）  3.列（Colum）  bootstrap提供的类名


 -->
<!-- 网格布局的一行最多只能只能有 12 列  如果一行超过12列则自动换行！前提是每列占据确定的份数-->
<!-- row元素本身是一个flex布局 -->
<!-- 官网例子 -->
<h5>1.网格布局基本使用</h5>
<!-- text-center 容器中文本排列方式类  -->
<!-- style  text-align:center -->
<div class="container text-center">
  <!-- div ==> 行 -->
  <div class="row">
    <!-- class==> col 列-->
    <div class="col bg-danger">Column</div>
    <div class="col bg-info">Column</div>
    <div class="col bg-warning">Column</div>
    <div class="col bg-warning">Column</div>
  </div>

  <div class="row">
    <div class="col bg-danger">Column</div>
    <div class="col bg-info">Column</div>
    <div class="col bg-warning">Column</div>
    <div class="col bg-warning">Column</div>
  </div>
</div>

<h5>2.单独指定每一列所占份数 语法:col-{number} number:1-12</h5>
<!-- 
  注意：如果某一列未设置固定分数则自动对其分配剩余空间
 -->
<div class="container">
  <div class="row">
    <div class="col-6 bg-danger">hello1</div>
    <div class="col-5 bg-info">hello2</div>
    <div class="col bg-dark">hello3</div>
  </div>
</div>

<h5>3.指定一行中列的个数 row-cols-{number}</h5>
<div class="container">
  <div class="row row-cols-6">
    <div class="col">col1</div>
    <div class="col">col2</div>
    <div class="col">col3</div>
    <div class="col">col3</div>
    <div class="col">col3</div>
    <div class="col">col3</div>
    <div class="col">col3</div>
  </div>
</div>

<h5>4.边框 border 类</h5>
<!-- bootstrap框架   左右  left  right    被替换成了   start  end -->
<div class="container text-start">
  <div class="row">
    <div class="col border">col1</div>
    <div class="col border">col2</div>
    <div class="col border">col3</div>
  </div>
</div>

<h5>5.单元格嵌套</h5>
<div class="container text-center">
  <div class="row">
    <div class="col bg-danger">
      <div class="row">
        <div class="col-auto">child</div>
        <div class="col-1">2</div>
      </div>
    </div>
    <div class="col">col2</div>
    <div class="col">col3</div>
  </div>
</div>

<h5>6.单元格间距 gx-{number} gy-{number}</h5>
<!-- 
    gx-{nunber}  决定一行中每一个单元格的内容与边框之间的间距

    gy-{number}  决定一行中所有表格的上下间距

    number的取值范围 1-5

    gy-*  gx-* 加给row元素 
 -->

<div class="container">
  <!-- bootstrap中 很多的类，看似重复！看似类似的东西，但是其功能不一样 -->
  <!-- 
    比如： row  ==》 决定该元素是否是一个网格中行元素
          row-cols-{number}  ==》 决定该行元素中有最多的列数值

        

   -->
  <!-- gy-* 所决定同行的列元素自动换行后，的上下间距！ -->
  <div class="row gy-5">
    <div class="col-6 bg-info">column1</div>
    <div class="col-6 bg-danger">column2</div>
    <div class="col-6 bg-danger">column2</div>
    <div class="col-6 bg-danger">column2</div>
  </div>
</div>

<h1>断点 ： 关于列元素的断点份数指定 根据断点指定每一列所占份数</h1>
<!-- 断点 ： 关于列元素的断点分数指定 -->
<!-- 语法：  col-{breakpoint}-{number} -->
<!-- 

  breakpoint待选值：  
      -  sm
      -  md
      -  lg
      -  xl
      -  xxl


 -->
<div class="container text-center">
  <div class="row">
    <!-- col-md-2 类什么时候会生效？ 当屏幕到达指定断点时 md 生效-->
    <!-- col-lg-10 类什么时候会生效？当屏幕到达指定断点时 lg 生效 -->
    <div class="col col-md-2 col-lg-10 bg-danger">colmun1</div>
    <div class="col bg-dark">colmun2</div>
  </div>
</div>

<h1>列元素的自动宽度</h1>
<!-- col-auto -->
<div class="container">
  <div class="row">
    <div class="col-auto bg-danger">child112313213231</div>
    <div class="col-auto bg-success">child24654564646</div>
    <div class="col bg-info accordion">child24654564646</div>
  </div>
</div>

网格的横向布局

<!-- 单元格的横向布局 -->
<!-- row 默认是一个弹性容器  利用设置主轴的对齐方式即可 -->
<!-- 
  在原生的css样式中，可以利用flex布局，对弹性盒在主轴上的元素进行排列方式的定义！

  div {
    display：flex；
    justify-content：start  ||  end ||  space-between....
  }


 -->
<!-- 关注点在行上 -->
<!-- 语法：  justify-content-{value} -->
<div class="container text-center">
  <div class="row justify-content-start border">
    <div class="col-4 bg-danger">One of two columns</div>
    <div class="col-4 bg-dark">One of two columns</div>
  </div>
  <div class="row justify-content-center border">
    <div class="col-4 bg-success">One of two columns</div>
    <div class="col-4 bg-primary">One of two columns</div>
  </div>
  <div class="row justify-content-end border">
    <div class="col-4 bg-info">One of two columns</div>
    <div class="col-4 bg-danger">One of two columns</div>
  </div>
  <div class="row justify-content-around border border-5">
    <div class="col-4 bg-success">One of two columns</div>
    <div class="col-4 bg-info">One of two columns</div>
  </div>
  <div class="row justify-content-between border border-5">
    <div class="col-4 bg-danger">One of two columns</div>
    <div class="col-4 bg-info">One of two columns</div>
  </div>
  <div class="row justify-content-evenly border border-5">
    <div class="col-4 bg-primary">One of two columns</div>
    <div class="col-4 bg-danger">One of two columns</div>
  </div>
</div>

<div>----------------------------------</div>

<!-- 单元格的纵向布局 -->
<!-- 关注点在每一列上 设置弹性元素在侧轴上的对齐方式 -->
<!-- 语法： align-items-{value}  控制所有的单元格的纵向排列方式 -->

<div class="container text-center">
  <div class="row align-items-start border border-5" style="height: 300px">
    <div class="col bg-secondary">One of three columns</div>
    <div class="col bg-danger">One of three columns</div>
    <div class="col bg-dark">One of three columns</div>
  </div>
</div>

<div>-------------------------------</div>
<!-- 语法：  align-self -->
<div class="container text-center">
  <div class="row border border-5" style="height: 300px">
    <div class="col align-self-start">One of three columns</div>
    <div class="col align-self-center">One of three columns</div>
    <div class="col align-self-end">One of three columns</div>
  </div>
</div>

display

    display语法
    d-{value} || d-{breakpoint}-{value}
    value待选值：
        none
        inline
        inline-block
        block
        grid
        table
        table-cell
        table-row
        flex
        inline-flex


<!-- 普通用法 -->
<div class="d-block">hello world！</div>
<span>span元素</span>
<!-- 断点+display -->
<!-- xs断点中显示  sm断点下隐藏  lg断点下又显示 -->

<!-- 需求：有一个盒子
  在正常情况下是显示的状态   200*200  黄色的盒子
  在md断点下隐藏  
  在lg断点下又显示   300*300  红色的盒子

-->

<div class="box1 d-block d-md-none"></div>
<div class="box2 d-none d-lg-block"></div>

border

<div>-------------</div>
<span class="border border-primary" style="--bs-border-opacity: 0.1"></span>
<span class="border border-primary-subtle"></span>
<span class="border border-secondary"></span>
<span class="border border-secondary-subtle"></span>
<span class="border border-success"></span>
<span class="border border-success-subtle"><