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

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

news 2026/2/8 11:46:13

编程笔记 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

7.4.分块查找

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

编程新知 2026/1/27 18:11:42

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/12/5 20:57:13

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/10/18 7:13:10

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2026/1/25 9:08:41

基于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…...

编程新知 2026/2/6 11:54:58

RSS 2025｜从说明书学习复杂机器人操作任务：NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

编程新知 2026/1/31 5:30:51

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

编程新知 2026/1/29 5:21:31

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...

编程新知 2025/11/22 14:54:34

mac：大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...

编程新知 2026/2/4 0:46:21

c# 局部函数 定义、功能与示例

C# 局部函数&#xff1a;定义、功能与示例 1. 定义与功能 局部函数&#xff08;Local Function&#xff09;是嵌套在另一个方法内部的私有方法&#xff0c;仅在包含它的方法内可见。 • 作用&#xff1a;封装仅用于当前方法的逻辑&#xff0c;避免污染类作用域&#xff0c;提升…...

编程新知 2025/9/18 4:17:51