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）。视口分为：布局适口（layout viewport）、视觉视口（visual viewport）、理想视口（ideal viewport）。布局视口布局视口是网页布局的基准窗口。在 PC 浏览器上，布局视口就等于当前浏览器窗口中显示的内容大小。在移动端，布局视口被赋予一个默认值，大部分为 980px，布局视口机械地将 PC 端网页在手机端上呈现。视觉视口视觉视口是用户通过屏幕真实看到的区域。视觉视口默认等于当前浏览器的窗口大小。当用户对浏览器进行缩放时，不会改变布局视口的大小，所以页面布局是不变的，但是缩放会改变视觉视口的大小。理想视口理想视口是移动设备上为了最佳用户体验而定义的视口大小。理想视口的目标是使网页在不同设备上看起来都是正好合适的，即不需要用户进行缩放就能以最佳格式查看内容。理想视口的大小取决于网页的内容和布局，通常应该与布局视口的大小相同。视口标签的使用在 HTML 中，可以 meta 标签来指定视口大小和缩放比例。视口标签的基本用法： 视口标签的基本属性：名称描述width定义视口的宽度，单位为像素width=device-width 相当于让布局视口等于理想视口user-scaleable定义是否允许用户手动缩放页面，默认值为 yesinitial-scale定义初始缩放值，取值范围为 0.0~10.0initial-scale=1 相当于让视觉视口等于理想视口maximum-scale定义最大的缩放程度，取值范围为 0.0~10.0minimum-scale定义最小的缩放程度，取值范围为 0.0~10.0示例：视口标签入口页面（index.html）： Title 这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本 示例效果：入口页面（index.html）： 示例效果：移动网页开发移动端网页开发原则为了在移动端让页面获得更好的显示效果，我们必须让布局视口、视觉视口尽可能等于理想视口。为了在移动端让页面获得更好的显示效果，我们必须选择合理的尺寸单位。相对单位：如 em、rem、vw、vh 等。绝对单位：如 cm、pt、px 等。使用 em 布局网页内容em 是相对长度单位，会相对于父级的字体大小而发生变化。示例：使用 em 布局网页内容入口页面（index.html）： 这是一段文本 这是一段文本 示例效果：使用 rem 布局网页内容rem 是相对长度单位，会相对于 html 元素（根元素）的字体大小而发生变化。html 元素的字体大小默认为 16px。示例：使用 rem 布局网页内容入口页面（index.html）： 这是一段文本 示例效果：
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-keyboardbooleantrue（默认值）：键盘上的 Esc 键被按下后关闭模态框示例：data 属性操作模态框入口页面（index.html）： 示例效果：JavaScript 操作模态框除 data 属性之外，也可以使用 JavaScript 操作模态框。JavaScript 操作模态框的基本用法：$("模态框选择器").modal(options);模态框的基本 JavaScript 属性：名称类型backdropbooleanstatickeyboardboolean示例：JavaScript 操作模态框入口页面（index.html）： 打开模态框 示例效果：模态框的基本 JavaScript 方法：名称描述toggle触发时，切换模态框的显示状态show触发时，显示模态框hide触发时，隐藏模态框示例：JavaScript 操作模态框入口页面（index.html）： 关闭 打开模态框 示例效果：模态框的基本 JavaScript 事件：名称描述show.bs.modalshow 方法调用之后立即触发该事件shown.bs.modal此事件在模态框已经显示出来，并且同时在 CSS 过渡效果完成之后被触发hide.bs.modalhide 方法调用之后，立即触发该事件hidden.bs.modal此事件在模态框被隐藏，并且同时在 CSS 过渡效果完成之后被触发示例：JavaScript 操作模态框入口页面（index.html）：$("#myModal").on('show.bs.modal', function () { console.log('模态框展示'); }) $("#myModal").on('hide.bs.modal', function () { console.log('模态框隐藏'); })示例效果：选项卡选项卡结构选项卡（Tab）也被称为标签页，通过结合一些 data 属性，可以轻松地创建一个选项卡界面。通过此插件可以把内容放置在选项卡甚至是下拉菜单标签页中。选项卡的基本用法： 选项卡菜单1 选项卡菜单2 选项卡面板1 选项卡面板2 预定义样式说明：.nav 预定义类用于定义选项卡菜单。.nav-tabs 预定义类用于定义选项卡导航，.nav-pills 预定义类用于定义胶囊式导航。.active 预定义类用于默认选中选项卡。data-toggle 属性用于定义选项卡特效，tab 为选项卡导航，pill 为胶囊式导航。.tab-content 预定义类用于定义选项卡面板组。.tab-pane 预定义类用于定义一个选项卡面板。使用选项卡插件时，需要注意：实现选项卡面板时，选项卡菜单和选项卡面板需要同时存在。每个选项卡菜单和选项卡面板通过 id 属性进行一一对应。示例：选项卡结构入口页面（index.html）： 首页 个人中心 数据列表 首页内容 个人中心内容 数据列表内容 示例效果：JavaScript 操作选项卡除 data 属性之外，也可以使用 JavaScript 操作选项卡。JavaScript 操作选项卡的基本用法：$("选项卡菜单选择器").tab(options);选项卡的基本 JavaScript 方法：名称描述show触发时，显示该选项卡面板示例：JavaScript 操作选项卡入口页面（index.html）： 首页 个人中心 数据列表 示例效果：选项卡的基本 JavaScript 事件：名称描述show.bs.tab标签页显示时触发，但是必须在新标签页显示之前shown.bs.tab标签页显示时触发，但是必须在某个标签页已经显示之后示例：JavaScript 操作选项卡入口页面（index.html）：$(".nav a").on('show.bs.tab', function () { console.log("选项卡切换") })示例效果：旋转轮播旋转轮播结构旋转轮播（Carousel）又称轮播图，是一种灵活的并且响应式的向站点添加滑块的方式。轮播图的内容可以是图像、内嵌框架、视频或者其想要放置的任何类型。旋转轮播的基本用法： ... ... 预定义样式说明：.carousel 预定义类用于定义旋转轮播。.slide 预定义类用于添加旋转轮播滑动特效。data-ride 属性用于定义旋转轮播特效。.carousel-indicators 预定义类用于定义圆圈指示符。data-target 属性用于定义按钮操控的旋转轮播。data-slide-to、data-slide 属性用于滚动到指定的旋转轮播内容。.carousel-inner 预定义类用于定义旋转轮播的内容区域。.item 预定义类用于定义一个旋转轮播的内容。.active 预定义类用于定义选中的旋转轮播内容。.carousel-caption 预定义类用于定义悬浮在旋转轮播内容上的内容。.carousel-control 预定义类用于定义左右控制按钮。示例：旋转轮播结构入口页面（index.html）： 示例效果：data 属性操作旋转轮播旋转轮播可以通过 data 属性来实现相应的功能。旋转轮播的基本 data 属性：名称类型描述data-intervalnumber ｜ boolean自动循环每个项目之间延迟的时间，单位为毫秒false：禁用自动循环data-pausestringhover：鼠标指针进入时暂停轮播循环data-wrapbooleantrue：轮播是否连续循环示例：data 属性操作旋转轮播入口页面（index.html）： 示例效果：JavaScript 操作旋转轮播除 data 属性之外，也可以使用 JavaScript 操作旋转轮播。JavaScript 操作旋转轮播的基本用法：$("旋转轮播选择器").carousel(options);旋转轮播的基本 JavaScript 属性：名称类型intervalnumber ｜ falsepausestringwrapboolean旋转轮播的基本 JavaScript 方法：名称描述cycle从左到右循环轮播项目pasue停止轮播循环项目number循环轮播到某个特定的帧prev循环轮播到上一个项目next循环轮播到下一个项目示例：JavaScript 操作旋转轮播入口页面（index.html）： 示例效果：旋转轮播的基本 JavaScript 事件：名称描述slide.bs.carousel当调用 slide 实例方法时立即触发该事件。slid.bs.carousel当轮播完成幻灯片过渡效果时触发该事件。示例：JavaScript 操作旋转轮播入口页面（index.html）： 示例效果：滚动监听滚动监听结构滚动监听（Scrollspy）即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。滚动监听固定高度元素的基本用法： 导航菜单1 导航菜单2 ... ... ... 滚动监听整个页面的基本用法： 导航菜单1 导航菜单2 ... ... ... 预定义样式说明：data-spy 属性用于为该区域启用滚动监听功能。data-target 属性用于指定该区域关联的导航条组件。data-offset 属性用于指定当元素滚动到指定的偏移量时，相关的元素或功能将被触发。示例：滚动监听结构入口页面（index.html）： 关于我们 联系我们 关于我们 联系我们 示例效果：
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）： 首页 购物车 我的订单 联系客服 首页 购物车 我的订单 联系客服 示例效果：下拉菜单导航的使用使用下拉菜单导航组件，可以在导航组件中添加下拉菜单。下拉菜单导航的基本用法： 导航菜单 …… 导航菜单 下拉菜单 …… 预定义样式说明：导航组件将 li 元素作为下拉菜单的父容器，添加 .dropdown 预定义类。在 .dropdown 内部包含一个 .dropdown-menu 预定义类的下拉菜单项。示例：下拉菜单导航入口页面（index.html）： 首页 购物车 我的订单 联系客服 个人中心 地址管理 账号设置 地址管理 意见反馈 退出 示例效果：导航条组件导航条组件的使用使用导航条组件，可以在在页面中创建导航条。导航条组件的基本用法： 导航条菜单 …… 预定义样式说明：.navbar 预定义类是导航条组件的公共预定义类。.navbar-default 预定义类用于设置默认样式的导航条组件。.navbar-inverse 预定义类用于设置反色的导航条。.navbar-header 预定义类用于设置导航条的头部，结合 .navbar-brand 预定义类可以展示品牌图标。.nav、.navbar-nav 预定义类是导航条组件中导航选项列表的公共预定义类。.active 预定义类用于默认选中导航选项。示例：导航条组件入口页面（index.html）： 秒杀 抢购 团购 其他 示例效果：导航条组件放置表单在导航条组件中，可以放置表单。导航条组件放置表单的基本用法： …… 按钮 预定义样式说明：在 .navbar 的容器内放置表单元素，并在表单元素上添加 .navbar-form 预定义类。.navbar-left、.navbar-right 预定义类用于控制表单元素在左侧或右侧。示例：放置表单入口页面（index.html）： 秒杀 抢购 团购 其他 搜索 示例效果：导航条组件放置按钮、文本和链接在导航条组件中，可以放置按钮、文本和链接。导航条组件放置按钮、文本和链接的基本用法： ... 按钮 文本 超链接 预定义样式说明：.navbat-btn 预定义类用于在导航条组件中放置按钮。.navbar-text 预定义类用于在导航条组件中放置文本。.navbar-link 预定义类用于在导航条组件中放置链接。示例：放置按钮、文本和链接入口页面（index.html）： 登录 登录 文本 Hello 去搜索 去查询 示例效果：导航条组件固定在页面顶部或底部在导航条组件中，可以将导航条固定在页面顶部或或底部。导航条组件固定在页面顶部或底部的基本用法： ... 预定义样式说明：.navbar-fixed-top 预定义类用于将导航条组件固定在页面顶部。.navbar-fixed-bottom 预定义类用于将导航条组件固定在页面底部。无论是将导航条组件固定在顶部还是固定在底部，都要注意相关元素的内边距。示例：固定在页面顶部或底部入口页面（index.html）： 登录 登录 文本 Hello 去搜索 去查询 文本 示例效果：响应式导航条的使用响应式导航条组件在屏幕小于 768px 时，所有菜单项默认隐藏，单击右边的 icon 图标，所有的导航菜单项显示出来。响应式导航条的基本用法： ... 预定义样式说明：.navbar-toggle 预定义类用于设置导航条组件的折叠按钮。data-toggle 属性用于为折叠按钮添加折叠菜单的动画效果。data-target 属性指定折叠按钮点击后弹出某一个折叠菜单。.icon-bar 预定义类用于设置折叠按钮图标。.collapse、.nav-collapse 预定义类用于设置折叠菜单列表。示例：响应式导航条入口页面（index.html）： 秒杀 抢购 团购 其他 示例效果：分页/翻页组件分页组件的使用使用分页组件，可以在页面中创建上下页按钮、彩虹页码按钮。分页组件的基本用法： « 1 2 3 » 预定义样式说明：aria-label 属性用于给标签写说明文本。aria-hidden 属性用于设置标签在辅助技术（如阅读模式）下是否隐藏。.pagination 预定义类用于定义分页按钮的列表。.disabled 预定义类用于禁用分页按钮。.active 预定义类用于默认选中分页按钮。示例：分页组件入口页面（index.html）： 上一页 1 2 3 下一页 示例效果：翻页组件的使用使用翻页组件，可以在页面中创建上下页按钮。翻页组件的基本用法： 上一页 下一页 预定义样式说明：.pager 预定义类用于定义翻页按钮的列表。.previous、.next 预定义类用于使两个翻页按钮两端对齐。示例：翻页组件入口页面（index.html）： 上一页 下一页 示例效果：缩略图组件缩略图组件的使用缩略图组件用于展示栅格样式的图像、视频、文本等内容。缩略图组件的基本用法： 标题 文本 按钮 预定义样式说明：.thumbnail 预定义类用于定义缩略图。.caption 预定义类用于定义缩略图下面的描述文本。示例：缩略图组件入口页面（index.html）： 春天来了 春天来临，小河… 查看详情 示例效果：媒体对象组件媒体对象组件的使用媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容，如图像、视频、音频等。媒体对象组件的基本用法： 标题 内容 预定义样式说明：.media 预定义类用于定义媒体对象。.media-left/.media-right 预定义类用于定义媒体对象左侧/右侧的内容。.media-object 预定义类用于定义媒体对象，如图片、视频等。.media-body 预定义类用于定义媒体对象的文本内容。.media-heading 预定义类用于定义媒体对象文本内容的标题。示例：媒体对象组件入口页面（index.html）： 这是我的头像 我的头像真好看 示例效果：列表组组件列表组组件的使用列表组组件是一个带有多个列表条目的无序列表。列表组组件的基本用法： 列表项 小标签 …… .list-group 预定义类用于定义列表组。.list-group-item 预定义类用于定义列表项。.badge 预定义类用于为列表项添加徽章。示例：列表组组件入口页面（index.html）： 列表项1 777 列表项2 888 列表项3 999 列表项4 000 示例效果：
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 中，全局字体大小 font-size 为 14px，行高 line-height 为 1.428 倍即 20px。在 Bootstrap 中，使用 .lead 预定义类可以让一段文本突出显示。示例：突出文本入口页面（index.html）： 你好，世界！ 你好，世界！ 示例效果：对齐方式在 Bootstrap 中，使用文本对齐预定义类，可以将文字重新对齐。.text-left：左对齐。.text-right：右对齐。.text-center：居中对齐。.text-justify：两端对齐。示例：对齐方式入口页面（index.html）： 居左对齐 居中对齐 居右对齐 示例效果：列表Bootstrap 为无序列表、有序列表、定义列表提供了一系列预定义类。.list-inline：内联列表，即列表中所有的元素放置于同一行。.list-unstyled：无样式列表，即移除列表中的子元素的默认样式。.dl-horizontal：水平定义列表，即列表中的短语及其描述放置于同一行。示例：列表入口页面（index.html）： 01 02 03 01 02 03 标题 01 标题 02 示例效果：Bootstrap 表单表单基本实例Bootstrap 对基础表单没有做太多定制化效果设计，都是使用默认样式。在 Bootstrap 中，单独的表单控件会被自动赋予一些全局样式。设置了 .form-control 预定义类的 input、textarea 和 select 元素将被设置宽度为 100%。将 label 元素和表单元素包裹在 .form-group 表单组元素中可以获得最好的排列。示例：表单入口页面（index.html）： Email address Password File input Example block-level help text here. Check me out Submit 示例效果：内联表单在 Bootstrap 中，为 form 表单元素上添加 .form-inline 预定义类，表单元素将会横排展示在一行。内联表单只适用于窗口至少在 768px 宽度的浏览器上。示例：内联表单入口页面（index.html）： Name Email Send invitation 示例效果：水平排列的表单在 Bootstrap 中，为 form 表单元素添加 .form-horizontal 预定义类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。示例：水平排列表单入口页面（index.html）： Email Password Remember me Sign in 示例效果：表单校验状态Bootstrap 对表单控件的校验状态，如 error（错误）、warning（警告） 和 success（成功） 状态，都定义了样式，在使用时添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。示例：表单校验状态入口页面（index.html）： Input with success A block of help text that breaks onto a new line and may extend beyond one line. Input with warning Input with error Checkbox with success Checkbox with warning Checkbox with error 示例效果：表单控件尺寸在 Bootstrap 中，可以自由设置表单控件的尺寸。表单元素没有添加尺寸的预定义类时，默认尺寸。表单元素添加 .input-lg 预定义类时，尺寸变大。表单元素添加 .input-sm 预定义类时，尺寸变小。示例：表单控件尺寸入口页面（index.html）： ... ... ... 示例效果：Bootstrap 按钮按钮与定义样式Bootstrap 提供了七种样式的按钮风格的预定义类。.btn-default：默认样式，灰色。.btn-primary：primary 表示首选项，深蓝色。.btn-success：success 表示成功，绿色。.btn-info：info 表示一般信息，天蓝色。.btn-warning：warning 表示警告，黄色。.btn-danger：danger 表示危险，红色。.btn-link：link 表示链接。示例：按钮入口页面（index.html）： （默认样式）Default （首选项）Primary （成功）Success （一般信息）Info （警告）Warning （危险）Danger （链接）Link 示例效果：按钮尺寸在 Bootstrap 中，可以自由设置按钮的尺寸。按钮元素没有添加尺寸的预定义类时，默认尺寸。按钮元素添加 .btn-lg 预定义类时，尺寸变大。按钮元素添加 .btn-sm 预定义类时，尺寸变小。按钮元素添加 .btn-xs 预定义类时，尺寸变超小。示例：按钮尺寸入口页面（index.html）： （大按钮）Large button （大按钮）Large button （默认尺寸）Default button （默认尺寸）Default button （小按钮）Small button （小按钮）Small button （超小尺寸）Extra small button （超小尺寸）Extra small button 示例效果：Bootstrap 图片响应式图片在 Bootstrap 中，通过为 img 图片元素添加 .img-responsive 预定义类可以让 img 图片元素支持响应式布局。示例：响应式图片入口页面（index.html）： 示例效果：图片形状在 Bootstrap 中，可以为 img 图片元素添加不同的预定义类呈现不同的形状。.img-rounded：圆角图片。.img-circle：圆形图片。.img-thumbnail：带边框的图片。示例：图片形状入口页面（index.html）： 示例效果：
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：这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本。 right：这是一段文本，这是一段文本，这是一段文本，这是一段文本。 示例效果：容器属性 flex-wrap默认情况下，容器中的项目都排在一条轴线上。flex-wrap 属性用于定义项目在一条轴线上排不下时应该如何换行。flex-wrap 属性的基本用法：flex-wrap: 换行方式;换行方式的可选值：名称描述nowrap（默认值）项目不拆行或不换行wrap项目在必要时拆行或拆列wrap-reserve项目在必要时拆行或拆列，但是以相反的顺序排列示例：flex-wrap入口页面（index.html）： Title left：这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本，这是一段文本。 right：这是一段文本，这是一段文本，这是一段文本，这是一段文本。 示例效果：容器属性 flex-flowflex-flow 是一个复合属性，是 flex-direction、flex-wrap 的简写形式。flex-flow 属性的基本用法：flex-flow: 主轴方向 换行方式;容器属性 justify-contentjustify-content 属性用于设置项目在主轴方向上的对齐方式。justify-content 属性的基本用法：justify-content: 对齐方式;对齐方式的可选值：名称描述flex-start（默认值）项目在主轴中起点对齐flex-end项目在主轴中终点对齐center项目在主轴中居中对齐space-between项目在主轴中两端对齐，剩余空间在头尾项目之外的项目间平均分配space-around项目在主轴中分散对齐，剩余空间在每个项目两侧平均分配space-evenly项目在主轴中平均对齐，剩余空间在每个项目之间平均分配示例：justify-content入口页面（index.html）： Title flex-start：起点对齐 item1 item2 item3 item4 flex-end：终点对齐 item1 item2 item3 item4 center：居中对齐 item1 item2 item3 item4 space-between：两端对齐 item1 item2 item3 item4 space-around：分散对齐 item1 item2 item3 item4 space-evenly：平均对齐 item1 item2 item3 item4 示例效果：容器属性 align-itemsalign-items 属性用于设置项目在交叉轴方向上的对齐方式。align-items 属性的基本用法：align-items: 对齐方式;对齐方式的可选值：名称描述stretch（默认值）如果项目未设置高度或 auto，项目会被拉伸以适应容器高度flex-start项目在交叉轴中起点对齐flex-end项目在交叉轴中终点对齐baseline项目在交叉轴中基线对齐示例：align-items入口页面（index.html）： Title stretch：项目拉伸适应容器 item1 item2 item3 item4 flex-start：起点对齐 item1 item2 item3 item4 flex-end：终点对齐 item1 item2 item3 item4 baseline：基线对齐 示例效果：容器属性 align-contentalign-content 属性用于控制当容器里有多个弹性行时，这些行在交叉上的对齐方式和分布，align-content 属性对单行容器没有影响，它只在有多个行（即容器内的项目有换行）且容器在交叉轴方向上有额外的空间时才适用。align-content 属性的基本用法：align-content: 对齐方式;对齐方式的常见可选值：名称描述flex-start（默认值）项目在交叉轴中起点对齐flex-end项目在在交叉轴中终点对齐center项目在在交叉轴中居中对齐space-between项目在交叉轴中两端对齐，剩余空间在头尾项目之外的项目见平均分配space-around项目在交叉轴中分散对齐，剩余空间在每个项目两侧平均分配space-evenly项目在主轴中平均对齐，剩余空间在每个项目之间平均分配示例：align-content入口页面（index.html）： Title flex-start：起点对齐 item1 item2 item3 item4 flex-end：终点对齐 item1 item2 item3 item4 center：居中对齐 item1 item2 item3 item4 space-between：两端对齐 item1 item2 item3 item4 space-around：分散对齐 item1 item2 item3 item4 space-evenly：平均对齐 item1 item2 item3 item4 示例效果：项目属性 orderorder 属性用于设置项目的排列顺序，顺序数值越小，排列越靠前，顺序数值可以是正数也可以是负数，默认为 0。order 属性的基本用法：order: 排序数值;示例：order入口页面（index.html）： Title item1 item2 item3 item4 示例效果：项目属性 flex-growflex-grow 属性用于设置项目的放大比例，主要用于分配项目的剩余空间，其属性值不能是负数，默认值为 0。flex-grow 属性的基本用法：flex-grow: 放大数值;示例：flex-grow入口页面（index.html）： Title item1 item2 item3 item4 示例效果：项目属性 flex-shrinkflex-shrink 属性用于设置项目的缩小比例，即如果空间不足，项目将会缩小，其属性值不能是负数，默认值为 1。flex-shrink 属性的基本用法：flex-grow: 缩小数值;示例：flex-shrink入口页面（index.html）： Title item1 item2 item3 item4 示例效果：项目属性 flex-basisflex-basis 属性用于设置项目伸缩基准值，其默认值为 auto，即项目本身的大小。flex-basis 属性的基本用法：flex-basis: 伸缩基准值;示例：flex-basis入口页面（index.html）： Title item1 item2 item3 item4 示例效果：项目属性 flexflex 属性是一个复合属性，是 flex-grow、flex-shrink、flex-basis 的简写形式。flex 属性的基本用法：flex: 放大比例 缩小比例 伸缩基准值;项目属性 align-selfalign-self 属性用于设置项目在交叉轴方向上的对齐方式。align-self 属性的基本用法；align-self: 对齐方式;对齐方式的常见可选值：名称描述auto（默认值）项目继承其父容器的 align-items 属性stretch如果项目未设置高度或 auto，项目会被拉伸以适应容器高度flex-start项目在交叉轴中起点对齐flex-end项目在交叉轴中终点对齐center项目在交叉轴中居中对齐baseline项目在交叉轴中基线对齐示例：align-self入口页面（index.html）： Title item1 item2 item3 item4 item5 示例效果：媒体查询响应式布局响应式布局主要目的是为不同终端的用户提供更加舒适的界面和更好的用户体验，响应式布局即写一套页面就能适应不同的终端。响应式布局的优点：面对不同分辨率设备灵活性强，快捷的解决多设备显示适应问题。更少维护，开发一个网站，多终端使用。响应式布局的缺点：兼容各种设备工作量大，效率低下。代码累赘，会出现隐藏无用的元素，加载时间较长。响应式布局的原理：CSS3 媒体查询。媒体查询媒体查询可以针对不同的屏幕尺寸设置不同的样式，使页面在不同终端设备下达到不同的渲染效果。媒体查询的引用方式：@media 和 link。媒体查询的基本用法：@media mediaType and|not|only (mediaQuery) { } 媒体查询基本关键字：名称描述mediaType媒体类型all：用于所有设备screen：用于计算机屏幕、平板、手机等print：用于打印机和打印机预览mediaQuery媒体特性width：宽度height：高度max-width：最大宽度max-height：最大高度min-width：最小宽度min-height：最小高度and当媒体特性出现多条并存时，需要使用关键词连接and：同时满足条件时生效only：指定某种特定的媒体类型not：排除某种特定的媒体类型示例：媒体查询入口页面（index.html）： Title 示例效果：