打开任何一个Bootstrap模板的页模源码，第一眼看到的板源往往不是花哨的视觉设计，而是页模那种近乎刻板的文件结构。css/、板源js/、页模fonts/、板源index.html——四个文件夹，页模干净得像刚整理过的板源工具箱。这不是页模审美选择，是板源工程约束。Bootstrap本身是页模一套栅格系统和组件库，模板源码的板源价值就在于它把这套系统落到了具体页面上，让你能直接改，页模而不是板源从零搭。

我手里这份模板是页模从GitHub上扒下来的，作者叫startbootstrap，项目名“agency”。index.html一共四百多行，头部引了三个CSS：bootstrap.min.css、font-awesome.min.css、agency.min.css。前两个是第三方依赖，第三个才是模板自己的样式。这个顺序不能乱，否则自定义样式会被Bootstrap的默认规则覆盖。很多人改模板改到崩溃，八成是没注意层叠顺序。

往下翻，导航栏用的是<nav class="navbar navbar-default navbar-fixed-top">。navbar-fixed-top意味着滚动时导航条钉在顶部，但模板里额外加了一段JavaScript来监听滚动事件，超过100px就给nav加个缩小的类。这段代码写在agency.min.js里，压缩过，可读性差，但逻辑很简单：$(window).scroll(function() { if ($(this).scrollTop() > 100) { $('.navbar').addClass('affix'); } });。这种小交互在模板里很常见，不是Bootstrap自带的，是作者手写的补丁。

再往下是页头区域，<header>里面套了一个<div class="container">，然后是一行<div class="row">。栅格系统在这里体现得很直白：col-md-12占满整行，里面放标题和按钮。标题用了<h1>，但样式被agency.css重写了，字体换成了Montserrat，字号用rem单位。Bootstrap默认的h1是36px，这里改成了60px。改法很粗暴，直接写header h1 { font-size: 60px; }。模板源码里这种覆盖式写法到处都是，优点是见效快，缺点是后期维护得自己心里有数。

服务区块用了三个col-md-4，每个里面一个图标、一个标题、一段描述。图标是Font Awesome的<i class="fa fa-star">，标题是<h3>，描述是<p>。这种三段式布局在Bootstrap模板里泛滥成灾，但确实好用。你只需要改文字和图标类名，结构不用动。我数了一下，这个模板里类似的区块有四个：服务、作品集、团队、联系。每个区块的HTML结构几乎一样，区别只在内容。这就是模板的套路——把重复模式固定下来，让你填空。

作品集部分用了模态框。每个缩略图点击后弹出一个<div class="portfolio-modal modal fade">，里面再放一张大图和一段说明。模态框的HTML写在页面底部，不在缩略图旁边。这是Bootstrap的惯例，模态框要放在body的直接子元素里，避免被父级容器的overflow属性裁掉。很多人复制模态框代码时忘了挪位置，结果弹出来是歪的。

页脚部分有个<ul class="list-inline">，里面是社交图标。list-inline把li变成行内块，间距靠quicklinks类控制。页脚背景色是深灰，文字白色，版权信息用<p>包着，字号12px。这部分没什么技术含量，但配色和间距调得挺舒服，直接抄没问题。

整份源码里最值得看的是agency.css。它只有三百多行，但把Bootstrap默认的圆角、阴影、字体全改了。比如按钮，Bootstrap默认是border-radius: 4px，这里改成了border-radius: 0，方角。再比如导航栏，默认是白色背景，这里改成了透明，滚动后才变白。这些改动都不复杂，但累积起来让模板有了自己的面孔。你拿去改，改的是面孔，骨架还是Bootstrap的。

最后说个实际的问题。这份模板用的是Bootstrap 3.3.7，不是4也不是5。Bootstrap 4换了Flexbox栅格，类名从col-md-4变成了col-md-4（看起来一样，但底层实现不同），还加了col-md-4之外的col-4。如果你直接把这套代码往Bootstrap 5上搬，导航栏和模态框会先崩。所以拿模板源码之前，先看package.json或者bower.json里的版本号。版本不对，改起来比重写还累。