什么是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大号块
更多内容正在补充中~~
本文转载自: https://blog.csdn.net/m0_56004684/article/details/126550726
版权归原作者 halocer 所有， 如有侵权，请联系我们删除。
版权归原作者 halocer 所有， 如有侵权，请联系我们删除。