HTML5 Web基础及其开发 8

上传人：h*** IP属地：山东上传时间：2026-04-21 格式：PPTX 页数：76 大小：5.05MB 积分：15 举报 版权申诉

已阅读5页，还剩71页未读，继续免费阅读

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

文档简介

第8章Bootstrap响应

式页面响应式Web开发（HTML5+CSS3+Bootstrap）高等教育出版社重难点重点:（1）Bootstrap的概念（2）Bootstrap的下载与引入（3）Bootstrap布局容器的使用（4）Bootstrap辅助样式的使用难点:（1）Bootstrap组件的使用目录01Bootstrap简介03Bootstrap布局容器02Bootstrap的使用04栅格布局06辅助类05响应式工具07Bootstrap常用组件作为开发者，我们需要了解一些宝贵的CSSUI开源框架资源，它们可以帮助我们更快更好地实现一些现代化的界面，包括一些移动设备的网页界面风格设计。下面将认识一种响应式设计神器-Bootstrap，它为大多数标准UI设计场景提供了用户友好、跨浏览器的解决方案，提高了前端开发的工作效率。01Bootstrap简介1.1

Bootstrap的概念Bootstrap是由Twitter公司的设计师开发的一个前端开源框架，它于2011年8月在GitHub上发布，一经推出，就非常受欢迎。Bootstrap是基于HTML、CSS和JavaScript等前端技术实现的框架。Bootstrap是一款用于网页开发的框架，它拥有样式库、组件和插件，使用者需要按照框架的规范进行开发。1.2Bootstrap框架中提供的内容基本结构：Bootstrap提供了一个带有栅格系统、链接样式、背景的基本结构。CSS：Bootstrap自带了全局的CSS设置、预定义的基本HTML元素样式、可扩展的class，以及一个先进的栅格系统。布局组件：Bootstrap含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等。图标库：Bootstrap拥有开源的图标库，图标文件的格式是SVG，能够轻松快捷地进行缩放，并可以通过CSS设置样式。JavaScript插件：Bootstrap包含十几个自定义的jQuery插件，可以直接包含所有的插件，也可以逐个包含这些插件。定制：开发人员可以定制Bootstrap的组件、Less变量和jQuery插件来得到一套自定义的版本，提高了开发的灵活性。

在开启Bootstrap学习之前，我们需要完成Bootstrap的下载，本节将会进行详细讲解。02如何使用Bootstrap2.1Bootstrap的下载首先打开浏览器，访问Bootstrap中文网，点击导航栏中的”Bootstrap4中文文档”选项，跳转至“Bootstrap4中文文档”页面，点击“下载Bootstrap”按钮，跳转至下载页面。2.1Bootstrap的下载点击“下载Bootstrap生产文件”，可以下载CSS、Javacript预编译的压缩版本。下载成功后，解压缩ZIP文件，将看到Bootstrap的预编译文件和目录结构。下载后解压缩文件2.2引入Bootstrap预编译文件在HTML中引入预编译文件中的核心CSS和JavaScript文件使用<script>标签引入JavaScript文件。使用<link>标签引入CSS文件。<linkrel="stylesheet"href="bootstrap-4.6.1-dist/css/bootstrap.min.css"><scriptsrc="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>2.3在HTML中引入Bootstrap我们在bootstrap-4.6.1-dist预编译文件夹中创建一个HTML文档，将其命名为index.html在该文档中直接引入编译好的CSS和JavaScript文件。关键代码如下：<body> <div>He11oWorld</div>  <scriptsrc="js/jquery-3.5.1.slim.min.js"></script>  <scriptsrc="js/popper.min.js"></script>  <scriptsrc="js/bootstrap.min.js"></script></body>需要注意的是，Bootstrap中的JavaScript效果都是基于jQuery的。如果想要使用JavaScript效果，必须将jquery.min.js文件放在bootstrap.min.js文件前面引入。

布局容器是Bootstrap中最基本的布局元素，它用于容纳、填充一些内容。Bootstrap中提供了.container类和.container-fluid布局容器类，这两种容器类最大的不同之处在于宽度的设定。03Bootstrap布局容器3.1.container类和.container-fluid类的区别.container类用于固定宽度并支持响应式布局的容器。.container-fluid类用于在不同设备下设置100%宽度，占据全部视口的容器。<divclass="container">…<div><divclass="container-fluid">…<div>3.2设置布局容器使用.container类和.container-fluid类设置布局容器，如例8-1.html，关键代码如下，效果如图。<body><divclass="containerbg-infotext-lightmb-1">.container类</div><divclass="container-fluidbg-ingotext-light">.container-fluid类</div></body>

04栅格布局基于12列布局，可以适配5种屏幕宽度，分别对应不同的屏幕大小，通过一系列的行（row）与列（column）的组合来创建页面布局。开发者可以将内容放入创建好的布局中，让内容根据父元素盒子（布局容器）宽度的大小进行适当地调节，从而达到响应式页面布局的效果。4.1栅格布局基本使用Bootstrap栅格布局提供了定义列的类，用于在不同宽度的屏幕中实现不同的排列方式。屏幕类型超小屏幕宽度

<576小屏幕宽度∈[576,768）中等屏幕宽度∈[769,992）大屏幕宽度∈[992,1200）超大屏幕宽度≥1200类.col-*.col-sm-*.col-md-*.col-lg-*.col-xl-*4.1栅格布局基本使用栅格布局的使用步骤如下：（1）Bootstrap栅格布局为不同屏幕宽度定义了不同的类，使用非常方便，直接为元素添加类名即可，如.col-*、.col-sm-*等。（2）每一行（row）必须包含在container类或container-fluid类中,这样方便为其自动设置外边距（margin）和内边距（padding）。（3.）通过行可以创建水平方向的列组，并且只有列（column）可以作为行（row）的直接子元素。例如,可以使用3个“.col-xs-4”来创建3个等宽的列。（4）内容只能放置于列内，列大于12时，将会另起一行排列。4.1栅格布局基本使用由于栅格布局默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度。下面通过类前缀设置每列的宽度。col-网格的数量(设置超小设备)col-sm-网格的数量(设置平板设备)co1-md-网格的数量(设置桌面显示器)col-1g-网格的数量(设置大桌面显示器)co1-x1-网格的数量(设置超大桌面显示器)4.2网格的基本结构通过两个例子演示Bootstrap4网格的基本结构，第一个例子在控制列的宽度及在不同的设备上如何显示，第二个例子让Bootstrap开发者自动处理布局。代码如下：<divclass="row"><divclass="col-*-*"></div></div><divclass="row"><divclass="col-*-*"></div><divclass="col-*-*"></div><divclass="col-*-*"></div></div><divclass="row"><divclass="col"></div><divclass="col"></div><divclass="col"></div></div>第一个例子第二个例子4.3Bootstrap实例<body><divclass="container-fluid"><h4>平板、桌面、大桌面显示器、超大桌面显示器</h4><divclass="row"><divclass="col-sm-3col-md-6col-lg-4col-xl-2bg-success">内容1</div><divclass="col-sm-9col-md-6col-lg-8col-xl-10bg-warning">内容2</div></div></div></body>

运行结果例8-3.html关键代码如下：05响应式工具类Bootstrap是一个移动优先的响应式前端框架，那么如何实现在不同屏幕上自适应隐藏或显示HTML元素呢?例如，我们想要实现让一个元素只能在PC端显示，而在其他屏幕下隐藏。Bootstrap提供了一套响应式工具类，这些工具类可以将常见的重复属性值以单个类的形式表达出来，减少文件体积大小，更快捷地实现元素在不同屏幕设备上的显示和隐藏。5.1元素隐藏的响应式工具类类名说明.d-none 在所有屏幕下都隐藏.d-none、.d-sm-none 仅在xs上隐藏.d-sm-none、.d-md-block 仅在sm上隐藏.d-md-none、.d-lg-block 仅在md上隐藏.d-lg-none、.d-xl-block 仅在lg上隐藏.d-xl-none 仅在xl上隐藏类名说明.d-block 在所有屏幕上可见.d-block、.d-sm-none 仅在xs上显示.d-none、.d-sm-block、d-md-none仅在sm上显示.d-none、.d-md-block、.d-lg-none 仅在md上显示.d-none、.d-lg-block、.d-xl-none 仅在lg上显示.d-none、.d-xl-block 仅在xl上显示5.2元素显示的响应式工具类06辅助类Bootstrap在布局方面提供了一些细小的辅助样式，用于文字颜色、背景色、元素间距的设置等等。下面我们将针对常用的辅助样式来进行讲解。6.1使用.text-*类设置文本颜色Bootstrap定义了一套.text-*类，用于设置文本颜色来强调文本的重要性。类描述.text-primary首选文本颜色，重要的文本.text-secondary副标题文本.text-success执行成功的文本.text-muted柔和的文本.text-danger危险操作文本.text-info代表一些提示信息的文本.text-warning警告文本.text-dark深灰色文本.text-light浅灰色文本.text-white白色文本.text-body默认主体颜色6.2使用.bg-*类设置背景颜色Bootstrap定义了一套.bg-*类，用于设置背景颜色。类描述.bg-primary重要的背景颜色.bg-secondary副标题背景颜色.bg-success成功背景颜色.bg-danger危险提示背景颜色.bg-info一般提示信息背景颜色.bg-warning警告信息背景颜色.bg-dark深灰色背景.bg-light浅灰色背景.bg-white白色背景.bg-transparent透明背景6.3设置元素间距在制作网页时，我们可以通过元素的样式中的margin和padding属性设置元素间距。Bootstrap4中也提供了一组简写的.m-*和.p-*类，用来设置内外间距大小。类样式设置.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为auto6.3设置元素间距Bootstrap4中提供了t、b、l、r、x、y缩写来设置元素某一侧的间距，间距值可以选取0~5和auto，具体如下：t代表上边距b代表下边距l代表左边距r代表右边距x代表x轴的间距（左边距和右边距）y代表y轴的间距（上边距和下边距）6.3设置元素间距设置元素某侧内边距的类，如下：类说明.mx-3{margin-left:1rem!important;margin-right:1rem!important;}.my-3{margin-top:1rem!important;margin-bottom:1rem!important;}.mt-3{margin-top:1rem!important;}.mr-3{margin-right:1rem!important;}.mb-3{margin-bottom:1rem!important;}.ml-3{margin-left:1rem!important;}07Bootstrap常用组件Bootstrap组件：Bootstrap对网页中常用的公共代码进行封装，形成了各种各样的组件，如导航组件、导航栏组件、表单组件、按钮组件、轮播图组件等。Bootstrap组件的作用：前端开发人员使用Bootstrap编写页面时，不需要写复杂的样式和逻辑代码，直接使用组件即可完成各种页面效果。这些组件也能够很好地支持响应式开发。7.1按钮按钮是页面中常用的组成部分，当用户单击了页面中的按钮后，可以根据不同的按钮实现不同的功能。网页中常见的功能如用户登录、视频播放、文件上传等，都需要通过按钮来触发。Bootstrap按钮组件提供了一些样式类，用来制作各式各样的按钮。7.1按钮Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的，另外还有一些额外的功能可以用于更多的控制。类名说明.btn基类，即按钮的基本样式.btn-primary主要按钮.btn-secondary次要按钮.btn-success成功按钮.btn-info一般提示信息按钮.btn-danger危险提示按钮.btn-link让按钮看起来像个链接，但仍保留按钮行为.btn-dark暗黑色按钮.btn-light浅灰色按钮7.1按钮<divclass="container"><h2>按钮样式</h2><buttontype="button"class="btn">基本按钮</button><buttontype="button"class="btnbtn-primary">主要按钮</button><buttontype="button"class="btnbtn-secondary">次要按钮</button><buttontype="button"class="btnbtn-success">成功</button><buttontype="button"class="btnbtn-info">信息</button><buttontype="button"class="btnbtn-warning">警告</button><buttontype="button"class="btnbtn-danger">危险</button><buttontype="button"class="btnbtn-dark">暗黑色</button><buttontype="button"class="btnbtn-light">浅灰色</button><buttontype="button"class="btnbtn-link">链接</button></div>实现不同种类按钮页面，例8-5.html关键代码、效果图如下：

运行结果7.1按钮Bootstrap中提供了用于控制按钮大小的样式。类名说明.btn-block创建块级按钮，横跨父元素的全部宽度.btn-sm小按钮.btn-lg大按钮7.1按钮<divclass="container"><h2>不同大小的按钮</h2><buttontype="button"class="btnbtn-primarybtn-lg">大号按钮</button><buttontype="button"class="btnbtn-primary">默认按钮</button><buttontype="button"class="btnbtn-primarybtn-sm">小号按钮</button><buttontype="button"class="btnbtn-primarybtn-smbtn-blockmt-1">

块级小号按钮</button></div>

运行结果例8-6.html关键代码如下：7.2按钮组什么是按钮组？按钮组：是将同一类功能的按钮组合在一行上进行展示，不同种类功能的按钮则分开单独展示，方便按钮的管理。按钮组的实现：Bootstrap提供了.btn-group类，可以快速实现按钮组页面效果。7.2按钮组<divclass="container"><h2>按钮组</h2><p>.btn-group类用于创建按钮组:</p><divclass="btn-group"><buttontype="button"class="btnbtn-primary">速溶咖啡</button><buttontype="button"class="btnbtn-primary">拿铁</button><buttontype="button"class="btnbtn-primary">摩卡</button></div></div>

运行结果在Bootstrap中只需要在类名为.btn-group的父元素中添加多个按钮即可创建按钮组。

例8-7.html关键代码如下：7.3表单在日常生活中，我们浏览一些网站，例如淘宝网、百度等，注册、登录或者个人设置的界面经常使用表单组件来实现。表单中的每一项需要我们填写的内容通过表单控件来实现。7.3表单表单中的文本输入框和文本域的作用：用于让用户输入文本信息，文本输入框用于输入单行文本，而文本域用于输入多行文本。.form-group类：表示表单组，每个表单组对应表单中要填的每一项信息，表单组中存放表单控件。.form-control类：设置表单控件样式。7.3表单按照布局的不同，表单主要分为两类：堆叠表单(默认)和内联表单。1.堆叠表单堆叠表单是将表单中的每个表单控件都放到一个<div>标签中，利用div元素是块级元素的特点实现垂直排列。使用两个输入框和一个提交按钮来创建堆叠表单，效果如图。7.3表单

<divclass="container"><form><divclass="form-group"><labelfor="email">电子邮件地址:</label><inputtype="email"class="form-control"placeholder="请输入电子邮箱"id="email"></div><divclass="form-group"><labelfor="pwd">密码:</label><inputtype="password"class="form-control"placeholder="请输入密码”id="pwd"></div> <buttontype="submit"class="btnbtn-primary">提交</button></form></div><scriptsrc="bootstrap-4.6.1-dist/js/jquery-3.5.1.slim.min.js"></script> <scriptsrc-"bootstrap-4.6.1-dist/js/popper.min.js"></script> <scriptsrc="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>例8-8.htmlbody标签中的代码如下：7.3表单2.内联表单内联表单是将表单中的<div>标签、<label>标签和表单控件都转换为行内元素进行显示，为<form>标签添加form-inline类名即可实现，为避免元素看起来太紧凑，使用mr-2来设置右边距，使用mt-2来设置上边距，代码如例8-9.html所示，效果如图。7.4导航导航组件的作用：在网页中使用导航组件可以让用户清晰明了地找到所需要查看的页面。Bootstrap提供了基础导航组件、标签式导航组件、胶囊式导航组件和导航中的二级菜单组件。7.4导航

1.基础导航基础导航组件使用列表标签和.nav类实现导航的基础效果导航中的每一项使用.nav-item类设置样式每一项的链接使用.nav-link类设置样式基础导航默认是水平方向排列的，如果想要垂直排列，可以给列表标签添加.flex-column类来实现7.4导航

实现基础导航页面，例8-10.htmlbody标签中的代码如下：<divclass="containerpy-3"><divclass="row"><divclass="col-12"><ulclass="nav"><liclass="nav-item"><ahref="#"class="nav-link">首页</a></li><liclass="nav-item"><ahref="#"class="nav-link">学院概况</a></li><liclass="nav-item"><ahref="#"class="nav-link">新闻中心</a></li><liclass="nav-item"><ahref="#"class="nav-link">党建工作</a></li><liclass="nav-item"><ahref="#"class="nav-link">系部设置</a></li></ul></div></div></div>7.4导航

实现基础导航页面，默认是水平排列，如果想要垂直排列，可以给列表标签添加.flex-column类来实现，如<ulclass="navflex-column">，效果如图：水平方向排列的基础导航垂直排列的基础导航7.4导航

2.标签式导航标签式导航组件的作用：可以实现在不跳转页面的情况下，切换标签页中显示的内容，这种实现效果类似于浏览器的标签页。在实现标签页切换时，还需要在页面中引入Bootstrap提供的bootstrap.min.js文件，用来给页面添加JavaScript交互。7.4导航

修改8-10，例8-11.html的关键代码如下：<ulclass="navnav-tabs"><liclass="nav-item"><ahref="#"class="nav-linkactive">首页</a></li></ul>

运行结果7.4导航

3.胶囊式导航胶囊式导航组件与标签式导航组件的区别：都能实现标签页切换功能，区别在于两种导航的样式不同。胶囊式导航的形状类似胶囊，看起来更加美观。胶囊式导航的使用：给外层的<ul>标签设置nav-pills类名即可。7.4导航

修改标签式导航的代码，将<ul>标签的类名nav-tabs改为nav-pills。在浏览器中访问8-12.html文件，胶囊式导航的页面效果如图。7.4导航

4.导航的对齐方式导航的默认对齐方式为居左对齐，但在ul元素上添加.justify-content-center类或.justify-content-end类，可以实现居中对齐或居右对齐。7.4导航

运行结果<divclass="containerpy-3"><divclass="row"><divclass="col-12"><h5class="text-danger">导航居中对齐</h5><navclass="navnav-tabsjustify-content-center"><ahref="#"class="nav-linkactive">首页</a><ahref="#"class="nav-link">学院概况</a><ahref="#"class="nav-link">新闻中心</a> </nav><h5class="text-dangermy-3">导航居右对齐</h5><navclass="navnav-tabsjustify-content-end"><ahref="#"class="nav-linkactive">首页</a><ahref="#"class="nav-link">学院概况</a><ahref="#"class="nav-link">新闻中心</a> </nav></div></div></div>例8-13.htmlbody标签中的代码如下：7.4导航

5.导航中的二级菜单向导航元素中嵌套下拉菜单，即可实现导航二级菜单效果，效果图如下。7.4导航

<divclass="containerpy-3"><divclass="row"><divclass="col-12"><ulclass="navnav-pills"><liclass="nav-item"><ahref="#"class="nav-link">首页</a></li><liclass="nav-itemdropdown"><ahref="#"class="nav-linkdropdown-toggle"data-toggle="dropdown">学院概况</a><ulclass="dropdown-menu"><li><ahref="#"class="dropdown-item">学院简介</a></li><li><ahref="#"class="dropdown-item">学院章程</a></li><li><ahref="#"class="dropdown-item">现任领导</a></li><li><ahref="#"class="dropdown-item">办学理念</a></li></ul></li><liclass="nav-item"><ahref="#"class="nav-link">新闻中心</a></li><liclass="nav-item"><aclass="nav-linkactive"href="#">党建工作</a></li></ul></div></div></div><scriptsrc="js/jquery-3.4.1.js"type="text/javascript"charset="utf-8"></script><scriptsrc="js/bootstrap.bundle.js"type="text/javascript"charset="utf-8"></script>例8-14.htmlbody标签中的代码如下：7.5导航栏

导航栏组件的作用：导航栏组件通常应用于网页的头部，可以帮助用户快速找到他们想要访问的内容，方便用户从一个页面跳转到另一个页面。7.5导航栏

1.基础导航栏基础导航栏组件：是Bootstrap中作为网站导航页头的响应式组件，该组件可以使导航栏在大屏幕上水平铺开，小屏幕上垂直堆叠显示。navbar类名：用于创建一个基础导航栏。navbar-expand-sm类名：用于使导航栏在大屏幕上水平铺开，小屏幕上垂直堆叠，其中，sm表示小屏幕，还可以取值md、lg、xl表示不同的大小的屏幕。bg-dark类名和navbar-dark类名：表示使用暗色的样式风格，如果省略bg-dark类名和navbar-dark类名则默认使用浅色的样式风格。7.5导航栏实现基础导航栏页面，效果如图：基础导航栏（水平）页面效果小屏幕上导航栏垂直排列7.5导航栏

<divclass="container"><divclass="rowmy-3"><divclass="col-12"><navclass="navbarnavbar-expand-mdbg-lightnavbar-light"><ulclass="navbar-navmr-auto"><liclass="nav-item"><ahref="#"class="nav-link">首页</a></li><liclass="nav-item"><ahref="#"class="nav-link">学院概况</a></li><liclass="nav-item"><ahref="#"class="nav-link">新闻中心</a></li><liclass="nav-item"><ahref="#"class="nav-link">党建工作</a></li></ul></nav></div></div></div>

例8-15.html

body标签中的代码如下：7.5导航栏

2.品牌图标实现带有品牌标志的导航栏页面，效果如图：小屏幕上的显示效果7.5导航栏

<navclass="navbarnavbar-expand-mdbg-lightnavbar-light"><ahref="#"class="navbar-brand">山东科技职业学院</a></nav>

修改例8-15代码如下：7.5导航栏

3.导航栏折叠效果导航栏折叠功能：考虑到有些网站的导航栏内容比较多，为了避免导航栏在小屏幕下占据大量的空间，Bootstrap提供了导航栏折叠功能。可折叠的导航栏的作用：能够根据页面的宽度自动调整显示状态，当屏幕过小时，导航栏会折叠起来，并出现一个折叠按钮，用户单击该按钮可以展开导航栏，再次单击该按钮可以折叠导航栏。7.5导航栏

实现可折叠的导航栏页面，效果如图：折叠导航栏点击折叠按钮后7.5导航栏

<divclass="container"><divclass="rowmy-3"><divclass="col-12"><navclass="navbarnavbar-expand-mdbg-lightnavbar-light"><ahref="#"class="navbar-brand">山东科技职业学院</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navtop"><spanclass="navbar-toggler-icon"></span></button><divclass="collapsenavbar-collapse"id="navtop"><ulclass="navbar-navmr-auto"><liclass="nav-item"><ahref="#"class="nav-link">首页</a></li><liclass="nav-item"><ahref="#"class="nav-link">学院概况</a></li> <liclass="nav-item"><ahref="#"class="nav-link">新闻中心</a></li> <liclass="nav-item"><ahref="#"class="nav-link">党建工作</a></li> </ul></div></nav></div></div></div><scriptsrc="js/jquery-3.4.1.js"></script><scriptsrc="js/bootstrap.bundle.js"></script>

例8-17.htmlbody标签中代码如下：7.6卡片

卡片是一个灵活可扩展的内容容器。在内容上，它可以组合图像、文本、超链接、按钮、列表组等多种元素。1.卡片结构使用div.card可以定义一组卡片内容。在卡片中，使用.card-header类创建卡片的头部，使用.card-footer类创建卡片的底部。7.6卡片

下面是简单的卡片结构，例8-18.htmlbody标签中的代码如下：<divclass="containermt-3"><divclass="row"><divclass="col"><divclass="card"><divclass="card-header">卡片头部</div><divclass="card-body">卡片内容</div><divclass="card-footer">卡片底部</div></div></div></div></div>

运行结果7.6卡片

2.卡片主体内容Bootstrap卡片效果的实现比较简单，我们可以通过一个div.card容器，并在该容器中使用.card-body类定义卡片的主体内容。修改例8-18，例8-19.htmlbody标签中代码如下：<divclass="card"><divclass="card-header">卡片头部</div><divclass="card-body"><h3class="card-title">标题</h3><h4class="card-subtitlemb-3text-info">副标题</h4><pclass="card-text">卡片的文本内容区域。。。</p><ahref="#"class="card-linkbtnbtn-primary">链接1</a><ahref="#"class="card-linkbtnbtn-primary">链接2</a></div><divclass="card-footer">卡片底部</div></div>7.6卡片

3.带有图片的卡片在卡片结构的基础上，我们可以在div.card容器内添加<img>标签，使文字可以环绕在图片的周围，实现类似个人名片的效果，使卡片更加精致。修改例8-19，给卡片设置图片效果，例8-20.htmlbody标签中代码如下：<divclass="card"><divclass="card-header">卡片头部</div><divclass="card-body"><imgsrc="img/img01.jpg"class="card-img-top"></div><divclass="card-footer">卡片底部</div></div>

运行结果7.7轮播

电商网站中的页面包括商城首页、商品列表页面等。商品列表页面展示了不同商品图片的信息，如手机、家电等，用户可以很容易地找到自己喜欢的商品图片进行查看。当商城中的商品有大型促销活动、商城优惠券活动时，我们使用轮播图来展示相关活动的图片信息，它能够引起用户的注意，帮助用户了解活动等信息。轮播图组件的作用：可以让图像、内嵌框架、视频或者其他想要放置的任何类型的内容之间进行自动循环播放，也可以手动切换下一张或上一张图片，还可以查看当前图片的位置，即轮播图指示器功能。7.7轮播

Bootstrap中的轮播大致分为以下几个部分。（1）外层容器<div>使用class=“carouselslide”。其中，slide指的是轮播滑动方式。同时，为此容器设置唯一的id。（2）

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

HTML5 Web基础及其开发 8

文档简介

温馨提示

最新文档

评论

HTML5 Web基础及其开发 8

文档简介

温馨提示

最新文档

评论

相关文档