简介基于Bootstrap的响应式旅游行业网站模板面向旅游网站开发者与前端学习者可快速搭建适配桌面、平板和手机的旅游平台界面。模板整合导航、景点展示、套餐介绍、评论与预订表单等常见模块兼顾视觉表现与交互体验特别适合旅行社、景区或OTA类项目的起步版本。压缩包共37个文件包含HTML页面、CSS样式、JavaScript脚本、JPG/PNG图片素材以及MD使用说明整体仅1.77MB结构紧凑、便于部署和二次修改。目前已有182人学习下载适合初学者参照源码理解Bootstrap网格系统、响应式设计及组件调用方式也适合开发者在此基础上定制品牌风格、扩展业务功能快速产出可直接上线的旅游行业站点。1. 做好了PC版却撑不起手机端浏览旅游站模板的响应式改造从哪入手很多旅游站的第一版是由传统外包或运营临时套 CMS 主题做出来的办公室电脑上看着整整齐齐手机上一打开导航栏挤成一团、价格表格横向溢出、轮播图被拉伸变形、预订表单在键盘弹起后完全没法操作。标题里这套「Bootstrap响应式旅游行业网站模板-Travel」要解决的就是这类问题用 Bootstrap 的栅格体系、响应式组件和工具类把地接社、酒店、景区的页面在手机、平板和桌面三档宽度下重新组织一遍。它适合接手旧站改版的前端新人也适合要从零搭静态活动页、不想自己造轮子的开发更重要的是适合想搞清楚 Bootstrap 在真实业务里怎么用对、用透的从业者。下面按搭骨架、做组件、改视觉、验收四个环节讲一套可以直接落地的方案。2. 栅格是地基用Bootstrap栅格规划酒店列表与目的地卡片2.1 先确定断点策略旅游页面通常只要三档宽度一个信息密度高的旅游列表页最常见的问题是在 1024px 到 1280px 之间卡片一排四张显得拥挤到了 768px 又突然堆叠成一条长流。Bootstrap 5 的默认断点分配是576px手机竖屏、≥576px大手机横屏、≥768px平板、≥992px桌面、≥1200px大桌面、≥1400px超大屏。做旅游内容页我不会全层铺开按三档规划即可mobile0-767px看单列tablet768px-1199px看两列desktop≥1200px看四列。后面三档以外的细节配置可以留给后续迭代模板交付到三档对绝大多数运营场景已经够用。确定断点的依据不是设计稿而是内容形态。旅游产品卡片里通常包含图片、标题、价格和两个按钮标题长度还带目的地名称和产品名窄屏单列展示可以把信息读全中屏两列能在舒适阅读前提下增加曝光桌面四列则充分利用宽屏并保证卡片最小宽度不低于 260px。这个最小宽度很重要低于它价格和按钮就很难在同一行排开我一般通过 col 的断点类来控制而不是靠媒体查询二次改写。2.2 卡片列表的最小组合row col 响应式通用类先写一个不带真实图片的目的地卡片网格重点是把栅格类名和内容拆分看明白div classcontainer py-4 div classrow g-3 div classcol-12 col-md-6 col-xl-3 div classcard h-100 img srcimg/dest-01.jpg classcard-img-top alt京都秋季庭院 div classcard-body h5 classcard-title text-truncate京都经典庭院三日/h5 p classcard-text text-secondary small古都文化主题含住宿与当地交通安排/p div classd-flex justify-content-between align-items-center span classtext-danger fw-bold¥4280/span a href# classbtn btn-sm btn-outline-primary查看行程/a /div /div /div /div !-- 后续并列的 col-12 col-md-6 col-xl-3 结构相同 -- /div /div这段代码里col-12 col-md-6 col-xl-3决定了卡片在不同宽度下的列数手机端占满整行平板从 md 开始每行两张桌面从 xl 起每行四张。g-3是 Bootstrap 5 里的栅格沟槽控制比老写法no-gutters加 margin 要清爽得多水平和垂直间距统一由它接管。h-100保证同一行卡片高度一致价格和按钮用 flex 布局分布在两端是旅游套餐卡片最常见的表现方式。这里有个新手容易忽略的点栅格必须放在.row里的.col-*才生效row自带负 margin 抵消容器 padding。如果直接在某张卡片上单独套col-md-6又没包 row窄屏下样式会乱。千万不能把 Bootstrap 的栅格类当作随手加的独立样式它们的语义是「列必须从属于行」。2.3 图片响应式与卡片高度坑旅游站对图片要求高但模板里最容易翻车的就是img标签。首先是记得给每个列表图片加classimg-fluid否则图片在窄屏按原始宽度溢出。其次是卡片列内部的图片高度不一致导致「高低脚」我的习惯是把图片容器固定比例裁剪用 Bootstrap 5 里的ratio ratio-16x9这个工具类div classratio ratio-16x9 img srcimg/dest-02.jpg alt北海道路线起点 classobject-fit-cover /div注意object-fit-cover是 Bootstrap 5 提供的语义类早期版本要手写 CSS。这样处理之后无论后端回传图片是横版还是竖版卡片高度始终稳定排布就不会出现豁口。做轮播头图时同样适用下一章会接着讲轮播怎么和这种比例容器配合。图片处理还有一层容易踩的坑ratio容器的子元素需要设置为position: absolute才能填满容器吗Bootstrap 官方实现是.ratio *被定为绝对定位但img作为媒体元素不缺省设置某些浏览器下它仍会按原始尺寸参与布局。稳妥做法是在图片上同时加w-100 h-100确保绝对定位后的填充生效。视觉上还要注意object-position默认居中裁剪对带人物的场景照人脸容易裁掉旅游运营图通常主体偏中下我会给个别图片加object-position: 50% 80%做调整。2.4 栅格折叠时排序怎么变窄屏下列表顺序不能照搬桌面。运营经常要求手机端第一个推爆款到了桌面爆款回到第三位。用order-first与order-lg-*可以做到不加一句 JSdiv classrow row-cols-1 row-cols-md-2 row-cols-xl-4 g-3 div classcol order-first order-lg-0爆款套餐/div div classcol普通套餐/div /divorder-first表示默认排最前order-lg-0在 lg 及以上还原为 DOM 顺序。row-cols-*是另一个容易漏掉的简写它作用于外层容器把子列均分配合 col-* 混用要注意优先级混合时col的宽度权重会覆盖容器均分所以要么统一用容器侧均分要么全部用 col-* 显式指定列宽避免团队协作时出现规则冲突。排序方法配合栅格重排可以解决「PC 首屏要放品牌区、手机首屏要放特价区」的冲突但不要过度使用。两个及以上order-*混排会让 DOM 结构和视觉顺序完全脱节后续维护的人看代码会非常痛苦。我通常只在首页顶部流量位和列表页前两个商品上做这个操作其余保持 DOM 顺序。3. 下拉菜单与轮播套餐页和活动页常用的响应式交互组件3.1 静态下拉菜单的数据属性驱动方式主站导航里的「目的地」下拉很多人以为必须写 JavaScript。Bootstrap 的 dropdown 完全可以用>li classnav-item dropdown a classnav-link dropdown-toggle href# rolebutton>nav classnavbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top div classcontainer a classnavbar-brand href#Travel/a button classnavbar-toggler typebutton>div idheroCarousel classcarousel slide carousel-fade>form classrow g-3 needs-validation novalidate div classcol-md-6 label forname classform-label姓名/label input typetext classform-control idname required minlength2 div classinvalid-feedback请至少输入两个字。/div /div div classcol-md-6 label fortravelDate classform-label出发日期/label input typedate classform-control idtravelDate required div classvalid-feedback日期可用/div /div div classcol-12 button classbtn btn-primary typesubmit提交预订信息/button /div /form script document.querySelectorAll(.needs-validation).forEach(function (form) { form.addEventListener(submit, function (event) { if (!form.checkValidity()) { event.preventDefault(); event.stopPropagation(); } form.classList.add(was-validated); }); }); /scriptnovalidate禁用了表单的默认提交校验避免浏览器弹原生气泡之后交给 JS 统一处理。invalid-feedback在 input 触犯伪类时显示valid-feedback在通过时显示。这套机制与 Bootstrap 内部验证设计保持一致不需要在输入事件里逐字段判断全部交给checkValidity()。需要特别说明的是valid-feedback在was-validated之后只有表单里被触碰过的:valid控件才会显示绿色未触碰的不会自动显绿。移动端表单有个额外问题日期输入框在 iOS 上弹原生滚轮Android 上弹日历控件两者触发元素可能不同。如果有自定义清空按钮注意不要让这个按钮成为form-control的一部分。键盘弹起遮挡下层输入框的问题Bootstrap 自身不管模板里要在input上避免使用position: fixed的容器包裹否则 iOS 下会出现输入框错位。4.2 人数与天数控件select 和 number 的取舍旅游表单几乎必填的几人成团、行程天数用select或数字输入框各有取舍。用select好维护选项但选项一多滚动麻烦用input typenumber在手机端弹的是数字键盘输入舒适度高但校验逻辑要多写。折中做法是把天数和出发地拆开减少长表单的顿挫感div classrow g-3 div classcol-6 label fordayCount classform-label行程天数/label select iddayCount classform-select required option value请选择/option option value33天/option option value55天/option option value77天及以上/option /select /div div classcol-6 label forgroupSize classform-label成人人数/label input typenumber idgroupSize classform-control min1 max20 value2 required /div /divform-select是和form-control并列的 Bootstrap 选择器样式自带箭头不需要再引入第三方选择器组件。给 select 加required默认第一项设为value的空 option这样「未选择」时checkValidity()会直接拦截提交。手机端数字键盘会把min/max当作输入合法性的补充提示但不会绝对阻止输入所以最终还是要靠checkValidity()回兜。这里有一个建议类写法人数和天数并排用col-6是合理的但两个都放一行在窄屏下可能偏挤。可以改成col-12 col-sm-6让 576px 以下各占一行按钮区中间留出足够间距。触控目标太小是旅游站表单移动端跳出率高的重要原因建议所有输入框高度保持在 44px 以上Bootstrap 默认的form-control在移动端也够但加上自定义的 select 后要检查箭头区域的点击热区。4.3 价格表格必须做响应式包裹否则表格把页面撑爆行程报价多列、每列带币种符号和短横线一旦超过视口宽度手机端就是灾难。Bootstrap 给出的方案是把表格放在.table-responsive容器里让表格本体横向滚动而不是缩放变形div classtable-responsive table classtable table-striped align-middle thead classtable-light trth房型/thth早晚餐/thth3天/thth5天/thth7天/thth单房差/th/tr /thead tbody trtd标准双床/tdtd含双早/tdtd¥1980/tdtd¥3180/tdtd¥4580/tdtd¥360/晚/td/tr trtd海景大床/tdtd含双早/tdtd¥2680/tdtd¥4180/tdtd¥5980/tdtd¥520/晚/td/tr /tbody /table /div这种横向滚动方案在移动端体验是用户可以左右滑、列保持对齐比把表格纵推成卡片更容易扫描比价。但要注意父级不要嵌套两层.table-responsive嵌套会让外层表格内容被固定手势指定又容易误触发整个页面的左右滑。如果同时存在多个表格块建议给每个.table-responsive加一个tabindex0和明确的边界阴影指示用户可以横向滑动。还有一种更强的做法是在窄屏下用display: block把每行tr变成卡片td用::before伪造标题。Bootstrap 纯 CSS 不帮忙做这个需要你写少量媒体查询。但注意表格语义化维护成本高且营销数据经常要导出我一般只在「3天/5天/7天」这类固定列宽、内容短的报价表上保留横向滚动方案复杂产品对比表再考虑反 turns 卡片变形。建议模板默认保留.table-responsive同时告诉后端接口返回的数据列数尽量控制在 6 列以内。5. 换肤不要硬写CSS用Sass变量定制旅游主题色5.1 为什么直接改官方 CSS 会到处漏色拿到 Bootstrap 编译版后新手最容易做的事是全局搜索btn-primary然后覆盖background-color结果按钮是换色了但下拉选中背景、轮播指示器、分页高亮和链接颜色还留着主题蓝。因为 Bootstrap 内部把大量组件的强调色都挂在$primary变量上逐一手改 class 会全面陷入维护泥潭。旅游行业模板的主题色通常是海蓝、生态绿或沙棕色选一个当品牌主色然后所有状态色从它派生这才是设计和工程上最稳的路径。正确做法是在 Sass 源码层覆盖变量再重新编译。源码里的_variables.scss定义了所有主题令牌$primary被按钮、链接、选中态、轮播激活圆点、分页高亮、校验绿边等几十处引用。你改这一个变量全站主色整体联动放开这也是 Sass 方案比直接覆盖 CSS 强的地方。5.2 在项目里接入 Sass 编译最小可用方式不引入 Vue/Webpack 全套工具链用 Node 端跑 sass 就好。工程结构上我建议单独放scss/theme.scss把变量声明放在 Bootstrap 源码 import 之前// scss/theme.scss $primary: #0f6b5f; $danger: #c94b4b; $enable-rounded: false; $border-radius: 0.25rem; $font-family-base: Noto Sans SC, PingFang SC, Microsoft YaHei, sans-serif; import ../vendor/bootstrap-5.3/scss/bootstrap;$primary控制按钮、链接、选中态、轮播激活圆点等一大族颜色。$enable-rounded: false关闭圆角按钮、卡片、输入框都更符合简洁的旅游品牌调性。把 Bootstrap 源码放进vendor目录而不是引 CDN 编译版是因为你无法在运行时覆盖源码里的变量CDN 版只能靠外挂 override 样式硬覆盖遇到内部选择器权重问题会很被动。编译命令用sass --watch scss/theme.scss css/theme.min.css --stylecompressed--watch让 sass 在文件变化时自动重建--stylecompressed产出压缩产物。团队协作时再把这个命令包进 npm script 或 Makefile 里底层仍是同一个 sass 流程不需要引入框架环境。5.3 变量没生效的四种排查情况Bootstrap 变量系统的层级是结构化的$primary是装饰层$body-bg是基础层组件层会再看自身的专属变量。四种情况是变量覆盖最常见的翻车现场只改$primary没改$link-color低层级组件的链接颜色还是默认蓝色。只想改按钮圆角只改$btn-border-radius会失效它受$enable-rounded的全局开关统一控制圆角修改链路是$enable-rounded→$border-radius→ 组件变量。字体族改了$font-family-base但标题h1-h6走的是$headings-font-family它不继承$font-family-base而是有独立默认值。卡片阴影类是$box-shadow它是一个 Sass 列表如果你拼字符串进去会编译报错要写成标准列表格式。排查顺序建议是查这个组件的官方 Sass 文档确认它用的变量名 → 看_variables.scss里的定义和!default逻辑 → 编译后搜索对应规则确认最终生效的规则是否来自自己的文件。大多数换肤翻车原因定位到后来都是这四类之一。5.4 用 CSS 变量做轻量切换的必要限制Bootstrap 5 引入了许多 CSS 变量理论上可以在 runtime 切换主题色比如--bs-primary。但组件内部很多样式在编译时就把值写进了具体类里不会全部联动变换。如果你只需要「一键切换绿色/蓝色」的运营需求可以接受部分组件颜色不变那可以靠style标签覆盖body.theme-ocean { --bs-primary: #1766a5; --bs-link-color: #1766a5; }这个方案适合「只换主按钮、链接、部分背景」的轻换肤。但轮播指示器、分页激活、表单选中等组件很多是用 Sass 编译后的具体颜色值CSS 变量覆盖不到。复杂换肤必须回到 Sass 重新编译这也是我建议模板交付时就把scss源文件一起提交的原因。运行时换肤更适合给品牌方做 AB 测试不适合做主样式切换。6. 上线前这样验收直接在浏览器里模拟手机、弱网与图片负载页面本地没问题换真机交互失效的情况十次里七八次都是缺移动端专项验收。我给模板设定的验收顺序按风险从高到低排第一看导航折叠后的二级菜单能否正常打开很多模板只折叠一级菜单子菜单在触屏没有 hover 就永远出不来第二看表单在手机上凑近点按的反馈按钮过小、日期控件被键盘顶出视口是高频问题第三看轮播和卡片图片的加载顺序不设置的话首屏之外的图全部预载弱网下首屏白屏时间会很长。操作上打开 Chrome DevTools 的 Device Toolbar选 iPhone 12 Pro 这类机型模拟然后切到 Network 面板里的 Fast 3G 做一次慢网验证img[loadinglazy]是否对首屏之外图片生效轮播自动播放是否在弱网时出现白屏间隙。如果轮播第一屏就要快把首图直接fetchpriorityhigh其余图片加loadinglazyimg srcimg/hero.jpg classd-block w-100 object-fit-cover alt首页主图 fetchpriorityhigh img srcimg/card-01.jpg classd-block w-100 object-fit-cover alt目的地卡片 loadinglazy decodingasyncfetchpriorityhigh让主图优先下载loadinglazy让卡片图滚动到视口附近时才请求decodingasync让解码不阻塞渲染。这三项是模板里性价比最高的基础性能优化不需要打包工具介入。另一个容易漏掉的验收动作是把页面缩放到 320px 宽度扫一遍长单词、表格td、轮播标题的white-space: nowrap都会现形。处理办法是给img和容器统一加强约束遇到无法缩放的 flex 元素使用min-width: 0而不是在外层套overflow-x: hidden去掩盖溢出后者在 iOS Safari 上会造成整个页面横滑的漂移感。按这个顺序跑完再交到运营手上报 bug 的概率会低很多。本文还有配套的精品资源点击获取