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

原创 2018年04月15日 22:40:26

  前言:在以往的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栅格系统的列是通过指定112的值来表示其跨越范围。例如三个等宽的列可以使用三个.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方法实现了组件对屏幕大小的自适应,填补了自适应栅格系统无法涉及的细节布局,通过这次学习,我已经基本掌握了这两种响应式布局设计的方法,并且已经运用到我们的人脸识别系统前端网页中,希望在以后的学习中能够了解到更多的关于页面响应式布局的方法,我也会第一时间在这篇文章中进行补充。

[深度探索C++对象模型](简体版)中的蛇足

 >(简体版)中的蛇足(没有此书的人请勿看)上次见到这本书是一年前(是候先生的繁体版),花了一个星期的时间读完,囫囵吞枣,不求甚解,饶是如此,也解决了我在C++方面的诸多疑惑,这次终于看到了简体版,同...
  • Viper
  • Viper
  • 2001-10-10 13:24:00
  • 3529

基于Bootstrap3制作响应式布局网站(二)

在上一篇文章中中主要讲到Bootstrap的栅格布局系统,虽然之前说要更新如何写导航栏,但是想了下还是先介绍下如何做CSS的媒体查询和响应式表格,这样才能为以后的的编码打下基础。 原创文章,欢迎转载,...
  • maxwell_nc
  • maxwell_nc
  • 2015-05-22 13:34:59
  • 3875

基于Bootstrap3的响应式布局网站教程源码(五)

  • 2015年06月12日 15:37
  • 315KB
  • 下载

基于Bootstrap3制作响应式布局网站(一)

现在的上网设备十分多,每种设备的分辨率都不一样,传统的网站开发需要花很大功夫才能实现不同分辨率下兼容布局,而Bootstrap的出现使得网站开发更加简单快捷。Bootstrap是Twitter推出的一...
  • maxwell_nc
  • maxwell_nc
  • 2015-05-17 18:29:47
  • 22152

基于Bootstrap3制作响应式布局网站(三)

前两篇已经简单地介绍了Bootstrap的基本特性和原理,接下来我们来实现一般网站都需要的导航栏,显而易见的例子就是CSDN本身就有两种导航栏。文章主要分为顶部导航栏和侧边导航栏两个部分。这里是实现的...
  • maxwell_nc
  • maxwell_nc
  • 2015-05-29 15:30:30
  • 3669

基于Bootstrap3的响应式布局网站

  • 2015年05月17日 19:12
  • 54KB
  • 下载

bootstrap响应式旅游网站

  • 2017年09月15日 16:21
  • 838KB
  • 下载

基于BS架构的软件项目实训-JSP-丁旭-配套源码及ppt

  • 2012年12月12日 11:49
  • 47.31MB
  • 下载

Dreamweaver网页制作实训课件

  • 2014年12月10日 15:56
  • 2.86MB
  • 下载

基于Javaweb的项目实训报告(网上商城)

  • 2017年09月17日 21:30
  • 5.5MB
  • 下载
收藏助手
不良信息举报
您举报文章:创新实训——基于Bootstrap的网站响应式布局设计
举报原因:
原因补充:

(最多只允许输入30个字)