如果你在寻找一种CSS框架,那么本篇文章可为你提供帮助。在这篇文章中,我们将介绍一些最有趣,功能最强大的CSS框架。其中一些是已经众所周知的,而另一些是较新的CSS框架,这些工具才刚刚开始兴起。无论是哪个框架,了解这些有用的CSS框架和工具都会使你受益匪浅。

我们将以一些知名的名字开始。使用这些CSS框架中的任何一个,你都将有能力以最少的时间投入来构建干净,可维护的项目。但是,有时你需要一些更具体的内容。因此,在列表末尾,你会发现一些具有非常特殊用例的库和框架。

Bootstrap

BootstrapCSS框架
BootstrapCSS框架

虽然Bootstrap肯定不是唯一的CSS框架,但是它最受欢迎的功能是基于CSS的功能。这些功能包括强大的网格系统,徽章,按钮,卡片组件,导航栏等等。如果你不熟悉类似Bootstrap的框架如何工作,那么一些代码示例将对你有所帮助,因此你可以看到仅通过编辑HTML来构建可维护的接口是多么容易。

Bootstrap的网格系统就是很好的入门知识。自该框架于2011年首次公开发布以来,Bootstrap框架的网格一直是一种有价值的组件。它非常易于使用。一旦使用包含了Bootstrap的CSS,创建一个在所有浏览器中都可以使用的基于响应式Flexbox的网格就非常简单。

	<div class="container">
  <div class="row">
    <div class="col-sm">
      Column 1
    </div>
    <div class="col-sm">
      Column 2
    </div>
    <div class="col-sm">
      Column 3
    </div>
  </div>
</div>

Bootstrap框架还拥有丰富的UI组件集合。这些UI组件包括面包屑导航组件,卡片组件和分页组件。这是实现分页的HTML:

	<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

无需编写任何CSS代码就可以构建所有这些组件。在许多情况下,你可能会根据组件的主题来适合项目的品牌。Bootstrap还包括用于响应式布局,实用程序组件的高级功能,它基于Sass构建,因此具有超强的灵活性和可定制性。

Bootstrap官网

Foundation

FoundationCSS框架
FoundationCSS框架

像Bootstrap这样的Foundation框架已经变得非常流行,并被称为是一种更为复杂的框架,其中包含一些高级但易于实现的CSS组件。Foundation建立在Sass之上,因此像Bootstrap一样,它是可自定义的。除此之外,它还具有一些强大的响应功能,这意味着进行移动友好型设计非常容易。

响应表组件是我们的最爱之一:

	<table class="responsive-card-table unstriped">
  <!-- table rows code goes here... -->
</table>

此外,垂直时间轴是你在许多框架中都看不到的布局功能。此组件对容器使用.timeline类,然后该容器包含多个.timeline-item元素,每个元素带有一个图标和内容:

	<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-icon">
      <img src="image.svg" alt="Icon">
    </div>
    <div class="timeline-content">
      <p class="timeline-content-date">2019</h2>
      <p>Example text for timeline item.</p>
    </div>
  </div>
  <!-- More timeline items here ... -->
</div>
	

Foundation官网

UIkit

UIkitCSS框架
UIkitCSS框架

UIkit是另一个流行的前端框架,在CSS功能方面可能有点被低估了。除了许多与其他流行框架中的功能相似的功能外,还有一些有用的专用组件。

首先,如果你对flexbox还是不太满意,则可以使用UIkit使用纯HTML进行复杂的基于flexbox的布局。刚开始在HTML类中使用flexbox语法可能看起来很奇怪,但是这使你不必知道关于flex包装,列/行,flex增长等所有怪癖。这是一个例子:

	<div class="uk-flex uk-flex-wrap uk-flex-wrap-around">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

UIkit包含数十个组件,这些组件提供了开箱即用的有吸引力的样式。许多功能是专用的实用程序类,包括以下内容:

  • .uk-align-left.uk-align-right.uk-align-center用于对齐或浮动元素
  • .uk-column-1-2.uk-column-1-6的多列,杂志样式的文本布局
  • .uk-radio.uk-checkbox和类似内容,用于吸引人的表单输入
  • 各种边距和填充实用程序类(.uk-margin-top.uk-padding-small等)
  • 各种实用程序类可将元素相对放置在容器内(.uk-position-top.uk-position-left等)

如果你想要一个带有大量组件选项的新鲜,维护良好的CSS框架,则可以尝试UIkit。它可以在Less和Sass中使用,甚至包括样式表,以适应从右到左的语言。

Semantic UI

Semantic UI
Semantic UI框架

Semantic UI框架与其他流行的框架有很多功能重叠,但是它的工作方式(由名称表示)基于用于构建组件的类名称的语义性质。换句话说,类名是人类友好的。

例如构建四列网格:

	<div class="ui grid">
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
</div>

注意类名准确传达所构建内容的方式。CSS不一定为列出的每个类都具有唯一的样式集,而是这些类可以一起工作。因此,就像语言在上下文中使单词有意义的语言一样,类名一起工作以构建具有凝聚力,易于移动的组件。

Semantic UI官网

Animate.css

Animate.css框架
Animate.css框架

Ainmate.css框架是一个拥有很多动画效果,且具有跨浏览器兼容的动画插件,此CSS框架包含几十个预先构建的动画,震动,褪色,幻灯片,缩放等。

还有其他一些类似的库可为用户提供替代动画,包括Woah.css,其中包含一些不可否认的另类动画,这些动画可能并非所有人都喜欢。还有Vivify,它具有更多独特的动画选项,与Animate.css完全不同。另一个值得探索的好选择是CSSFX,这是一个新项目,为即插即用风格的动画提供了更多选择。

Animate.css框架