Bootstrap响应式Web开发（第2版）-课件 第4章 Bootstrap开发基础.pptx

第4章Bootstrap开发基础;学习目标/Target;章节概述/Summary;目录/Contents;Bootstrap下载和引入;4.1.1下载Bootstrap;;单击Bootstrap官方网站中的“Docs”链接，跳转到Bootstrap官方文档页面，如下图所示。;;;;;;;;;4.1.2引入Bootstrap;4.1.2引入Bootstrap;4.1.2引入Bootstrap;4.1.2引入Bootstrap;;;;;;Bootstrap布局容器;4.2.1初识Bootstrap布局容器;4.2.1初识Bootstrap布局容器;4.2.1初识Bootstrap布局容器;4.2.1初识Bootstrap布局容器;4.2.1初识Bootstrap布局容器;4.2.2Bootstrap布局容器的使用方法;;使用.container-sm类创建一个布局容器的示例代码如下。;4.2.2Bootstrap布局容器的使用方法;;;保存上述代码，在浏览器中打开container.html文件，按“F12”键启动开发者工具，进入移动设备调试模式，将移动设备的视口宽度设置为575px，以模拟超小型设备。

在开发者工具的元素面板中，找到包含.container类的div元素，将鼠标指针移入对应类的div元素后，单击元素，??看元素的相关信息。container.html页面效果和元素面板的内容如下图所示。;在开发者工具的元素面板中，找到包含.container-fluid类的div元素，将鼠标指针移入对应类的div元素后，单击元素，查看元素的相关信息。container.html页面效果和元素面板的内容如下图所示。;在开发者工具的元素面板中，找到包含.container-sm类的div元素，将鼠标指针移入对应类的div元素后，单击元素，查看元素的相关信息。container.html页面效果和元素面板的内容如下图所示。;将移动设备的视口宽度设置为650px（模拟小型设备）时，在开发者工具的元素面板中，找到包含.container类的div元素，将鼠标指针移入对应类的div元素后，单击元素，查看元素的相关信息。container.html页面效果和元素面板的内容如下图所示。;将移动设备的视口宽度设置为650px（模拟小型设备）时，在开发者工具的元素面板中，找到包含.container-fluid类的div元素，将鼠标指针移入对应类的div元素后，单击元素，查看元素的相关信息。container.html页面效果和元素面板的内容如下图所示。;将移动设备的视口宽度设置为650px（模拟小型设备）时，在开发者工具的元素面板中，找到包含.container-sm类的div元素，将鼠标指针移入对应类的div元素后，单击元素，查看元素的??关信息。container.html页面效果和元素面板的内容如下图所示。;Bootstrap栅格系统;4.3.1初识Bootstrap栅格系统;4.3.1初识Bootstrap栅格系统;4.3.1初识Bootstrap栅格系统;4.3.1初识Bootstrap栅格系统;4.3.1初识Bootstrap栅格系统;4.3.1初识Bootstrap栅格系统;4.3.1初识Bootstrap栅格系统;4.3.1初识Bootstrap栅格系统;4.3.2Bootstrap栅格系统的使用方法;4.3.2Bootstrap栅格系统的使用方法;4.3.2Bootstrap栅格系统的使用方法;4.3.2Bootstrap栅格系统的使用方法;4.3.2Bootstrap栅格系统的使用方法;4.3.2Bootstrap栅格系统的使用方法;4.3.2Bootstrap栅格系统的使用方法;;;;4.3.2Bootstrap栅格系统的使用方法;4.3.2Bootstrap栅格系统的使用方法;Bootstrap工具类;4.4.1显示方式工具类;4.4.1显示方式工具类;4.4.1显示方式工具类;4.4.1显示方式工具类;4.4.1显示方式工具类;4.4.1显示方式工具类;;;保存上述代码，在浏览器中打开ResponsiveToolClass.html文件，按“F12”键启动开发者工具，进入移动设备调试模式，将移动设备的视口宽度设置为577px（模拟小型设备）时的页面效果如下图所示。;将移动设备的视口宽度设置为575px（模拟超小型设备）时的页面效果如下图所示。;4.4.2边距工具类;;.{property}{sides}-{sm|md|lg|xl|xxl}-{size}

;③{sm|md|lg|xl|xxl}：表示断点的类中缀，用于为特定设备设置边距。使用超小