尚硅谷bootstrap教程-简单介绍

最新推荐文章于 2023-01-18 14:41:31 发布

codelyq

最新推荐文章于 2023-01-18 14:41:31 发布

阅读量318

点赞数

分类专栏： # 96_css

本文链接：https://blog.csdn.net/weixin_41748874/article/details/119718594

版权

96_css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

bootstrap邂逅

第1点-闲白

UI框架有很多种，用的时候，不要管别人的实现，直接复制粘贴。

bootstrap当中css相关的东西，都是用less写的。

bootstrap现在稳定的玩意是bootstrap3。

有两个版本的，一个是less版本的，一个是sass版本的。

bootstrap提供了很多好用的插件。

看看这些内容，真的是好多，不可能全部学完的。

在印度，angularjs非常火

在欧洲，react非常火

在中国，vue非常火

我们建议的技术栈是vue+react。

angularjs的技术学习路线太陡峭。要学习typescript。学习量太大。

第2点-轮播图

第3点-响应式

不同分辨率、不同设备，一套代码都可以跑。这就是响应式。

核心就是媒体查询。

第4点-bootstrap源码

这是老师使用的版本3.3.7。

一个是带有dist的版本，是编译完成的，是压缩的。

一个不带有dist的版本，是源码。

第5点-搭建项目

这里说明了bootstrap是使用normalize.css来初始化css的。还有一个初始化css的，叫做reset.css。

这个在李立超的视频当中有提到。

上面这个人，写过两本书，Eric Meyer谈css卷一，Eric Meyer谈css卷二。

第6点-流体容器

<div class="container-fluid"></div>

什么叫做流体容器？

什么叫做流体容器，就是一个弹性布局，就是width为auto的。

第7点-固定容器

<div class="container"></div>

上图中框起来的玩意，就是媒体查询。

上面这个媒体查询是什么意思：

width为auto和width为100%一样吗？

width为auto的时候，你加padding的时候，是往里面扣掉的。

width为100%的时候，你加padding的时候，是在两边给你加上去的。

完全是两个概念。

一般使用固定容器，很少使用流体容器。

第8点-栅格系统

你会发现，栅格布局跟flex，真的有点像。

就是因为有了栅格布局这种东西，才会有了flex。

这是我个人意淫的，没有任何根据。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<style type="text/css">
		.container{
			background-color: #FFBFCD;
		}
		div[class|= col]{
			border: 1px solid #000000;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-lg-10">col-lg-10</div>
			<div class="col-lg-2">col-lg-2</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</html>

现在有一行，行里有两列，一列占据10份，一列占据2份。

在bootstrap里面默认会把栅格分成12块。

	<div class="container">
		<div class="row">
			<div class="col-lg-10">col-lg-10</div>
			<div class="col-lg-2">col-lg-2</div>
		</div>
		<div class="row">
			<div class="col-lg-6">col-lg-6</div>
			<div class="col-lg-6">col-lg-6</div>
		</div>
		<div class="row">
			<div class="col-lg-4">col-lg-4</div>
			<div class="col-lg-8">col-lg-8</div>
		</div>
	</div>