<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>less</title>
<link rel="stylesheet" type="text/css" href="bootstrap-v3/css/bootstrap.css">
<!-- <link rel="stylesheet/less" type="text/css" href="styles.less" /> -->
<!-- 由于浏览器端使用less时是使用ajax拉取 .less文件的,想直接在电脑文件系统打开(file://开头)或者是有跨域的情况下, 是拉取不到.less文件的,必须在 http(s)协议下使用, 也就是服务器环境下使用
当前阶段的解决方法 是写在 style 标签里面,要注意style标签的type是 text/less.
-->
<style type="text/less">
@color: red;
@center-width: 900px;
@backgorund-color-div: blue;
@backgorund-color-p: pink;
@text-color-p: green;
.container {
.row {
.box1 {
/*color: red;*/
color: @color;
}
.box2 {
/* 混入, mixin, 一种: .box1; 一种: .box1();*/
/*.box1();*/
.box1;
font-size: 18px;
}
}
}
</style>
<!-- 必须确保 在 less.js 之前加载 样式表 ↑ -->
<script type="text/javascript" src="../less/less-1.7.3.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 box1">
123
</div>
</div>
<div class="row">
<div class="col-md-6 box2">
456
</div>
</div>
</div>
<script type="text/javascript" src="../../jquery-3.2.1.js"></script>
<script type="text/javascript" src="bootstrap-v3/js/bootstrap.js"></script>
</body>
</html>上述运行结果:
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
