Css 简明教程

CSS RWD Frameworks

响应式 Web 设计是当前的需求。移动设备在民众间的广泛使用，导致响应式设计变得活跃，以使应用程序或网站在各种设备上正确显示和运行。

Responsive Web Designing is the need of the hour. The extensive use of mobile devices among the masses, results in active responsive designing so that the applications or websites appear and function correctly on every kind of device.

一个好且有效的 CSS 框架提供即用型库，显著节省开发者在自定义编码中使用的开发时间。这些 CSS 框架被证明具有跨浏览器兼容性，对设备友好，并提供对开发者有益的对称网站布局。

A good and effective CSS framework provides ready-to-use libraries that considerably save the development time used in custom coding by the developers. These CSS frameworks prove to be cross-browser compatible, device-friendly, and provide symmetrical website layouts that are beneficial to the developers.

下面列出了一些最好、最易用、最免费的 CSS 框架。

Some of the best, easy-to-use, free CSS frameworks are listed below.

CSS RWD Framework - Bootstrap

  • Bootstrap* 是一个功能强大，极度可靠的框架，它免费且开源。它提供易用的结构性组件。你只需要理解 HTML, CSS, 和 JavaScript 等 Web 技术。Bootstrap 还提供可根据要求自定义的多个主题和模板。它是一个采用移动优先原则的框架。

Bootstrap is a powerful and extensively reliable framework, that is free and open-source. It provides easy-to-use structural components. You just need to have the understanding of web technologies like HTML, CSS, and JavaScript. Bootstrap also provides several themes and templates which can be customized as per your requirements. It is a framework with mobile-first approach.

Bootstrap 提供一系列主题，使你的网站显得独一无二。Bootstrap 框架的组件确保性能，从而在几秒钟内加载网站。此外，Bootstrap 的文档简洁、实用且易用。它还建立了一个强大的开发者社区，为用户面对的问题提供解决方案。

Bootstrap provides an array of themes, that makes your website look distinctive. The components of Bootstrap framework ensure performance thus resulting in loading of the site quickly in a matter of seconds. Also, the documentation of Bootstrap is concise, helpful, and easy-to-use. An incredible developer community is also in place, that provides solutions to the issues that one will face.

<html lang="en">
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
   <div class="container-fluid p-5 bg-secondary text-white text-center">
      <h1>Bootstrap Framework</h1>
      <p>Resize the screen to see the effect</p>
   </div>

   <div class="container mt-4">
   <div class="row">
      <div class="col-sm-4">
         <h2>Column 1</h2>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
      <div class="col-sm-4">
         <h3>Column 2</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
      <div class="col-sm-4">
         <h3>Column 3</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
      </div>
   </div>
   </div>
</body>
</html>

CSS RWD Framework - Pure CSS

  • Pure CSS* 是一套小型、响应式模块，可用于每个 Web 项目。在设计时也考虑到了移动设备。它是一个紧凑的框架，可保持较小的文件大小。

Pure CSS is a set of small, responsive modules that can be used in every web project. It is also designed keeping the mobile devices in mind. It is a compact framework that keeps your file size smaller.

CSS RWD Framework - Skeleton

  • Skeleton* 是一个适用于响应式移动友好开发的简单框架。它像羽毛一样轻，无需任何编译或安装即可快速开始。

Skeleton is a simple framework for responsive mobile friendly development. It is as light as a feather and can be quickly started without any compilation or installation.

Skeleton 提供了一个定义明确且组织良好的文件结构，这显著减少了网站开发时间，并给出最佳结果。它被广泛用于电子商务网站的开发中。它是一个免费且开源的 CSS 框架。

Skeleton provides a well-defined and organized file structure, which considerably reduces the website development time and gives best results. It is extensively used for the development of eCommerce websites. It is a free and open-source CSS framework.

CSS RWD Framework - Semantic UI

  • Semantic UI* 是一个基于 LESS 和 jQuery 的免费且开源的 CSS 框架。此框架被广泛使用，并附带第三方样式指南。它有助于创建漂亮、响应式的布局。

Semantic UI is a free and open-source CSS framework based on LESS and jQuery. This framework is widely used and comes with third-party style guidelines. It helps in creating beautiful and responsive layouts.

语义用户界面提供各种各样的主题和 CSS、JavaScript、字体文件、以及诸如按钮、面包屑导航、预加载器等的 UI 元素。此框架组织严谨，便于在文件中获取组件，从而减少了文件加载时间。除此之外，语义用户界面还提供易于理解且充分说明的插图和文档。

A wide variety of themes and CSS, JavaScript, font files, and UI elements, such as buttons, breadcrumbs, pre-loaders, etc are provided by Semantic UI. This framework is highly organized, making it easy to fetch a component in a file and thus resulting in reduced load time of files. Apart from this sufficient illustrations and documentations that are easy to learn are provided by Semantic UI.

CSS RWD Framework - Foundation

  • Foundation* 是一个适用于所有设备和媒介的免费且开源的 CSS 框架。它语义化、可读，灵活且完全可自定义。

Foundation is a free and open-source CSS framework that is for all kinds of devices and mediums. It is semantic, readable, flexible, and entirely customizable.

框架提供了一个针对定制 Web 设计而制作的综合范围。它基于移动优先模式，它首先让你针对小型设备构建设计，并且随着设备变大，它提供了完整响应式设计。

Framework offers a comprehensive scope for tailor-made web designs. It is based on mobile-first model, which lets you build for small devices first, and as the device gets larger, it provides a complete responsive design.