css框架_CSS框架

最新推荐文章于 2022-03-07 23:56:09 发布

cumifi2519

最新推荐文章于 2022-03-07 23:56:09 发布

阅读量309

点赞数

文章标签： java github css ajax 编程语言

原文链接：https://www.freecodecamp.org/news/css-frameworks/

版权

css框架

引导程序 (Bootstrap)

Bootstrap is a very popular CSS framework that's widely used. Check out this article for a more in-depth guide.

Bootstrap是一个非常流行CSS框架，已被广泛使用。请查看本文，以获取更深入的指南。

语义UI (Semantic UI)

Semantic UI is one of the most popular CSS framework for developing responsive, mobile first projects for the web.

语义UI是最流行CSS框架之一，用于为Web开发响应式，移动优先项目。

入门 (Getting Started)

Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Semantic UI library. We have used a CDN in this example, but you can checkout other ways of installing Semantic UI here.

这是一个简单HTML模板，其中包含用于语义UI库的最新的经过编译和精简CSS和Javascript。在此示例中，我们使用了CDN，但是您可以在此处签出安装Semantic UI的其他方法。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Semantic UI Template</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.css">
      </head>
      <body>
        <h1>Hello World</h1>
        <!-- Add all HTML Code here -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.13/semantic.min.js"></script>
      </body>
    </html>

学习资源 (Learning Resources)

The official documentation for Semantic UI is available here.
语义UI的官方文档可在此处获得。
Checkout Semantic UI’s open source GitHub repository here.
在此处 Checkout Semantic UI的开源GitHub存储库。

骨架 (Skeleton)

Skeleton is a dead simple boilerplate to kickstart any responsive project.

骨架是一个简单的样板，可以启动任何响应式项目。

入门 (Getting Started)

Here is a simple HTML template which includes the latest compiled and minified CSS for the Skeleton library.

这是一个简单HTML模板，其中包括针对Skeleton库的最新的经过编译和精简CSS。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Skeleton Template</title>
        <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
      </head>
      <body>
        <h1>Hello World</h1>
        <!-- Add all HTML Code here -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      </body>
    </html>

JSBin Demo

JSBin演示

We have used a CDN in this example, but you can checkout other ways of installing Skeleton here.

在此示例中，我们使用了CDN，但是您可以在此处查看其他安装Skeleton的方法。

学习资源 (Learning Resources)

Official Documentation of Skeleton.

骨架的Official Documentation 。

Checkout Skeleton’s open source GitHub repository here.
在此处 Checkout Skeleton的开源GitHub存储库。
Here are some examples of how Skeleton was used on different websites.
以下是在不同网站上如何使用Skeleton的一些示例。

物化 (Materialize)

Materialize is a Responsive CSS framework based on Google’s Material Design Language.

Materialize是基于Google的Material Design语言的自适应CSS框架。

入门 (Getting Started)

Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Materialize library.

这是一个简单HTML模板，其中包括用于Materialize库的最新编译和缩小CSS和Javascript。

<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <h1>Hello World!</h1>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    </body>
  </html>

We have used a CDN in this example, but you can checkout other ways of installing Materialize here.

在此示例中，我们使用了CDN，但是您可以在此处签出安装Materialize的其他方法。

学习资源 (Learning Resources)

The official documentation for Materialize is available here.
Materialize的官方文档在此处。
Checkout Materialize’s open source GitHub repository here.
在此处 Checkout Materialize的开源GitHub存储库。
Here is a handy tutorial on using Materialize.
这是有关使用Materialize的便捷教程。

UIKit (UIKit)

UIKit is A lightweight and modular front-end framework for developing fast and powerful web interfaces.

UIKit是一个轻量级的模块化前端框架，用于开发快速而强大的Web界面。

入门 (Getting Started)

Here is a simple HTML template which includes the latest compiled and minified CSS for the UIKit library.

这是一个简单HTML模板，其中包含用于UIKit库的最新的经过编译和缩小CSS。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="css/uikit.min.css" />
        <script src="js/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="js/uikit-icons.min.js"></script>
    </head>
    <body>
    </body>
</html>

We have used a CDN in this example, but you can checkout other ways of installing UIKit here.

在此示例中，我们使用了CDN，但是您可以在此处签出安装UIKit的其他方法。

学习资源 (Learning Resources)

The official documentation for UIKit is available here.
UIKit的官方文档在此处。
Checkout UIKit’s open source GitHub repository here.
在此处签出UIKit的开源GitHub存储库。

基础 (Foundation)

Foundation is an open-source, mobile first CSS framework created by Zurb.

Foundation是Zurb创建的开源，可移动的第一个CSS框架。

入门 (Getting Started)

Here is a simple HTML template which includes the latest compiled and minified CSS and Javascript for the Foundation library.

这是一个简单HTML模板，其中包括Foundation库的最新的经过编译和精简CSS和Javascript。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Foundation Template</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
      </head>
      <body>
        <h1>Hello World</h1>
        <!-- Add all HTML Code here -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
      </body>
    </html>

This example makes use of a CDN that loads the default settings. If you’d like to customize the grid layout, change the colors or add and remove components you can do so on the Foundation download page.

本示例使用了加载默认设置的CDN。如果要自定义网格布局，更改颜色或添加和删除组件，可以在Foundation 下载页面上进行。