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

前端框架Bootstrap

news 2025/11/28 17:57:15

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

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

Flink SQL TopN语句详解

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

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

k8s之数据卷

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

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

服务器网络

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

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

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

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

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

Docker学习——④

文章目录 1、Docker Image&#xff08;镜像&#xff09;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(标签&#xff0c;主人)&#xff0c;TabWidget(微件)和FrameLayout3个组件组成&#xff0c;用于实现一个多标签页的用户界面。 1. TabHost在XML文件中添加&#xff1a; XML布局文件中添加选项卡时必须使用系统id来为各组件指定id属性。 <TabHostandro…...

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

qml添加滚动条

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节点中&#xff0c;梦回vue2. 样式 数据&#xff0c;方法&#xff0c;属性 下划线开头的称为自定义方法&#xff0c;非下划线开头的都是事件处理函数。 神特么&#xff0c;this.datathis.pro…...

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

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

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

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

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

1、背景 前端返回一个实体类&#xff0c;实体类里还有集合。要对集合外的属性查询&#xff0c;还要对集合批量查询&#xff0c;并且属性可能为空。返回给前端的结果是个实体类&#xff0c;实体类里有集合。 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、查找目标主机上连接的文件&#xff0c;并添加连接密码5、目标主机重启rustdesk的应用程序6、本地连接主机 前言 这里主要…...

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

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

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

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

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

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

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

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

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

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2025/11/26 8:55:54

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2025/11/21 6:24:45

MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...

编程新知 2025/9/16 21:01:58

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/10/25 11:57:30

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/11/26 18:58:29

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

编程新知 2025/11/26 10:16:32

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/11/27 13:50:38

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2025/11/17 7:30:28

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/11/17 5:58:32

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/9/30 5:23:30