[ivo UI] 适合初学者的HTML5 UI组件库

云淡风轻0293

已于 2022-08-28 18:58:45 修改

阅读量1.9k

点赞数 1

文章标签： ui html5 前端 html

于 2022-08-27 12:51:57 首次发布

本文链接：https://blog.csdn.net/m0_56004684/article/details/126550726

版权

什么是ivo UI组件库？

tips：您现在阅读的是ivo 1.1版本

更多版本：ivo 1.1

更多教程：云顶码农博客

ivo UI组件库是面向h5初学者的一款简易UI组件库。

在ivo UI，您可以通过块级元素组件简单的搭建您自己的网站前端。

ivo UI不需要您掌握太多的编程技术只需要您了解以下内容：

html5
java script

快速上手

安装

国内推荐使用部署在热铁盒网站托管的文件

<link type="text/css" rel="stylesheet" href="https://zane.rth1.one/ivo.css"/>
<script type="text/javascript" src="https://zane.rth1.one/ivo.js"></script>

开始

将以下代码作为您第一个使用ivo UI网站的模板

<!-- 我们的所有库均部署在热铁盒网站托管，如有侵犯，请联系qq：986686113 -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ivo UI</title>
        <!-- css -->
        <link type="text/css" rel="stylesheet" href="https://zane.rth1.one/ivo.css"/>
    </head>
    <body>
        <nav class="nav">
            <ul class="navbar-nav">
                <a href="#home" class="navbar-title">My Web</a>
                <a href="#link 1">Link 1</a>
                <a href="#link 2">Link 2</a>
                <a href="#link 3">Link 3</a>
            </ul>
        </nav>
        <p>Hello World!</p>
        <!-- script -->
        <script type="text/javascript" src="https://zane.rth1.one/ivo.js"></script>
    </body>
</html>

组件

文本

<p>p标签</p>
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>

导航栏

创建一个简单的ivo导航栏：

<nav class="nav">
    <ul class="navbar-nav">
        <a href="#home" class="navbar-title">Title</a>
        <a href="#link 1">Link 1</a>
        <a href="#link 2">Link 2</a>
        <a href="#link 3">Link 3</a>
    </ul>
</nav>

固定在头部只需要添加nav-top属性

<nav class="nav nav-top">
    <ul class="navbar-nav">
        <a href="#home" class="navbar-title">Title</a>
        <a href="#link 1">Link 1</a>
        <a href="#link 2">Link 2</a>
        <a href="#link 3">Link 3</a>
    </ul>
</nav>

固定在底部只需要添加nav-botton属性

<nav class="nav nav-bottom">
    <ul class="navbar-nav">
        <a href="#home" class="navbar-title">Title</a>
        <a href="#link 1">Link 1</a>
        <a href="#link 2">Link 2</a>
        <a href="#link 3">Link 3</a>
    </ul>
</nav>

按钮

创建一个简单的ivo按钮：

<button class="button">button</button>

创建带有颜色的ivo按钮

<!-- 红色 -->
<button class="button red">red button</button>
<!-- 绿色 -->
<button class="button green">green button</button>
<!-- 蓝色 -->
<button class="button blue">blue button</button>
<!-- 黑色 -->
<button class="button black">black button</button>

除此之外，您还可以自己通过style设置按钮颜色

徽标

创建一个简单的ivo徽标：

<span class="badge">徽标</span>

创建一个带有颜色的ivo徽标：

<!-- 红色 -->
<span class="badge red">徽标</span>
<!-- 绿色 -->
<span class="badge green">徽标</span>
<!-- 蓝色 -->
<span class="badge blue">徽标</span>
<!-- 黑色 -->
<span class="badge black">徽标</span>

除此之外，您还可以自己通过style设置徽标颜色

卡片

通过card属性来创建一个简单的ivo卡片：

<div class="card">
    <h1>简单的卡片</h1>
</div>

card-body属性可以添加卡片中部

<div class="card" style="margin: 10px;">
    <h1>卡片头部</h1>
    <div class="card-body">
        <h1>卡片中部</h1>
    </div>
</div>

属性表

属性	描述
bos	添加阴影
sm	小号块

属性	描述
bg	大号块

更多内容正在补充中~~

云淡风轻0293

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
[ivo UI] 适合初学者的HTML5 UI组件库

ivo UI组件库教程
复制链接

扫一扫