UIkit 基本使用

2018/3/28 21:34:55 加载中...

新建一个HTML文件

引入JQuery后，再引入UIkit的js和css文件

要实现“适配移动端”要添加 viewport

即：定义视图模式

width=device-width：宽度等于设备宽度

initial-scale=1：缩放设置为不缩放

还可以添加

maximum-scale=1.0, user-scalable=0

maximum-scale：允许用户的最大缩放值

user-scalable ：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

写个基本页面，一行有两列，且自适应。

效果图：

未命名图片.png

代码：

<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/uikit/2.27.5/js/uikit.min.js"></script>
	<link href="https://cdn.bootcss.com/uikit/2.27.5/css/uikit.min.css" rel="stylesheet">
</head>
<body>	
	<div class='uk-grid'>
		<div class='uk-width-1-1 uk-text-center'>
			<h1>中国知网</h1>
		</div>
		<div class='uk-width-1-2 uk-text-center'>
			<h2>销售部</h2>
		</div>
		<div class='uk-width-1-2 uk-text-center'>
			<h2>开发部</h2>
		</div>
	</div>	
</body>
</html>

版权说明

作者：SQBER

文章来源：http://sqber.com/articles/uikit-basic-use.html

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。