创新实训——基于Bootstrap的网站响应式布局设计

  前言：在以往的web前端开发过程中，网页的最终运行环境一般是普通的PC，也就是最为常见的中型电脑屏幕，但在众多移动设备快速发展的今天，特别是智能手机的普及使得开发人员在前端开发过程中不得不考虑网页在不同分辨率，不同形状的显示屏下运行的兼容性，这就引入了web开发领域中的一个重要词汇——响应式。

  响应式布局可以帮助我们实现网站布局随屏幕大小自动调整的需求，实现不同屏幕分辨率的终端上浏览网页的不同展示方式，使得网页在PC端和手机端均可以完美的展现其内容，具有自适应性。

  所以在这次创新实训的web前端开发过程中，为了我们的系统最终在PC端和手机端都能完美的运行，我引入了响应式布局设计。

    通过这两天的学习，我总结出了以下两种实现网站响应式布局的方法。

一．使用基于Bootstrap的栅格系统

     Bootstrap响应式布局是利用其栅格系统，对于不同的屏幕采用不同的类属性。在开发中可以只写一套代码在手机平板，PC端都能使用，而不用考虑使用媒体查询（针对不同的设备分别写不同的代码）。Bootstrap的官方解释：Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为做多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。

1. 栅格系统的工作原理

（1）行（row）必须包含在.container(固定宽度)或.container-fluid(100%宽度)中，以便为其赋予合适的排列内补（padding）。 
（2）通过行（row）在水平方向创建一组列（column）。 
（3）自己内容应当放置于列（column）内，并且，只有列可以作为行（row）的直接子元素。 
（4）类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。
（5）通过为列设置padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消为.container元素设置的padding，也就间接为行（row）所包含的列（column）抵消掉了padding。 
（6）栅格系统的列是通过指定1到12的值来表示其跨越范围。例如三个等宽的列可以使用三个.col-xs-4来创建。 
（7）如果一行（row）中包含了的列（column）大于12，多余的列所在的元素将作为一个整体另起一行排列。 
（8）栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕覆盖栅格类。 
如下图所示为栅格系统在多种屏幕上的应用说明。 

2. 栅格系统应用实例

通过栅格系统实现不同大小屏幕可以显示不同行列分布的缩略图

（1）结果

.col-xs----------------------------------(3*2)

 

.col-sm--------------------------------（2*3）

 

.col-md--------------------------------(2*4)

 

（2）代码———————————————————————————

<div class="container">
	<div class="row">
		<div class="col-xs-6 col-sm-4 col-md-3" >
			<div class="thumbnail">
				<img src="img/1.jpg" alt="">
				<div class="caption">
					<h3>火影忍者</h3>
					<p>宇智波鼬</p>
					<p><a href="#" calss="btn btn-drfault">了解一下</a></p>
				</div>
			</div>
		</div>
        </div>
</div>

（3）总结

  上面的实例中我们利用栅格系统实现了缩略图的响应式布局。Bootstrap下的栅格系统可以实现页面总布局框架的响应式，但缺无法实现一些组件对响应式的需求，Bootstrap意识到这一点并且实现了下面的第二种方法。

二．用Javascript实现响应式布局

1. 原理

   在一些无法使用栅格系统实现响应式的组件中，我们可以通过使用Bootstrap提供的一些响应式css来实现一些组件的响应式设计，比如导航栏（navbar-collapse）,此外，我们还可以根据自己的需求来自己设计js代码来实现一些更为具体的响应式布局。

（1）基于Bootstrap的响应式导航条

.col-xs-------------------------------------------

 

.col-sm-,.col-md-,.col-lg-------------------------------------------

 

代码————————————————————————————

	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container"> 
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
					<span class="sr-only">切换导航</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">LOGO</a>
			</div>
			<div class="collapse navbar-collapse" id="example-navbar-collapse">
				<ul class="nav navbar-nav navbar-right">
					<li class="active"><a href="#">首页</a></li>
					<li><a href="#">哈哈</a></li>
					<li><a href="#">咨询</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							菜单 <b class="caret"></b>
						</a>
						<ul class="dropdown-menu">
							<li><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li class="divider"></li>
							<li><a href="#">4</a></li>
							<li class="divider"></li>
							<li><a href="#">5</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</nav>

（2）响应式轮播图

在这个示例中，我们实现的是轮播图中的左右箭头根据轮播图片的大小而自动位于图片中部

<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>

<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>

在没有经过JS处理时，轮播图中的切换箭头会自动布局，不会根据屏幕大小而改变：

 

下图是经过JS方法处理后的轮播箭头，会自动根据图片的大小改变其位置。

 

 

代码——————————————————————

 html:

	<div id="myCarousel" class="carousel slide">
		<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li> 
			<li data-target="#myCarousel" data-slide-to="2"></li>
		</ol>
		<div class="carousel-inner">
			<div class="item active">
				<img src="img/slide1.jpg" alt="1">
			</div>
			<div class="item">
				<img src="img/slide2.jpg" alt="2">
			</div>
			<div class="item">
				<img src="img/slide3.jpg" alt="3">
			</div>
		</div>
		<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
		<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
	</div>

css:

@charset "utf-8";

#myCarousel{
	margin:50px 0 0 0;
}

.carousel-inner .item img{
	margin:0 auto ;
}


.carousel-control{
	font-size:100px;
}

 js:

<script type="text/javascript">
	$(function(){
		//垂直居中
		$('.carousel-control').css('line-height',$('.carousel-inner img').height() + 'px');
		$(window).resize(function(){
			var $height=$('.carousel-inner img').eq(0).height() ||
				$('.carousel-inner img').eq(1).height() ||
				$('.carousel-inner img').eq(2).height();
			$('.carousel-control').css('line-height',$height + 'px');
		})
	})
</script>

（3）总结

  综上，我们用JS方法实现了组件对屏幕大小的自适应，填补了自适应栅格系统无法涉及的细节布局，通过这次学习，我已经基本掌握了这两种响应式布局设计的方法，并且已经运用到我们的人脸识别系统前端网页中，希望在以后的学习中能够了解到更多的关于页面响应式布局的方法，我也会第一时间在这篇文章中进行补充。