反向
反轉任何組件的顏色，以適用於淺色或深色背景。
一般來說，UIkit 樣式有淺色背景（如預設的 UIkit 樣式）或深色背景的樣式。根據背景顏色，預設的文字顏色為深色在淺色上，或淺色在深色上。但如果使用不同的背景顏色或背景圖片，可能需要相反的文字顏色。使用反向組件來反轉這些背景的文字顏色。
使用方式
添加 .uk-light 類別來著色文字和所有包含的內容，使其在深色背景上看起來很棒，並在淺色背景上相應地添加 .uk-dark 類別。
由於已經有預設的文字顏色，對於淺色樣式來說是深色，對於深色樣式來說是淺色，因此只需要其中一個類別即可針對不同的背景更改文字顏色。在淺色樣式中，需要 .uk-light 類別，而在深色樣式中，則需要 .uk-dark 類別。請注意，如果使用了其中一個類別，則無法將顏色改回來。
<div class="uk-light"></div>
<div class="uk-dark"></div>淺色
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
深色
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="uk-child-width-1-2@s" uk-grid>
<div>
<div class="uk-light uk-background-secondary uk-padding">
<h3>Light</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="uk-button uk-button-default">Button</button>
</div>
</div>
<div>
<div class="uk-dark uk-background-muted uk-padding">
<h3>Dark</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button class="uk-button uk-button-default">Button</button>
</div>
</div>
</div>
擴展組件
來自創建背景的組件（如區塊、方塊、卡片、覆蓋層、側邊欄、導覽列、下拉選單和下拉條）的樣式修飾符，會自動擴展反向樣式以更改文字顏色，因此無需添加任何類別。
區塊和方塊組件可以防止這種行為。只需添加 .uk-preserve-color 類別即可。例如，當它們包含卡片時，就需要這樣做。
<div class="uk-section uk-section-primary uk-preserve-color"></div>
<div class="uk-tile uk-tile-primary uk-preserve-color"></div>主要區塊與卡片
主要方塊與卡片
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
次要方塊與卡片
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="uk-section uk-section-primary uk-preserve-color">
<div class="uk-container">
<div class="uk-panel uk-light uk-margin-medium">
<h3>Section Primary with cards</h3>
</div>
<div class="uk-grid-match uk-child-width-expand@m" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</div>
<div class="uk-child-width-1-2@s uk-grid-collapse uk-grid-match uk-text-center" uk-grid>
<div>
<div class="uk-tile uk-tile-primary">
<div class="uk-panel uk-light uk-margin-medium">
<h3>Tile Primary with card</h3>
</div>
<div class="uk-card uk-card-default uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div>
<div class="uk-tile uk-tile-secondary">
<div class="uk-panel uk-light uk-margin-medium">
<h3>Tile Secondary with card</h3>
</div>
<div class="uk-card uk-card-default uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>重疊內容
.uk-light 和 .uk-dark 類別會設定在容器元素上，並著色其包含的內容。但是，在某些情況下，元素不是巢狀結構，而是具有位置上下文並彼此重疊。例如，當捲動時，黏性導覽列會重疊後面的不同區塊。要根據相交的元素來著色內容，請添加 uk-inverse 屬性。它將根據後面的區塊設定 .uk-light 或 .uk-dark 類別。
<div class="uk-position-relative">
<div class="uk-position-top">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container uk-navbar-transparent" uk-inverse uk-navbar>…</nav>
</div>
</div>
<div class="uk-section uk-section-default">…</div>
<div class="uk-section uk-section-primary">…</div>
<div class="uk-section uk-section-muted">…</div>
<div class="uk-section uk-section-secondary">…</div>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
<div class="uk-position-relative">
<div class="uk-position-top">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: !.uk-position-relative; offset: 80">
<nav class="uk-navbar-container uk-navbar-transparent" uk-inverse>
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="uk-section uk-section-default">
<div class="uk-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
</div>
</div>
<div class="uk-section uk-section-primary">
<div class="uk-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
</div>
</div>
<div class="uk-section uk-section-muted">
<div class="uk-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
</div>
</div>
<div class="uk-section uk-section-secondary">
<div class="uk-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
</div>
</div>
</div>這是因為 .uk-light 和 .uk-dark 類別以及所有擴展組件也都將 --uk-inverse 自訂屬性設定為淺色或深色。JavaScript 會在堆疊上下文中尋找最接近相交元素的 --uk-inverse 自訂屬性，並相應地設定 .uk-light 或 .uk-dark 類別。
分別著色多個部分
要分別著色容器內的不同部分，只需將 target: SELECTOR 選項添加到 uk-inverse 屬性即可。
<div class="uk-position-relative">
<div class="uk-position-top">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container uk-navbar-transparent" uk-inverse="target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right" uk-navbar>…</nav>
</div>
</div>
<div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
<div>
<div class="uk-tile uk-tile-default">…</div>
</div>
<div>
<div class="uk-tile uk-tile-primary">…</div>
</div>
<div>
<div class="uk-tile uk-tile-secondary">…</div>
</div>
</div>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<div class="uk-position-relative">
<div class="uk-position-top">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: !.uk-position-relative; offset: 80">
<nav class="uk-navbar-container uk-navbar-transparent" uk-inverse="target: .uk-navbar-left, .uk-navbar-center, .uk-navbar-right">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-center">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="">Active</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="">Active</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
<div>
<div class="uk-tile uk-tile-default">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-primary">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-secondary">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
<div>
<div class="uk-tile uk-tile-primary">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-muted">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-default">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="uk-child-width-1-3@s uk-grid-collapse uk-grid-match" uk-grid>
<div>
<div class="uk-tile uk-tile-default">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-secondary">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div>
<div class="uk-tile uk-tile-muted">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>非活動狀態
為了防止元素在停止透明時自動更改其顏色，只需將 sel-active: SELECTOR 選項添加到 uk-inverse 屬性即可。
<div uk-sticky="start: 200; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent">
<nav class="uk-navbar-container" uk-inverse="sel-active: .uk-navbar-transparent" uk-navbar>…</nav>
</div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.
<div class="uk-position-relative">
<div class="uk-position-top">
<div uk-sticky="start: 170; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent; end: !.uk-position-relative; offset: 80">
<nav class="uk-navbar-container" uk-inverse="sel-active: .uk-navbar-transparent">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="uk-section uk-section-secondary">
<div class="uk-container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
</div>
</div>
</div>僅著色重疊的內容
如果包含的內容應保留其文字顏色，並且只有重疊的內容應反轉其顏色，請使用 .uk-inverse-light 或 .uk-inverse-dark 類別。它們將 --uk-inverse 自訂屬性設定為相應的顏色，但不著色包含的內容。
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
<nav class="uk-navbar-container" uk-navbar>…</nav>
</div>
<div class="uk-section uk-section-primary uk-preserve-color uk-inverse-light">主要區塊與卡片
<div class="uk-position-relative">
<div class="uk-position-top">
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; end: !.uk-position-relative; offset: 80">
<nav class="uk-navbar-container uk-navbar-transparent" uk-inverse>
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Parent</a>
<div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
<div class="uk-drop-grid uk-child-width-1-2" uk-grid>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
<div>
<ul class="uk-nav uk-navbar-dropdown-nav">
<li class="uk-active"><a href="#">Active</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-header">Header</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="uk-section uk-section-primary uk-preserve-color uk-inverse-light">
<div class="uk-container">
<div class="uk-panel uk-light uk-margin-medium">
<h3>Section Primary with cards</h3>
</div>
<div class="uk-grid-match uk-child-width-expand@m" uk-grid>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div>
<div class="uk-card uk-card-default uk-card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>組件選項
任何這些選項都可以應用於組件屬性。用分號分隔多個選項。了解更多
| 選項 | 值 | 預設值 | 描述 |
|---|---|---|---|
target |
CSS 選擇器 | false |
將被檢查的目標列表。 |
sel-active |
CSS 選擇器 | false |
需要匹配才能設定顏色的選擇器，否則將移除顏色。如果省略，將始終設定顏色。 |
JavaScript
了解更多關於JavaScript 組件的資訊。
初始化
UIkit.inverse(element, options);停用反向組件
反向組件會產生 CSS，以根據背景顏色為所有組件著色。如果您的專案不需要反轉內容顏色，您可以在編譯 Less 時停用反向組件。