Css 简明教程

CSS RWD Frameworks

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

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

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

CSS RWD Framework - Bootstrap

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

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

<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 项目。在设计时也考虑到了移动设备。它是一个紧凑的框架，可保持较小的文件大小。

CSS RWD Framework - Skeleton

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

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

CSS RWD Framework - Semantic UI

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

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

CSS RWD Framework - Foundation

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

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