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

编程笔记 html5cssjs 014 网页布局框架

news 2025/12/9 7:35:26

编程笔记 html5&css&js 014 网页布局框架

  • 一、Bootstrap简介
  • 二、使用Bootstrap布局

网页布局不只用HTML，还要用CSS和JAVASCRIPT等技术完成,这里暂时简单了解一下Bootstrap。

一、Bootstrap简介

这是一个开源的前端框架，由Twitter的前端工程师Mark Otto和Jacob Thornton共同开发。它提供了一套用于快速开发响应式网站和Web应用程序的CSS、JavaScript组件和模板。

Bootstrap的目标是通过标准化代码和布局，减少开发者在设计和开发过程中的工作量。它包含了许多常用的UI组件，如按钮、表单、导航栏、标签页等，以及一些JavaScript插件，如轮播图、模态框、滚动监听等。

Bootstrap的特点是简洁、易用、美观，适用于各种不同的项目和设备。它的响应式设计使得网站在不同的屏幕尺寸下都能有良好的显示效果，从而提升了用户体验。

另外，Bootstrap提供了详细的文档和示例，可以帮助开发者学习和使用框架的各种功能。它还支持自定义主题，开发者可以根据自己的需求定制样式和布局。

总之，Bootstrap是一个强大的前端框架，可以帮助开发者快速构建现代化的网站和Web应用程序。无论是新手还是经验丰富的开发者，都可以从Bootstrap中受益，并提高开发效率。

二、使用Bootstrap布局

需要按照以下步骤操作：

  1. 引入Bootstrap的CSS和JavaScript文件。可以在HTML文件的<head>标签中添加以下代码：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

这些文件可以通过Bootstrap的官方网站下载，也可以通过CDN链接引入。

  1. 使用Bootstrap的网格系统。Bootstrap的网格系统是一种用于创建响应式布局的强大工具。可以使用container和row类来创建一个容器和一行，然后在行中使用col-*类来创建列。如下所示：
<div class="container"><div class="row"><div class="col-sm-4">列1</div><div class="col-sm-4">列2</div><div class="col-sm-4">列3</div></div>
</div>

这将在一行中创建三个等宽的列，无论屏幕大小如何，它们都会自动调整大小。

  1. 使用Bootstrap的组件。Bootstrap提供了许多预制组件，如导航栏、卡片、按钮等。可以通过为元素添加相应的类来使用这些组件。例如，要创建一个导航栏，可以使用以下代码：
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"><!-- 导航栏内容 -->
</nav>

可以根据需要修改类和内容来自定义组件。

这只是Bootstrap布局的基础，Bootstrap提供了许多其他功能和工具，可以通过查阅Bootstrap的文档来学习更多用法。

可参考bootstrap官网。

相关文章：

编程笔记 html5cssjs 014 网页布局框架

编程笔记 html5&css&js 014 网页布局框架 一、Bootstrap简介二、使用Bootstrap布局 网页布局不只用HTML&#xff0c;还要用CSS和JAVASCRIPT等技术完成,这里暂时简单了解一下Bootstrap。 一、Bootstrap简介 这是一个开源的前端框架&#xff0c;由Twitter的前端工程师Ma…...

编程日记 2024/1/2 12:34:26

抖店和商品橱窗有什么区别？新手应该选哪个？

我是电商珠珠 临近年底了&#xff0c;有的人已经开始为下一年筹谋&#xff0c;有的去抖音做账号做直播带货&#xff0c;不会直播带货的就想尝试做下抖店&#xff0c;来为以后的经济打基础。 刚想要接触却对这类有些迷糊&#xff0c;发现商品橱窗和抖店都可以卖货&#xff0c;…...

编程日记 2024/1/2 12:31:23

在Adobe Acrobat上如何做PDF文档签名

Adobe Acrobat如何做PDF文档签名&#xff1f;PDF文档签名是指对PDF文档进行基于证书的数字签名&#xff0c;类似于传统的手写签名&#xff0c;可标识签名文档的人员。与手写签名不同&#xff0c;数字签名难以伪造&#xff0c;因为其包含签名者唯一的加密信息。为PDF文档进行基于…...

编程日记 2024/1/2 12:28:20

Leetcode 988. Smallest String Starting From Leaf (二叉树遍历好题)

Smallest String Starting From Leaf Medium 1.6K 227 Companies You are given the root of a binary tree where each node has a value in the range [0, 25] representing the letters ‘a’ to ‘z’. Return the lexicographically smallest string that starts at a le…...

编程日记 2024/1/2 12:27:19

redis 三主六从高可用docker(不固定ip)

redis集群(cluster)笔记 redis 三主三从高可用集群docker swarm redis 三主六从高可用docker(不固定ip) 此博客解决&#xff0c;redis加入集群后&#xff0c;是用于停掉后重启&#xff0c;将nodes.conf中的旧的Ip替换为新的IP&#xff0c;从而达到不会因为IP变化导致集群无法…...

编程日记 2024/1/2 12:25:17

12.26

key_it.c #include"key_it.h" void led_init() {// 设置GPIOE/GPIOF时钟使能RCC->MP_AHB4ENSETR | (0x3 << 4);// 设置PE10/PE8/PF10为输出模式GPIOE->MODER & (~(0x3 << 20));GPIOE->MODER | (0x1 << 20);GPIOE->MODER & (~…...

编程日记 2024/1/2 12:23:15

2022年全国职业院校技能大赛高职组云计算正式赛卷第三场-公有云

2022 年全国职业院校技能大赛高职组云计算赛项试卷 【赛程名称】云计算赛项第三场-公有云 目录 2022 年全国职业院校技能大赛高职组云计算赛项试卷 【赛程名称】云计算赛项第三场-公有云 【任务 1】公有云服务搭建[10 分] 【任务 2】公有云服务运维[10 分] 【任务 3】公有云运维…...

编程日记 2024/1/2 12:19:11

Python | 机器学习之数据清洗

机器学习前的数据清洗&#xff08;异常值检验&#xff0c;标准化处理&#xff0c;哑变量处理&#xff09; Python | 机器学习之数据清洗 机器学习 - 基础概念 - scikit-learn - 数据预处理​​​​​​​ 数据的标准化&#xff08;离差标准化、log函数转换、atan函数转换、z…...

编程日记 2024/1/2 12:15:06

力扣：509. 斐波那契数（动态规划，附带递归版本） 详细讲解动态规划的思路

题目&#xff1a; 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#xff1a; F(0) 0&#xff0c;F(1) 1 F(n) F(n - 1) F(n - 2)&#xff0c;其中…...

编程日记 2024/1/2 12:11:02

Python3，压箱底的代码片段，提升工作效率稳稳的。

压箱底代码存活 1、引言2、代码实例2.1 操作存储服务2.1.1 Redis操作2.1.2 MongoDB操作2.1.3 MySQL操作 2.2 异步操作2.3 多线程 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c;这年底了&#xff0c;得不得分享一点压箱底的东西啊 小鱼&#xff1a;… 压箱底的东西&…...

编程日记 2024/1/2 12:05:58

Flowable-升级为7.0.0.M2-第三节

目录 启动项目添加虚拟机参数启动成功 启动项目 添加虚拟机参数 java.base/java.langALL-UNNAMED --add-opens java.base/java.mathALL-UNNAMED --add-opens java.base/java.util.concurrentALL-UNNAMED --add-opens java.base/java.netALL-UNNAMED --add-opens java.base/ja…...

编程日记 2024/1/2 12:04:57

JavaWeb——前端之AjaxVue

6. 前后端交互 6.1 Ajax&#xff08;原生的&#xff09; 概念&#xff1a; Asynchronous JavaScript And XML&#xff08;异步的JavaScript和XML&#xff09; 作用&#xff1a; 数据交互&#xff1a;通过Ajax可以给服务器发送请求&#xff0c;并获取服务器响应的数据异步交…...

编程日记 2024/1/2 12:03:56

在 Android 手机上从SD 卡恢复数据的 6 个有效应用程序

如果您有 Android 设备&#xff0c;您可能会将个人和专业的重要文件保存在设备的 SD 卡上。这些文件包括照片、视频、文档和各种其他类型的文件。您绝对不想丢失这些文件&#xff0c;但当您的 SD 卡损坏时&#xff0c;数据丢失是不可避免的。 幸运的是&#xff0c;您不需要这样…...

编程日记 2024/1/2 12:01:54

uni-app/vue封装etc车牌照输入,获取键盘按键键值

先看下效果如下&#xff1a; 动态图如下 uniapp的keyup获取不到keyCode和compositionstart&#xff0c;compositionend&#xff0c;所以需要监听input节点的keyup事件&#xff0c; 思路以及代码如下&#xff1a; 1.将每一个字符用文本框输入&#xff0c;代码如下 <view …...

编程日记 2024/1/2 11:58:51

iostat获取IO延迟单位从ms调整us的方案

iostat命令统计的磁盘I/O延迟通常是以毫秒&#xff08;ms&#xff09;为单位&#xff0c;例如在输出中的await字段表示的是平均服务时间&#xff0c;包括等待时间和处理时间&#xff0c;这个值就是以毫秒为单位。 然而&#xff0c;要获取更精确到微秒级别&#xff08;us&#x…...

编程日记 2024/1/2 11:57:50

K8s 源码剖析及debug实战之 Kube-Scheduler（四）：预选算法详解

文章目录 0. 引言1. 回顾2. podFitsOnNode 为什么执行两次预选3. 预选算法有哪些4. 参考 0. 引言 欢迎关注本专栏&#xff0c;本专栏主要从 K8s 源码出发&#xff0c;深入理解 K8s 一些组件底层的代码逻辑&#xff0c;同时借助 debug Minikube 来进一步了解 K8s 底层的代码运行…...

编程日记 2024/1/2 11:51:44

ES6之解构赋值详解

✨ 专栏介绍 在现代Web开发中&#xff0c;JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性&#xff0c;还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言&#xff0c;JavaScript具有广泛的应用场景&#x…...

编程日记 2024/1/2 11:50:43

UntiyShader（五）属性、内置文件和变量

目录 一、如何使用属性 例子 ShaderLab中的属性的类型和Cg中的变量的类型之间的匹配关系 二、Unity提供的内置文件和变量 内置的包含文件 内置的变量 一、如何使用属性 在一开始我们提到过&#xff0c;材质和UnityShader之间有着密切的练习&#xff0c;我们可以通过材质面…...

编程日记 2024/1/2 11:49:42

Pytorch简介

1.1 Pytorch的历史 PyTorch是一个由Facebook的人工智能研究团队开发的开源深度学习框架。在2016年发布后&#xff0c;PyTorch很快就因其易用性、灵活性和强大的功能而在科研社区中广受欢迎。下面我们将详细介绍PyTorch的发展历程。 在2016年&#xff0c;Facebook的AI研究团队…...

编程日记 2024/1/2 11:45:38

亚马逊云科技Amazon Q，一款基于生成式人工智能的新型助手

近日&#xff0c;亚马逊云科技宣布推出Amazon Q&#xff0c;这是一款基于生成式人工智能&#xff08;AI&#xff09;的新型助手&#xff0c;专为辅助工作而设计&#xff0c;可以根据您的业务量身定制。通过连接到公司的信息存储库、代码、数据和企业系统&#xff0c;可以使用Am…...

编程日记 2024/1/2 11:41:33

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2025/12/8 11:22:00

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2025/9/22 20:29:32

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/12/7 13:42:04

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/12/7 21:26:54

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

编程新知 2025/12/8 9:25:09

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2025/12/9 3:06:06

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

编程新知 2025/12/7 6:34:31

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

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

编程新知 2025/12/8 0:22:32

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2025/11/28 23:53:15