1-1. 引入Bootstrap文件、图片样式处理、图片响应式

最新推荐文章于 2022-03-15 21:54:41 发布

ROBIN.FANG

最新推荐文章于 2022-03-15 21:54:41 发布

阅读量904

点赞数

分类专栏： jQuery Library

原文链接：www.runoob.com

版权

jQuery Library 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

Bootstrap不是一门语言只是一个UI框架（中文官网下载：www.bootcss.com）

Bootstrap 包括以下组件：

下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等

引入bootstrap和jQuery文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
	</head>
	<body>
	
	<script src="Bootstrap/js/bootstrap.js"></script>	
	<script src="bootstrap/js/jquery-1.11.3.min.js"></script>
	</body>
</html>

Bootstrap 提供三个简单的图片样式：

.img-rounded：效果如同添加 border-radius:6px 来获得图片圆角。
.img-circle：效果如同添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：效果如同添加一些内边距（padding）和一个灰色的边框

<img src="images/bootstrap.png" width="200px" class="img-rounded"/>
<img src="images/bootstrap.png" width="200px" class="img-circle"/>
<img src="images/bootstrap.png" width="200px" class="img-thumbnail"/>

Bootstrap中的图片响应式：

通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计, 图片将很好地扩展到父元素，.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上。

<img src="images/bootstrap.png" width="200px" class="img-rounded"/> <br><br><br>
<img src="images/bootstrap.png" width="500px" class="img-responsive"/>

实战例子：

//下面是 index.html文件全部代码
 
<!DOCTYPE html>
<html>
	<head>
		<!--Bootstrap中一行可以分为12个块-->
		<meta charset="utf-8">
		<!-- 兼容移动端声明设置 -->
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width" />
		<title>Bootstrap网站前端实战</title>
		<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style1.css"/>
		
		<script src="Bootstrap/js/bootstrap.js"></script>	
		<script src="bootstrap/js/jquery-1.11.3.min.js"></script>
		<script src="bootstrap/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/style1.js" type="text/javascript" charset="utf-8"></script>
		
		<!-- 解决H5标签兼容性 -->
		<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
 
	</head>
	
	<body>
		
		<!-- pc端头部制作 -->
		<div class="headerbg1">
		</div>
		
		<div class="headerbg2">
	    </div>	
		
		<!-- pc端头部制作 -->
		
		<!-- wap版头部制作 -->
		<div class="wapheader">
			<img src="images/pic1.png" width="100%" />
		</div>
		
		<div class="wapheader">
			<img src="images/pic2.png" width="100%" />
		</div>
		
		<!-- wap版头部制作 -->
		
	</body>
</html>

//下面是CSS样式中style1.css文件全部代码
 
.headerbg1{
	width: 100%;
	height: 274px;
	background: url(../images/pic1.png) no-repeat center top;
}
 
.headerbg2{
	width: 100%;
	height: 445px;
	background: url(../images/pic2.png) no-repeat center top;	
}
 
/* wap端在pc端大小的时候隐藏*/
.wapheader{
	display: none;
}
 
 
@media(max-width:720px){
	.headerbg1{
		display: none;
	}
	.headerbg2{
		display: none;
	}	
	
	/* wap版代码 */
	.wapheader{
		display: block;   /* 在wap的时候显示上面被隐藏的wap端内容 */
	}
	
	.wapheader{
		width: 100%;
		height: auto;
		text-align: center;
		min-height: 30px;
		margin-top: 0px;   /*处理图片上下间隙问题*/
	}
 
	/* wap版代码 */
}

PC端效果如下：

wap端效果如下：

ROBIN.FANG

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
1-1. 引入Bootstrap文件、图片样式处理、图片响应式

Bootstrap 提供三个简单的图片样式：.img-rounded：效果如同添加border-radius:6px 来获得图片圆角。 .img-circle：效果如同添加 border-radius:50% 来让整个图片变成圆形。 .img-thumbnail：效果如同添加一些内边距（padding）和一个灰色的边框<img src="images/bootstrap.png...
复制链接

扫一扫