中软大前端体验0105-bootstrap

发表于

2D转换transform

  • 属性值scale(2)；放大2倍
  • 属性值translate(20px,30px)；移动 X轴，Y轴
  • 属性值rotate(60deg)；旋转 60度

transition过度

1
2
3
4
5
6
7
8
9
.box{
	width:200px;
	height:200px;
	background-color: green;
	transition:transfrom 2s;
}
.box:hover{
	transform:rotate(20deg);
}

transition属性写在发生变化前

  • transition:transfrom 2s; 发生变化的过度时间

bootstrap栅格系统

在项目中导入文件bootstrap.min.css,bootstrap.min.js,jquery-3.2.1.min.js，栅格系统能够自动适应屏幕变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="container-fluid">
	<div class="row">
		<div class=" box col-sm-6 col-md-3">
			<a href="#">栅</a>
		</div>
		<div class=" box col-sm-6 col-md-3">
			<a href="#">格</a>
		</div>
		<div class=" box col-sm-6 col-md-3">
			<a href="#">系</a>
		</div>
		<div class=" box col-sm-6 col-md-3">
			<a href="#">统</a>
		</div>
	</div>
</div>

bootstrap 把屏幕分为12列
row bootstrap中的行样式
col-md-3 表示1列占3列，即将屏幕一行分为4列
col-sm-6 表示屏幕宽度小于992px时，将屏幕一行分为2列

1
2
3
4
5
6
7
8
9
10
11
12
<div class="col-sm-6 col-md-3">
	<div class="thumbnail">
		<img src="image/mc/hsmf-1.jpg" />
		<div class="caption">
			<h3>茶</h3>
			<p>黄山毛峰，产于安徽歙县黄山。其外形细嫩稍卷曲，芽肥壮、匀齐，有锋毫，形状有点像“雀舌”， 叶呈金黄色;色泽嫩绿油润，香气清鲜，水色清澈、杏黄、明亮，味醇厚、回甘，叶底芽叶成朵， 厚实鲜艳。假茶呈土黄，味苦，叶底不成朵。
			</p>
			<a href="#" class="btn btn-danger">立即购买</a>
			<a href="#" class="btn btn-default">立即购买</a>
		</div>
	</div>
</div>

thumbnail 自带边框样式
btn 自带按钮样式

蒙版

GitHub set up
GitHub set up

例子中的蒙版悬浮于thumbnail之上，逐渐从右向左覆盖图片，做出一个动画效果

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="col-sm-6 col-md-3">
	<div class="thumbnail pic">
		<img src="image/mc/hsmf-1.jpg" />
		<div class="mb">我是蒙版</div>
		<div class="caption">
			<h3>茶</h3>
			<p>黄山毛峰，产于安徽歙县黄山。其外形细嫩稍卷曲，芽肥壮、匀齐，有锋毫，形状有点像“雀舌”， 叶呈金黄色;色泽嫩绿油润，香气清鲜，水色清澈、杏黄、明亮，味醇厚、回甘，叶底芽叶成朵， 厚实鲜艳。假茶呈土黄，味苦，叶底不成朵。
			</p>
			<a href="#" class="btn btn-danger">立即购买</a>
			<a href="#" class="btn btn-default">立即购买</a>
			</div>
	</div>
</div>

蒙版是一个与img标签等大的div层，因为他要悬浮于thumbnail之上，所以设置它的position：absolute（绝对定位），设置了它的背景颜色及透明度background-color: rgba(0,0,0,0.4);，它的初始位置在thumbnail的右侧 left:100%;,当鼠标停留在thumbnail上时，让蒙版移动致左边覆盖图片。设置.pic:hover .mb{left: 5px;}。然后将超出thumbnail的蒙版隐藏掉overflow: hidden;。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.mb{
	width: 98%;
	height: 200px;
	background-color: rgba(0,0,0,0.4);
	position: absolute;
	top: 5px;
	left:100%;
	color: white;
	font-size: 16px;
	text-align: center;
	padding-top: 50px;
	transition: all 1s;
}
.thumbnail{
	position: relative;
	overflow: hidden;
}
.pic:hover .mb{
	left: 5px;
}

border边框

solid 实线