bootstrap学习笔记（3）--less语言的简单实用

最新推荐文章于 2022-11-14 23:25:30 发布

无悔_一叶扁舟

最新推荐文章于 2022-11-14 23:25:30 发布

阅读量493

点赞数

分类专栏： bootstrap 文章标签： bootstrap less

本文链接：https://blog.csdn.net/u011662320/article/details/61618709

版权

bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

使用时，需要引入less.js文件，

1.site.less文件，定义了一些样式

@bColor:teal;//定义变量：bColor
@oColor:orange;
//模式匹配（方法重载）@c参数名：@bColor为默认值
.mixin(dark, @c:@bColor){
//darken自带函数，变暗10%
  color:darken(@c,10%);
}
.mixin(light, @c:@bColor){
//lighten自带函数,变亮10%
  color:lighten(@c,10%);
}
//声明默认宽度1px
.bordered(@width:1px){
//dotted:点线
  border:@width dotted @bColor;
}

//圆角5px
.border-radius(@radius:5px){
     -moz-border-radius:@radius;
  -webkit-border-radius:@radius;
          border-radius:@radius;
}
//带参混合
.box-shadow(@x:5px,@y:5px,@c:@bColor){
  box-shadow:@arguments;
  .mixin(light,@c);
  margin-bottom:5px;
}

//引导模式,混合带入（在一个样式中调用另一个样式）
.mixin(@a) when(lightness(@a)>=50%){
  background-color:black;
}
//亮度小于50%将背景色设置为白色
.mixin(@a) when(lightness(@a)<=50%){
  background-color:white;
}

header{
//color指向oColor,而oColor是orange，所以最终的颜色为orange
  color:@oColor;
  h1{ color:@bColor; }
  h2{ color:#f00; 
    a{ color:#0f0;//（同级）本级的hover属性鼠标放在上面变为红色 
      &:hover{color:#f00;}
    }
  }
}

footer,article,aside,section,hgroup,div,nav{
  .mixin(#888);
  .mixin(light,@bColor);  //模式匹配(重载)
  //调用.border
  .bordered(2px); //mixin 带参数混合  
  .border-radius(5px);
  .box-shadow();
}

2.html代码：

<!DOCTYPE html>
<html lang="zh-cn">
	<head>		
		<!-- 页面编码 -->
		<meta charset="UTF-8">
		<!-- 响应式布局 -->
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<!-- Bootstrap样式文件 -->
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
		<!-- 自定义样式文件 -->
		<link rel="stylesheet/less" type="text/css" href="styles/site.less">
		<!-- Jquery脚本文件 -->
		<script src="scripts/jquery.min.js"></script>
		<!-- less脚本文件 -->
		<script src="scripts/less.js"></script>
		<!-- Bootstrap脚本插件文件 -->
		<script src="bootstrap/js/bootstrap.min.js"></script>
		<!-- 标签名称 -->
		<title>index</title>
	</head>
	<body class="container">
		<header class="page-header">
			this is header
			<h1>index</h1>
			<h2>
				less demo
				<a href="#">view</a>
			</h2>
		</header>
		
		<div>
			
			<article>
				<h3>less入门<small>with aptana</small></h3>
				<section>
					<p>less是一种动态样式语言</p>
					<aside>
						<a href="#">了解更多</a>
						<blockquote>
							来自W3C标准
							<cite><a href="http://w3c.com">w3c</a></cite>
						</blockquote>
					</aside>
				</section>
			</article>
			
			<br><br>
			
		</div>
		
		<footer class="navbar-fixed-bottom text-center">&copy; 2015</footer>
	</body>
</html>

3.效果图：

无悔_一叶扁舟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap学习笔记（3）--less语言的简单实用

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。使用时，需要引入less.js文件，1.site.less文件，定义了一些样式@bColor:teal;//定义变量：bColor@oColor:orange;//模式匹配（方法重载）@c参数名：@bColor为默认值.mix
复制链接

扫一扫