编程笔记 html5cssjs 014 网页布局框架
编程笔记 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布局
需要按照以下步骤操作：
- 引入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链接引入。
- 使用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>
这将在一行中创建三个等宽的列，无论屏幕大小如何，它们都会自动调整大小。
- 使用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，还要用CSS和JAVASCRIPT等技术完成,这里暂时简单了解一下Bootstrap。 一、Bootstrap简介 这是一个开源的前端框架，由Twitter的前端工程师Ma…...
抖店和商品橱窗有什么区别？新手应该选哪个？
我是电商珠珠 临近年底了，有的人已经开始为下一年筹谋，有的去抖音做账号做直播带货，不会直播带货的就想尝试做下抖店，来为以后的经济打基础。 刚想要接触却对这类有些迷糊，发现商品橱窗和抖店都可以卖货，…...
在Adobe Acrobat上如何做PDF文档签名
Adobe Acrobat如何做PDF文档签名？PDF文档签名是指对PDF文档进行基于证书的数字签名，类似于传统的手写签名，可标识签名文档的人员。与手写签名不同，数字签名难以伪造，因为其包含签名者唯一的加密信息。为PDF文档进行基于…...
)
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…...
redis 三主六从高可用docker(不固定ip)
redis集群(cluster)笔记 redis 三主三从高可用集群docker swarm redis 三主六从高可用docker(不固定ip) 此博客解决，redis加入集群后，是用于停掉后重启，将nodes.conf中的旧的Ip替换为新的IP，从而达到不会因为IP变化导致集群无法…...
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 & (~…...
2022年全国职业院校技能大赛高职组云计算正式赛卷第三场-公有云
2022 年全国职业院校技能大赛高职组云计算赛项试卷 【赛程名称】云计算赛项第三场-公有云 目录 2022 年全国职业院校技能大赛高职组云计算赛项试卷 【赛程名称】云计算赛项第三场-公有云 【任务 1】公有云服务搭建[10 分] 【任务 2】公有云服务运维[10 分] 【任务 3】公有云运维…...
Python | 机器学习之数据清洗
机器学习前的数据清洗（异常值检验，标准化处理，哑变量处理） Python | 机器学习之数据清洗 机器学习 - 基础概念 - scikit-learn - 数据预处理 数据的标准化（离差标准化、log函数转换、atan函数转换、z…...
力扣：509. 斐波那契数（动态规划，附带递归版本） 详细讲解动态规划的思路
题目： 斐波那契数 （通常用 F(n) 表示）形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始，后面的每一项数字都是前面两项数字的和。也就是： F(0) 0，F(1) 1 F(n) F(n - 1) F(n - 2)，其中…...
Python3，压箱底的代码片段，提升工作效率稳稳的。
压箱底代码存活 1、引言2、代码实例2.1 操作存储服务2.1.1 Redis操作2.1.2 MongoDB操作2.1.3 MySQL操作 2.2 异步操作2.3 多线程 3、总结 1、引言 小屌丝：鱼哥，这年底了，得不得分享一点压箱底的东西啊 小鱼：… 压箱底的东西&…...
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…...
JavaWeb——前端之AjaxVue
6. 前后端交互 6.1 Ajax（原生的） 概念： Asynchronous JavaScript And XML（异步的JavaScript和XML） 作用： 数据交互：通过Ajax可以给服务器发送请求，并获取服务器响应的数据异步交…...
在 Android 手机上从SD 卡恢复数据的 6 个有效应用程序
如果您有 Android 设备，您可能会将个人和专业的重要文件保存在设备的 SD 卡上。这些文件包括照片、视频、文档和各种其他类型的文件。您绝对不想丢失这些文件，但当您的 SD 卡损坏时，数据丢失是不可避免的。 幸运的是，您不需要这样…...
uni-app/vue封装etc车牌照输入,获取键盘按键键值
先看下效果如下： 动态图如下 uniapp的keyup获取不到keyCode和compositionstart，compositionend，所以需要监听input节点的keyup事件， 思路以及代码如下： 1.将每一个字符用文本框输入，代码如下 <view …...
iostat获取IO延迟单位从ms调整us的方案
iostat命令统计的磁盘I/O延迟通常是以毫秒（ms）为单位，例如在输出中的await字段表示的是平均服务时间，包括等待时间和处理时间，这个值就是以毫秒为单位。 然而，要获取更精确到微秒级别（us&#x…...
K8s 源码剖析及debug实战之 Kube-Scheduler（四）：预选算法详解
文章目录 0. 引言1. 回顾2. podFitsOnNode 为什么执行两次预选3. 预选算法有哪些4. 参考 0. 引言 欢迎关注本专栏，本专栏主要从 K8s 源码出发，深入理解 K8s 一些组件底层的代码逻辑，同时借助 debug Minikube 来进一步了解 K8s 底层的代码运行…...
ES6之解构赋值详解
✨ 专栏介绍 在现代Web开发中，JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性，还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言，JavaScript具有广泛的应用场景&#x…...
UntiyShader（五）属性、内置文件和变量
目录 一、如何使用属性 例子 ShaderLab中的属性的类型和Cg中的变量的类型之间的匹配关系 二、Unity提供的内置文件和变量 内置的包含文件 内置的变量 一、如何使用属性 在一开始我们提到过，材质和UnityShader之间有着密切的练习，我们可以通过材质面…...
Pytorch简介
1.1 Pytorch的历史 PyTorch是一个由Facebook的人工智能研究团队开发的开源深度学习框架。在2016年发布后，PyTorch很快就因其易用性、灵活性和强大的功能而在科研社区中广受欢迎。下面我们将详细介绍PyTorch的发展历程。 在2016年，Facebook的AI研究团队…...
亚马逊云科技Amazon Q，一款基于生成式人工智能的新型助手
近日，亚马逊云科技宣布推出Amazon Q，这是一款基于生成式人工智能（AI）的新型助手，专为辅助工作而设计，可以根据您的业务量身定制。通过连接到公司的信息存储库、代码、数据和企业系统，可以使用Am…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录
ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了：一行…...
练习（含atoi的模拟实现,自定义类型等练习）
一、结构体大小的计算及位段 （结构体大小计算及位段 详解请看：自定义类型：结构体进阶-CSDN博客） 1.在32位系统环境，编译选项为4字节对齐，那么sizeof(A)和sizeof(B)是多少？ #pragma pack(4)st…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动（如演唱会、马拉松赛事、高考中考等）期间，城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例，暖城商圈曾因观众集中离场导致周边…...
EtherNet/IP转DeviceNet协议网关详解
一，设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络，本网关连接到EtherNet/IP总线中做为从站使用，连接到DeviceNet总线中做为从站使用。 在自动…...
让AI看见世界：MCP协议与服务器的工作原理
让AI看见世界：MCP协议与服务器的工作原理 MCP（Model Context Protocol）是一种创新的通信协议，旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天，MCP正成为连接AI与现实世界的重要桥梁。…...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT，橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版：职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）
Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习） 一、Aspose.PDF 简介二、说明（⚠️仅供学习与研究使用）三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...
Netty从入门到进阶（二）
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...