less和bootstrap笔记

最新推荐文章于 2022-07-14 11:50:23 发布

殷丿grd_志鹏

最新推荐文章于 2022-07-14 11:50:23 发布

阅读量420

点赞数 1

分类专栏：前端文章标签： less bootstrap css html

本文链接：https://blog.csdn.net/grd_java/article/details/107134505

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

代码需要你复制到工具中运行看效果

一、less

1、环境搭建

使用less两种方法
1、使用npm安装：npm install -g less（推荐）
2、使用工具预编译less文件，将其转换为css文件（没学node.js的不会npm的推荐使用这个）
3、引入到html中使用（没有学习node.js的先用这种方法）

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

不想下载的用这种，直接通过网址引入，但需要有网
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

测试环境是否搭建成功

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<style type="text/less">
			*{	/*权重为0*/
				margin: 0;
				padding: 0;
				border: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;/* 清除默认滚动条 */
			}
			#wrap1{
				background-color: pink;
				width: 18.75rem;
				height: 18.75rem;
				display: flex;
				.item{
					width: 60px;
					height: 60px;
					background-color: blue;
				}
			}
		</style>
		
	</head>
	<body>
		<div id="wrap1">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
	<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
</html>

复制上面代码，出现如下效果表示成功
在这里插入图片描述

预编译工具koala，下载好安装完，之后我们会用
上面的编译方式是运行时编译，非常的不好
我们希望的是预编译，就是我们将less文件编写好的时候，直接帮我们转成相应的css文件，这就需要一个工具，koala
koala:coala-app.com

注意
less不是一种新语言来取代css，更像是一种工具，让我们更结构化的，更方便的编写样式
最终将less编译完成你会发现，编译好的文件依然是一个css文件

搭建测试环境

建立less文件夹
在这里插入图片描述
将文件夹拖入koala编译

引入预编译完成的css文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<link rel="stylesheet" type="text/css" href="css/test.css"/>
		
	</head>
	<body>
		<div id="wrap1">
			<div class="item">1</div>
			<div class="item">2</div>
			<div class="item">3</div>
			<div class="item">4</div>
			<div class="item">5</div>
		</div>
	</body>
</html>

在这里插入图片描述

2、基础

1、注释

注释一共分为两种
/*css中可以看到的，给所有人看*/
//css中看不到的，给开发人员看

在这里插入图片描述

2、变量

less中使用@来作为定义和使用变量的标识符
	语法：
		@pink:pink; /*此时就有一个名为@pink的变量保存了pink变量值*/
		color:@pink;/*此时通过变量名即可引用变量值*/
		
如果你要将选择器和属性名作为变量，使用变量的语法是不一样的（没多少人会将选择器和属性名作为变量）
	语法：
		@m:margin;/*定义*/
		@selection:#wrap;

		@{selection}{/*使用选择器变量*/
			@{m}:0;/*使用属性变量*/
		}
	调用url地址和此相同
		@{url}

在这里插入图片描述

变量的延迟加载
如果你学过编程语言，那么你需要注意这个问题，因为这会编程语言可不一样

局部变量的改变，不会影响父级和全局的变量值
变量值的获取会等到当前块中所有内容解析完赋值

在这里插入图片描述

3、嵌套规则

less的嵌套规则就是，把每个嵌套的选择器通过空格拼接
	#wrap{
		margin: 0;
		.inner{
			border: 1;
		}
	}
	会解析成
	#wrap {
	  margin: 0;
	}
	#wrap .inner {
	  border: 1;
	}
但是这就有个问题，伪类怎么办
	#wrap{
		margin: 0;
		:hover{
			margin: 10px;
		}
	}
	会编译成
	#wrap {
	  margin: 0;
	}
	#wrap :hover {//这里用空格隔开了伪类
	  margin: 10px;
	}
仔细看编译后的结果#wrap :hover 是绝对不生效的，因为正确写法应该是#wrap:hover,而不是用空格隔开

解决办法就是添加&符号，此符号会告诉编译器，我不需要空格拼接
	#wrap{
		margin: 0;
		&:hover{//在不需要空格拼接的内容前面加上&，既直接拼接
			margin: 10px;
		}
	}
	编译成
	#wrap {
	  margin: 0;
	}
	#wrap:hover {
	  margin: 10px;
	}

4、混合

1、普通混合

混合就是定义以全局样式，此样式一般包含重复性高的声明，以达到在其它样式中使用的时候直接引入混合样式即可
但混合样式最大的作用是继承和可变，我们可以动态的传变量值，并继承混合样式，让样式可以十分灵活
如果你学过编程语言，它就类似函数或者方法

定义：
	.混合样式名(变量形参（可以不写）){/*注意，如果你不写括号，就会将此混合样式也编译到css中，但不影响其作用*/
		声明;
	}
使用：
	#wrap{
		.混合样式名(实参（没有可以不写）);
	}
参数中你看一指定默认值，此时如果你引用时不指定参数，就会使用默认值
	.mix(@bgcolor:blue,@w:60px,@h:60px)
你可以只对某一个参数赋值，其它使用默认
	.mix(@bgcolor:blue,@w:60px,@h:60px)
	调用时
	.mix(@bgcolor:red)

在这里插入图片描述

2、匹配模式

可以通过标识符，匹配同名，但标识符不同的混合样式
	.mix(L,@bgcolor:blue){/*标识符为L*/
		width:0px;
		height: 0px;
		border-width: 40px;
		border-color: transparent @bgcolor transparent transparent;
		border-style: dashed solid dashed dashed; 
	}
	.mix(B,@bgcolor:blue){/*标识符为B*/
		width:0px;
		height: 0px;
		border-width: 40px;
		border-style: solid dashed dashed dashed; 
		border-color: @bgcolor transparent transparent transparent;
	}
	#wrap1{
		.item:not(:nth-child(1)){
			.mix(B,@bgcolor:red);
		}
		&:nth-child(1){
			.mix(L,@bgcolor:blue);
		}
	}
可以看到上面的两个都有重复属性，就是宽度高度和边框宽度，我们可以将其单独定义出去，让样式继承
如果你写了两个文件，只要通过@import关键在引入文件即可，其它写法相同
.mix-public(){/*假设这是写在另一个less文件中的样式*/
	width:0px;
	height: 0px;
	border-width: 40px;
}

@import '另一个less文件地址'


.mix(L,@bgcolor:blue){
	.mix-public();/*使用继承过来的样式*/
	border-color: transparent @bgcolor transparent transparent;
	border-style: dashed solid dashed dashed; 
}
.mix(B,@bgcolor:blue){
	.mix-public();
	border-style: solid dashed dashed dashed; 
	border-color: @bgcolor transparent transparent transparent;
}

在这里插入图片描述

5、less继承

继承说白了就是选择器中的逗号

在这里插入图片描述

6、编译避免

有时候我们会想要一些特殊的值，比如100+5，这时less会将其计算编译，我们可以通过某种方法，避免编译
语法：~“不需要编译的内容”

在这里插入图片描述

二、bootstrap

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

1、环境搭建

和less一样，具有多种下载方式
需要jquery的支持

官网下载源码
在这里插入图片描述

我们通过CDN使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

		<style>
			div{
				background-color: #FFC0CB;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid">流体容器</div>
		<div class="container">固定容器</div>
	</body>
	<!-- 引入jquery -->
	 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

在这里插入图片描述

2、容器和栅格系统

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

		<style>
			body > div:nth-child(2),body > div:nth-child(3),body > div:nth-child(4){
				background-color: #FFC0CB;
				border: 1px blue solid;
			}
		</style>
	</head>
	<body>
		<h1>请先将页面放到最大，然后逐渐缩小看自适应效果</h1>
		<div class="container-fluid">流体容器</div>
		<div class="container">固定容器，页面宽度 大于1200，会固定宽度为1170px，页面大于992小于1200，固定为970px，大于768小于992，固定为750px，小于768，为auto</div>
		<div class="container">
			<div class="row"><!-- 行布局 一行12列-->
				<div class="col-lg-10">栅格</div><!-- 列，占一行的10列 -->
				<div class="col-lg-2">栅格</div><!-- 列，占一行中的2列 -->
			</div>
		</div><br />
		
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-md-4 col-sm-6">
					<div clas s="thumbnail">
						<img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.28/dist/img/webpack.png" alt="...">
						<div class="caption">
							<h3>webpack</h3>
							<p>是前端资源模块化管理和打包工具Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</p>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-4 col-sm-6">
					<div clas s="thumbnail">
						<img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.28/dist/img/react.png" alt="...">
						<div class="caption">
							<h3>React</h3>
							<p>用于构建用户界面的 JavaScript 框架
								React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。</p>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-4 col-sm-6">
					<div clas s="thumbnail">
						<img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.28/dist/img/typescript.png" alt="...">
						<div class="caption">
							<h3>TypeScript</h3>
							<p>TypeScript 是由微软开源的编程语言。它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
						</div>
					</div>
				</div>
				<div class="col-lg-3 col-md-4 col-sm-6">
					<div clas s="thumbnail">
						<img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.28/dist/img/svelte.png" alt="...">
						<div class="caption">
							<h3>Svelte</h3>
							<p>Svelte 是构建 Web 应用程序的一种新方法。Svelte 是一个编译器，它将声明性组件转换成高效的 JavaScript 代码，并像做外科手术一样细粒度地更新 DOM。</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<!-- 引入jquery -->
	 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

上面代码中你可以看到`xs sm md和lg`
`这是一种阈值`
xs表示小于768px
sm表示大于等于768px，如果同时有md，则阈值为768~992px
md表示大于等于992px
lg表示大于等于1200px
`每个阈值对应一种width`
xs 的width为auto
sm的width为720px+槽宽
md的width为940px+槽宽
lg的width为1140+槽宽
`这些容器有公共样式`
两侧的padding：15px
`对于列col容器`
默认相对定位
width有1~12个起点
right：0~12
margin-left：0~12

殷丿grd_志鹏

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
less和bootstrap笔记

代码需要你复制到工具中运行看效果一、less1、环境搭建使用less两种方法1、使用npm安装：npm install -g less（推荐）2、使用工具预编译less文件，将其转换为css文件（没学node.js的不会npm的推荐使用这个）3、引入到html中使用（没有学习node.js的先用这种方法）<link rel="stylesheet/less" type="text/css" href="styles.less" />&lt...
复制链接

扫一扫