Qwant - CSS

Qwant - CSS 是一个基于 CSS3 的 CSS 框架，它使用了现代的设计原则和响应式技术来快速构建美观、优雅的 Web 界面。

Qwant - CSS 包含了很多有用的组件和样式，如按钮、表单、布局等。使用 Qwant - CSS 可以让开发者省去繁琐的 CSS 编写和设计，快速构建出高质量的 Web 项目。

特性

• 响应式设计：Qwant - CSS 提供了多种响应式布局，适配不同的设备和分辨率。
• 组件丰富：Qwant - CSS 提供了按钮、表格、弹出框、标签、导航栏、分页等多种常用组件，可以轻松构建出美观实用的 Web 界面。
• 可扩展性：Qwant - CSS 具有灵活的可扩展性，可以通过自定义变量、样式、组件等来满足不同的需求。
• 定制性：Qwant - CSS 的样式简洁而优雅，可以轻松地进行个性化定制，满足不同的需求和设计风格。

快速开始

如果你想使用 Qwant - CSS 来构建你的 Web 项目，可以通过以下两种方式进行引用：

CDN 引用

可以使用以下代码在 HTML 文件中引用 Qwant - CSS：

<link rel="stylesheet" href="https://unpkg.com/qwant-css/dist/qwant.min.css">

下载引用

可以在 Qwant - CSS 官网 下载 Qwant - CSS 的源码，然后在你的项目中引用。

<link rel="stylesheet" href="path/to/qwant.css">

布局

Qwant - CSS 提供了丰富的布局方式，可以轻松地构建常用的网页布局，如以下几种：

栅格布局

栅格布局是一种常用的网格布局方式，可以将页面分成多个列，轻松地实现水平对齐和垂直排列。

<div class="qwant-row">
  <div class="qwant-col-6">左侧内容</div>
  <div class="qwant-col-6">右侧内容</div>
</div>

Flexbox 布局

Flexbox 布局是一种比较流行的布局方式，可以轻松地实现水平和垂直的对齐和排列。

<div class="qwant-container">
  <div class="qwant-flex qwant-flex-center">
    <div>水平居中对齐</div>
  </div>
</div>

响应式布局

Qwant - CSS 提供了多种响应式布局方式，可以根据不同设备的分辨率进行适配。

<div class="qwant-container">
  <div class="qwant-row">
    <div class="qwant-col-md-6 qwant-col-sm-12">中等屏幕显示 6 列，小屏幕显示 12 列</div>
    <div class="qwant-col-md-6 qwant-col-sm-12">中等屏幕显示 6 列，小屏幕显示 12 列</div>
  </div>
</div>

组件

Qwant - CSS 提供了多种常用的组件，可以快速地构建出美观实用的 Web 界面。

按钮

Qwant - CSS 的按钮组件可以轻松地实现不同状态和风格的按钮样式。

<button class="qwant-btn qwant-btn-primary">主要按钮</button>
<button class="qwant-btn qwant-btn-success">成功按钮</button>
<button class="qwant-btn qwant-btn-danger">危险按钮</button>

表格

通过 Qwant - CSS 的表格组件，可以轻松地构建出美观实用的数据表格。

<table class="qwant-table">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>邮箱</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>zhangsan@example.com</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>20</td>
      <td>lisi@example.com</td>
    </tr>
  </tbody>
</table>

标签

Qwant - CSS 的标签组件可以用来展示不同的标签和状态，如成功、警告、危险等。

<span class="qwant-badge qwant-badge-success">成功</span>
<span class="qwant-badge qwant-badge-warning">警告</span>
<span class="qwant-badge qwant-badge-danger">危险</span>

弹出框

Qwant - CSS 的弹出框组件可以用来展示弹出式的提示框、模态框等。

<div class="qwant-modal">
  <div class="qwant-modal-header">
    <h3>模态框标题</h3>
    <button class="qwant-modal-close">X</button>
  </div>
  <div class="qwant-modal-body">
    <p>模态框内容</p>
  </div>
  <div class="qwant-modal-footer">
    <button class="qwant-btn qwant-btn-primary">确定</button>
    <button class="qwant-btn qwant-btn-secondary">取消</button>
  </div>
</div>

自定义

如果你想自定义 Qwant - CSS 的样式，可以通过修改样式表或者使用 SASS 变量来实现。

修改样式表

Qwant - CSS 的样式表包含了所有的样式，你可以通过修改样式表来实现自定义。

<link rel="stylesheet" href="path/to/qwant.css">

使用 SASS 变量

Qwant - CSS 的样式表是基于 SASS 构建的，你可以通过修改 SASS 变量来实现自定义。

$qwant-primary-color: #3273dc;
$qwant-secondary-color: #6c757d;

// 引用 Qwant - CSS 样式表
@import 'path/to/qwant';