当前位置： 首页 > news >正文

学会Web UI框架--Bootstrap，快速搭建出漂亮的前端界面

news 2025/9/15 11:46:55

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

所属的专栏：前端泛海
景天的主页：景天科技苑

文章目录

  • Bootstrap
    • 1.Bootstrap介绍
    • 2.简单使用
    • 3.布局容器
    • 4.Bootstrap实现轮播图

Bootstrap

Bootstrap官网

1.Bootstrap介绍

  • 一、什么是Bootstrap？
    bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。
    Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架
    是一个用于快速开发Web应用程序和网站的前端框架
    Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷
    概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架

  • 二、为什么要用Bootstrap
    因为Bootstrap是一个简洁、直观、强悍的前端开发框架，让web开发更迅速、更容易上手。
    封装了常用的css样式，js动态效果。直接调用
    使用bootstrap的宗旨就是 ctrl c / ctrl v

  • 三、如何使用Bootstrap
    1.下载Bootstrap库 https://v4.bootcss.com/(Bootstrap管网)

2.页面中引入库
jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】

bootstrap.css：Bootstrap核心样式【添加到head标签中】
在这里插入图片描述

使用最新版
在这里插入图片描述
在这里插入图片描述

下载
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

并且提供CDN加速在线引入
在这里插入图片描述

解压后包含两个文件夹
在这里插入图片描述

不管是css，还是js，带min的都是压缩过的。生产中使用压缩过的
在这里插入图片描述

解压后，在项目中引入
在这里插入图片描述

2.简单使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">适配IE浏览器的edge浏览器<meta http-equiv="X-UA-Compatible" content="IE=edge">适配手机端，自适应手机屏幕大小，调整分辨率，方便手机观看 <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>bootstrap简单使用</title><script src="jquery.js"></script><!--    引入外部bootstrap样式--><link rel="stylesheet" href="bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css" />
</head>

没做手机屏幕适配之前，很小看不清
在这里插入图片描述

做了手机屏幕适配后，等比例缩放，但是这样缩放可能会导致页面显示不完内容。因此这就需要做响应式
在这里插入图片描述

我们不用设置任何样式，只需引入bootstrap自带的css样式即可

在这里插入图片描述

<body><table class="table table-hover table-striped"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>孙坚</td><td>男</td><td>18</td></tr><tr><td>王涛</td><td>男</td><td>20</td></tr><tr><td>王舒展</td><td>女</td><td>20</td></tr><tr><td>刘亦菲</td><td>女</td><td>24</td></tr></tbody></table>
</body>

浏览器显示效果
在这里插入图片描述

</html>

3.布局容器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"><meta name="viewport" content="width=device-width, initial-scale=1"><style>.c1{background-color:tan;height:100px;}.c2{background-color:pink;height:100px;}.c3{background-color:green;height:100px;}</style>
</head>
<body>
<!-- container-fluid占满整个屏幕 -->

在这里插入图片描述
在这里插入图片描述

<!-- container 左右两边有留白 -->

在这里插入图片描述
在这里插入图片描述

<div class="container-fluid"><div class="row">
<!--        //  col-md-offset-3  栅格偏移,向右偏移3个栅格的意思-->
<!--        //  col-md-6 占6个栅格,默认从左边开始--><div class="col-md-6 c1 col-md-offset-3"><div class="row"><div class="col-md-6 c3"></div></div></div>
<!--        <div class="col-md-8 c2"></div>--></div></div>
<!--<div class="container c1"></div>-->

栅格单位，铺满是12个栅格，各占6个
在这里插入图片描述
在这里插入图片描述

如果是占不满，留空白
在这里插入图片描述

如果两个加起来超过12个，则第二个换行
在这里插入图片描述
在这里插入图片描述

新版的栅格偏移，默认从左边开始，设置了栅格偏移可以从指定栅格开始
在这里插入图片描述
在这里插入图片描述

具体使用方法，可以参照官网使用说明，很详细
在这里插入图片描述

缩小屏幕等分，不会换行
在这里插入图片描述

</body>
<script src="jquery.js"></script>
</html>

4.Bootstrap实现轮播图

轮播图必须引入在bootstrap.js之前引入jQuery.js
设置轮播图轮换图片间隔时间，默认是5秒
在这里插入图片描述

还可以通过js方法控制轮播时间
在这里插入图片描述

轮播图完整代码：

<!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><script src="jquery.js"></script><link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.min.css" /><script src="bootstrap-4.6.2-dist/js/bootstrap.min.js"></script></head><body><divid="carouselExampleCaptions"class="carousel slide"data-ride="carousel"><ol class="carousel-indicators"><lidata-target="#carouselExampleCaptions"data-slide-to="0"class="active"></li><li data-target="#carouselExampleCaptions" data-slide-to="1"></li><li data-target="#carouselExampleCaptions" data-slide-to="2"></li></ol><div class="carousel-inner"><div class="carousel-item active"><img src="1.jpg" class="d-block w-100" alt="..." /><div class="carousel-caption d-none d-md-block"><h5>First slide label</h5><p>Some representative placeholder content for the first slide.</p></div></div><div class="carousel-item"><img src="2.jpg" class="d-block w-100" alt="..." /><div class="carousel-caption d-none d-md-block"><h5>Second slide label</h5><p>Some representative placeholder content for the second slide.</p></div></div><div class="carousel-item"><img src="3.jpg" class="d-block w-100" alt="..." /><div class="carousel-caption d-none d-md-block"><h5>Third slide label</h5><p>Some representative placeholder content for the third slide.</p></div></div></div><buttonclass="carousel-control-prev"type="button"data-target="#carouselExampleCaptions"data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></button><buttonclass="carousel-control-next"type="button"data-target="#carouselExampleCaptions"data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></button></div></body><script>$(".carousel").carousel({interval: 2000,});</script>
</html>

效果，图片轮换播放：
在这里插入图片描述

相关文章：

学会Web UI框架--Bootstrap，快速搭建出漂亮的前端界面

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属的专栏&#xff1a;前端泛海 景天的主页&#xff1a;景天科技苑 文章目录 Bootstrap1.Bootstrap介绍2.简单使用3.布局容器4.Bootstrap实现轮播…...

编程日记 2024/3/14 4:54:05

C语言学习大纲

笔者看了下某二本的C语言考研大纲&#xff0c;供平常学习参考&#xff0c;主要考察知识点: C语言概述 &#xff08;1&#xff09; 了解程序设计语言的语法 &#xff08;2&#xff09; 掌握C语言的特点 &#xff08;3&#xff09; 掌握问题求解的过程数据描述 &#xff08;1&am…...

编程日记 2024/3/14 4:53:04

Unity URP 如何写基础的曲面细分着色器

左边是默认Cube在网格模式下经过曲面细分的结果&#xff0c;右边是原状态。 曲面细分着色器在顶点着色器、几何着色器之后&#xff0c;像素着色器之前。 它的作用时根据配置信息生成额外的顶点以切割原本的面片。 关于这部分有一个详细的英文教程&#xff0c;感兴趣可以看一…...

编程日记 2024/3/14 4:51:02

android pdf框架-8,图片缓存

解码会产生很多图片,滑过后不要显示,如果直接回收,会浪费不少资源. 在没有缓存的情况下,会看到gc还是比较频繁的. 有了缓存后,明显gc少了. 目录 常用的缓存 自定义缓存 显示相关的内存缓存 解码缓存池 内存缓存实现: 解码缓存池实现: 常用的缓存 lrucache,这是最常用…...

编程日记 2024/3/14 4:50:01

UE5.2 SmartObject使用实践

SmartObject是UE5新出的一项针对AI的功能&#xff0c;可为开发者提供如公园长椅、货摊等交互对象的统一外观封装&#xff0c;如UE的CitySample&#xff08;黑客帝国Demo&#xff09;中就运用到了SmartObject。 但SmartObject实践起来较为繁琐&#xff0c;主要依赖于AI及行为树…...

编程日记 2024/3/14 4:49:00

奇舞周刊第521期：实现vue3响应式系统核心-MVP 模型

奇舞推荐 ■ ■ ■ 实现vue3响应式系统核心-MVP 模型 手把手带你实现一个 vue3 响应式系统&#xff0c;代码并没有按照源码的方式去进行组织&#xff0c;目的是学习、实现 vue3 响应式系统的核心&#xff0c;用最少的代码去实现最核心的能力&#xff0c;减少我们的学习负担&…...

编程日记 2024/3/14 4:47:59

Mybatis-plus手写SQL如何使用条件构造器和分页

Mybatis-plus手写SQL如何使用条件构造器和分页插件 前言&#xff1a;在使用mybatis-plus过程中&#xff0c;使用条件构造器和分页插件非常效率的提升开发速度&#xff0c;但有些业务需要使用连表查询&#xff0c;此时还想使用条件构造器和使用分页时应该如何操作呢&#xff1f…...

编程日记 2024/3/14 4:44:56

Vue的table组件合并行方法

/*** param {Array} data - 原始数据集合* param {string} addParamer - 这个是自定义的参数&#xff0c;向每个对象中添加一个参数 按照这个参数的个数进行合并* param {} args - 剩余参数 这个是合并规则 &#xff0c;比如按照时间合并 那就传入对象中的时间参数date&#xf…...

编程日记 2024/3/14 4:42:54

5. C语言字符串处理常用方法

在 C 语言中，字符串是以字符数组的形式表示的，以空字符 \0 结尾。C 语言提供了一系列的字符串处理函数，可以用于字符串的操作、查找、比较等。以下是一些常用的 C 语言字符串处理函数： 1. 字符串定义与初始化 #include <stdio.h> #include <string.h>int mai…...

编程日记 2024/3/14 4:41:53

ts--(入门到离职系列)

TS 与 JS 的区别 TypeScript[4] 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集&#xff0c;而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。-- 官方文档 说人话就是 TS 拓展了 JS 的一些功能&#xff0c;解决了 JS 的一些缺点&#…...

编程日记 2024/3/14 4:34:47

java后端常见问题

java面向对象的特征&#xff0c;如何应用 面向对象编程是利用类和对象的编程思想万物皆成类&#xff0c;对象是类的具体体现&#xff0c;面向对象的三大基础特性&#xff0c;继承封装多态。、封装&#xff1a;封装隐藏了类的具体内部实现机制&#xff0c;可以在不影响使用的情…...

编程日记 2024/3/14 4:33:46

windows系统玩游戏找不到d3dx9_43.dll缺失,无法启动此程序的解决方法

今日&#xff0c;我们要深入讨论d3dx9_43.dll文件的重要性及其缺失问题。最近&#xff0c;我也遇到了这个文件丢失的困扰&#xff0c;因此想借此机会与大家分享如何解决d3dx9_43.dll缺失的问题。 一.电脑d3dx9_43.dll丢失会提示什么&#xff1f; 关于电脑提示d3dx9_43.dll丢失…...

编程日记 2024/3/14 4:27:41

MATLAB中mapminmax函数用法

目录 语法 说明 示例 使用 mapminmax 函数格式化矩阵 mapminmax函数的功能是通过将行最小值和最大值映射到 [-1 1] 来处理矩阵。 语法 [Y,PS] mapminmax(X,YMIN,YMAX) [Y,PS] mapminmax(X,FP) Y mapminmax(apply,X,PS) X mapminmax(reverse,Y,PS) dx_dy mapminmax(d…...

编程日记 2024/3/14 4:25:40

数据结构导航 -- 38篇

数据结构实现代码 线性表 顺序表代码-C-CSDN博客 单链表代码-C-CSDN博客 双链表代码-C-CSDN博客 有序表概述-CSDN博客 栈 栈代码数组实现-C-CSDN博客 栈代码链表实现&#xff08;链栈&#xff09;-C-CSDN博客 队列 队列与环形队列顺序存储代码数组实现-C-CSDN博客 队…...

编程日记 2024/3/14 4:24:38

前端性能优化 ｜ CDN缓存

前言 CDN&#xff08;Content Delivery Network&#xff09;是一种分布式的网络架构&#xff0c;通过在全球各地部署节点服务器来快速传输和分发网络内容。CDN的主要目标是提供快速、可靠的内容传输&#xff0c;以提升用户体验。 本文主要从以下方面讲解CDN 什么是CDNCDN的作…...

编程日记 2024/3/14 4:21:34

【C#语言入门】17. 事件详解（上）

【C#语言入门】17. 事件详解&#xff08;上&#xff09; 一、初步了解事件 定义&#xff1a;单词Event&#xff0c;译为“事件” 通顺的解释就是**“能够发生的什么事情”**&#xff0c;例如&#xff0c;“苹果”不能发生&#xff0c;但是“公司上市”这件事能发生。在C#中事…...

编程日记 2024/3/14 4:18:30

Charles无法打开导出的har文件解决方法

打开出错&#xff1a;MalformedJson: Use JsonReader.setLenient(true) to accept malformed JSON at line1 column 1368184 path $.log.entries[41].request.postData.text 一、解决办法 用json.dumps格式化一下里面内容&#xff0c;保存为新文件再打开 import jsondef modify…...

编程日记 2024/3/14 4:15:28

FFmpeg--FlvPaser源码：解析.flv输出.h264

文章目录 程序功能&#xff1a;函数调用流程&#xff1a;部分FlvParse.h部分FlvParse.cpp 程序功能&#xff1a; 解析flv文件&#xff0c;重写一个h264文件&#xff0c;如输入movie.flv , 输出movie.h264 (只有视频&#xff0c;没有声音) 函数调用流程&#xff1a; 1 Proce…...

编程日记 2024/3/14 4:10:23

【项目笔记】java微服务：黑马头条（day02）

文章目录 app端文章查看&#xff0c;静态化freemarker,分布式文件系统minIO1)文章列表加载1.1)需求分析1.2)表结构分析1.3)导入文章数据库1.3.1)导入数据库1.3.2)导入对应的实体类 1.4)实现思路1.5)接口定义1.6)功能实现1.6.1)&#xff1a;导入heima-leadnews-article微服务&am…...

编程日记 2024/3/14 4:07:20

每天五分钟计算机视觉：图像数据不足带来的问题和解决办法

本文重点 在当今的数字时代，图像数据的应用已经渗透到各个领域，包括但不限于计算机视觉、机器学习、自动驾驶、医疗诊断等。然而，当图像数据不足时，会引发一系列问题，对相关应用产生负面影响。 尤其是计算机视觉领域，图像数据尤为珍贵和稀缺，如果计算机视觉的任务中，如…...

编程日记 2024/3/14 4:06:18

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/7/8 20:58:51

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/9/10 23:16:27

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/7/18 2:05:01

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2025/9/9 23:27:37

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/9/9 10:10:28

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2025/9/11 19:52:30

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2025/9/13 17:42:18

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2025/9/2 17:53:12

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化（Gradient Normalization）​​ (2) ​判别器梯度间隙正则化（Discriminator Gradient Gap Regularization）​​ (3) ​自注意力机制（Self-Attention）​​ 3. 完整损失函数 二…...

编程新知 2025/9/14 0:48:56

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

编程新知 2025/9/2 23:16:23