第5章 WEB05- BootStrap篇【课件+代码】

今日任务

  • 使用BootStrap制作一个响应式页面
  • 使用BootStrap制作网站首页

教学导航

教学目标掌握什么是响应式及响应式原理掌握BootStrap的栅格系统了解BootStrap的其他组件及JS控件
教学方法案例驱动法

1.1 上次课内容回顾:

JQuery:

   JQuery的概述:是JS的库.

   常见的JS的库:JQuery,Prototype,DWR,EXTJS.

JQuery的选择器:

   基本选择器:

      ID选择器:$(“#id”)

      类选择器:$(“.类”)

      元素选择器:$(“元素”)

      通配符:$(“*”)

      并列选择器:$(“选择器,选择器”)

  层级选择器:

      某个元素下的所有子孙节点 :空格

      某个元素下的所有的子节点 :>

      某个元素的下一个节点    :+

      某个元素的兄弟节点    :~

  基本过滤:

      :first

      :last

      :even

      :odd

      :eq

  可见性

  属性选择器:

      [属性]

      [属性名=’属性值’]

  表单选择器:

      :input

      :text

      :password

JQuery的属性的操作:

   方法:attr,prop

JQuery的文档操作:

   方法:append,appendTo,insertBefore,insertAfter,remove

JQuery的效果:

   方法:show,hide,slideDown,slideUp,fadeIn,fadeOut

JQuery的切换:

   方法:toggle,hover

1.2 JQuery完成表单验证的代码实现:

<script>
	$(function(){
		// 步骤一:添加一个红色必填项的 *
		$("form :input.required").each(function(){
			$(this).parent().append("<b class='high'> *</b>");
				});
				
				// 步骤二:给表单项添加一个blur事件
				$("form input").blur(function(){
					var $parent = $(this).parent();
					
					// 将原来样式清除:
					$parent.find(".formtips").remove();
					
					if($(this).is("#username")){
						if(this.value == ""){
							$parent.append("<span class='formtips onError'>用户名不能为空</span>");
						}else{
							$parent.append("<span class='formtips onSuccess'>用户名输入正确</span>");
						}
					}
					
					if($(this).is("#password")){
						if(this.value == ""){
							$parent.append("<span class='formtips onError'>密码不能为空</span>");
						}else{
							$parent.append("<span class='formtips onSuccess'>密码输入正确</span>");
						}
					}
				}).keyup(function(){
					$(this).triggerHandler("blur");
				}).focus(function(){
					$(this).triggerHandler("blur");
				});
				
				// 给表单添加一个submit事件
				$("form").submit(function(){
					$("form input.required").trigger("blur");
					// 查找错误信息的长度:
					var errorLength = $("form .onError").length;
					if(errorLength > 0){
						return false;
			}
					
		});
				
	});
			
</script>

1.3 使用BootStrap开发一个响应式的页面:

1.3.1 需求:

开发一套页面,可以适用在PC端,Pad端,和手机端。不影响你的浏览的效果.

1.3.2 分析:

1.3.2.1 技术分析:

【BootStrap的概述】

  • BootStrap的概念
第5章 WEB05- BootStrap篇【课件+代码】
  • 什么是响应式:

响应式页面设计:一套页面可以适配不同的设备.(PC,PAD,手机).

  • BootStrap的中文网:

http://www.bootcss.com/

  • 下载BootStrap
第5章 WEB05- BootStrap篇【课件+代码】
  • BootStrap的结构:
* 全局CSS
    * BootStrap定义了一套CSS的样式表.
* 组件
    * BootStrap定义的一套按钮,导航条...
* JS插件
    * BootStrap定义的一套JS的插件.
  • BootStrap的入门开发:
<meta charset="UTF-8">
		<!--BootStrap设计的页面支持响应式的 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<!--引入BootStrap的CSS-->
		<link rel="stylesheet" href="../../css/bootstrap.css" type="text/css"/>
		<!--引入JQuery的JS文件:JQuery的JS文件要在BootStrap的js的文件的前面引入-->
		<script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script>
		<!--引入BootStrap的JS的文件-->
		<script type="text/javascript" src="../../js/bootstrap.js" ></script>

【BootStrap布局容器】

第5章 WEB05- BootStrap篇【课件+代码】

【BootStrap的栅格系统】

响应式的设计:
    * CSS3的样式:媒体查询
栅格样式:
    * 设备的分辨率大于 1200 使用lg样式
    * 设备的分辨率大于 992 < 1200 使用md样式
    * 设备的分辨率大于768 < 992 使用sm样式
    * 设备的分辨率小于 768 使用xs样式
将一行分成12列.定义div元素 样式的和 加一起等于12 即可.

【BootStrap的全局CSS】

定义了一套CSS
  * 对页面中的元素进行定义:
  * 列表元素,表单,按钮,图片...

1.3.3 代码实现:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--BootStrap设计的页面支持响应式的 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<!--引入BootStrap的CSS-->
		<link rel="stylesheet" href="../css/bootstrap.css" type="text/css"/>
		<!--引入JQuery的JS文件:JQuery的JS文件要在BootStrap的js的文件的前面引入-->
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
		<!--引入BootStrap的JS的文件-->
		<script type="text/javascript" src="../js/bootstrap.js" ></script>
	</head>
	<body>
		<!--整体div-->
		<div class="container">
			<!--导航栏-->
			<div>
			
			<nav class="navbar navbar-inverse">
			  <div class="container-fluid">
			    <!-- Brand and toggle get grouped for better mobile display -->
			    <div class="navbar-header">
			      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			        <span class="sr-only">Toggle navigation</span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			        <span class="icon-bar"></span>
			      </button>
			      <a class="navbar-brand" href="#"><img src="../img/logo2.png" height="100%"></a>
			    </div>
			
			    <!-- Collect the nav links, forms, and other content for toggling -->
			    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			      <ul class="nav navbar-nav">
			        <li class="active"><a href="#">Java学院 <span class="sr-only">(current)</span></a></li>
			        <li><a href="#">IOS学院</a></li>
			        <li><a href="#">C++学院</a></li>
			        <li><a href="#">UI设计学院</a></li>
			        <li class="dropdown">
			          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">全部学院 <span class="caret"></span></a>
			          <ul class="dropdown-menu">
			            <li><a href="#">Java学院</a></li>
			            <li><a href="#">IOS学院</a></li>
			            <li><a href="#">C++学院</a></li>
			            <li role="separator" class="divider"></li>
			            <li><a href="#">UI设计学院</a></li>
			            <li role="separator" class="divider"></li>
			            <li><a href="#">网络营销学院</a></li>
			          </ul>
			        </li>
			      </ul>
			      <form class="navbar-form navbar-right" role="search">
			        <div class="form-group">
			          <input type="text" class="form-control" placeholder="Search">
			        </div>
			        <button type="submit" class="btn btn-default">Submit</button>
			      </form>
			    </div><!-- /.navbar-collapse -->
			  </div><!-- /.container-fluid -->
			</nav>
			</div>
			<!--图片轮播-->
			<div>
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
				  <!-- Indicators -->
				  <ol class="carousel-indicators">
				    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
				    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
				    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
				  </ol>
				
				  <!-- Wrapper for slides -->
				  <div class="carousel-inner" role="listbox">
				    <div class="item active">
				      <img src="../img/okwu.jpg" alt="">
				      <div class="carousel-caption">
				        <p>aaaa</p>
				      </div>
				    </div>
				    <div class="item">
				      <img src="../img/okwu-athletics.jpg" alt="">
				      <div class="carousel-caption">
				        
				      </div>
				    </div>
				    <div class="item">
				      <img src="../img/bartlesvillecf.jpg" alt="">
				      <div class="carousel-caption">
				        
				      </div>
				    </div>
				    <div class="item">
				      <img src="../img/emancipation.jpg" alt="">
				      <div class="carousel-caption">
				        
				      </div>
				    </div>
				  </div>
				 
				 <!--显示上一个和下一个的图标-->
				  <!-- Controls -->
				  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				    <span class="sr-only">Previous</span>
				  </a>
				  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				    <span class="sr-only">Next</span>
				  </a>
				</div>
			</div>
			
			<!--信息展示-->
			<div>
				<div class="col-md-4 col-sm-6 col-xs-12">
					<h2>WelCome</h2>
					<p>WelCome to HeiMa!WelCome to HeiMa!WelCome to HeiMa!</p>
					<p><a href="#" class="btn btn-primary pull-right">See More</a></p>
				</div>
				<div class="col-md-4 col-sm-6 col-xs-12">
					<h2>Our Team</h2>
					<p>Our Team,Our Team,Our Team,Our Team,Our Team,Our Team</p>
					<p><a href="#" class="btn btn-primary pull-right">See More</a></p>
				</div>
				<div class="col-md-4 col-sm-12 col-xs-12">
					<h2>About Us</h2>
					<p>About Us,About Us,About Us,About Us,About Us,About Us</p>
					<p><a href="#" class="btn btn-primary pull-right">See More</a></p>
				</div>
			</div>
		</div>
	</body>
</html>

1.4 使用BootStrap布局网站的首页:

1.4.1 需求:

使用BootStrap布局网站的首页.

1.4.2 分析:

1.4.2.1 步骤分析:

  • 步骤一:新建一个html页面.引入bootStrap的相应js和css
  • 步骤二:定义一个整体的div,将整体的div分成8个部分.
  • 步骤三:完成每个部分的显示.

1.4.3 代码实现:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--BootStrap设计的页面支持响应式的 -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<!--引入BootStrap的CSS-->
		<link rel="stylesheet" href="../css/bootstrap.css" type="text/css"/>
		<!--引入JQuery的JS文件:JQuery的JS文件要在BootStrap的js的文件的前面引入-->
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
		<!--引入BootStrap的JS的文件-->
		<script type="text/javascript" src="../js/bootstrap.js" ></script>
	</head>
	<body>
		<!--整体div-->
		<div class="container">
			<!--Logo部分-->
			<div class="row">
				<div class="col-md-4 col-sm-6">
					<img src="../img/logo2.png" />
				</div>
				<div class="col-md-4 col-sm-6">
					<img src="../img/header.png" />
				</div>
				<div class="col-md-4 col-sm-12">
					<ul class="list-inline" style="padding-top: 15px;">
						<li><a href="#">登录</a></li>
						<li><a href="#">注册</a></li>
						<li><a href="#">购物车</a></li>
					</ul>
				</div>
			</div>
			<!--导航栏部分-->
			<div>
				<nav class="navbar navbar-inverse">
				  <div class="container-fluid">
				    <!-- Brand and toggle get grouped for better mobile display -->
				    <div class="navbar-header">
				      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				        <span class="sr-only">Toggle navigation</span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				      </button>
				      <a class="navbar-brand" href="#">首页</a>
				    </div>
				
				    <!-- Collect the nav links, forms, and other content for toggling -->
				    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				      <ul class="nav navbar-nav">
				        <li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>
				        <li><a href="#">电脑办公</a></li>
				        <li><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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
				          <ul class="dropdown-menu">
				            <li><a href="#">Action</a></li>
				            <li><a href="#">Another action</a></li>
				            <li><a href="#">Something else here</a></li>
				            <li role="separator" class="divider"></li>
				            <li><a href="#">Separated link</a></li>
				            <li role="separator" class="divider"></li>
				            <li><a href="#">One more separated link</a></li>
				          </ul>
				        </li>
				      </ul>
				      <form class="navbar-form navbar-right" role="search">
				        <div class="form-group">
				          <input type="text" class="form-control" placeholder="Search">
				        </div>
				        <button type="submit" class="btn btn-default">Submit</button>
				      </form>
				      
				    </div><!-- /.navbar-collapse -->
				  </div><!-- /.container-fluid -->
				</nav>
			</div>
			<!--图片轮播部分-->
			<div>
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
				  <!-- Indicators -->
				  <ol class="carousel-indicators">
				    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
				    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
				  </ol>
				
				  <!-- Wrapper for slides -->
				  <div class="carousel-inner" role="listbox">
				    <div class="item active">
				      <img src="../img/1.jpg" alt="">
				      <div class="carousel-caption">
				        
				      </div>
				    </div>
				    <div class="item">
				      <img src="../img/2.jpg" alt="">
				      <div class="carousel-caption">
				        
				      </div>
				    </div>
				    <div class="item">
				      <img src="../img/3.jpg" alt="">
				      <div class="carousel-caption">
				        
				      </div>
				    </div>
				  </div>
				
				  <!-- Controls -->
				  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
				    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				    <span class="sr-only">Previous</span>
				  </a>
				  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
				    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				    <span class="sr-only">Next</span>
				  </a>
				</div>
			</div>
			<!--最新商品显示部分-->
			<div>
				<div class="row">
					<h2>最新商品<img src="../img/title2.jpg"></h2>
				</div>
				<div class="row">
					<!--左侧广告部分-->
					<div class="col-md-2 hidden-sm hidden-xs" style="height: 400px;">
						<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
					</div>
					<div class="col-md-10">
						<div class="row">
							<div class="col-md-6  hidden-sm hidden-xs" style="height: 200px;">
								<img src="../products/hao/middle01.jpg" width="100%" height="100%"/>
							</div>
							<div class="col-md-2 col-sm-4">
								<img src="../products/hao/small03.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
							<div class="col-md-2 col-sm-4">
								<img src="../products/hao/small04.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
							<div class="col-md-2 col-sm-4">
								<img src="../products/hao/small05.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
						</div>
						<div class="row">
							<div class="col-md-2  col-sm-4">
								<img src="../products/hao/small03.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
							<div class="col-md-2  col-sm-4">
								<img src="../products/hao/small04.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
							<div class="col-md-2 col-sm-4">
								<img src="../products/hao/small05.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
							<div class="col-md-2 col-sm-4">
								<img src="../products/hao/small03.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
							<div class="col-md-2 col-sm-4">
								<img src="../products/hao/small04.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
							<div class="col-md-2 col-sm-4">
								<img src="../products/hao/small05.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--广告部分-->
			<div>
				<img src="../products/hao/ad.jpg" width="100%"/>
			</div>
			<!--热门商品显示部分-->
			<div>
				<div class="row">
					<h2>热门商品<img src="../img/title2.jpg"></h2>
				</div>
				<div class="row">
					<!--左侧广告部分-->
					<div class="col-md-2 hidden-sm hidden-xs" style="height: 400px;">
						<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
					</div>
					<div class="col-md-10">
						<div class="row">
							<div class="col-md-6 hidden-sm hidden-xs" style="height: 200px;">
								<img src="../products/hao/middle01.jpg" width="100%" height="100%"/>
							</div>
							<div class="col-md-2 col-sm-4">
								<img src="../products/hao/small03.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
							<div class="col-md-2 col-sm-4">
								<img src="../products/hao/small04.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
							<div class="col-md-2 col-sm-4">
								<img src="../products/hao/small05.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
						</div>
						<div class="row">
							<div class="col-md-2 col-sm-4">
								<img src="../products/hao/small03.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
							<div class="col-md-2 col-sm-4">
								<img src="../products/hao/small04.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
							<div class="col-md-2 col-sm-4">
								<img src="../products/hao/small05.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
							<div class="col-md-2 col-sm-4">
								<img src="../products/hao/small03.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
							<div class="col-md-2 col-sm-4">
								<img src="../products/hao/small04.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
							<div class="col-md-2 col-sm-4">
								<img src="../products/hao/small05.jpg" />
								<p>电饭煲</p>
								<p>电饭煲</p>
							</div>
						</div>
					</div>
				</div>				
			</div>
			<!--广告部分-->
			<div>
				<img src="../img/footer.jpg" width="100%"/>
			</div>
			<!--页面底部友情链接-->
			<div align="center">
				<a href="../案例一:网站信息页面显示/网站信息页面显示.html">关于我们</a>
				    <a href="">联系我们</a>
				    <a href="">招贤纳士</a>
				    <a href="">法律声明</a>
				    <a href="../案例三:网站列表页面显示/网站列表页面显示.html">友情链接</a>
				    <a href="">支付方式</a>
				    <a href="">配送方式</a>
				    <a href="">服务声明</a>
				    <a href="">广告声明</a>
					<br/>
					Copyright © 2005-2016 传智商城 版权所有 
			</div>
		</div>
	</body>
</html>

 

第5章 WEB05- BootStrap篇【课件+代码】

配套代码资料下载

已付费?登录刷新

原创文章,作者:小助手,如若转载,请注明出处:https://www.javahelp.com.cn/890.html

(0)
上一篇 2022年9月2日 下午5:24
下一篇 2022年9月2日 下午9:56

相关推荐

发表回复

登录后才能评论