技术笔记

编程 营销 外贸


网格布局d-grid

<h4>‌<strong>1. <code>d-grid</code> 的作用</strong>‌</h4> <ul> <li>‌<strong>功能</strong>‌:<br /> ✅ 将元素设置为 ‌<strong>CSS Grid 布局容器</strong>‌(等价于 <code>display: grid</code>)</li> <li>‌<strong>Bootstrap 特性</strong>‌: <ul> <li>属于 Bootstrap 的 Utility API 工具类</li> <li>替代传统 Flexbox 布局,实现更灵活的二维网格</li> </ul></li> <li>‌<strong>典型场景</strong>‌:<br /> 多列复杂布局、响应式网格排列</li> </ul> <h4>‌<strong>2. <code>style=&amp;quot;grid-template-columns: 1fr 2fr&amp;quot;</code></strong>‌</h4> <ul> <li>‌<strong>功能</strong>‌:<br /> ✅ 定义网格容器的 ‌<strong>列宽比例</strong>‌(左侧 : 右侧 = <code>1:2</code>)</li> <li> <p>‌<strong>关键参数</strong>‌:</p> <table> <thead> <tr> <th>单位</th> <th>含义</th> <th>当前效果</th> </tr> </thead> <tbody> <tr> <td><code>fr</code></td> <td>按剩余空间比例分配</td> <td>总宽度被分为 3 份,左侧占 1 份,右侧占 2 份</td> </tr> </tbody> </table> </li> </ul> <h3>参考代码</h3> <p>第6个例子,用d-grid实现左右布局,类似table tr td, 非常适合左右结构布局,按照比例设置了宽度,高度也是一致的,左右结构布局比d-flex更方便 <code>https://getbootstrap.com/docs/5.3/examples/headers/#</code> <img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=ebf08b27d0708724d54880e3c7367488&amp;amp;file=file.png" alt="Grid" /></p> <pre><code>&amp;lt;div class=&amp;quot;container-fluid pb-3&amp;quot;&amp;gt; &amp;lt;div class=&amp;quot;d-grid gap-3&amp;quot; style=&amp;quot;grid-template-columns: 1fr 2fr;&amp;quot;&amp;gt; &amp;lt;!-- 左侧区块 --&amp;gt; &amp;lt;div class=&amp;quot;bg-body-tertiary border rounded-3&amp;quot;&amp;gt; ...&amp;lt;br /&amp;gt; &amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt;&amp;lt;br /&amp;gt;&amp;lt;/div&amp;gt; &amp;lt;!-- 右侧区块 --&amp;gt; &amp;lt;div class=&amp;quot;bg-body-tertiary border rounded-3&amp;quot;&amp;gt; ... &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/div&amp;gt;</code></pre> <h3>表格布局 浮动布局 定位布局 栅格系统 弹性盒子布局 d-grid二维网格布局</h3> <h3>‌<strong>Bootstrap 布局方案对比(2025年更新版)</strong>‌</h3> <p>以下从 ‌<strong>适用场景、灵活性、代码复杂度、响应式支持</strong>‌ 等维度,对比三种主流布局方案:</p> <hr /> <h4>‌<strong>1. <code>d-flex</code>(弹性布局)</strong>‌</h4> <p>‌<strong>核心特性</strong>‌:一维布局(行或列),基于 Flexbox<br /> ✅ ‌<strong>优势</strong>‌:</p> <ul> <li>‌<strong>对齐控制</strong>‌:快速实现水平/垂直居中、间距分配(<code>justify-content</code>、<code>align-items</code>)</li> <li>‌<strong>动态填充</strong>‌:子元素自动填充剩余空间(<code>flex-grow</code>)</li> <li>‌<strong>移动端友好</strong>‌:天然适配流式排列(如导航栏、按钮组)</li> <li>‌<strong>兼容性</strong>‌:支持所有现代浏览器</li> </ul> <p>❌ ‌<strong>劣势</strong>‌:</p> <ul> <li>‌<strong>二维限制</strong>‌:无法同时控制行和列的复杂排列</li> <li>‌<strong>嵌套复杂度</strong>‌:多级 Flex 容器易导致代码臃肿</li> </ul> <p>‌<strong>典型场景</strong>‌:导航栏、卡片列表、表单控件组</p> <hr /> <h4>‌<strong>2. <code>d-grid</code>(网格布局)</strong>‌</h4> <p>‌<strong>核心特性</strong>‌:二维布局,基于 CSS Grid<br /> ✅ ‌<strong>优势</strong>‌:</p> <ul> <li>‌<strong>精准控制</strong>‌:定义行/列比例(<code>grid-template-columns: 1fr 2fr;</code>)</li> <li>‌<strong>重叠布局</strong>‌:支持元素跨行/列(<code>grid-column</code>、<code>grid-row</code>)</li> <li>‌<strong>隐式网格</strong>‌:自动填充剩余空间(<code>grid-auto-flow: dense</code>)</li> <li>‌<strong>响应式简化</strong>‌:通过媒体查询实现复杂断点布局</li> </ul> <p>❌ ‌<strong>劣势</strong>‌:</p> <ul> <li>‌<strong>学习曲线</strong>‌:需掌握 Grid 属性(如 <code>fr</code> 单位、<code>minmax()</code>)</li> <li>‌<strong>旧版浏览器</strong>‌:IE 11 部分支持(需 Polyfill)</li> </ul> <p>‌<strong>典型场景</strong>‌:仪表盘、杂志式排版、不规则卡片矩阵</p> <hr /> <h4>‌*<em>3. 传统栅格布局(<code>row</code> + `col-</em>`)**‌</h4> <p>‌<strong>核心特性</strong>‌:基于 12 列网格系统<br /> ✅ ‌<strong>优势</strong>‌:</p> <ul> <li>‌<strong>快速原型</strong>‌:预定义列类(<code>col-md-6</code>)减少手动计算</li> <li>‌<strong>一致性</strong>‌:强制对齐到网格线,避免布局错位</li> <li>‌<strong>文档丰富</strong>‌:社区资源多,适合新手</li> </ul> <p>❌ ‌<strong>劣势</strong>‌:</p> <ul> <li>‌<strong>灵活性差</strong>‌:难以实现非对称或动态比例布局</li> <li>‌<strong>代码冗余</strong>‌:多断点需重复定义列宽(如 <code>col-sm-12 col-md-6</code>)</li> <li>‌<strong>过度设计</strong>‌:简单布局可能引入不必要的嵌套</li> </ul> <p>‌<strong>典型场景</strong>‌:博客文章列表、电商商品栅格、标准后台页面</p> <hr /> <h3>‌<strong>对比总结表</strong>‌</h3> <table> <thead> <tr> <th>维度</th> <th><code>d-flex</code></th> <th><code>d-grid</code></th> <th>传统栅格</th> </tr> </thead> <tbody> <tr> <td>‌<strong>布局维度</strong>‌</td> <td>一维(单行/列)</td> <td>二维(行+列)</td> <td>一维(12列系统)</td> </tr> <tr> <td>‌<strong>响应式控制</strong>‌</td> <td>需手动媒体查询</td> <td>内置断点 + 自定义</td> <td>预定义断点类</td> </tr> <tr> <td>‌<strong>代码简洁性</strong>‌</td> <td>★★★★☆</td> <td>★★★☆☆</td> <td>★★★★★</td> </tr> <tr> <td>‌<strong>灵活性</strong>‌</td> <td>★★★☆☆</td> <td>★★★★★</td> <td>★★☆☆☆</td> </tr> <tr> <td>‌<strong>学习成本</strong>‌</td> <td>低</td> <td>中高</td> <td>低</td> </tr> <tr> <td>‌<strong>IE 兼容性</strong>‌</td> <td>部分支持</td> <td>需 Polyfill</td> <td>完美支持</td> </tr> </tbody> </table> <hr /> <h3>‌<strong>选型建议</strong>‌</h3> <ul> <li>‌<strong>简单线性布局</strong>‌ → <code>d-flex</code>(如导航栏、按钮组)</li> <li>‌<strong>复杂二维结构</strong>‌ → <code>d-grid</code>(如仪表盘、瀑布流)</li> <li> <p>‌<strong>快速标准化页面</strong>‌ → 传统栅格(如后台管理、电商列表)</p> </li> <li> <ul> <li>*</li> </ul> </li> </ul> <h3>‌<strong>2025年趋势补充</strong>‌</h3> <ul> <li>‌<strong>CSS Subgrid 普及</strong>‌:<code>d-grid</code> 支持嵌套网格继承父级轨道,减少布局代码</li> <li>‌<strong>容器查询集成</strong>‌:Bootstrap 6 实验性支持 <code>@container</code>,实现组件级响应式</li> <li>‌<strong>性能优化</strong>‌:Grid 布局渲染速度提升 30%(Chromium 引擎优化)</li> </ul> <p>建议优先掌握 <code>d-grid</code>,搭配传统栅格应对保守项目需求,<code>d-flex</code> 作为微观对齐工具使用</p>

页面列表

ITEM_HTML