Bootstrap框架最新V5 快速入门&直通

于 2024-06-03 23:50:56 发布
阅读量2.7k 收藏 23
点赞数 27
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： bootstrap 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qingwan_91/article/details/139424160

目录

Bootstrap - 前言

Bootstrap - 下载

Bootstrap - 使用

Bootstrap - 学习

Bootstrap - 栅格系统

Bootstrap - 全局样式

Bootstrap - 组件(Coponents)

Bootstrap - 字体图标

Bootstrap - 前言

        Bootstrap是由Twitter公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果。那么为什么选择使用Bootstrap框架呢？ 

  • 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
  • 浏览器支持：所有的主流浏览器都支持 Bootstrap。
  • 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
  • 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。

        Bootstrap中文官网：https://www.bootcss.com/

Bootstrap - 下载

        了解了为什么要使用Bootstrap后，我们首先需要下载Bootstrap，下载的步骤也很简单，直接在官网下载后使用即可，步骤如下：

        Bootstrap中文官网：https://www.bootcss.com/

        使用步骤：

  1. 下载：Bootstrap V5中文文档->进入中文文档->下载->下载Bootstrap生产文件
  2. 使用

        图文教程：

  1. 打开Bootstrap中文官网-点击Bootstrap V5中文文档
  2. 点击进入中文文档
  3. 点击下载-下载Bootstrap生产文件

        这样我们的下载工作就完成了，我们只需要解压后导入至项目开始使用即可

Bootstrap - 使用

        下载完Bootstrap后，我们就要开始学习如何使用了，使用步骤如下，

  1. 导入我们需要使用的Bootstrap，本篇文章导入的是bootstrap-5.3.0-alpha1-dist\css\bootstrap.min.css（文件由上述下载的压缩包后解压所得）

  2.  引入Bootstrap CSS文件

    <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">

  3.  调用类名：container：响应式布局版心类

    <div class="container">测试</div>

        让我们打开VsCode写一段代码来体验一下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>使用方法</title>
  <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  <style>
    div {
      height: 50px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <div class="container">测试</div>
</body>
</html>

        本段代码简单的做了一个版心居中的响应式效果，我们打开浏览器来看一下效果：

        此时为浏览器全屏展示，版心居中的div大小为960*50像素，接下来让我们缩小浏览器展示的大小，看一下div的大小是否会发生改变

        此时我将浏览器的展示宽度大幅降低，版心居中的div大小改变为540*50，说明Bootstrap确实达到了响应式布局的效果

        到此处，我们已经了解了Bootstrap的下载-使用，接下来我们开始系统化的对Bootstrap进行学习

Bootstrap - 学习

Bootstrap - 栅格系统

        Boostrap的栅格系统是指将整个网页的宽度分成12等份，每个盒子占用的对应的份数，例如：一行排4个盒子，则每个盒子占3份即可（12 / 4 = 3）

        需要注意的是视口区间，版心宽度要不同，因为我们的元素是放在版心里的，只有版心尺寸不一样了，内容才可能不一样，这些Bootstrap已经内置好了，下图是Bootstrap 5不同视口宽度需调用的类名前缀：

        常用布局类

  • col-"-"：列（例如：col-xxl-3）
  • row：行

        下面我们来用栅格系统做一个简单的案例，使视口宽度在某个范围显示4个盒子，某个范围又显示2个盒子......

        代码如下：

<!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>栅格系统</title>
  <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
</head>
<body>
  <!-- 
    视口宽度大于等于1200px，一行排4个盒子 → 3
    视口宽度大于等于768px，一行排2个盒子
    视口宽度大于等于576px，一行排1个盒子
   -->
   <!-- 版心 → row → 子级 -->
   <div class="container">
    <div class="row">
      <div class="col-xl-3 col-md-6 col-sm-12">1</div>
      <div class="col-xl-3 col-md-6 col-sm-12">2</div>
      <div class="col-xl-3 col-md-6 col-sm-12">3</div>
      <div class="col-xl-3 col-md-6 col-sm-12">4</div>
    </div>
   </div>
</body>
</html>

        通过这个代码可以实现：

            视口宽度大于等于1200px，一行排4个盒子

            视口宽度大于等于768px，一行排2个盒子

            视口宽度大于等于576px，一行排1个盒子

        补充：在大家的VsCode中，col-md-6这类的Bootstrap代码是没有提示的，可以通过下面这个插件来获取提示，可以下载一下，扩展-搜索-下载即可：

Bootstrap - 全局样式

        全局样式就是给我们的网页元素调用类名，用来美化网页元素，下面我们来对全局样式进行学习：

  • Button类
    • btn：默认样式-清除按钮默认的颜色、边框线等等
    • btn-success：成功
    • btn-warning：警告
    • ......
    • 按钮尺寸：btn-lg / btn-sm

        让我们用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>按钮样式</title>
  <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
</head>
<body>
  <button class="btn btn-success btn-sm">按钮1</button>
  <button class="btn btn-warning btn-lg">按钮2</button>
</body>
</html>

        下图为浏览器显示效果：

        这里可以看到我们使用Bootstrap美化的成功按钮和警告按钮，并且让按钮的尺寸发生改变，Bootstrap可以做的样式不止如此，我们可以打开官方文档，找到符合自己需求的样式，Ctrl + cv即可，那么官方文档在哪找呢？

        打开官方网站-中文文档：

        这里就是按钮的所有样式案例了，根据自己的需要使用就可以，接下来我们学习一下表格类的样式

  • 表格类
    • table：默认样式
    • table-striped：隔行变色
    • table-success：表格颜色
    • ......

        让我们用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>表格样式</title>
    <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  </head>
  <body>
    <table class="table table-striped">
      <tr class="table-success">
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>20</td>
        <td>女</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>18</td>
        <td>男</td>
      </tr>
      <tr>
        <td>赵六</td>
        <td>20</td>
        <td>女</td>
      </tr>
    </table>
  </body>
</html>

        让我们打开浏览器看看效果：

        可以看到隔行变色、表格颜色都已经实现了，还有很多相关的类，也是一样，根据官方提供的文档选择即可

Bootstrap - 组件(Coponents)

        现在让我们开始对组件的学习，组件可以帮助我们更快的开发网页，那么什么是组件呢？组件就是对通用功能和效果的封装，封装的内容包含HTML、CSS、JS，类似警告框、轮播图之类的效果都可以通过组件直接完成，那么如何使用组件呢？

  1. 引入样式表
  2. 引入js文件
  3. 复制结构，修改内容

        其中第二部引入js文件，如果你的功能没有动态需求，可以省略，接下来我们对不需要动态功能（Navbar导航）和需要动态（Carousel轮播图）进行代码演示：

<!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>组件</title>
  <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  <style>
    .bg-body-tertiary {
      background-color: pink !important;
    }
  </style>
</head>
<body>
  <!-- 导航 -->
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">首页</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">悠然境</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">图片</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">视频</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 轮播图 -->
  <div id="carouselExampleIndicators" class="carousel slide">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="./images/banner_1.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="./images/banner_2.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="./images/banner_3.jpg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="./images/banner_4.jpg" class="d-block w-100" alt="...">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>

  <script src="./Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

        打开浏览器，效果如图所示：

Bootstrap - 字体图标

        最后，我们来学习Bootsrap的字体图标，首先我们要先下载：导航/Extend：图标库->安装->下载安装包->bootstrap-icons1.X.X.zip

        使用：

  1. 复制fonts文件夹到项目目录
  2. 网页引入bootstrap-icons.css文件
  3. 调用CSS类名（图标对应的类名）

        好了，那么让我们用代码体验一下吧：

        首先我们在官网图标库找到需要的图标，点开，复制粘贴，修改样式即可

        代码如下：

<!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>字体图标</title>
    <link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
    <style>
      .bi-android2 {
        font-size: 100px;
        color: green;
      }
    </style>
  </head>
  <body>
    <span class="bi-android2"></span>
  </body>
</html>

        效果如图：

        到这里，我们就彻底完成了对Boostrap的学习，该框架能大大的提升前端工程师的开发效率，如果本篇文章对你提供了帮助，可以点个收藏和关注~

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值