0


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

什么是ivo UI组件库?

tips:您现在阅读的是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大号块


更多内容正在补充中~~

标签: ui html5 前端

本文转载自: https://blog.csdn.net/m0_56004684/article/details/126550726
版权归原作者 halocer 所有, 如有侵权,请联系我们删除。

“[ivo UI] 适合初学者的HTML5 UI组件库”的评论:

还没有评论