less和bootstrap笔记

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

一、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
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Bootstrap 是一个流行的前端开发框架,它提供了一套简洁、易用的CSS和JavaScript组件,可以帮助开发者快速构建响应式网页和Web应用程序。 以下是一些关于 Bootstrap笔记: 1. 栅格系统:Bootstrap 提供了一个灵活的栅格系统,可以方便地创建响应式布局。通过将页面分割成12个列,可以轻松地在不同屏幕尺寸下进行布局。 2. CSS 组件:Bootstrap 提供了各种预定义的CSS类和组件,如按钮、导航栏、表单、卡片等,可以直接在HTML中使用这些组件来构建页面。 3. 响应式设计:Bootstrap 的设计理念是响应式的,可以自动适应不同的设备和屏幕尺寸。通过使用预定义的CSS类和媒体查询,可以轻松实现移动设备友好的网站。 4. JavaScript 插件:除了CSS组件外,Bootstrap 还提供了一些交互性的JavaScript插件,如轮播、模态框、滚动监听等。这些插件可以增强用户体验并添加一些常见的功能。 5. 定制化:Bootstrap 提供了丰富的自定义选项,可以根据项目的需求进行定制化。开发者可以通过修改变量或选择合适的组件来创建自己风格的网站。 6. 社区支持:由于 Bootstrap 是一个非常受欢迎的前端框架,有一个活跃的开发社区。你可以在官方文档、社区论坛和GitHub等地方找到大量的资源和解决方案。 这些是关于 Bootstrap 的一些基本笔记,但实际上 Bootstrap 提供了更多的功能和选项。希望这些笔记能对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

殷丿grd_志鹏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值