Bootstrap响应式网站开发任务式教程课件 任务2 认识Bootstrap_第1页
Bootstrap响应式网站开发任务式教程课件 任务2 认识Bootstrap_第2页
Bootstrap响应式网站开发任务式教程课件 任务2 认识Bootstrap_第3页
Bootstrap响应式网站开发任务式教程课件 任务2 认识Bootstrap_第4页
Bootstrap响应式网站开发任务式教程课件 任务2 认识Bootstrap_第5页
已阅读5页，还剩16页未读， 继续免费阅读

下载本文档

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

文档简介

任务2:认识BootstrapBootstrap响应式网站开发Bootstrap简介1

Bootstrap是一个用于开发响应式布局、移动设备优先的Web项目，是目前最受欢迎的前端框架之一。在Bootstrap之前，每位网页设计师对于版面的布局都有不同的排版方式，布局的命名也有所不同。除了版面布局之外，还有版面上的各种元素，如表格、列表、窗体、表单等元素的排版，都会使CSS的样式变得非常庞大且复杂，这样很容易导致不一致，增加维护的负担。Bootstrap是由

Twitter

公司的

MarkOtto

和

JacobThornton

开发的，它是一个基于HTML、CSS、JavaScript的技术框架，符合HTML、CSS规范，且代码简洁、视觉优美。该框架设计时尚、直观、强大，可用于快速、简单地构建网页或网站。目前，Bootstrap5是Bootstrap的最新版本。Bootstrap概述--Bootstrap简介初识BootstrapBootstrap中文网网址：/

Bootstrap概述--Bootstrap简介认识BootstrapBootstrap包括十几个组件，包括用于创建图像、下拉菜单、导航、警告框、弹出框等等，每个组件都很自然地结合了设计与开发，具有完整的实例文档。无论在何种技术水平、处在哪个工作流程的开发者，都可以使用Bootstrap快速、方便地构建自己喜欢的应用程序。Bootstrap引入了12个列栅格结构的布局理念，使设计质量高、风格统一的网页变得十分容易。它包含了

HTML、CSS和

JavaScript三大部分HTMLCSSJavaScript目前常用的版本是BootStrap5，最新版本是BootStrap5.3，在此介绍一些颇受关注的亮点。

Bootstrap概述--Bootstrap简介移动设备优先：自Bootstrap3起，框架包含了贯穿整个库的移动设备优先的样式。浏览器支持：Google、Edge、Firefox等主流的浏览器都支持Bootstrap。响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机等设备。为开发人员创建接口提供了一个简洁统一的解决方案。包含了功能强大的内置组件，易于定制。提供了基于Web的定制。免费、开源。使用Bootstrap的优势

Bootstrap概述--Bootstrap简介Bootstrap浏览器与设备支持Bootstrap支持最新，稳定版本所有主要浏览器和平台。Bootstrap不确定支持直接或通过平台的Web视图API使用最新版本的Webkit，Blink或Gecko的替代浏览器。但是Bootstrap（大多数情况下）在这些浏览器中也能正常显示和运行。Bootstrap支持最新版本的浏览器和平台如表所示。平台ChromeFirefoxEdgeOperaSafariAndroid适用适用不适用不适用不适用iOS适用适用不适用不适用适用MacOSX适用适用不适用适用适用Windows适用适用适用适用不适用

Bootstrap概述--Bootstrap简介Bootstrap环境搭建Bootstrap的安装是比较容易的，可以从Bootstrap官方网站上下载Bootstrap的最新版本，目前最新版本是BootStrap5版本。1.用于生产环境的Bootstrap下载

Bootstrap概述--Bootstrap简介Bootstrap环境搭建

Bootstrap概述--Bootstrap简介下载成功后可以得到一个“bootstrap-5.3.0-alpha1-dist.zip”文件，解压后可以得到一个包含css和js的文件夹，将看到如下的目录结构。Bootstrap的基本文件结构2.预编译版本介绍Bootstrap环境搭建Bootstrap使用基础2

Bootstrap概述--Bootstrap使用基础基本的Bootstrap使用模板

在使用Bootstrap时，需要在页面中引用Bootstrap中的CSS样式“bootstrap.min.css”文件，所有JavaScript插件都集成在“bootstrap.bundle.min.js”文件里，只要调用了这两个文件，就可以使用Bootstrap的全部功能。【实例2-1】初次体验加载Bootstrap的样例代码<!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>欢迎使用Bootstrap5！</title><!--引用Bootstrap5的CSS文件--><linkrel="stylesheet"href="css/bootstrap.min.css"/><!--引用Bootstrap5所需的JavasSript文件--><scriptsrc="js/bootstrap.bundle.min.js"></script></head><body><!--体验使用Bootstrap5中的类--><h1class="bg-dangertext-whitetext-centerpy-5">欢迎使用Bootstrap5！</h1></body></html>

Bootstrap概述--Bootstrap使用基础响应式图像<divclass="imgbox"><imgclass="img-fluid"src="image/picture.jpg"alt="千里江山图"/></div>【实例2-2】响应式图像使用。Bootstrap所提供的

.img-fluid

类让图片支持响应式布局。其原理是将

max-width:100%;

和

height:auto;

赋予图片，以便随父元素的宽度变化一起缩放。.imgbox{ width:80%; margin:20pxauto; padding:10px; border:1pxsolid#bc8f15; }

Bootstrap概述--Bootstrap使用基础响应式图像演示

Bootstrap概述--Bootstrap使用基础响应式图像img类的相关内容与描述。类描述.rounded-circle可以设置椭圆形图片.img-thumbnail设置图片缩略图(图片有边框).float-start设置图片左对齐.float-end设置图片右对齐

Bootstrap概述--Bootstrap使用基础体验Bootstrap中的画像组件在Bootstrap中画像（figure）组件来显示相关联的图片和文本。当需要显示一段内容（例如带有可选标题的图片），可使用<figure>元素，.figure类、.figure-img类和.figure-caption类为HTML5的<figure>和<figcaption>元素提供了一些基本样式。<figure>标签内所包含的图片如果没有明确地设置尺寸的话，需为<img>标签添加.img-fluid类，使其支持响应式布局。<figureclass="figurep-1"> <imgsrc="image/picture.jpg"class="figure-imgimg-fluidrounded"alt=“千里江山图"><figcaptionclass="figure-captiontext-center">

《千里江山图》（绢本设色）北宋王希孟创作</figcaption></figure>尝试Bootstrap布局师资培训网导航区3

Bootstrap案例案例展示

教师学院是一家师资培训平台。该网站结构导航设置为：网站首页、部课程、问答、专家团队定制培训、我的课程等栏目。现根

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

温馨提示

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

最新文档

评论

0/150

提交评论