npm 包 newton.css 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

newton.css 是一个基于 CSS3 构建的响应式布局框架，它的特点是轻量、易用、兼容性好，可以快速构建出美观的网页界面。本文将介绍如何安装和使用 newton.css，并提供一些实际示例，帮助你更好地掌握如何使用它。

安装

在使用 newton.css 之前，需要先安装它。你可以通过 npm 进行安装：

npm install newton.css

安装完成之后，你就可以在项目中引入 newton.css：

<link rel="stylesheet" href="node_modules/newton.css/dist/css/newton.min.css">

如果你采用的是其他方式进行项目构建，例如 webpack、rollup 等，你可以直接在项目中引入 newton.css 的模块：

import 'newton.css/dist/css/newton.min.css';

使用

newton.css 的样式类都是以 n- 开头的，每个类都对应了一个不同的布局样式。下面我们将介绍一些常用的样式类并提供实例代码。

容器布局

n-container：容器类，可实现网页宽度限制。

<div class="n-container">
  <p>这是一个容器类</p>
</div>

网格布局

n-grid：网格类，可将页面划分成多个网格。默认网格为 12 列。

<div class="n-grid">
  <div class="n-col-3">1</div>
  <div class="n-col-3">2</div>
  <div class="n-col-3">3</div>
  <div class="n-col-3">4</div>
</div>

n-row：行类，可在网格内创建行。

-- -------------------- ---- -------
---- ---------------
  ---- --------------
    ---- -----------------------
    ---- -----------------------
  ------
  ---- --------------
    ---- -----------------------
    ---- -----------------------
  ------
------

n-col-*：列类，可在行内创建列，其中 * 为数字，代表占据的列数。

<div class="n-grid">
  <div class="n-row">
    <div class="n-col-6">1</div>
    <div class="n-col-6">2</div>
  </div>
</div>

n-push-* 和 n-pull-*：可调节列的位置。n-push-* 让列向右移动，n-pull-* 让列向左移动。

<div class="n-grid">
  <div class="n-row">
    <div class="n-col-6 n-push-6">1</div>
    <div class="n-col-6 n-pull-6">2</div>
  </div>
</div>

对齐布局

n-text-center：文字居中。

<div class="n-text-center">文字居中</div>

n-text-left 和 n-text-right：文字左对齐和右对齐。

<div class="n-text-left">文字居左</div>
<div class="n-text-right">文字居右</div>

水平垂直居中布局

n-flex-center：使用 flex 布局实现水平垂直居中。

<div class="n-flex-center">水平垂直居中</div>

边框样式

n-border-*：边框样式调节类，* 可选值有 0、1、2、3、4、5，代表不同的边框样式。

<div class="n-border-2">边框样式 2</div>

背景样式

n-bg-*：背景样式调节类，可将 * 替换为颜色名称。

<div class="n-bg-gray">灰色背景</div>

结语

通过上述示例，你应该已经能够掌握如何使用 newton.css 了。当然，newton.css 还提供了很多其他的样式类，你可以参考官方文档来获取更全面的了解。希望本文能够对你学习前端开发有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005602b81e8991b448de5b9

npm 包 newton.css 使用教程

介绍

安装

使用