aid-elements-cmcc

<!DOCTYPE html>  <html class="hb-loaded"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Theme</title> <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="../dist/css/aid.min.css"> <link rel="stylesheet" href="docs.min.css"> <style> .doc { padding: 30px; } .row { padding-bottom: 20px; } .doc-color { overflow: hidden; } .doc-color .list-inline-item { min-width: 12%; text-align: center; } .color { width: 60px; height: 60px; display: block; border-radius: 50%; margin: 10px auto; } h1 { margin-top: 30px; } h2 { margin-top: 20px; } .bd-example-border-utils [class^=border-] { display: inline-block; width: 6rem; height: 6rem; margin: .25rem; background-color: #f5f5f5; border: 1px solid; } .bd-highlight { background-color: rgba(86, 61, 124, .15); border: 1px solid rgba(86, 61, 124, .15); } .bd-example-row .row > .col, .bd-example-row .row > [class^=col-] { padding-top: .75rem; padding-bottom: .75rem; background-color: rgba(86, 61, 124, .15); border: 1px solid rgba(86, 61, 124, .2); } .bd-example-row-flex-cols .row { min-height: 10rem; background-color: rgba(255, 0, 0, .1); } </style> </head> <body> <div class="doc container">  <div class="bs-docs-section"> <h1 class="page-header">起始模板</h1> <div> <p>确保你的网页是建立在最新的设计和开发标准之上的</p> <ul> <li>使用HTML5文档类型，没有它，你就会看到一些并不完整的样式。只有把它包含进去才不会造成显著的问题。</li> <li>强制Internet Explorer使用最新的渲染模式</li> <li>为了确保所有的设备的渲染和触摸效果，必须使用视口meta标签</li> <li>默认样式已经将全局<code>box-sizing</code>的值改成了，<code>border-box</code>（原本值是<code>content-box</code>）。这就保证了padding不会影响一个元素的最后计算宽度 </li> </ul> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp"><!DOCTYPE html></span> <span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span> <span class="nt"><head></span> <span class="c"></span> <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span><span class="nt">></span> <span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">></span> <span class="nt"><meta</span> <span class="na">http-equiv=</span><span class="s">"x-ua-compatible"</span> <span class="na">content=</span><span class="s">"ie=edge"</span><span class="nt">></span> ... <span class="nt"></body></span> <span class="nt"></html></span></code></pre> </div> </div> <h2>支持的浏览器</h2> <p>支持所有的主流浏览器和平台的<strong>最新的、稳定的版本</strong>。在 Windows 中, 支持 Internet Explorer 9以上版本</p> <h3>Internet Explorer 9</h3> <p>Internet Explorer 9也是支持的。然而，你需要知道，有一些CSS3属性和HTML5元素不被完全支持。</p> <div class="table-responsive"> <table class="table table-bordered table-striped"> <thead> <tr> <th scope="col">功能</th> <th scope="col">状态</th> </tr> </thead> <tbody> <tr> <th scope="row"><code>border-radius</code>圆角边框</th> <td class="text-success">支持</td> </tr> <tr> <th scope="row"><code>box-shadow</code>盒阴影</th> <td class="text-success">支持</td> </tr> <tr> <th scope="row"><code>transform</code>变形</th> <td class="text-success">支持, 带<code>-ms</code>前缀</td> </tr> <tr> <th scope="row"><code>transition</code>过渡</th> <td class="text-danger">不支持</td> </tr> <tr> <th scope="row"><code>placeholder</code>占位符</th> <td class="text-danger">不支持</td> </tr> <tr> <th scope="row"><code>display:flex</code>弹性盒子</th> <td class="text-danger">不支持</td> </tr> </tbody> </table> </div> </div>  <div class="bs-docs-section"> <h1 class="page-header"><a target="_blank" href="../dist/fonts/aidesignicons-preview.html">图标字体</a></h1> 使用<code>.aid .aid-*</code>修饰图标，使用<code>icon-gradient-*</code>表示渐变， <div class="row"> <div class="col"> <i class="text-42 aid aid-owl"></i> </div> <div class="col"> <i class="text-42 aid aid-music-circle"></i> </div> <div class="col"> <i class="text-42 aid aid-snowman"></i> </div> <div class="col"> <i class="text-42 aid aid-airplane"></i> </div> <div class="col"> <i class="text-42 aid aid-camera"></i> </div> </div> <div class="row"> <div class="col"> <i class="text-42 aid aid-kickstarter icon-gradient-primary"></i> </div> <div class="col"> <i class="text-42 aid aid-qqchat icon-gradient-success"></i> </div> <div class="col"> <i class="text-42 aid aid-puzzle icon-gradient-info"></i> </div> <div class="col"> <i class="text-42 aid aid-qrcode icon-gradient-warning"></i> </div> <div class="col"> <i class="text-42 aid aid-evernote icon-gradient-danger"></i> </div> </div> <div class="highlight"> <pre> <code> <div class="row"> <div class="col"> <i class="text-42 aid aid-owl"></i> </div> <div class="col"> <i class="text-42 aid aid-music-circle"></i> </div> <div class="col"> <i class="text-42 aid aid-snowman"></i> </div> <div class="col"> <i class="text-42 aid aid-airplane"></i> </div> <div class="col"> <i class="text-42 aid aid-camera"></i> </div> </div> <div class="row"> <div class="col"> <i class="text-42 aid aid-kickstarter icon-gradient-primary"></i> </div> <div class="col"> <i class="text-42 aid aid-qqchat icon-gradient-success"></i> </div> <div class="col"> <i class="text-42 aid aid-puzzle icon-gradient-info"></i> </div> <div class="col"> <i class="text-42 aid aid-qrcode icon-gradient-warning"></i> </div> <div class="col"> <i class="text-42 aid aid-evernote icon-gradient-danger"></i> </div> </div> </code> </pre> </div> </div>  <div class="bs-docs-section"> <h1>自定义选项</h1> <div> <div class="bd-content"> <table> <thead> <tr> <th>变量</th> <th>值</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>$spacer</code></td> <td><code>1rem</code> （默认）, 或者任何大于0的值</td> <td>为间隔工具指定默认的间隔值</td> </tr> <tr> <td><code>$enable-flex</code></td> <td><code>true</code> 或 <code>false</code> （默认）</td> <td>给<code>display: flex</code>交换<code>float</code>和<code>display: table</code>样式。</td> </tr> <tr> <td><code>$enable-rounded</code></td> <td><code>true</code> （默认） or <code>false</code></td> <td>为各种组件启用预定义的<code>border-radius</code>样式。</td> </tr> <tr> <td><code>$enable-shadows</code></td> <td><code>true</code> 或 <code>false</code> （默认）</td> <td>为各种组件启用预定义的<code>box-shadow</code>样式。</td> </tr> <tr> <td><code>$enable-gradients</code></td> <td><code>true</code> 或 <code>false</code> （默认）</td> <td>通过<code>background-image</code>为各种组件启用预定义的渐变</td> </tr> <tr> <td><code>$enable-transitions</code></td> <td><code>true</code> （默认）或 <code>false</code></td> <td>为各种组件启用预定义的<code>transition</code>（过渡）</td> </tr> <tr> <td><code>$enable-hover-media-query</code></td> <td><code>true</code> 或 <code>false</code> （默认）</td> <td>…</td> </tr> </tbody> </table> </div> </div> </div>  <div class="bs-docs-section"> <h1 class="page-header">颜色</h1> <div class="doc-color"> <h2 class="text-gradient-primary">主色</h2> <p>主色是用于主题的颜色，以及主操作元素的颜色，如primary按钮的颜色，如果不支持渐变的浏览器则表现为下面一行的颜色</p> <ul class="list-inline"> <li class="list-inline-item"> <p>.bg-gradient-cyan</p> <div class="color bg-gradient-cyan"></div> <div class="color bg-cyan"></div> </li> <li class="list-inline-item"> <p>.bg-gradient-green-dark</p> <div class="color bg-gradient-green-dark"></div> <div class="color bg-green-dark"></div> </li> <li class="list-inline-item"> <p>.bg-gradient-pink</p> <div class="color bg-gradient-pink"></div> <div class="color bg-pink"></div> </li> <li class="list-inline-item"> <p>.bg-gradient-plum</p> <div class="color bg-gradient-plum"></div> <div class="color bg-plum"></div> </li> <li class="list-inline-item"> <p>.bg-gradient-green-light</p> <div class="color bg-gradient-green-light"></div> <div class="color bg-green-light"></div> </li> <li class="list-inline-item"> <p>.bg-gradient-orange</p> <div class="color bg-gradient-orange"></div> <div class="color bg-orange"></div> </li> </ul> <h2>辅助色</h2> <p>辅助色是具有代表性的颜色，常用于信息提示，比如成功、警告和失败。</p> <ul class="list-inline"> <li class="list-inline-item"> <p class="text-primary">.bg-primary</p> <div class="color bg-primary"></div> <div class="color bg-purple"></div> </li> <li class="list-inline-item"> <p>.bg-warning</p> <div class="color bg-warning"></div> <div class="color bg-yellow"></div> </li> <li class="list-inline-item"> <p>.bg-success</p> <div class="color bg-success"></div> <div class="color bg-green"></div> </li> <li class="list-inline-item"> <p>.bg-danger</p> <div class="color bg-danger"></div> <div class="color bg-red"></div> </li> <li class="list-inline-item"> <p>.bg-info</p> <div class="color bg-info"></div> <div class="color bg-blue"></div> </li> </ul> <h2>中性色</h2> <p>中性色常用于文本、背景、边框、阴影等，可以体现出页面的层次结构</p> <ul class="list-inline"> <li class="list-inline-item"> <p>背景色</p> <div class="color bg-gray-lightest-5"></div> </li> <li class="list-inline-item"> <p>背景色</p> <div class="color bg-gray-lightest-10"></div> </li> <li class="list-inline-item"> <p>背景色，分割线</p> <div class="color bg-gray-lightest-18"></div> </li> <li class="list-inline-item"> <p>边框颜色</p> <div class="color bg-gray-lightest"></div> </li> <li class="list-inline-item"> <p>disabled颜色，输入框图标颜色</p> <div class="color bg-gray-lighter"></div> </li> <li class="list-inline-item"> <p>文字颜色</p> <div class="color bg-gray-light"></div> </li> <li class="list-inline-item"> <p>文字颜色，正文颜色</p> <div class="color bg-gray"></div> </li> <li class="list-inline-item"> <p>文字颜色</p> <div class="color bg-gray-dark"></div> </li> <li class="list-inline-item"> <p>背景色深色</p> <div class="color bg-gray-darker"></div> </li> </ul> </div> </div>  <div class="bs-docs-section"> <h1>布局</h1> <div> <h2>Containers</h2> <div> <p>窗口是最基本的布局元素。<strong>在使用网格系统中它是必不可少的</strong>。选择一个响应式的、固定宽度的容器（意味着它的<code>max-width</code>在每个节点都会改变），或者选择一个流式宽度的窗口（意味着任何时候它的宽度总是100%） </p> <p>虽然容器<strong>可以</strong>被嵌套，但是大多数布局并不需要一个嵌套的容器。</p> <div class="bd-example"> <div class="bd-example-container"> <div class="bd-example-container-header"></div> <div class="bd-example-container-sidebar"></div> <div class="bd-example-container-body"></div> </div> </div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span> <span class="c"></span> <span class="nt"></div></span></code></pre> </div> <p>为一个全宽度容器使用<code>.container-fluid</code>类，在视口中扩展到整个宽度。</p> <div class="bd-example"> <div class="bd-example-container bd-example-container-fluid"> <div class="bd-example-container-header"></div> <div class="bd-example-container-sidebar"></div> <div class="bd-example-container-body"></div> </div> </div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container-fluid"</span><span class="nt">></span> ... <span class="nt"></div></span></code></pre> </div> </div> <h2>响应式的分界点</h2> <div> <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="c1">// Extra small devices (portrait phones, less than 576px) // No media query since this is the default in Bootstrap </span> <span class="c1">// Small devices (landscape phones, 576px and up) </span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">576px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span> <span class="c1">// Medium devices (tablets, 768px and up) </span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">768px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span> <span class="c1">// Large devices (desktops, 992px and up) </span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">992px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span> <span class="c1">// Extra large devices (large desktops, 1200px and up) </span><span class="k">@media</span> <span class="p">(</span><span class="n">min-width</span><span class="o">:</span> <span class="m">1200px</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span></code></pre> </figure> <figure class="highlight"><pre><code class="language-scss" data-lang="scss"><span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">xs</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span> <span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">sm</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span> <span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">md</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span> <span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">lg</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span> <span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">xl</span><span class="p">)</span> <span class="p">{</span> <span class="nc">...</span> <span class="p">}</span> <span class="c1">// Example usage: </span><span class="k">@include</span> <span class="nd">media-breakpoint-up</span><span class="p">(</span><span class="n">sm</span><span class="p">)</span> <span class="p">{</span> <span class="nc">.some-class</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="nb">block</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span></code></pre> </figure> </div> <h2>网格系统</h2> <div> <h3>工作机制</h3> <ul> <li>总共有三个主要的组件：容器、行和列。</li> <li>容器——<code>.container</code>实现固定的宽度，<code>.container-fluid</code>实现全宽度，会将你的页面的内容居中，帮助你对齐网格系统。</li> <li>行是列的横向组合，确保适当地排列你的列。</li> <li>内容必须放置在列中，而且只有列可以是行的直接子元素。</li> <li>列类表明你想要占用的列的数量，每行最多可用12列。所以如果你想用三个等宽列，你可以使用<code>.col-sm-4</code>。</li> <li>列的<code>width</code>是用百分比设置的。所以它们总是是流式的，而且尺寸与父元素相关。</li> <li>列拥有水平的<code>padding</code>，以创建列与列之间的间隙。</li> <li>总共有五个网格等级，每个<a>响应式分界点</a>隔出一个等级：特小，小，中，大，特大。</li> <li>网格等级基于宽度的最小值，意味着它们应用到某一等级以及这一等级之上的所有（比如，<code>.col-sm-4</code>应用到小、中、大、特大设备）</li> </ul> <h3>网格选项</h3> <table class="table table-bordered table-striped table-responsive"> <thead> <tr> <th></th> <th class="text-center"> Extra small<br> <small><576px</small> </th> <th class="text-center"> Small<br> <small>≥576px</small> </th> <th class="text-center"> Medium<br> <small>≥768px</small> </th> <th class="text-center"> Large<br> <small>≥992px</small> </th> <th class="text-center"> Extra large<br> <small>≥1200px</small> </th> </tr> </thead> <tbody> <tr> <th class="text-nowrap" scope="row">Grid behavior</th> <td>Horizontal at all times</td> <td colspan="4">Collapsed to start, horizontal above breakpoints</td> </tr> <tr> <th class="text-nowrap" scope="row">Max container width</th> <td>None (auto)</td> <td>540px</td> <td>720px</td> <td>960px</td> <td>1140px</td> </tr> <tr> <th class="text-nowrap" scope="row">Class prefix</th> <td><code>.col-</code></td> <td><code>.col-sm-</code></td> <td><code>.col-md-</code></td> <td><code>.col-lg-</code></td> <td><code>.col-xl-</code></td> </tr> <tr> <th class="text-nowrap" scope="row"># of columns</th> <td colspan="5">12</td> </tr> <tr> <th class="text-nowrap" scope="row">Gutter width</th> <td colspan="5">30px (15px on each side of a column)</td> </tr> <tr> <th class="text-nowrap" scope="row">Nestable</th> <td colspan="5">Yes</td> </tr> <tr> <th class="text-nowrap" scope="row">Offsets</th> <td colspan="5">Yes</td> </tr> <tr> <th class="text-nowrap" scope="row">Column ordering</th> <td colspan="5">Yes</td> </tr> </tbody> </table> <h3>Responsive classes</h3> <h4>All breakpoints</h4> <p>For grids that are the same from the smallest of devices to the largest, use the <code class="highlighter-rouge">.col</code> and <code class="highlighter-rouge">.col-*</code> classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to <code class="highlighter-rouge">.col</code>.</p> <div class="bd-example-row"> <div class="bd-example" data-example-id=""> <div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div> <div class="row"> <div class="col-8">col-8</div> <div class="col-4">col-4</div> </div> </div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>col<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>col<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>col<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>col<span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-8"</span><span class="nt">></span>col-8<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">></span>col-4<span class="nt"></div></span> <span class="nt"></div></span></code></pre> </div> </div> <h4>Small and match</h4> <p>Using a single set of <code class="highlighter-rouge">.col-sm-*</code> classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices. </p> <div class="bd-example-row"> <div class="bd-example" data-example-id=""> <div class="row"> <div class="col-sm-8">col-sm-8</div> <div class="col-sm-4">col-sm-4</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div> </div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-8"</span><span class="nt">></span>col-sm-8<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm-4"</span><span class="nt">></span>col-sm-4<span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm"</span><span class="nt">></span>col-sm<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm"</span><span class="nt">></span>col-sm<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-sm"</span><span class="nt">></span>col-sm<span class="nt"></div></span> <span class="nt"></div></span></code></pre> </div> </div> <h4>Mix and match</h4> <p>只要使用一个<code>.col-md-*</code>网格类集合，你就可以创建一个基本的网格系统，在移动设备以及特小屏或者小屏的平板设备上纵向排布，而在桌面（中屏）设备上横向排布。请把网格列放在任何<code>.row</code>中。 </p> <div class="bd-example-row"> <div class="bd-example" data-example-id=""> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">></span>.col-md-1<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">></span>.col-md-1<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">></span>.col-md-1<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">></span>.col-md-1<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">></span>.col-md-1<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">></span>.col-md-1<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">></span>.col-md-1<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">></span>.col-md-1<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">></span>.col-md-1<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">></span>.col-md-1<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">></span>.col-md-1<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-1"</span><span class="nt">></span>.col-md-1<span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-8"</span><span class="nt">></span>.col-md-8<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">></span>.col-md-4<span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">></span>.col-md-4<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">></span>.col-md-4<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-4"</span><span class="nt">></span>.col-md-4<span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">></span>.col-md-6<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-6"</span><span class="nt">></span>.col-md-6<span class="nt"></div></span> <span class="nt"></div></span></code></pre> </div> </div> <h3>自动列布局</h3> <h4>等宽</h4> <div class="bd-example-row"> <div class="bd-example" data-example-id=""> <div class="container"> <div class="row"> <div class="col"> 1 of 2 </div> <div class="col"> 1 of 2 </div> </div> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col"> 1 of 3 </div> <div class="col"> 1 of 3 </div> </div> </div> </div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1 of 2 <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1 of 2 <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1 of 3 <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1 of 3 <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1 of 3 <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span></code></pre> </div> </div> <h4>设置一列宽度</h4> <div class="bd-example-row"> <div class="bd-example" data-example-id=""> <div class="container"> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col-6"> 2 of 3 (wider) </div> <div class="col"> 3 of 3 </div> </div> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col-5"> 2 of 3 (wider) </div> <div class="col"> 3 of 3 </div> </div> </div> </div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1 of 3 <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">></span> 2 of 3 (wider) <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 3 of 3 <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1 of 3 <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-5"</span><span class="nt">></span> 2 of 3 (wider) <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 3 of 3 <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span></code></pre> </div> </div> <h4>Variable width content</h4> <p>Use <code class="highlighter-rouge">col-{breakpoint}-auto</code> classes to size columns based on the natural width of their content.</p> <div class="bd-example-row"> <div class="bd-example" data-example-id=""> <div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> 1 of 3 </div> <div class="col-md-auto"> Variable width content </div> <div class="col col-lg-2"> 3 of 3 </div> </div> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col-md-auto"> Variable width content </div> <div class="col col-lg-2"> 3 of 3 </div> </div> </div> </div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row justify-content-md-center"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col col-lg-2"</span><span class="nt">></span> 1 of 3 <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-auto"</span><span class="nt">></span> Variable width content <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col col-lg-2"</span><span class="nt">></span> 3 of 3 <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span> 1 of 3 <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col-md-auto"</span><span class="nt">></span> Variable width content <span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col col-lg-2"</span><span class="nt">></span> 3 of 3 <span class="nt"></div></span> <span class="nt"></div></span> <span class="nt"></div></span></code></pre> </div> </div> <h4>多行等宽</h4> <p>Create equal-width columns that span multiple rows by inserting a <code class="highlighter-rouge">.w-100</code> where you want the columns to break to a new line. Make the breaks responsive by mixing the <code class="highlighter-rouge">.w-100</code> with some <a href="/utilities/display-property/">responsive display utilities</a>.</p> <div class="bd-example-row"> <div class="bd-example" data-example-id=""> <div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="w-100"></div> <div class="col">col</div> <div class="col">col</div> </div> </div> <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>col<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>col<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"w-100"</span><span class="nt">></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>col<span class="nt"></div></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"col"</span><span class="nt">></span>col<span class="nt"></div></span> <span class="nt"></div></span></code></pre> </div> </div> <h3>Alignment</h3> <h4>Vertical alignment</h4> <div class="bd-example-row bd-example-row-flex-cols"> <div class="bd-example" data-example-id=""> <div class="container"> <div class="row align-items-start"> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> </div> <div class="row align-items-center"> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> </div> <div class="row align-items-end"> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> <div class="col"> One of three columns