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

前端框架Bootstrap

news 2025/6/22 14:36:10

前端框架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

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2025/6/20 13:23:30

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

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

编程新知 2025/6/21 2:42:19

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2025/6/21 13:57:34

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2025/6/22 2:37:01

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/6/22 2:57:08

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/6/19 14:22:44

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2025/6/22 5:30:47

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2025/6/22 8:57:24

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2025/6/16 9:12:43

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

编程新知 2025/6/16 8:35:52