多仔 - 响应式布局与 Bootstrap 框架
type: channel
link: https://www.duox.dev/tag/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80%E4%B8%8E-Bootstrap-%E6%A1%86%E6%9E%B6/
items: 响应式布局与 Bootstrap 框架之 05-移动 Web 页面开发
items: 响应式布局与 Bootstrap 框架之 04-JavaScript 插件
items: 响应式布局与 Bootstrap 框架之 03-Bootstrap 组件
items: 响应式布局与 Bootstrap 框架之 02-Bootstrap 样式
items: 响应式布局与 Bootstrap 框架之 01-响应式布局

响应式布局与 Bootstrap 框架之 05-移动 Web 页面开发
type: item
date: 2023-12-01T13:22:00+00:00
description: AI 摘要 文章系统梳理移动 Web 开发核心要点：先剖析多终端、多浏览器、性能瓶颈等行业现状，对比 PC 与移动在分辨率、视口、交互上的差异；继而详解英寸、像素、DPI、PPI、CSS 像素、设备像素比等基础概念，厘清布局视口、视觉视口、理想视口三者关系与 meta viewport 设置；最后给出移动优先、理想视口匹配、相对单位 em/rem 等实战原则，为响应式与 Bootstrap 框架实践奠定扎实基础。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结移动前端概述移动行业现状移动前端前景明朗，但仍有很多问题需要解决：浏览器种类繁多，参差不齐，对网页的渲染和交互效果各有不同。网速仍然是性能瓶颈。前端开发框架很多，学习难度大，门槛高。移动前端开发有的趋势和特点：响应式设计：为了适应不同尺寸的移动设备屏幕，响应式设计成为了常见的选择，确保网站或应用在各种设备上都能提供良好的用户体验。Progressive Web Apps（PWA）：PWA 结合了 Web 技术和原生应用的优势，提供了更流畅、更类似原生应用的体验。前端框架和库：像 React、Vue.js、Angular 等前端框架和库在移动端开发中广泛使用，它们提供了高效的开发方式和丰富的功能。跨平台开发：通过使用跨平台开发技术，如 React Native 或 Flutter，可以用一套代码构建适用于多个移动平台的应用。性能优化：移动设备上的网络连接和硬件资源有限，因此性能优化对于提供快速加载和流畅的用户体验至关重要。移动优先策略：许多开发团队现在采用移动优先的方法，首先关注移动端的设计和功能，然后再考虑桌面端。混合应用开发：一些项目可能结合了原生和 Web 技术，以充分利用两者的优势。移动网页开发与 PC 网页开发的区别移动网页开发与 PC 网页开发的区别：终端设备和浏览器各不相同。分辨率不同：PC 端常见的分辨率如 1920*1080 等，而不同品牌的移动端设备有不同的分辨率。视口不同：PC 端视口只有一个浏览器窗口，而移动端中有布局视口、视觉视口、理想视口。输入特性不同：PC 端可以通过键盘和鼠标来响应用户操作，而移动端中以触摸事件为主来响应用户操作。移动端开发环境移动端浏览器的类型移动端常见的浏览器类型：内置浏览器，如 Safiar、Chrome、Firefox、Opera mini、UC Mini 等。可下载浏览器，如 UC 浏览器、夸克浏览器等。代理浏览器：如世界之窗浏览器等。WebView：如微信内置浏览器等。移动端开发测试环境使用 Chrome 内核浏览器（如 Edge 浏览器等）作为移动开发测试浏览器的原因：很多的手机浏览器都用 Webkit 作为渲染引擎，调试效果好。学习成本较低。在 Edge 浏览器中，可以单击右键 - 检查，进行代码调试。移动端布局基础英寸一般用英寸描述屏幕的物理大小，英寸即屏幕对角线的长度。1 英寸 = 2.54 厘米。像素和分辨率像素是构成数字图像的基础单元。每个像素能够显示一种颜色，整个图像由许多这样的像素组成。像素越高，画面就越精细。分辨率描述了图像或屏幕中像素的数量和密度，通常用来表示图像的清晰度。如 1920*1080 分辨率，这意味着图像的宽度方向有 1920 个像素，高度方向有 1080 个像素。DPI 和 PPIDPI（Dots Per Inch）是打印领域中使用的术语，表示每英寸打印点数，用来衡量打印机打印分辨率和打印质量。更高的 DPI 表示打印出的图像有更高的清晰度和更细腻的细节。PPI（Pixels Per Inch）是指每英寸像素数，用来描述屏幕显示密度。PPI 越高，屏幕能够显示的像素就越密集，因此图像细节越清晰，PPI 是衡量屏幕分辨率的重要指标。CSS 像素和物理像素CSS 像素又称独立像素，是 Web 设计中的逻辑像素，它是一个抽象单位，用于在 CSS 中定义样式，如元素宽度、字体大小等。物理像素（Device Pixels）又称设备像素，是指屏幕显示中的实际像素点，也就是组成屏幕显示的最小物理单元。物理像素的数量是固定的，由显示设备的硬件特性决定，比如一个 1080P 的显示屏幕，其物理像素是 1920*1080。一个 CSS 像素可能会跨越多个物理像素。在 iPhone4 使用的视网膜屏幕中，把 2x2 个物理像素当 1 个 CSS 像素使用，这样让屏幕看起来更精致，但是元素的大小却不会改变。设备像素比设备像素比（Device Pixel Ratio，DPR）是一个描述屏幕显示密度的数字指标，它表示 CSS 像素和物理像素之间的比例关系。DPR = 物理像素 / CSS 像素。移动端视口视口简介浏览器显示网页页面内容的屏幕区域被称为视口（viewport）。视口分为：布局适口（lay…

响应式布局与 Bootstrap 框架之 04-JavaScript 插件
type: item
date: 2023-11-28T07:05:00+00:00
description: AI 摘要 本文系统梳理 Bootstrap 的 JavaScript 插件体系：先强调 jQuery 依赖与全部/按需引入方式，再详解 data 属性与 JS API 两套调用规范；随后依次剖析过渡、模态框、选项卡、轮播、滚动监听五大核心组件的 HTML 结构、尺寸与动画配置、data 参数、JS 方法及事件钩子，并给出可直接套用的代码片段与注意事项，帮助开发者快速实现响应式交互。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结JavaScript 插件简介插件引入在项目中如果遇到复杂的交互效果，如轮播图、模态框等可以使用 JavaScript 插件轻松完成。Bootstrap 框架所有的 JavaScript 插件都依赖于 jQuery，所以必须在引入 bootstrap.min.js 之前引入 jQuery 库。JavaScript 插件的引入方式：全部引入：在项目中引入 bootstrap.min.js，即可引入所有插件。按需引入：下载 Bootstrap 源码，单独引入对应插件的 js 文件以及插件依赖的文件。data 属性JavaScript 插件的使用方式：使用原生代码来调用 JavaScript 插件。使用 data 属性来调用 JavaScript 插件。Bootstrap 提供的一系列 data 属性可以让我们不写任何的 JavaScript 代码就能实现动态效果。Bootstrap 框架已经通过原生 JavaScript 和 jQuery 对效果的实现进行封装，只需要按照 data 属性 API 的规范就能使用所有的 Bootstrap 插件。当我们自己封装了 data API，可以将 Bootstrap 框架的 data 属性关闭，避免影响到我们自己封装的 data API。关闭 data API 的基本用法：// 关闭Bootstrap所有的data属性 $(document).off('.data-api'); // 关闭旋转轮播插件的data属性 $(document).off('.carousel.data-api');过渡插件过渡插件效果Bootstrap 使用的动画过渡效果都是基于 CSS3 动画来制作的。过渡插件严格意义上不是一个标准的插件，是针对 transitionEnd（在 CSS 转换完成时发生） 事件的一个基本辅助工具。过渡效果可以在全局范围禁用，正常开发过程中，不会禁用过渡效果。禁用过渡插件效果的基本用法：$.support.transition = false;模态框模态框结构模态框（Model）是覆盖在父窗体上的子窗体，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动效果。模态框的基本用法： 标题 内容 底部 预定义样式说明：.modal 预定义类用于定义模态框。.fade 预定义类用于给模态框添加动画效果。.modal-dialog 预定义类用于定义模态框的主体。.modal-header 预定义类用于定义模态框的头部。.modal-title 预定义类用于定义模态框的标题。.modal-body 预定义类用于定义模态框的内容区域。.modal-footer 预定义类用于定义模态框的底部区域。使用模态框插件时，需要注意：不要在一个模态框上重叠另一个模态框。模态框的 HTML 代码必须放在 HTML 文档的最高层级（body）内，以避免其他组件的影响。点击按钮触发模态框点击按钮触发模态框，可以提供一个 button 按钮，点击按钮触发按钮点击事件。示例：点击按钮触发模态框入口页面（index.html）： 打开模态框 示例效果：点击按钮触发模态框，可以提供一个 button 按钮，为 button 按钮绑定 data-toggle 属性和 data-target 属性。示例：点击按钮触发模态框入口页面（index.html）： 打开模态框 示例效果：点击按钮触发模态框，可以提供一个 a 锚链接，为 a 锚链接绑定 data-toggle 属性。示例：点击按钮触发模态框入口页面（index.html）： 打开模态框示例效果：模态框尺寸模态框提供两种可选尺寸：大尺寸：在 .modal-dialog 盒子上添加 .modal-lg 预定义类。小尺寸：在 .modal-dialog 盒子上添加 .modal-sm 预定义类。示例：模态框尺寸入口页面（index.html）： 示例效果：data 属性操作模态框模态框可以通过 data 属性来实现相应的功能。模态框的基本 data 属性：名称类型描述data-backdropbooleanstatictrue（默认值）：单击模态框背景时关闭模态框static：单击模态框背景时不关闭模态框data-keyb…

响应式布局与 Bootstrap 框架之 03-Bootstrap 组件
type: item
date: 2023-11-25T11:51:00+00:00
description: AI 摘要 本文系统梳理 Bootstrap 常用组件：字体图标、下拉与分裂按钮、输入框组、标签页/胶囊/自适应/下拉菜单导航、响应式导航条、分页与翻页、缩略图、媒体对象及列表组。结合 class 语义与示例代码，展示如何快速调用 .glyphicon、.dropdown、.nav、.navbar、.pagination、.thumbnail、.media、.list-group 等预定义样式，实现图标、菜单、表单、内容块与导航的响应式交互，助力高效构建一致且兼容多端的 Web 界面。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结字体图标组件字体图标的使用Bootstrap 框架提供了 250 多个来自 Glyphicon Halfings 的商业付费字体图标。字体图标组件的基本用法： 预定义样式说明：使用时需要确保导入 Bootstrap 提供的字体图标文件。.glyphicon 预定义类是字体图标组件的公共预定义类。字体图标的预定义类以 .glyphicon- 开头。图标类只能应用在不包含任何文本的内联元素上，常使用 span 元素和 i 元素来加载字体图标。示例：字体图标入口页面（index.html）： 示例效果：下拉菜单组件基本下拉菜单的使用使用基本下拉菜单，可以向任何组件（如导航栏等）添加下拉菜单。基本下拉菜单的基本用法： 请选择 菜单项 …… …… 预定义样式说明：.dropdown 预定义类用于定义下拉菜单，让菜单向下弹出。.dropup 预定义类，可以让菜单向上弹出。.open 预定义类用于控制基本下拉菜单的收缩展开。.dropdown-toggle 预定义类用于设置下拉菜单触发器。data-toggle 属性用于为按钮添加下拉菜单的特效。.caret 预定义类用于设置向下小三角。.dropdown-menu 预定义类用于设置下拉菜单的菜单列表。.active 预定义类默认选中下拉菜单项。.divider 预定义类用于设置菜单项的分割线。示例：基本下拉菜单入口页面（index.html）： 请选择商品 咖啡 雪碧 可乐 苹果 西瓜 橘子 示例效果：分裂式按钮下拉菜单的使用分裂式按钮下拉菜单的好处是可以实现按钮和下拉菜单分离。分裂式按钮下拉菜单的基本用法： 按钮 菜单项 ... 预定义样式说明：.btn-group 预定义类用于定义多个按钮的按钮组。为下拉菜单触发器按钮设置基本下拉菜单的相关预定义类和属性。示例：分裂式按钮下拉菜单入口页面（index.html）： 个人中心 账号设置 地址管理 意见反馈 退出 示例效果：输入框组组件输入框组的使用输入框组件可以在文本输入框前面、后面或是两边加上文字或按钮，实现对表单控件的扩展。输入框组的基本用法： 文本 按钮 预定义样式说明：.input-group 预定义类用于定义输入框组。在 .input-group 内添加 .input-group-addon，就可以在 .form-control 前面或后面添加额外的文本。在 .input-group 内添加 .input-group-btn，就可以在 .form-control 前面或后面添加额外的按钮。示例：输入框组入口页面（index.html）： 在线搜索 搜索一下 示例效果：导航/标签页组件选项卡导航的使用使用选项卡导航组件，可以在页面中创建选项卡。选项卡导航的基本用法： 导航菜单 ... 预定义样式说明：.nav 预定义类是导航组件的公共预定义类。.nav-tabs 预定义类用于定义选项卡导航。.active 预定义类用于默认选中选项卡。示例：选项卡导航入口页面（index.html）： 个人中心 商品详情 我的订单 联系客服 示例效果：胶囊式导航的使用使用胶囊式导航组件，可以在页面中创建胶囊样式的选项卡。胶囊式导航的基本用法： 导航菜单 ... 预定义样式的使用：.nav-pills 预定义类用于定义胶囊式导航。.active 预定义类用于默认选中胶囊。示例：胶囊式导航入口页面（index.html）： 导航菜单 ... 示例效果：自适应导航的使用在大于 768px 的屏幕上，自适应导航组件可以让选项卡或胶囊式导航呈现出同等宽度，在小屏幕上，导航呈现堆叠样式。自适应导航的基本用法： 导航菜单 ... 预定义样式说明：.nav-justified 预定义类用于让选项卡或胶囊式导航呈现出同等宽度，在小屏幕上呈现堆叠样式。自适应导航使用时，需要基于 .nav-tabs 或 .nav-pills 样式。示例：自适应导航入口页面（index.html）： 首页 购物车 我的订单 联系客服 首页 购物车 我的订单 联系客服 示例效果：下拉菜单导航的使用使用下拉菜单导航组件，可以在导航组件中添加下拉菜单。下拉菜…

响应式布局与 Bootstrap 框架之 02-Bootstrap 样式
type: item
date: 2023-11-22T05:46:00+00:00
description: AI 摘要 文章系统梳理 Bootstrap 3 的核心用法：从引入 CSS/JS、响应式栅格（12 列、组合、偏移、嵌套、排序、多断点适配），到排版、列表、表单（基础/内联/水平、校验、尺寸）、按钮（7 种颜色、4 种尺寸）及图片（响应式、圆角、圆形、缩略图）的预定义类与实例代码，帮助开发者快速构建跨设备一致且美观的界面。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结Bootstrap 初体验Bootstrap 简介Bootstrap 是美国 Twitter 公司的设计师 Mark Otto 和 Jacob Thornton 合作，基于 HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，让 Web 开发更加快捷。Bootstrap 框架的优点：开发方便快捷：Bootstrap 提供了丰富的预定义组件和样式，开发者可以迅速构建出美观的网页。兼容处理：Bootstrap 对各种主流浏览器和设备都进行了兼容性优化，确保网页在各种环境下都能正常显示，为用户提供一致的浏览体验。移动设备优先：Bootstrap 采用响应式设计理念，使得网站能够在不同屏幕尺寸的设备上自适应展示，提升用户体验。使用广泛：Bootstrap 拥有广泛的社区支持和丰富的资源，开发者可以轻松找到解决方案和教程，从而加快开发速度。自定义灵活：Bootstrap 提供了主题和样式定制功能，允许开发者根据项目需求对外观进行个性化调整。Bootstrap 下载和使用Bootstrap 3 文档：https://v3.bootcss.com/用于生产环境的 Bootstrap 的基本结构：在前端项目中，引入 Bootstrap 的 CSS 和 JS 文件，参照官方文档中的栅格系统与组件示例来构建页面，同时借助响应式工具类适配不同设备，即可快速上手使用 Bootstrap。示例：Bootstrap 初体验入口页面（index.html）： Bootstrap 101 Template <!--[if lt IE 9]> <![endif]--> 你好，世界！ 示例效果：Bootstrap 栅格系统栅格系统简介栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或窗口尺寸的增加，系统会自动分为最多 12 列。Bootstrap 栅格系统的工作原理：行必须包含在 .container（固定宽度）或 .container-fluid（100% 宽度）的容器中。通过行在水平方向创建 12 列。通过预定义类（本质上是媒体查询）可以快速创建栅格布局。Bootstrap 栅格系统的使用方式：列组合、列偏移、列嵌套、列排序。列组合列组合即使用 col-md-* 预定义类，更改数字来合并列。示例：列组合入口页面（index.html）： .col-md-1 .col-md-3 .col-md-9 示例效果：列偏移列偏移即使用 col-md-offset-* 预定义类，更改数字将列向右偏移。示例：列偏移入口页面（index.html）： .col-md-1 .col-md-3 示例效果：列嵌套列嵌套即一列嵌套一行，行内嵌套一系列类。示例：列嵌套入口页面（index.html）： .col-md-1 第一行.col-md-6 第二行.col-md-6 第一行.col-md-6 第二行.col-md-6 示例效果：列排序列排序即使用 col-md-push- 和 col-md-pull- 预定义类，更改数字改变列的顺序。示例：列排序入口页面（index.html）： .col-md-1 .col-md-3 .col-md-6 示例效果：响应式栅格Bootstrap 可以为不同的屏幕尺寸提供不同的栅格样式。Bootstrap 栅格系统的基本类前缀：栅格参数超小屏幕手机小屏幕平板电脑中等屏幕桌面显示器大屏幕大桌面显示器窗口尺寸<768px≥768px≥992px≥1200px类前缀.col-xs.col-sm.col-md.col-lg示例：响应式栅格系统入口页面（index.html）： .col-md-1 .col-md-3 .col-md-6 示例效果：Bootstrap 排版标题在 Bootstrap 中，内容标题标签 h1~h6 均可使用，Bootstrap 对标题标签重新定义了样式，可以使用 .h1~.h6 预定义类为内联属性的文本赋予标题样式，还可以使用 small 标签或 .small 预定义类设置副标题。示例：标题入口页面（index.html）： 你好，世界！ 你好，世界！ 你好，世界！ 你好，世界！ 你好，世界！hello, world 示例效…

响应式布局与 Bootstrap 框架之 01-响应式布局
type: item
date: 2023-11-19T11:09:00+00:00
description: AI 摘要 文章从传统固定宽度布局的缺陷切入，系统讲解响应式三大技术：浮动百分比、Flex 弹性盒与媒体查询。先以代码对比展示百分比浮动如何实现“弹性”伸缩；再完整梳理 Flex 容器与项目的 12 组属性，结合图示与示例演示主轴、交叉轴对齐、换行、排序、放大缩小等细节；最后引入 CSS3 媒体查询，通过 @media 根据屏宽切换样式，实现一套代码多终端适配，为后续 Bootstrap 框架学习奠定理论与实践基础。 此摘要根据文章内容自动生成，仅用于文章内容的解释与总结浮动 + 百分比布局传统网页布局存在的问题传统的网页布局，网页宽度被设置为一个固定值，不具备“弹性”效果。示例：传统网页布局存在的问题入口页面（index.html）： Title left right 示例效果：使用浮动 + 百分比适应屏幕大小实现网页 "弹性" 效果，可以使用浮动 + 百分比的布局方式，网页显示的内容不再受浏览器宽度的影响，此时的网页会随着浏览器的伸展而伸展，随着浏览器的收缩而收缩。示例：使用浮动 + 百分比适应屏幕大小入口页面（index.html）： Title left right 示例效果：Flex 弹性盒布局Flex 简介Flex 弹性盒布局（伸缩布局/伸缩盒布局/ Flex 布局）是一种布局方式，常用于当页面需要适应不同的屏幕大小以及设备类型时能够确保元素拥有恰当的行为。Flex 弹性盒布局的作用：能够更加高效方便地控制元素的对齐、排列，可以让子元素排在一行，且高度一致。无论元素的尺寸是固定的还是动态的，都可以自动计算布局内元素的尺寸。控制元素在页面中的布局方向。按照不同于 DOM 所指定排序方式对屏幕上的元素重新排序。Flex 弹性盒布局的描述图：Flex 弹性盒布局的相关术语：容器（container）：采用 Flex 布局的元素被称为容器。项目（item）：容器内的子元素被称为项目。主轴（main axis）：容器内的子元素的排列方向。交叉轴/侧轴（cross axis）：垂直于主轴的轴。起始线：轴开始的位置。终止线：轴结束的位置。弹性盒布局的基本用法：display: flex; display: inline-flex;Flex 弹性盒布局的特点：任何容器都可以指定 Flex 弹性盒布局，包括块级元素、行内块元素、行内元素。容器设为 Flex 弹性盒布局以后，项目的 float（浮动）、clear（解决塌陷）、vertical-align（垂直对齐方式）属性失效。Flex 弹性盒布局的核心就是通过设置容器的属性，来影响项目的布局和排列方式。示例：Flex 弹性盒布局入口页面（index.html）： Title left：这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本。 right：这是一段文本，这是一段文本，这是一段文本，这是一段文本。 示例效果：Flex 属性Flex 弹性盒布局分为容器属性和项目属性。容器属性：设置给弹性盒子（父元素）的属性。名称描述flex-direction定义主轴的方向，即项目的排列方向flex-wrap定义项目在一条轴线排不下时如何换行flex-flow复合属性，是 flex-direction、flex-wrap 的简写形式justify-content定义项目在主轴上的对齐方式align-items定义项目在交叉轴上的对齐方式align-content定义当弹性盒子里有多个弹性行时，这些行在交叉轴上的对齐方式和分布项目属性：设置给弹性盒子内的子元素的属性。名称描述order设置项目的排列顺序flex-grow设置项目的放大比例flex-shrink设置项目的缩小比例flex-basis设置弹性盒伸缩基准值flex复合属性，是 flex-grow、flex-shrink、flex-basis 的简写形式align-self设置子元素在交叉轴方向上的对齐方式容器属性 flex-directionflex-direction 属性用于定义主轴的方向，即项目的排列方向，主轴是项目在容器中的排列方向，可能是水平的也可能是垂直的，取决于 flex-direction 属性的设置。flex-direction 属性的基本用法：flex-direction: 主轴方向;主轴方向的可选值：名称描述row（默认值）主轴为水平方向，项目从左到右排列row-reverse主轴为水平方向，项目从右到左排列column主轴为垂直方向，项目从上到下排列column-reverse主轴为垂直方向，项目从下到上排列示例：flex-direction入口页面（index.html）： Title left：这是一段文本，这是一段文…