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

前端框架Bootstrap

news 2025/9/21 10:03:37

前端框架Bootstrap

该框架已经帮我们写好了很多页面样式，如果需要使用，只需要下载对应文件

直接CV拷贝即可

在使用Bootstrap的时候，所有的页面样式只需要通过修改class属性来调节即可

什么是Bootstrap

Bootstrap是一个开源的前端框架，用于快速构建响应式和移动设备优先的网站或应用程序。
- 它包含了HTML、CSS和JavaScript的模板和工具集，使开发人员能够快速地创建具有一致性和现代外观的页面布局和UI组件。
Bootstrap最初由Twitter的一些工程师创建，旨在简化Web开发的过程。
- 它提供了一个广泛的预定义样式和组件库，可以轻松自定义和扩展，以满足各种需求。
使用Bootstrap，开发人员可以更加专注于网站或应用程序的功能和逻辑，而不必从头开始编写CSS样式和设计页面布局。
- 它提供了响应式布局的支持，使得页面能够自适应不同的设备和屏幕尺寸。
- 此外，Bootstrap还提供了丰富的UI组件(如导航栏、按钮、表单、模态框等)，使开发人员能够轻松地在项目中使用这些现成的组件。
总而言之，Bootstrap是一个强大的开发工具，可帮助开发人员快速搭建出现代化和具备自适应能力的网站或应用程序。

Bootstrap引入

中文文档查询：https://www.bootcss.com/

CDN加速链接

twitter-bootstrap Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

压缩文档链接引入

https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css

https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js

注意

网络连接引入在本地不会提示相关的补充
下载本地文档较为友好

Bootstrap的js代码是基于jQuery的

在使用bootstrap做动态效果时一定要引入jQuery!!!

布局容器

布局容器是指用于组织和排列其他元素的容器或容器类。在前端开发中，常用的布局容器有以下三种：

块级布局容器(Block-Level Layout Container)：

块级布局容器会生成一个块级框，它可以使用display属性设置为"block"、"flex"或者"grid"。常见的HTML元素如、
、

等都是块级布局容器。块级容器会独占一行，并通过CSS属性进行自上而下的垂直排列。

行内布局容器(Inline Layout Container)：

行内布局容器会生成一个行内框，它可以使用display属性设置为"inline"或者"inline-block"。常见的HTML元素如、、等都是行内布局容器。行内容器会水平地从左到右排列，直到行的边缘，然后自动换行。

弹性布局容器(Flexbox Layout Container)：

弹性布局容器是CSS3中的一种新型布局技术，通过定义父元素作为弹性容器，将其子元素称为弹性项。弹性容器通过一系列的属性灵活地控制和调整弹性项的尺寸和位置。常见的属性包括：flex-direction、justify-content、align-items等。弹性布局容器的主要好处是可以实现响应式布局和灵活的排列方式。

留白

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"></script><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script><style>.c1 {height: 1000px;width: 1000px;background-color: red;}.c2 {height: 1000px;width: 1000px;background-color: red;}</style></head>
<body>
<div class="container c1"></div> /*左右两侧有留白*/
<div class="container-fluid c2"></div> /*左右两侧没有留白*/
</body>
</html>

栅格系统

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--  本地 链接 引入方法  --><!--  Websource 文件夹 拷贝到当前文件夹下即可使用  --><script src="Websource\jQuery\node_modules\jquery\dist\jquery.min.js"></script><script src="Websource\Bootstrap\js\bootstrap.min.js"></script><link rel="stylesheet" href="Websource\Bootstrap\css\bootstrap.min.css"><!--  CDN 链接 引入方法  --><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js">// bootstrap </script><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"> // jquery</script><style>.c1 {height: 100px;background-color: red;border: 5px solid black;}.c2 {height: 100px;background-color: green;}</style></head>
<body><div class="container"><div class="row"><div class="col-md-6 c1"></div><div class="col-md-6 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div><div class="col-md-1 c1"></div></div></div></body>
</html>

<div class="row">
写一个 row 就是将所在区域划分成 12 份
<div class="col-md-6"></div>
写一个 col-md-6 获取想要的份数

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。
这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。
例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

排版

bootstrap在设置页面的时候将字体设置成了肉眼可以接受的好看一点的字体。

表单标签

针对form表单，加样式优先考虑form-control

按钮组

颜色

<!-- Standard button -->
<button type="button" class="btn btn-default">(默认样式)Default</button><!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button><!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button><!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button><!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button><!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button><!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(链接)Link</button>

大小

<p><button type="button" class="btn btn-primary btn-lg">(大按钮)Large button</button><button type="button" class="btn btn-default btn-lg">(大按钮)Large button</button>
</p>
<p><button type="button" class="btn btn-primary">(默认尺寸)Default button</button><button type="button" class="btn btn-default">(默认尺寸)Default button</button>
</p>
<p><button type="button" class="btn btn-primary btn-sm">(小按钮)Small button</button><button type="button" class="btn btn-default btn-sm">(小按钮)Small button</button>
</p>
<p><button type="button" class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button><button type="button" class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
</p>

图片

形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

颜色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

清除浮动

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {&:before,&:after {content: " ";display: table;}&:after {clear: both;}
}// Usage as a mixin
.element {.clearfix();
}

图标

span标签

<button type="button" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button><button type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

可以改颜色 - 操作普通文本方法相同
<script>
.c {color:red;}
</script>

图标参考网站:https://fontawesome.com.cn/

前端框架Bootstrap

前端框架Bootstrap 该框架已经帮我们写好了很多页面样式，如果需要使用，只需要下载对应文件直接CV拷贝即可在使用Bootstrap的时候，所有的页面样式只需要通过修改class属性来调节即可什么是Bootstrap Bootstrap是一个开源的前端框架…...

编程日记 2023/11/9 7:48:07

Flink SQL TopN语句详解

TopN 定义（⽀持 Batch\Streaming）： TopN 对应离线数仓的 row_number()，使⽤ row_number() 对某⼀个分组的数据进⾏排序。应⽤场景： 根据某个排序条件，计算某个分组下的排⾏榜数据。 SQL 语法标准&am…...

编程日记 2023/11/9 7:47:06

k8s之数据卷

一，存储卷容器磁盘上的文件的生命周期是短暂的，这就使得在容器中运行重要应用时会出现一些问题。首先，当容器崩溃时，kubelet 会重启它，但是容器中的文件将丢失——容器以干净的状态（镜像最初的状态&#…...

编程日记 2023/11/9 7:45:03

服务器网络

配置通常使用ping查看网络如果能ping通，不能ssh登陆，安装 sudo apt update sudo apt install openssh-server如果已经安装，查看防火墙状态，inactive(不活跃) sudo ufw status sudo ufw allow ssh sudo ufw reload查看ssh状态 s…...

编程日记 2023/11/9 7:44:02

YOLOv8-seg 分割代码详解（一）Predict

前言本文从 U-Net 入手熟悉分割的简单方法，再看 YOLOv8 的方法。主要梳理 YOLOv8 的网络结构，以及 Predict 过程的后处理方法。 U-Net 代码地址：https://github.com/milesial/Pytorch-UNet YOLOv8 代码地址：https://github.com/…...

编程日记 2023/11/9 7:43:00

Docker学习——④

文章目录 1、Docker Image（镜像）2、镜像命令详解2.1 docker rmi2.2 docker save2.3 docker load2.4 docker image inspect2.5 docker history2.6 docker image prune 3、镜像综合实战3.1 离线镜像迁移3.2 镜像存储的压缩与共享 1、Docker Image&#xff…...

编程日记 2023/11/9 7:41:59

Android选项卡TabHost

选项卡主要由TabHost(标签，主人)，TabWidget(微件)和FrameLayout3个组件组成，用于实现一个多标签页的用户界面。 1. TabHost在XML文件中添加： XML布局文件中添加选项卡时必须使用系统id来为各组件指定id属性。 <TabHostandro…...

编程日记 2023/11/9 7:40:58

import QtQuick.Controls 2.15ScrollBar.vertical: ScrollBar {visible: flick1.contentHeight > flick1.heightanchors.right: parent.rightanchors.rightMargin: 40width: 10active: truecontentItem: Rectangle {radius: 6opacity: 0.5color: "#7882A0"} }...

编程日记 2023/11/9 7:39:57

elementui-plus el-tree组件数据不显示问题解决

当前情况: 显示: 注意看右侧的树是没有文字的,数据已经渲染,个数是对的,但就是没有文字, 解决: 对比以后发现是template中的#default{data}没有写大括号导致的所以写上大括号后: 正常显示...

编程日记 2023/11/9 7:37:55

EMR 磁盘挂载解读与磁盘扩容操作

云上的计算实例挂载的存储盘通常可以在线实现磁盘扩容。本文以 AWS EMR 节点的磁盘扩容为例，记录一下具体的操作步骤。在详细介绍前，先将重要的总结发在前面，便于以后查阅： EMR 磁盘分配规则是：第一磁盘（/dev/nvme0n1），必备，大小由控制台的"EBS root volume&qu…...

编程日记 2023/11/9 7:36:53

小程序day04

目标自定义组件创建组件引用组件局部引用全局引用组件的函数定义到metods节点中，梦回vue2. 样式数据，方法，属性下划线开头的称为自定义方法，非下划线开头的都是事件处理函数。神特么，this.datathis.pro…...

编程日记 2023/11/9 7:35:52

哪些人更容易受到网络攻击？

当下，企业的安全已从传统的外部网络安全威胁防御，逐渐延伸到内部威胁防御。很多时候IT基础设施被攻陷不是外部造成，而是内部使然，这些内部威胁要复杂得多且难以管理。那么，哪些员工最脆弱、最有可能给企业组织带来网络…...

编程日记 2023/11/9 7:33:50

sql语句-实体属性有集合怎么批量查询

1、背景前端返回一个实体类，实体类里还有集合。要对集合外的属性查询，还要对集合批量查询，并且属性可能为空。返回给前端的结果是个实体类，实体类里有集合。 2、前端实体类 public class AppletSyncDiseaseInfoBO {// 病害信息…...

编程日记 2023/11/9 7:32:47

临界资源,临界区,通信的干扰问题(互斥),信号量(本质,上下文切换问题,原子性,自身的安全性,操作)

目录引入概念临界资源临界区干扰存在原因互斥信号量引入举例概念介绍表示可用资源数表示等待进程数申请信号量信号量的本质全局变量? 共享内存? 不安全问题 -- 上下文切换原子性信号量自身的安全性原子操作的意义操作引入通信…...

编程日记 2023/11/9 7:31:46

工具介绍——第三方软件远程连接（工具：Rustdesk）

文章目录前言一、使用工具二、开始演示1、拿下目标主机权限后上传文件2、运行目标主机上的rustdesk-1.1.9.exe文件3、目标主机上whoami查看现在的用户4、查找目标主机上连接的文件，并添加连接密码5、目标主机重启rustdesk的应用程序6、本地连接主机前言这里主要…...

编程日记 2023/11/9 7:30:45

【脑机接口算法】EEGNet: 通用神经网络应用于脑电信号

EEGNet: 神经网络应用于脑电信号中文题目论文下载：算法程序下载：摘要1 项目介绍2 EEGNet网络原理2.1EEGNet原理架构2.2FBCCA 算法2.3自适应FBCCA算法 3EEGNet网络实现4结果中文题目论文下载： DOI: 算法程序下载： 地址摘要…...

编程日记 2023/11/9 7:29:44

【会话技术】Cookie和Session的工作流程和区别

Cookie技术 web程序是通过HTTP协议传输的，而HTTP是无状态的，即后续如果还要使用前面已经传输的数据，就还需要重传。这样如果数据量很大的情况下，效率就会大打折扣。Cookie的出现就是为了解决这个问题。 Cookie的工作流程&#x…...

编程日记 2023/11/9 7:27:41

Xmake v2.8.5 发布，支持链接排序和单元测试

Xmake 是一个基于 Lua 的轻量级跨平台构建工具。它非常的轻量，没有任何依赖，因为它内置了 Lua 运行时。它使用 xmake.lua 维护项目构建，相比 makefile/CMakeLists.txt，配置语法更加简洁直观，对新手非常友好&#x…...

编程日记 2023/11/9 7:26:40

红队专题-从零开始VC++C/S远程控制软件RAT-MFC-远程控制软件总结

红队专题招募六边形战士队员[30]远控班第一期课程与远控总结招募六边形战士队员一起学习代码审计、安全开发、web攻防、逆向等。。。私信联系 [30]远控班第一期课程与远控总结一.Bug修复(1)生成路径(2)显示系统版本号二.内存泄露(1)如何检查内存泄露 #define CRTDBG_…...

编程日记 2023/11/9 7:25:38

MyBatis与SQL实用技巧实用语法

数据库SQL技巧数值转字符 <select id"getMaterialsList" resultType"java.util.Map">selectmaterial_id materialId,material_name materialName,unit, specification, CONVERT(unit_price,CHAR) unitPricefrom trace_agriculture_materialwhere …...

编程日记 2023/11/9 7:24:37

7.4.分块查找

一.分块查找的算法思想： 1.实例： 以上述图片的顺序表为例， 该顺序表的数据元素从整体来看是乱序的，但如果把这些数据元素分成一块一块的小区间， 第一个区间[0,1]索引上的数据元素都是小于等于10的， 第二…...

编程新知 2025/9/18 0:10:03

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法配置通过调谐文件来调整相机行为使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包文章来源： http://raspberry.dns8844.cn/documentation 原文网址配置大多数用例自动工作，无需更改相机配置。但是，一…...

编程新知 2025/9/18 19:23:34

【JavaEE】-- HTTP

1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...

编程新知 2025/9/21 0:48:33

VB.net复制Ntag213卡写入UID

本示例使用的发卡器：https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/9/18 20:45:06

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37