uikit框架_UIkit框架的口哨之旅

最新推荐文章于 2025-10-16 17:48:55 发布

翻译最新推荐文章于 2025-10-16 17:48:55 发布 · 746 阅读

文章标签：

#css #java #html #python #vue #ViewUI

本文介绍了UIkit，一个轻量级且模块化的前端框架，详细探讨了其特点与功能，包括Flexbox和网格系统、基于滚动的动画、SVG操作、自适应背景图片、幻灯片组件等，展示了其在现代Web设计中的应用潜力。

uikit框架

虽然Bootstrap和Foundation可能是Web设计人员中最流行的两个前端框架，但在本文中，我将向您介绍UIkit的功能， UIkit是一个轻量级的模块化前端框架，几乎所有我都使用了它。项目。

注意：本文假定您熟悉前端框架的工作方式。同样，本文的主要目标不是涵盖该框架的各个部分（例如网格系统）。相反，我们将专注于简要介绍不同的有用的UIkit功能。

入门

UIkit由德国公司YOOtheme构建和维护， YOOtheme是一家专门构建Web主题和应用程序的公司。

如何下载UIkit

有几种不同的选项可用于在项目中包含UIkit。您可以使用像Bower这样的包管理器，或者像cdnjs这样的内容交付网络，也可以从其GitHub页面手动下载它。请注意，UIkit需要jQuery ，因此请确保已将其包含在项目中。

就本教程而言，我们将使用cdnjs将所需的UIkit文件拉入CodePen演示中。为了简单起见，大多数时候我们都必须包含uikit.min.css和uikit.min.js文件。在最后两个示例中，我们还将添加一些其他文件，这些文件未包含在核心框架中。请记住，UIkit是模块化的，允许我们仅加载实际需要的文件。

您可以在此页面上了解UIkit的结构。

自定义UIkit

该框架是完全可定制的。在下载之前，我们可以覆盖其默认样式并应用我们自己的样式。例如，如果要更改默认断点，可以访问定制器页面并选中“ 高级模式”选项。从那里，我们找到Breakpoints部分，并添加我们的新断点。然后，我们获得了新生成CSS文件。

浏览器支持

UIkit可在所有最新的浏览器中使用，特别是：

有用的UIkit功能

现在是时候探索一些有用的UIkit功能了，您可能希望在即将到来的项目之一中使用它们！

Flexbox和网格

UIkit提供了用于构建响应式布局的Grid和Flex组件。为了更好地理解这些组件的工作方式，让我们创建一个简单的布局。在此之前，我们必须将uikit.min.css文件添加到我们的示例中。

要求如下：

在最大767像素宽的视口中，所有列均垂直堆叠。
在大于767像素的视口上，第一和第三列的宽度为父级宽度的25％，而第二列的宽度为父级宽度的50％。

标记如下所示：

<div class="uk-container uk-container-center">  
  <div class="uk-grid">
  
    <div class="uk-width-medium-1-4">
      <div class="card">
        <!-- content here -->
      </div>
    </div>
    
    <div class="uk-width-medium-1-2">
      <div class="card">
        <!-- content here -->
      </div>
    </div>
    
    <div class="uk-width-medium-1-4">
      <div class="card">
        <!-- content here -->
      </div>
    </div>
    
  </div><!-- /uk-grid -->
</div><!-- /uk-container -->

注意我们列中的.card元素。出于风格原因，我们将应用一些基本样式：

.card {
  background: #e0e0e0;
  padding: 10px;
  margin-top: 35px;
}

这是Codepen演示：

从上面的演示中可以看到（当视口宽度大于767px时） .card元素不会填充父对象的整个高度。假设我们要实现这一目标。

一种快速的解决方案是将目标元素的height: 100% ，对吗？但是，这在某些浏览器（例如Safari）中不起作用，因此我们必须放弃该方法并寻找替代方法。一种技巧是通过为列指定uk-flex来将其定义为flex容器。因此，现在如果再次测试页面，我们将看到.card元素继承了父级高度。如果您想了解有关该解决方案为何起作用的更多信息，建议您查看此Stack Overflow线程。

这是更新的演示：

创建基于滚动的动画

如果您是基于滚动的动画的粉丝，那么您一定会喜欢UIkit的Scrollspy组件。此组件使我们可以在上下滚动页面时触发动画和事件。让我们看一个生动的例子来了解它是如何工作的。

对于此示例，我们将在项目中包含uikit.min.css和uikit.min.js文件。

代码结构与前面的示例相似。我们的目标是在具有blue类别的元素（总共五个元素）进入视口时触发不同的动画。为了实现此行为，我们将data-uk-scrollspy属性添加到目标元素。它们的值是控制实际动画的可配置对象。例如， cls对象属性存储动画类型：

<div data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true, delay: 300}">

所需标记的一部分如下所示：

<div class="uk-container uk-container-center">
  <div class="uk-grid">
    
    <!-- content here -->
    
    <div class="uk-width-medium-1-2 uk-flex">
      <div class="card blue" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true, delay: 300}">
        <!-- content here -->
      </div>
    </div>
    
    <div class="uk-width-medium-1-2 uk-flex">
      <div class="card blue" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true, delay: 300}">
        <!-- content here -->
      </div>
    </div>
    
    <!-- content here/more animations -->
    
  </div><!-- /uk-grid -->
</div><!-- /uk-container -->

这是相应的Codepen演示：

操纵SVG

UIkit提供了一种方便的方法来控制SVG的外观。不必使用内联data-uk-svg使HTML膨胀，可以使用img标签加载data-uk-svg ，然后将data-uk-svg属性添加到这些标签。这样，图像将转换为嵌入式SVG，我们可以稍后对其进行操作。如果将uikit.min.js文件添加到我们的项目中，则可能会发生这种情况。

SVG的标记非常简单，如下所示：

<img src="IMAGE_PATH" alt="" data-uk-svg>

现在在CSS中，我们可以对其进行自定义。例如，在我们的案例中，我们更改了一些基本样式：

svg {
  width: 100px;
  height: auto;
  fill: maroon;
}

Codepen演示：

自适应背景图片

有时候，我们希望背景图片采用img标签的响应行为。为此，我们可以利用UIkit的Cover组件。因此，首先我们将uk-invisible类添加到img标签，然后将其包装在具有uk-cover-background类的父元素中。接下来，可选地，我们可以使用Utility和Flex组件将内容放置在背景图像的顶部。

为了使其正常工作，我们必须在项目中包含uikit.min.css文件。

考虑到这一点，要创建响应式背景图像，其内容在垂直和水平方向居中，我们需要如下所示HTML：

<div class="uk-cover-background uk-position-relative">
  <img class="uk-invisible" src="IMAGE_PATH" alt=""> 
  <div class="uk-position-cover uk-flex uk-flex-center uk-flex-middle">
    <!-- content here -->
  </div>
</div>

在我们CSS中，我们现在必须为顶级父对象指定背景图片（当然，我们也可以添加一个内联背景图片）：

div.uk-cover-background {
  background-image: url(IMAGE_PATH);
}

这给我们以下结果：

创建叠加

UIkit提供了Overlay组件来帮助构建图像叠加层。这个组件的真正好处是这些叠加层以不同的样式出现，并提供许多有趣的选项。

对于此行为，唯一必需的文件是uikit.min.css 。下面显示了构建四个叠加层所需的标记的示例：

<div class="uk-container uk-container-center">
  <div class="uk-grid">
    
    <div class="uk-width-small-1-2 uk-width-medium-1-4">
      <figure class="uk-overlay uk-overlay-hover">
        <img src="IMAGE_PATH" alt="">
        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-bottom uk-overlay-slide-bottom">
          <!-- content here -->
          <a class="uk-position-cover" href=""></a>
        </figcaption>
      </figure>
    </div>
    
    <div class="uk-width-small-1-2 uk-width-medium-1-4">
      <figure class="uk-overlay uk-overlay-hover">
        <img src="IMAGE_PATH" alt="">
        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-top uk-overlay-slide-top">
          <!-- content here -->
          <a class="uk-position-cover" href=""></a>
        </figcaption>
      </figure>
    </div>
    
    <div class="uk-width-small-1-2 uk-width-medium-1-4">
      <figure class="uk-overlay uk-overlay-hover">
        <img src="IMAGE_PATH" alt="">
        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-left uk-overlay-slide-left">
          <!-- content here -->
        </figcaption>
      </figure>
    </div>
    
    <div class="uk-width-small-1-2 uk-width-medium-1-4">
      <figure class="uk-overlay uk-overlay-hover">
        <img src="IMAGE_PATH" alt="">
        <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-right uk-overlay-slide-right">
          <!-- content here -->
        </figcaption>
      </figure>
    </div>
    
  </div><!-- /uk-grid -->
</div><!-- /uk-container -->

不要害怕上面的代码。大量归功于我们添加到图像中的许多帮助程序类。为了更好地理解，请务必阅读此组件的文档。

这是嵌入式Codepen演示：

创建响应式全屏幻灯片

幻灯片组件是最酷的UIkit组件之一。这使我们能够创建（看是否能猜到）漂亮的响应式幻灯片。为了演示它，让我们构建一个响应式全宽度幻灯片。

这是我们需要的UIkit文件：

uikit.min.css
slideshow.min.css
slidenav.min.css
uikit.min.js
slideshow.min.js

幻灯片的代码如下所示：

<div class="uk-slidenav-position" data-uk-slideshow="{autoplay:true, kenburns:true, pauseOnHover: false}">
  <ul class="uk-slideshow uk-slideshow-fullscreen">
    <li>
      <img src="IMAGE_PATH" alt="">
    </li>
    <li>
      <img src="IMAGE_PATH" alt="">
    </li>
    <li>
      <img src="IMAGE_PATH" alt="">
    </li>
  </ul>
  
  <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
  <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
</div>

这里有两件事值得一提：

data-uk-slideshow属性的值是一个可配置的对象，它确定幻灯片的外观。
当我们将鼠标悬停在幻灯片上时，将显示导航箭头。这是可选的，感谢Slidenav组件，我们已经实现了它。同样，我们可以使用Dotnav组件生成点导航。

看看下面的相关Codepen演示：

创建粘性标题

另一个有用的组件是粘性组件。让我们通过创建一个粘性标头来了解它的作用。

同样，这是必需的UIkit文件：

uikit.min.css
sticky.min.css
uikit.min.js
sticky.min.js

在标记中，我们将data-uk-sticky属性添加到header元素。另外，仅出于风格原因，我们使用导航栏组件构建导航栏。

这是HTML代码的一部分：

<!-- content here -->

<header data-uk-sticky>
  <div class="uk-container uk-container-center">
    <nav class="uk-navbar">
      <ul class="uk-navbar-nav">
        <li class="uk-active">
          <a href="">Home</a>
        </li>
        
        <!-- three more list items here -->
      </ul>
    </nav>
  </div>
</header>

<!-- content here -->

在此示例中，我们没有将任何值传递给data-uk-sticky属性。但是，如果我们想要定制粘元素的默认行为，我们要修改的对象是作为一个值，这个属性通过。

结论

我希望您喜欢UIkit的快速哨响之旅，并了解了我们可以使用这个惊人的框架构建的想法。当然，还有很多其他很棒的组件可供我们使用，因此，我鼓励您进一步研究。最后但并非最不重要的一点是，新UIkit版本（v.3）将在未来几个月内推出，其功能更加有趣。敬请关注！

如果您对UIkit有任何疑问，请在下面的评论中告诉我。

翻译自: https://webdesign.tutsplus.com/tutorials/getting-started-with-uikit-a-lightweight-and-modular-front-end-framework--cms-27316

uikit框架