首页 > 其他分享 >Bootstrap框架最新V5 快速入门&直通

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

时间：2024-06-03 23:58:56浏览次数：13  
标签：浏览器 样式 Bootstrap V5 按钮 直通 我们 下载

目录

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的学习，该框架能大大的提升前端工程师的开发效率，如果本篇文章对你提供了帮助，可以点个收藏和关注~

标签：浏览器,样式,Bootstrap,V5,按钮,直通,我们,下载
From： https://blog.csdn.net/qingwan_91/article/details/139424160

相关文章

  • FIREYE 45UV5-1101 紫外线火焰探测器
    FIREYE45UV5-1101紫外线火焰探测器的详细介绍如下：基本信息：品牌：FIREYE型号：45UV5-1101类型：紫外线火焰探测器技术特点：检测原理：采用紫外线技术，能够检测火焰中的紫外线辐射，光学范围通常在190至250纳米之间。灵敏度与可靠性：高度的灵敏度和可靠性，能够在各种恶劣环境下稳定......
  • YOLOv5训练数据集的配置文件格式与使用技巧
    文章目录一·概述二·配置文件说明2.1官方配置文件解析2.2自定义数据集配置文件2.3其他格式指定数据集路径2.4多个数据集路径指定三·总结注意事项一·概述本文档主要记录YOLOv5算法在进行模型训练前，关于加载数据集的配置文件的说明。默认情况下，YOLOv5......
  • Steinberg Dorico Pro for Mac(乐谱编写软件)v5.1.40版
    SteinbergDoricoProforMac是一款专业级的音乐制谱软件，它提供了全面而强大的功能，旨在满足作曲家、编曲家、出版商和乐谱制作人的需求。SteinbergDoricoProforMac(乐谱编写软件)软件地址DoricoPro采用了先进的音乐制谱引擎，能够快速而准确地将音符、符号和音乐元素排版......
  • 《Java开发及前端最全面试题-Offer直通车》目录
    Java开发是需求最广，工资高的细分领域，同时也是会的人最多，有的公司招1个Java开发，要面试几十甚至上百面试者，同时要求很高，要求通晓技术栈很多及很深深度。如果你正准备面试，想要脱颖而出，那么《Java开发及前端最全面试题-Offer直通车》是你的不二选择。本书汇集了多篇超过1万字的精......
  • 【jetson nano】yolov5环境配置tensorrt部署加速
    安装pytorchNano上预装的Jetpack版本为4.6.1，Python为3.6.9，CUDA环境为10.2。在PyTorchforJetson中可以下载不同版本的torch，torch<=1.10.0。1安装torch1.8.0#substitutethelinkURLandwheelfilenamefromthedesiredtorchversionabovewgethttps://nvidia.box.com......
  • 6公里远距离视频传输，飞睿智能无线CV5200模组方案，设备稳定连接通信
    随着科技的不断进步，物联网（IoT）和智能设备正逐渐渗透到我们生活的方方面面。在这一进程中，远距离无线通信成为推动行业发展的关键因素。智能控制、远程无线传输是实现设备间的协作场景的关键，CV5200模组通过无线WiFi通信技术，为智能设备间的无缝连接和数据交换提供了可能。飞睿智......
  • WCP知识协作系统v5.1.6版本-更新介绍
    下载地址腾讯微云https://share.weiyun.com/wTfASY76新版本功能随着WCP知识管理系统v5.1.6版本的发布，我们为您带来了一系列旨在提升用户体验、增强智能对话能力以及优化系统性能的更新。此版本不仅修复了多项已知问题，还引入了多项新功能，确保您的知识管理之旅更加高效、流畅。......
  • Ubuntu22.04安装YOLOv5,anaconda,cuda,pycharm步骤
     主要是牛马打工人最近突然接到通知，说要做一个人脸识别的功能，然后我作为“nm”就被迫接了，有一说一，这玩意儿真是ex,因为我笨，看不懂，而且大多数都是因为，真nm服了,为了以后的打工牛，少走弯路，我就想着做一个步骤一.先准备准备（在主目录下）因为看教程时总是纠结安装的路径，之前看教......
  • OpenStack虚拟化PCI设备直通
    1、确定主板和CPU都支持虚拟化技术，在BIOS将VT-d（芯片组、IO）、VT-x（CPU）设置成启用。2、确保BIOS中启用了SR-IOV。3、内核启动参数设置，开启IOMMU。#检查系统是否启用iommucat/proc/cmdline|grepiommu#编辑/etc/default/grub文件#X86架构设置为GRUB_CMDLINE_LINUX_DEFAU......
  • 【已解决】Swagger配置问题—Failed to start bean ‘documentationPluginsBootstrapp
    项目场景：swagger-demo编写SwaggerConfig.java后运行SwaggerDemoApplication.java不能成功问题描述ErrorstartingApplicationContext.Todisplaytheconditionsreportre-runyourapplicationwith'debug'enabled.org.springframework.context.ApplicationCont......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99