UIkit 基本使用

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

新建一个HTML文件


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


<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">


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

<meta name="viewport" content="width=device-width,initial-scale=1">

即:定义视图模式


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