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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/676905.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【YOLOv5/v7改进系列】引入Slimneck-GSConv

【YOLOv5/v7改进系列】引入Slimneck-GSConv

一、导言 GSConv旨在平衡模型的准确度与速度&#xff0c;针对自动驾驶车辆中目标检测任务设计。从类脑研究中得到的直观理解是&#xff0c;具有更多神经元的模型能够获得更强的非线性表达能力。但是&#xff0c;不容忽视的是生物大脑处理信息的强大能力和低能耗远远超过计算机…
阅读更多...
【Linux】Linux项目自动化构建工具——make/Makefile

【Linux】Linux项目自动化构建工具——make/Makefile

1.背景 会不会写makefile&#xff0c;从一个侧面说明了一个人是否具备完成大型工程的能力一个工程中的源文件不计数&#xff0c;其按类型、功能、模块分别放在若干个目录中&#xff0c;makefile定义了一系列的 规则来指定&#xff0c;哪些文件需要先编译&#xff0c;哪些文件需…
阅读更多...
前端框架前置知识之Node.js：fs模块、path模块、http模块、端口号介绍

前端框架前置知识之Node.js：fs模块、path模块、http模块、端口号介绍

什么是模块&#xff1f; 类似插件&#xff0c;封装了方法 / 属性 fs 模块- 读写文件 代码示例 // 1. 加载 fs 模块对象 const fs require(fs) // 2. 写入文件内容 fs.writeFile(./test.txt, hello, Node.js, (err) > {if (err) console.log(err) //若 err不为空&#xf…
阅读更多...
Linux的网络配置

Linux的网络配置

查看网络配置命令 一、查看所有活动的网络接口信息 ifconfig ifconfig 展示的是当前设备正在工作的网卡&#xff08;启动的设备&#xff09; ifconfig -a 展示所有的网络设备 ifconfig ens33 查看指定网卡设备 ifconfig ens33 down 关闭网卡 或者 ifdown ens33 &#xff0…
阅读更多...
Java集合概述

Java集合概述

分类 分为两大类&#xff1a;Collection接口类和Map接口类 这两个接口都继承自一个共同的接口&#xff1a;Iterable接口&#xff0c;意为可迭代的 Iterable接口当中有一个Iterator迭代器接口对象&#xff0c;作为接口的变量&#xff08;public static final修饰&#xff09;…
阅读更多...
MySQL—约束—外键约束中删除和更新行为（基础）

MySQL—约束—外键约束中删除和更新行为（基础）

一、引言 上一个博客讲解并演示给字段加外键约束&#xff0c;以及通过外键来保证数据的一致性和完整性。我们一旦为子表 emp 字段 dept_id 添加外键关联之后&#xff0c;再去删除父表的数据之后&#xff0c;判断当前父表的这条数据是否在子表关联关系。如果存在&#xff0c;则不…
阅读更多...
11.6 归并排序

11.6 归并排序

目录 11.6 归并排序 11.6.1 算法流程 11.6.2 算法特性 11.6.3 链表排序 11.6 归并排序 归并排序&#xff08;merge sort&#xff09;是一种基于分治策略的排序算法&#xff0c;包含图 11-10 所示的“划分”和“合并”阶段。 划分阶段&#xff1a;通过递归不断地…
阅读更多...
vue前端实现页面禁止缩放 前端适配问题处理 前端项目多端适配解决方案

vue前端实现页面禁止缩放 前端适配问题处理 前端项目多端适配解决方案

在前端项目中，如果一个系统页面可以缩放可能会导致多种异常情况，这些异常情况涉及到页面布局、元素尺寸、事件触发、响应式设计和用户体验等方面。 1.布局错乱：页面元素在缩放后可能会出现错位、重叠或部分隐藏的情况，导致页面布局混乱，影响用户对页面内容的理解和操作。这…
阅读更多...
接口签名和postman预处理生成签名

接口签名和postman预处理生成签名

nestjs后端代码 controller Get(md5hmacSHA1b64)postMd5hmacSHA1b64(Req() request: Request, Query() query) {// 获取GET请求参数const queryParamsMap new Map(Object.entries(query));return this.handleMd5hmacSHA1b64(queryParamsMap, request);}Post(md5hmacSHA1b64)U…
阅读更多...
达梦数据库相关SQL及适配Mysql配置总结

达梦数据库相关SQL及适配Mysql配置总结

&#x1f353; 简介&#xff1a;java系列技术分享(&#x1f449;持续更新中…&#x1f525;) &#x1f353; 初衷:一起学习、一起进步、坚持不懈 &#x1f353; 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正&#x1f64f; &#x1f353; 希望这篇文章对你有所帮助,欢…
阅读更多...
ApiJson简单使用

ApiJson简单使用

前言 最近在正式迭代中插入了一个大屏演示项目&#xff0c;因为后端开发人员任务都安排满了&#xff0c;而演示项目逻辑比较简单&#xff0c;大多是直接查表就能搞定&#xff0c;所以只能想办法让前端直接和数据库交互&#xff0c;增加开发速度。在找工具时发现了ApiJson。尝试…
阅读更多...
C语言学习之结构体

C语言学习之结构体

结构体&#xff1a; c语言---提供的一种方式&#xff0c;可以让用户自定义数据类型&#xff0c;用于处理复杂的数据类型。 struct 结构体名 { 成员表列 }; 构造一个结构体 结构体变量的引用: 方法: 结构体变量名.成员名 . 结构体成员运算符 //表示 从属关系 s.name //表…
阅读更多...
MySQL-权限管理（二）

MySQL-权限管理（二）

一 host中的含义 /usr/local/mysql/bin/mysql -pLXYlxy2:024.#8u} -S /data/mysql/tmp/mysqld.sock select user,host,authentication_string from mysql.user; %:主要允许从任何主机连接到MySQL服务器&#xff0c;即外部连接localhost: 代表只允许本地主机连接到MySQL服务器&…
阅读更多...
SpringBoot——整合Servlet的三大组件：过滤器（Filter）

SpringBoot——整合Servlet的三大组件：过滤器（Filter）

目录 过滤器 一、用过滤器检查用户是否登录 LoginFilter自定义过滤器 FilterConfig配置类 FilterController控制器 SpringbootFilterApplication启动类 二、用过滤器统计资源访问量 LoginFilter FilterController 在开发SpringBoot项目时&#xff0c;开发人员经常需…
阅读更多...
使用Obfuscar 混淆WPF(Net6)程序

使用Obfuscar 混淆WPF(Net6)程序

Obfuscar 是.Net 程序集的基本混淆器&#xff0c;它使用大量的重载将.Net程序集中的元数据&#xff08;方法&#xff0c;属性、事件、字段、类型和命名空间的名称&#xff09;重命名为最小集。详细使用方式参见&#xff1a;Obfuscar 在NetFramework框架进行的WPF程序的混淆比较…
阅读更多...
乡村振兴的乡村旅游品质提升：提升乡村旅游服务质量，打造乡村旅游品牌，增强乡村旅游吸引力，打造具有旅游特色的美丽乡村

乡村振兴的乡村旅游品质提升：提升乡村旅游服务质量，打造乡村旅游品牌，增强乡村旅游吸引力，打造具有旅游特色的美丽乡村

目录 一、引言 二、提升乡村旅游服务质量 1、完善基础设施建设 2、提升服务人员素质 3、规范服务流程 三、打造乡村旅游品牌 1、挖掘乡村文化特色 2、打造特色旅游产品 3、加强品牌宣传和推广 四、增强乡村旅游吸引力 1、创新旅游体验方式 2、打造旅游精品线路 3、…
阅读更多...
【NOI】C++程序结构入门之循环结构二-for循环

【NOI】C++程序结构入门之循环结构二-for循环

文章目录 前言一、for循环1.导入2.语法3.使用场景4.条件控制5.小结 二、例题讲解问题&#xff1a;1264 - 4位反序数问题&#xff1a;1085 - 寻找雷劈数问题&#xff1a;1057 - 能被5整除且至少有一位数字是5的所有整数的个数问题&#xff1a;1392 - 回文偶数&#xff1f;问题&a…
阅读更多...
Windows下设置pip代理(proxy)

Windows下设置pip代理(proxy)

使用场景 正常网络情况下我们安装如果比较多的python包时&#xff0c;会选择使用这种 pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple --trusted-hostpypi.tuna.tsinghua.edu.cn 国内的镜像来加快下载速度。 但是&#xff0c;当这台被限制上…
阅读更多...
Python 图书馆管理系统（MySQL数据库） 有GUI界面 【含Python源码 MX_032期】

Python 图书馆管理系统（MySQL数据库） 有GUI界面 【含Python源码 MX_032期】

使用python3&#xff0c;PyQt5&#xff0c;MySQL数据库搭建 主要功能&#xff1a; 用户注册、登录、修改密码、用户管理存储图书信息、采购增加和淘汰删除功能、租借功能实现图书采购、淘汰、租借功能。实现查询图书信息、采购和淘汰、库存、和租借情况实现统计图书的采购、库…
阅读更多...
【FPGA】Verilog：全加器与半加器 | Full Adder | Half Adder

【FPGA】Verilog：全加器与半加器 | Full Adder | Half Adder

0x00 全加器（Full Adder） 值的加法运算逻辑电路，全加器不仅可以包括输入值，还可以将进位值纳入加法运算，是实现各种运算电路的基本运算电路。输出由 sum (S) 和 carry (C) 组成，加法运算中产生的进位称为 carry out ，从前一位传递过来并需纳入当前位加法运算的进位称为…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站