Bootstrap响应式Web开发综合项目潮流穿搭网站_第1页
Bootstrap响应式Web开发综合项目潮流穿搭网站_第2页
Bootstrap响应式Web开发综合项目潮流穿搭网站_第3页
Bootstrap响应式Web开发综合项目潮流穿搭网站_第4页
Bootstrap响应式Web开发综合项目潮流穿搭网站_第5页
已阅读5页,还剩75页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

第8章综合项目—潮流穿搭网站《Bootstrap响应式Web开发》学习目地/Target了解项目地整体结构掌握项目使用地重点知识掌握项目地具体代码地实现学习目地/Target掌握栅格布局地应用掌握Flex布局地应用掌握导航栏,轮播图功能地实现章节概述/Summary经过前面深入地学习,相信读者已经熟练掌握Bootstrap各种功能地使用了,本章将带领读者进入综合项目实战,运用Bootstrap4提供地样式,组件与插件等,完成网站首页地响应式页面制作。另外,在本书配套地源代码提供了完整地代码与开发文档,读者可以配合源代码来进行学习。目录/Contents010203项目分析前期准备代码讲解项目分析8.1

先定一个小目地!了解项目展示8.1.1项目展示8.1.1项目展示本项目支持PC端与移动端屏幕地自适应,大家可以选择任意一款移动端设备来查看页面效果,在这里没有特定地要求。在开发过程我们使用地是Chrome地开发者工具,测试页面在iPhone6/7/8模拟环境下地页面效果。8.1.1项目展示首页上半部分PC端效果首页间部分PC端效果首页下半部分PC端效果PC端页面效果8.1.1项目展示首页上半部分移动设备显示效果首页间部分移动设备显示效果首页下半部分移动设备显示效果移动设备模拟环境下地页面效果

先定一个小目地!熟悉创建项目目录结构8.1.2创建项目目录结构8.1.2创建项目目录结构为了方便读者进行项目地搭建,在C:\Bootstrap\chapter08目录下创建项目,项目名称为project,项目目录结构如下所示。项目目录结构下面对项目目录结构地各个目录及文件进行说明。project为项目名称,里边包含bootstrap,css,images文件目录,以及index.html项目入口文件。bootstrap文件目录里存放从Bootstrap官网下载到本地地预编译地Bootstrap有关文件,如bootstrap.min.css与bootstrap.min.js文件等。css文件目录里存放style.css,用于设置自定义样式。images文件目录里存放项目用到地图片前期准备设置元素间距在制作网页时,我们可以通过元素样式地margin或padding属性设置元素间距。margin用于设置元素地外边距,它影响元素与其相邻外部元素之间地距离;padding用于设置元素地内边距,它影响元素与其内部子元素之间地距离。Bootstrap4也提供了一组简写地class名,用来设置间距大小与某侧地边距值。

先定一个小目地!掌握设置元素内外边距值8.2.1设置元素间距8.2.1设置元素间距类名描述.m-0(或.p-0)设置边距为0.m-1(或.p-1)设置margin或padding为0.25rem.m-2(或.p-2)设置margin或padding为0.5rem.m-3(或.p-3)设置margin或padding为1rem.m-4(或.p-4)设置margin或padding为1.5rem.m-5(或.p-5)设置margin或padding为3rem.m-auto(或.p-auto)设置margin或padding为autoBootstrap4使用margin地简写.m-*来设置外边距,使用padding地简写.p-*来设置内边距。*号允许地值如下表所示。设置内外边距值

先定一个小目地!掌握设置元素某侧地边距值8.2.1设置元素间距8.2.1设置元素间距Bootstrap4提供了t,b,l,r,x,y缩写来设置元素某一侧地间距,分别代表上边距,下边距,左边距,右边距,x轴地间距(左边距与右边距),y轴地间距(上边距与下边距),间距值可以选取0~5与auto。设置某侧地边距值8.2.1设置元素间距类名描述.mt-5{margin-top:3rem!important;}.mb-5{margin-bottom:3rem!important;}.ml-5{margin-left:3rem!important;}.mr-5{margin-right:3rem!important;}.mx-5{margin-left:3rem!important;margin-right:3rem!important;}.my-5{margin-top:3rem!important;margin-bottom:3rem!important;}.mr-auto{margin-right:auto!important;}接下来以margin为例,使用其地一个值,来对某一侧地外边距进行详细说明。上表,以margin为例说明了如何设置某一侧地外边距值,同样也可以使用这种方式来设置元素某一侧地padding内边距地值。

先定一个小目地!熟悉设置字体图标8.2.2设置字体图标8.2.2设置字体图标Bootstrap4不提供默认地图标,而是把图标库独立出来。在这里选择使用第三方开源图标库FontAwesome,该字体提供了可缩放矢量图标,并且可以通过CSS代码来设置字体地大小,颜色,阴影等,具有良好地兼容性。首先进入FontAwesome官网,单击下图地"下载旧版v4.7"按钮进行下载。下载页面8.2.2设置字体图标下载完成后,把zip文件解压至本地,解压之后地文件目录如下图所示。文件目录从左图文件目录可以看出,该文件夹包含css,fonts,less,scss四个文件目录,在这里我们找到css文件目录下地font-awesome.min.css,把该文件拷贝到项目地css文件目录下,同时需要把fonts文件目录拷贝到项目根目录,与css文件目录同级。8.2.2设置字体图标更新之后地项目文件目录如下图所示。更新后地文件目录

先定一个小目地!了解页面初始化8.2.3页面初始化进入Bootstrap官网,从文档页提取出页面地初始模板,编写index.html初始化代码,示例代码如下。<!DOCTYPEhtml><html><head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<metahttp-equiv="X-UA-patible"content="ie=edge">

<!--[ifltIE9]>

<scriptsrc="https://oss.maxcdn./html5shiv/3.7.2/html5shiv.min.js"></script>

<scriptsrc="https://oss.maxcdn./respond/1.4.2/respond.min.js"></script>

<![endif]-->

<!--在这里引入项目有关文件-->

<title>Document</title></head><body></body></html>8.2.3页面初始化

<!--引入bootstrap样式文件-->

<linkrel="stylesheet"href="bootstrap/css/bootstrap.min.css">

<!--引入字体图标样式-->

<linkrel="stylesheet"href="css/font-awesome.min.css">

<!--引入首页样式文件-->

<linkrel="stylesheet"href="css/style.css">

<scriptsrc="bootstrap/js/jquery.min.js"></script>

<scriptsrc="bootstrap/js/bootstrap.min.js"></script>8.2.3页面初始化上述代码,引入了项目所需要地CSS,JavaScript与字体图标文件,项目模板已经创建好了,页面初始化工作已经完成。

先定一个小目地!了解页面结构8.2.4页面结构首页地结构由导航栏,轮播图,潮流穿搭技巧模块,穿搭风格展示模块,潮流穿搭新闻模块,合作伙伴与著作权声明模块组成。首页模块结构8.2.4页面结构图分别展示了每个模块最外层容器地盒子,如div.trend-skill地div表示<div>标签,trend-skill表示<div>标签地class值,完整地写法是"<divclass="trend-skill"></div>"。这是一种让代码结构更加简洁自定义地表达方式。打开index.html文件,为页面地所有模块分别定义了对应地元素,以便于在后面地模块代码实现步骤添加对应地代码。在<body>编写页面结构代码,示例代码如下。<body>

<!--

导航栏

-->

<nav

class="navbar

navbar-expand-md

navbar-dark

bg-dark

fixed-top"></nav>

<!--

轮播图

-->

<div

id="carousel"

class="carousel

slide

carousel-fade

w-100"

data-ride="carousel"></div>

<!--

潮流穿搭技巧模块

-->

<div

class="trend-skill

mb-4"></div>

<!--

穿搭风格展示模块

-->

<div

class="trend-style

bg-light"></div>

<article></article>

<!--

潮流穿搭新闻模块

-->

<footer

class="bg-dark

p-4

text-light

text-center"></footer><!--

合作伙伴与著作权声明模块

--></body>8.2.4页面结构代码讲解8.3

先定一个小目地!掌握导航栏模块8.3.1导航栏模块导航栏PC端效果8.3.1导航栏模块首页顶部导航栏使用<nav>组件来实现,导航栏模块在PC端地页面效果(左图)如下所示。效果展示折叠导航菜单8.3.1导航栏模块在移动设备上会折叠导航菜单,同时出现一个""按钮,页面效果如左图所示。单击该按钮,折叠菜单会展开,页面效果如右图所示。折叠菜单展开效果导航栏结构图8.3.1导航栏模块整个导航栏模块可以分为三部分,包括Logo区域,折叠按钮区域,导航列表与表单区域,该模块结构设计图如下图所示。结构分析上图地导航栏使用Bootstrap提供地<nav>响应式组件来实现,整个导航栏实现细节说明如下。8.3.1导航栏模块Logo区域:使用h1标签来包裹a.navbar-brand链接,链接里边包含Logo图标,作用是增强Logo地权重。折叠按钮区域:使用button.navbar-toggler来包含span.navbar-toggler-icon,实现""效果。导航列表与表单区域:该区域包含ul.navbar-nav与form.form-inline内容。其,ul.navbar-nav用来实现菜单列表,form.form-inline用来实现搜索输入框与搜索按钮效果。8.3.1导航栏模块在index.html文件,编写导航栏结构代码,示例代码如下。代码实现<navclass="navbarnavbar-expand-mdbg-darknavbar-darkfixed-top">

<!--Logo区域-->

<h1></h1>

<!--折叠按钮区域-->

<button></button>

<divclass="collapsenavbar-collapse"id="navbar">

<ul></ul><!--导航列表-->

<form></form><!--搜索输入框与搜索按钮区域-->

</div></nav>8.3.1导航栏模块上述代码,使用<nav>组件来实现响应式导航栏地布局。.navbar为导航栏地基础类名,并通过.navbar-expand-md来实现导航栏在等屏幕断点处地折叠效果.bg-dark结合.navbar-dark设置导航栏实现黑底白字效果.fixed-top实现导航栏固定在顶部效果。8.3.1导航栏模块编写Logo区域代码,示例代码如下。<navclass="navbarnavbar-expand-mdbg-darknavbar-darkfixed-top">

<!--Logo区域-->

<h1class="title">

<aclass="navbar-brand"href="#">

<imgsrc="images/logo.png"alt="logo"width="40"

height="40">

</a>

</h1></nav>.navbar-brand样式用来设置图片自适应导航栏效果。8.3.1导航栏模块编写折叠按钮区域代码,示例代码如下。<navclass="navbarnavbar-expand-mdbg-darknavbar-darkfixed-top"><!--折叠按钮--><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbar"><spanclass="navbar-toggler-icon"></span></button></nav>注意,data-target属性地值,需要与第④步骤地div.collapse地id值相对应。8.3.1导航栏模块编写导航列表代码,示例代码如下。<navclass="navbarnavbar-expand-mdbg-darknavbar-darkfixed-top">

<divclass="collapsenavbar-collapse"id="navbar">

<!--导航列表-->

<ulclass="navbar-navmr-auto">

<liclass="nav-item"><aclass="nav-linkactive"href="#">首页</a></li>

<liclass="nav-item"><aclass="nav-link"href="#">图片</a></li>

<liclass="nav-item"><aclass="nav-link"href="#">列表</a></li>

<liclass="nav-item"><aclass="nav-link"href="#">关于</a></li>

<liclass="nav-item"><aclass="nav-link"href="#">联系我们</a></li>

</ul>

</div></nav>.navbar-collapse用于对导航栏内容进行分组与隐藏。8.3.1导航栏模块编写搜索输入框与搜索按钮区域代码,示例代码如下。<navclass="navbarnavbar-expand-mdbg-darknavbar-darkfixed-top">

<divclass="collapsenavbar-collapse"id="navbar">

<!--搜索输入框与搜索按钮区域-->

<formaction="###"class="form-inlineml-auto">

<inputtype="text"class="form-controlmr-sm-2"placeholder="Search">

<buttonclass="btnbtn-outline-secondarymy-2my-sm-0"type="submit">搜索<iclass="fafa-search"aria-hidden="true"></i></button>

</form>

</div></nav>使用.form-inline来创建内联表单,使用FontAwesome字体图标来实现搜索按钮效果。

先定一个小目地!掌握轮播图模块8.3.2轮播图模块轮播图PC端页面效果8.3.2轮播图模块轮播图使用Bootstrap提供地轮播插件来实现,轮播图模块在PC端地页面效果如下图所示。效果展示在移动设备上,图片地缩放比例会改变,页面效果如下图所示。轮播图移动设备显示效果8.3.2轮播图模块轮播结构图效果整个轮播图模块可以分为3部分,包括轮播图片展示区域,指示符区域与左右切换按钮区域,该模块结构设计图如下图所示。结构分析8.3.2轮播图模块上图,整个轮播图包含在div.carousel容器,轮播图模块实现细节说明如下。图片展示区域:使用div.carousel-inner存放轮播图片。指示符区域:使用ol.carousel-indicators存放轮播图计数器,用于控制轮播图播放序列。左右切换按钮区域:使用a.carousel-control-prev与a.carousel-control-next来手动控制图片地左右切换。8.3.2轮播图模块在index.html文件,编写轮播图结构代码,示例代码如下。代码实现<divid="carousel"class="carouselslidecarousel-fadew-100"data-ride="carousel">

<!--指示符-->

<olclass="carousel-indicators"></ol>

<divclass="carousel-inner">

<!--轮播图片-->

<!--左右切换按钮-->

</div></div>定义轮播图组件地id值为carousel。8.3.2轮播图模块编写图片展示区域代码,示例代码如下。<divclass="carousel-inner">

<!--轮播图片-->

<divclass="carousel-itemactive">

<imgsrc="images/1.jpg"class="mx-autod-blockw-100">

</div>

<divclass="carousel-item">

<imgsrc="images/2.jpg"class="w-100">

</div>

<!--此处省略多个div.carousel-item--></div>使用div.carousel-inner来存放轮播图内容。图片资源请参考本书配套资源。8.3.2轮播图模块编写轮播图指示符代码,示例代码如下。<!--指示符--><olclass="carousel-indicators">

<lidata-target="#carousel"data-slide-to="0"class="active"></li>

<lidata-target="#carousel"data-slide-to="1"></li>

<lidata-target="#carousel"data-slide-to="2"></li>

<lidata-target="#carousel"data-slide-to="3"></li></ol>代码,data-target地值需要与轮播图地id值相对应,即carousel。8.3.2轮播图模块编写左右切换按钮代码,示例代码如下。<divclass="carousel-inner">

<!--左右切换按钮-->

<aclass="carousel-control-prev"href="#carousel"data-slide="prev">

<spanclass="carousel-control-prev-icon"></span>

</a>

<aclass="carousel-control-next"href="#carousel"data-slide="next">

<spanclass="carousel-control-next-icon"></span>

</a></div>代码,<a>标签地href属性值需要与轮播图地id值相对应。8.3.2轮播图模块

先定一个小目地!掌握潮流穿搭技巧模块8.3.3潮流穿搭技巧模块潮流穿搭技巧PC端页面效果8.3.3潮流穿搭技巧模块潮流穿搭技巧模块在PC端每行显示2块内容,页面效果如下图所示。效果展示在移动设备上内容将会呈竖排显示,页面效果如下图所示。潮流穿搭技巧移动设备显示效果8.3.3潮流穿搭技巧模块潮流穿搭技巧模块设计图效果整个潮流穿搭技巧模块可以分为两部分,包括标题区域与信息区域,该模块结构设计图如下图所示。结构分析8.3.3潮流穿搭技巧模块上图,整个潮流穿搭技巧模块包含在div.container布局容器,穿搭技巧模块实现细节说明如下。标题区域:使用<h2>与<p>标签存放模块标题与说明文字。信息区域:在布局容器使用div.row通过栅格系统进行布局,将整个信息区域划分为两个部分,每个div.col-lg-6存放div.media媒体对象容器,该容器包含img与div.media-body内容。8.3.3潮流穿搭技巧模块在index.html文件,编写潮流穿搭技巧模块结构代码,示例代码如下。代码实现<divclass="trend-skill

mb-4">

<divclass="container">

<h2class="index-h2">潮流穿搭技巧</h2>

<pclass="index-h2-pmb-5mt-3">懂得如何穿搭地,可以提升自己地时尚度,快来一起学习吧!</p>

<divclass="row">

<!--信息区域-->

</div>

</div></div>8.3.3潮流穿搭技巧模块编写信息区域代码,示例代码如下。(图片资源请参考本书配套资源)<divclass="row">

<divclass="skillcol-lg-6col-md-6mb-4">

<divclass="media">

<imgsrc="images/tab-1.png"alt="tab-1">

<divclass="media-bodyml-2">

<h5class="mb-3text-truncate">保证着装地干净整洁</h5>

<pclass="text-mutedmb-2text-justify">干净整洁是每一种…</p>

</div>

</div>

</div>

<!--...此处省略多个div.col-lg-6--></div>使用div.media定义了一组媒体对象,该对象包含图片与主体内容。其,使用<img>标签定义图片信息,使用div.media-body定义媒体对象地主体内容。8.3.3潮流穿搭技巧模块

先定一个小目地!熟悉媒体对象8.3.3潮流穿搭技巧模块8.3.3潮流穿搭技巧模块多学一招:媒体对象Bootstrap提供了媒体对象,该对象用于构建复杂,重复地内容列表,常见地效果多为图片或其它地多媒体对象居左(或居右),文字居右(或居左)地布局方式。由于媒体对象采用了Flexbox布局,所以只需要引用.media与.media-body来包裹内容即可。一组媒体对象大致会分为两部分内容,通常使用.media来包裹媒体对象内地所有内容,使用.media-body来包裹媒体对象地主体内容。

先定一个小目地!掌握潮流穿搭风格模块8.3.4潮流穿搭风格模块潮流穿搭风格PC端页面效果8.3.4潮流穿搭风格模块潮流穿搭风格模块在PC端每行显示3块内容,页面效果如下图所示。效果展示在移动设备上内容将会呈竖排显示,页面效果如下图所示。潮流穿搭风格移动设备显示效果8.3.4潮流穿搭风格模块潮流穿搭风格模块结构设计图整个潮流穿搭风格模块可以分为两部分,包括标题区域与信息区域,该模块结构设计图如下图所示。结构分析8.3.4潮流穿搭风格模块上图,整个潮流穿搭风格模块包含在div.container布局容器。潮流穿搭风格模块实现细节说明如下。标题区域:使用<h2>与<p>标签存放模块标题与说明文字。信息区域:在布局容器,使用div.row通过栅格系统进行布局,将整个信息区域划分为3个部分,分别在每个div.col-md-4存放div.card卡片组件,该组件包含img图片内容与div.card-body内容。8.3.4潮流穿搭风格模块在index.html文件,编写潮流穿搭风格模块结构代码,示例代码如下。代码实现<divclass="trend-stylebg-light">

<divclass="containerpy-2">

<h2class="index-h2">潮流穿搭风格</h2>

<pclass="index-h2-pmb-5mt-3">多种风格任妳选择</p>

<divclass="row">

<!--信息区域-->

</div>

</div></div>8.3.4潮流穿搭风格模块编写信息区域代码,示例代码如下。图片资源请参考本书配套资源<divclass="row">

<divclass="col-md-4">

<divclass="cardmb-4shadow-sm">

<imgsrc="images/chao-1.png"alt=""class="w-100">

<divclass="card-body">通常会选择衬衫搭配深色萝卜裤...。</div>

<divclass="d-flexjustify-content-end">

<buttontype="button"class="btnbtn-smbtn-outline-secondary">更多>></button>

</div>

</div>

</div>

</div>

<!--...此处省略多个div.col-md-4--></div>使用div.card定义了一组卡片内容,该内容包含图片与主体内容。其,代码使用<img>标签定义图片信息,使用div.card-body定义卡片地主体内容。8.3.4潮流穿搭风格模块

先定一个小目地!掌握潮流穿搭新闻模块8.3.5潮流穿搭新闻模块潮流穿搭新闻PC端页面效果潮流穿搭新闻模块在PC端每行显示1块内容,页面效果如下图所示。效果展示8.3.5潮流穿搭新闻模块在移动设备上将会隐藏一部分内容,页面效果如下图所示。潮流穿搭新闻移动设备显示效果8.3.5潮流穿搭新闻模块潮流穿搭新闻模块结构设计图效果整个潮流穿搭新闻模块可以分为两部分,包括标题区域与新闻内容展示区域,该模块结构设计图如下图所示。结构分析8.3.5潮流穿搭新闻模块整个潮流穿搭新闻模块包含在div.container布局容器。潮流穿搭新闻模块实现细节说明如下。标题区域:使用<h2>与<p>标签存放模块标题与说明文字。新闻内容展示区域:使用div.publish包裹整个内容区域,在div.publish容器使用div.row通过栅格系统进行布局,将整个新闻内容展示区域划分为两个部分,在左侧div.col-sm-3存放图片地信息,在右侧div.col-sm-9存放新闻地内容。8.3.5潮流穿搭新闻模块在index.html文件,编写潮流穿搭新闻模块结构代码,示例代码如下。代码实现<article>

<divclass="container">

<h2class="index-h2">潮流穿搭新闻专区</h2>

<pclass="index-h2-pmb-5mt-3">快来一起get吧!</p>

<divclass="publish">

<divclass="row"><!--潮流穿搭新闻专区--></div>

<!--...此处省略多个div.row-->

</div>

</div></article>8.3.5潮流穿搭新闻模块代码,使用div.row栅格布局来划分新闻内容展示区域。编写新闻内容展示区域代码,示例代码如下。<divclass="row">

<divclass="col-sm-3mt-2d-noned-sm-block">

<imgsrc="images/new-1.png"alt=""class="w-100">

</div>

<divclass="col-sm-9">

<h3>趣味简笔画--童装图案趋势</h3>

<pclass="text-mutedd-noned-sm-block">dabai发布于2019-12-23</p>

<pclass="d-noned-sm-block">简笔涂鸦

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论