Bootstrap教程第一课：简单的Bootstrap主页
bootstrap 教程
bootstrap 教程Bootstrap是一个开源的前端框架，用于快速构建响应式的网站和Web应用程序。
它是由Twitter开发的，现在由Bootstrap团队维护和支持。
下面是关于Bootstrap的简要教程。
首先，为了使用Bootstrap，你需要在你的项目中引入它的CSS和JavaScript文件。
你可以通过下载Bootstrap的源码文件，然后在你的项目中引入这些文件，或者使用CDN来引入它们。
在引入文件后，你就可以开始使用Bootstrap提供的各种功能了。
Bootstrap提供了许多现成的CSS类和组件，以帮助你快速构建网站的布局和设计。
例如，你可以使用容器（Container）类来创建一个居中的页面容器，或者可以使用栅格（Grid）系统来创建响应式的网格布局。
你还可以使用按钮、表单、导航条等组件，来增强你的用户界面。
在使用Bootstrap时，只需将相应的CSS类应用到你的HTML元素上即可。
例如，如果你想创建一个带有特定样式的按钮，只需给按钮添加一个特定的CSS类即可。
同样，如果你想创建一个导航条，你只需使用Bootstrap提供的导航条组件即可。
除了CSS类和组件，Bootstrap还提供了一些JavaScript插件，用于增强网站的交互和功能。
例如，可以使用Tooltip插件来在鼠标悬停时显示提示信息，可以使用Modal插件来创建弹出对话框，可以使用Collapse插件来实现折叠和展开功能等等。
这些插件可以通过JavaScript来初始化和配置。
总之，Bootstrap是一个强大而灵活的前端框架，它可以帮助你快速构建响应式的网站和Web应用程序。
通过使用Bootstrap提供的CSS类、组件和JavaScript插件，你可以轻松地创建出漂亮、易于维护的用户界面。
学习Bootstrap只需掌握一些基本的HTML和CSS知识，并参考Bootstrap的文档和示例即可。
希望本教程能够帮助你入门Bootstrap，并在你的项目中发挥作用。
bootstrap基础教程案例代码
一、概述Bootstrap是一个用于快速开发响应式网页的前端框架，其具有易用性和功能丰富的特点，广泛应用于各种网页开发中。
本文将介绍Bootstrap的基础教程以及相关案例代码，帮助读者快速掌握Bootstrap的使用方法。
二、Bootstrap基础教程1. 栅格系统Bootstrap基于12列的栅格系统，可以轻松实现页面布局。
以下是一个简单的例子：```html<div class="cont本人ner"><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div></div></div>```在这个例子中，页面被分成了三列，每一列占据了页面宽度的1/3。
2. 响应式工具类Bootstrap提供了一系列的响应式工具类，可以根据不同的屏幕尺寸来显示或隐藏元素。
要在小屏幕设备上隐藏一个元素，可以使用`d-none d-sm-block`类：```html<div class="d-none d-sm-block">在小屏幕设备上隐藏该元素</div>```3. 按钮Bootstrap提供了丰富的按钮样式，可以轻松地创建不同风格的按钮。
以下是一个简单的例子：```html<button type="button" class="btn btn-primary">Primary按钮</button><button type="button" class="btn btn-secondary">Secondary按钮</button>```4. 表格使用Bootstrap可以轻松创建各种样式的表格。
bootstrap教程
bootstrap教程Bootstrap是一个流行的前端开发框架，由Twitter开发和维护。
它提供了一个用于开发响应式和移动设备优先的网站和应用程序的系统。
本文将为您提供一个简单的Bootstrap教程，帮助您快速学习并使用这个强大的框架。
首先，让我们来了解一下Bootstrap的基本内容。
Bootstrap由HTML、CSS和JavaScript组成，主要用于构建用户界面。
它包括了各种各样的组件和工具，使开发者能够轻松地创建漂亮、功能强大的网站。
使用Bootstrap的第一步是将框架引入您的项目。
您可以从Bootstrap的官方网站上下载最新版本的文件，然后将它们添加到您的HTML文件中。
通过包含所需的CSS和JavaScript文件，您的网站将能够使用Bootstrap的样式和功能。
接下来，让我们看看如何使用Bootstrap的栅格系统来创建响应式网站。
Bootstrap的栅格系统是基于12列的，您可以将HTML内容分为不同的列，以适应不同的屏幕大小。
只需将内容包含在容器和行的div元素中，并使用col-<列数>类来指定每个列的大小即可。
此外，Bootstrap还提供了许多用于创建导航栏、按钮、表单、卡片等常见组件的类和样式。
您可以通过添加这些类来快速应用样式，并使您的网站看起来更专业和美观。
除了基本的组件和样式之外，Bootstrap还提供了大量的JavaScript插件，用于增强网站的功能。
例如，您可以使用轮播插件来创建自动播放的幻灯片，使用模态框插件来创建弹出层窗口，使用下拉菜单插件来实现多级导航栏等。
最后，一个重要的方面是了解如何自定义Bootstrap样式。
虽然Bootstrap已经提供了许多现成的样式，但您可能希望根据自己的需要进行调整。
幸运的是，Bootstrap提供了一套样式变量和混合器，使您能够轻松地修改和扩展框架的样式。
总结起来，Bootstrap是一个强大而灵活的前端开发框架，可以帮助您快速构建响应式和移动设备优先的网站。
bootstrap教程
bootstrap教程Bootstrap 是一个开源的前端框架，可以帮助开发者快速构建响应式的网页设计和开发。
它集成了HTML、CSS和JavaScript，并提供了许多内置的组件和样式，使网页设计和开发变得更加简单和高效。
下面是一个简单的Bootstrap教程，让您快速入门并了解如何使用Bootstrap构建优秀的网页设计：1. 引入Bootstrap：在HTML文档中，使用<link>标签引入Bootstrap的CSS文件和<script>标签引入Bootstrap的JavaScript文件。
这样可以确保在网页中使用Bootstrap的所有功能和样式。
2. 响应式设计：Bootstrap提供了一套能够根据不同大小的屏幕自动调整布局的类和组件。
通过使用这些类和组件，您可以轻松实现响应式设计，使网页在不同设备上都能获得良好的用户体验。
3. 网格系统：Bootstrap的网格系统是构建响应式布局的基础。
通过将内容放置在容器中的行和列中，您可以实现灵活的网页布局，并实现不同分辨率下的自适应效果。
4. 样式组件：Bootstrap提供了许多内置的样式组件，如导航栏、按钮、表单、卡片等。
通过使用这些组件，您可以快速创建出现代化和美观的网页设计。
5. JavaScript插件：Bootstrap还提供了许多强大的JavaScript插件，如轮播图、模态框、滚动监听等。
通过使用这些插件，您可以为网页添加交互性和动态效果，提升用户体验。
6. 自定义主题：Bootstrap允许您根据自己的需求进行定制，以创建独特的网页设计。
您可以修改预定义的颜色、样式和布局，或者创建自己的CSS样式表来完全自定义Bootstrap的外观和行为。
尽管这仅仅是Bootstrap的基础教程，但它足够让您开始使用Bootstrap来构建出色的网页设计。
通过深入学习官方文档和参考其他教程，您可以掌握更多高级技巧和特性，使您的网页变得更加独特和功能丰富。
BootStrap入门教程
本作品由VentLam创作，采用知识共享署名-非商业性使用-相同方式共享2.5 中国大陆许可协议进行许可。
BootStrap入门教程(一)2011年，twitter的“一小撮”工程师为了提高他们内部的分析和管理能力，用业余时间为他们的产品构建了一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。
Bootstrap由MARK OTTO和Jacob Thornton所设计和建立，在github上开源之后，迅速成为该站上最多人watch&fork的项目。
大量工程师踊跃为该项目贡献代码，社区惊人地活跃，代码版本进化非常快速，官方文档质量极其高(可以说是优雅)，同时涌现了许多基于Bootstrap建设的网站：界面清新、简洁;要素排版利落大方。
如下图所示：https:///http://www.fleetio.co m/GitHub上这样介绍bootstrap：简单灵活可用于架构流行的用户界面和交互接口的html,css,javascript工具集。
基于html5、css3的bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于Less等。
本系列教程遵循官方文档结构来介绍bootstrap，包括手脚架（Scaffolding),基础CSS,组件,javascript插件，使用LESS与自定义.本文主要介绍Boo tstrap的基础布局--Scaffolding.Bootstrap建立了一个响应式的12列格网布局系统，它引入了fixed和fluid-with两种布局方式。
我们从全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts),响应式设计(Responsive Design)这六五个方面深入讲解Boostrap的scaffolding.全局样式(Global Style).Bootstrap要求html5的文件类型，所以必须在每个使用bootstrap页面的开头都引用:<!DOCTYPE html><html lang="en"> ...</html>2同时，它通过Bootstrap.less文件来设置全局的排版和连接显示风格.其中去掉了Body的margin，使用@baseFontFamily,@baseFontSize,@linkColor等变量来控制基本排版。
bootstrap教程
bootstrap教程Bootstrap是一种用于快速构建响应式网站和Web应用程序的开源前端框架。
它由Twitter开发并于2011年首次发布。
Bootstrap使用HTML、CSS和JavaScript来创建具有现代设计和布局的网站。
使用Bootstrap的好处之一是它提供了一套功能强大且易于使用的CSS类和JavaScript插件。
这些类和插件可以用来创建各种组件，如导航栏、按钮、表格、表单等。
为了使用Bootstrap，您只需要将相应的CSS和JavaScript文件链接到您的HTML文件中，然后使用它们提供的类和组件来构建您的页面。
另一个Bootstrap的优点是它的响应式设计。
它提供了一套CSS类，可以根据屏幕大小自动调整和重新排列内容。
这意味着您可以创建适用于桌面、平板电脑和移动设备的网站，而无需编写大量不同的代码。
Bootstrap还提供了一些类和插件，可以根据用户的设备或屏幕大小加载不同的内容或执行不同的功能。
除了上述功能之外，Bootstrap还提供了一些其他的工具和样式，如网格系统、Typography和表单样式等。
这些工具可以帮助您更轻松地创建和管理网页内容。
另外，Bootstrap还有一个庞大的社区，您可以在社区中找到各种各样的主题、模板和插件，以及解决常见问题的指导和建议。
要开始使用Bootstrap，您可以从官方网站上下载最新版本的框架文件，然后将它们添加到您的项目中。
然后，您可以根据需要使用相应的类和组件来构建您的页面。
如果您对Bootstrap的使用还不熟悉，可以参考官方文档和教程，其中包含了详细的说明和示例代码。
总结起来，Bootstrap是一个强大且易于使用的前端框架，可以帮助开发者快速构建响应式网站和Web应用程序。
它提供了一套功能丰富的CSS类和JavaScript插件，可以用来创建各种组件和布局。
Bootstrap还具有响应式设计、网格系统和其他实用工具，可以帮助开发者更轻松地管理网页内容。
BOOTSTRAP教程
图2-2 引用(Blockquotes) 代码片段如下所示：
<divclass="row"> <divclass="span6 "> <blockquoteclass="pull-right"> <p>凌冬将至. 我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。 </p> </blockquote> </div> <divclass="span6 "> <blockquote> <p>凌冬将至. 我是黑暗中的利剑，长城上的守卫，抵御寒冷的烈焰，破晓时分的光线，唤醒眠者的号角，守护王国的坚盾。</p> 守夜人军 守夜人军团总司令.<small>蒙奇.D.<citetitle="">路飞</cite></small>
图1-1 默认格网系统(Default G rid System) 以下简单的代 码则是实现图1-1中，第三列的宽度为4和宽度为8的两个 div.
<divclass="row"> <divclass="span4">...</div> <divclass="span8">...</div> </div>
嵌套的 div 长度之和不能大于它的父 div，否则会溢出叠加。各位可以试试将第一层的 div 长度改为其他值，看 看效果。 流式格网系统(Fluid grid system).它使用%， 而不是固定的 px,来确定页面要素的宽度.只需要简单的将. row 改成.row-fluid ，就可以将 fixed 行改为 fluid.如图1-4所示：
001Bootstrap教程
Bootstrap教程教程1.什么是Bootstrap？Bootstrap 是一个用于快速开发Web 应用程序和网站的前端框架。
Bootstrap 是基于HTML、CSS、JAVASCRIPT 的。
2.历史Bootstrap 是由Twitter的Mark Otto和Jacob Thornton开发的。
Bootstrap 是2011 年八月在GitHub 上发布的开源产品。
3.为什么使用Bootstrap？•移动设备优先：自Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
•浏览器支持：所有的主流浏览器都支持Bootstrap。
4.容易上手：只要您具备HTML 和CSS 的基础知识，您就可以开始学习Bootstrap。
Bootstrap 包的内容基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
这将在Bootstrap 基本结构部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的CSS 设置、定义基本的HTML 元素样式、可扩展的class，以及一个先进的网格系统。
这将在Bootstrap CSS 部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
这将在布局组件部分详细讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的jQuery 插件。
您可以直接包含所有的插件，也可以逐个包含这些插件。
这将在Bootstrap 插件部分详细讲解。
定制：您可以定制Bootstrap 的组件、LESS 变量和jQuery 插件来得到您自己的版本。
BootStrap入门学习(1) (1)解析
•
Bootstrap基本模板
• Bootstrap模板注意事项 – Bootstrap模板必须是基于HTML5文件的。因此DTD类型定义必须是HTML5 的。 – Bootstrap文件当字符集设置，也要遵循HTML5的规范。 – 设置IE浏览器兼容模式(X-UA-Compatible)。 – 设置模板，适用于所有平台(viewport )。 – 引入bootstrap的CSS主文件(bootstrap.min.css)。 – 引入jQuery插件的主文件(jQuery) – 引入bootstrap的JS主文件(bootstrap.min.js)
BootStrap入门学习 Part 1
Bootstrap简介
• 什么是 Bootstrap？ – Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 两位设计师开发的。 Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。 – Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。 – Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 – Bootstrap简洁灵活，使得 Web 开发更加快捷。 – Bootstrap可以构建出非常优雅的前端界面，而且占用资源非常小。 为什么使用Bootstrap？ – 移动设备优先。框架包含了贯穿于整个库的移动设备优先的样式。 – 浏览器支持。所有的主流浏览器都支持。 – 容易上手。只要你具备HTML、CSS、JS基础知识，就可以开始学习。 – 响应式设计。Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和 手机
CSS全局样式——排版
• 标题 – HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。 – 在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属 性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被 设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
Bootstrap+JSP实例学习笔记一.简单的带登录功能的首页
Bootstrap+JSP实例学习笔记⼀.简单的带登录功能的⾸页前⾔Bootstrap 是流⾏的 HTML、CSS 和 JS 框架，⽤于开发响应式布局、移动设备优先的 WEB 项⽬。
源⾃于twiteer内部的开发框架。
当前（2019-05）最新版本是v3.3.7。
官⽹：学习初衷：不能每来⼀个项⽬都重头开始吧，希望积累框架，节省时间，快速上⼿，尽快出效果。
不⽤太花哨，但也不能太难看。
选⼀个简单易上⼿的框架，那就选这个bootstrap吧。
效果图没使⽤样式：使⽤bootstrap样式：⾃⼰写的样式：使⽤bootstrap样式：作为后端开发⼈员，我们不需要懂太多的前端美⼯知识，但是⼜不想做出来太难看，在保证快的基础上，出⼀个还可以的界⾯。
实战（step by step）：⼯具：Eclipse Java Photon 4.8.0说明：⽹上已经很多这类介绍了，这⾥更多的是做⼀个整合。
并把⾃⼰学习过程的⼀些步骤关键点记录下来，看官可以挑着看。
⼀：配置开发环境1.新增动态⽹页库以及配置tomcat默认eclipse已安装，但默认是没有动态⽹页的，需要安装配置下。
参考：2. 新建⼀个动态Web项⽬参考：如果报错：The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path那么需要配置tomcat，参考：然后关联到项⽬中，参考：如果这个过程还没有找到可选的tomcat配置，则可以参考下图下载配置⼀个：3. 项⽬中引⼊bootstrap参考：引⼊BootStrap开发⼀个JSP项⽬4. 实例：写⼀个简单的带登录功能的⾸页参考：视频教程：https:///course/courseLearn.htm?courseId=1002923012#/learn/video? lessonId=1003312146&courseId=10029230121） Login.jsp<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort() + path + "/"; %><!DOCTYPE html><html><head><!-- 这⾥没啥⽤，前⾯已经定义过了，只是好习惯留着 --><meta charset="UTF-8"><!-- 设置为设备的宽度，⾼端为1:1。
Bootstrap入门与布局教程课件
通过定义容器的大小，平分为12份 调整内外边距 结合媒体查询
9/44
栅格系统工作原理
一行数据（row）必须包含在 .container中浏可，览视以器区域便为
其赋予合容适器 c的ont对aine齐r 方式和内列与边列距间距 30px 使用行在水平方向列创colu建mn一组列
列右间 距
4/44
新手入门 开发环境（webstorm） 引入Bootstrap框架文件
压缩处理文件bootstrap.min.css，bootstrap.min.js 使用 Bootstrap 中文网提供的免费 CDN 加速服务
5/44
基本模板
<html>
<head lang="en">
示例
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0/>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>这是一个Bootstrap框架的最基本HTML模板</h1>
<script src="js/jquery-1.12.4.js"></script>
</div>
演示示例3：Bootstrap列偏移
13/44
列嵌套
使用列组合的方式如何布局？
示例
bootstrap步骤
bootstrap步骤Bootstrap 是一个流行的前端框架，用于快速搭建响应式网站。
它提供了一套易于使用的 CSS、HTML 和 JavaScript 简化代码的组件，以及可用于快速开发原型的模板和工具集。
总结起来，使用 Bootstrap 可以加快网站的开发速度，提高网站的质量和响应能力。
下面我将详细介绍Bootstrap 的步骤。
第一步：引入 Bootstrap```<link rel="stylesheet"href="path/to/bootstrap/css/bootstrap.min.css"><script src="path/to/bootstrap/js/bootstrap.min.js"></script> ```在上面的代码中，`path/to/` 指的是 Bootstrap 文件的路径。
你需要根据你项目中的文件结构，正确地设置路径。
第二步：使用 Bootstrap 的容器Bootstrap 使用容器来包含网站的内容。
有三种类型的容器可以选择。
分别是：- `.container`：它创建一个固定宽度的容器。
- `.container-fluid`：它创建一个百分百宽度的容器。
- `.container-{breakpoint}`：它创建一个具有指定断点的容器。
如果你希望网站具有响应性，可以使用 `.container` 或`.container-{breakpoint}` 样式。
第三步：使用 Bootstrap 的网格系统Bootstrap 提供了一个强大的网格系统，用于在网站中布局内容。
它使用了 12 列的网格，可以将页面分成不同的区域。
要使用 Bootstrap 的网格系统，首先需要使用 `.row` 类来创建一个行。
然后，使用 `.col-{breakpoint}-{size}` 类来创建列。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Bootstrap教程第一课：简单的Bootstrap主页（1）写在前面：Bootstrap是目前最流行的前端框架，我从简单的实例开始，写一份文字版的Bootstrap教程，希望能对大家有所帮助。
准备工作：1、下载Bootstrap框架核心文件。
2、下载jQuery文件。
3、下载HTML5兼容IE的JS插件。
（各位可以从网上找到Bootstrap和jQuery以及HTML5 JS的官方下载地址，也可以直接点击下面的下载链接下载，我已经将jQuery文件放在了js目录里了。
）点击下载Bootstrap核心文件HTML结构：1、Bootstrap框架的文档必须声明为HTML5文件类型，所以你的每一个页面都必须按照下面的格式进行设置：<!DOCTYPE html><html lang="zh-cn">......</html><html< span="">2、添加HTML文档meta标记，需要两条标记：<!-- 声明IE8浏览器使用它支持的最高模式渲染页面 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- name="viewport" 针对移动端浏览器声明，通过width=device-width 告诉浏览器页面的宽度应等于设备的宽度，initial-scale=1 页面将是原本尺寸展示 --><meta name="viewport"content="width=device-width,initial-scale=1">3、引入所需要的核心文件，包括Bootstrap的CSS文件，jQuery插件，Bootstrap的JS核心文件，以及HTML5.JS文件。
<!-- Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="css/bootstrap.css"><!--[if lt IE 9]><script src="js/html5shiv.min.js"></script><![endif]--><!-- jQuery文件，必须在bootstrap.min.js之前引入 --><script src="js/jQuery.min.js"></script><!-- Bootstrap 核心 javascript文件--><script src="js/bootstrap.min.js"></script>那么现在，你的HTML文档，应该是这个样子的：<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><!-- 声明IE8浏览器使用它支持的最高模式渲染页面 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- name="viewport" 针对移动端浏览器声明，通过width=device-width 告诉浏览器页面的宽度应等于设备的宽度，initial-scale=1 页面将是原本尺寸展示 --><meta name="viewport"content="width=device-width,initial-scale=1"><title>Bootstrap 第一课：简单的Bootstrap主页</title><!-- Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="css/bootstrap.css"><!--[if lt IE 9]><script src="js/html5shiv.min.js"></script><![endif]--></head><body><!-- jQuery文件，必须在bootstrap.min.js之前引入 --><script src="js/jQuery.min.js"></script><!-- Bootstrap 核心 javascript文件--><script src="js/bootstrap.min.js"></script></body></html>正式开始：现在就可以在body之间写上你的网页结构代码了，添加上Bootstrap相应的CSS 类样式，就可以完成一个最简单的Bootstrap主页了。
首先，写好HTML结构代码：<div><h1>这是一个简单的Bootstrap主页</h1><p>这是一个简单的Bootstrap主页，制作这个主页，可以分为三个步骤：</p><p>一、使用HTML5基本文档类型，并写好网站声明。
</p><p>二、引入必须的Bootstrap核心文件。
</p><p>三、将页面代码放入container类容器中。
</p></div>在这个普通的结构代码的DIV上，添加CSS类.container，我们就可以看到页面的变化。
上面的HTML结构和内容代码将变成如下：<!DOCTYPE html><html lang="zh-cn"><head><meta charset="UTF-8"><!-- 声明IE8浏览器使用它支持的最高模式渲染页面 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- name="viewport" 针对移动端浏览器声明，通过width=device-width 告诉浏览器页面的宽度应等于设备的宽度，initial-scale=1 页面将是原本尺寸展示 --><meta name="viewport"content="width=device-width,initial-scale=1"><title>Bootstrap 第一课：简单的Bootstrap主页</title><!-- Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="css/bootstrap.css"><!--[if lt IE 9]><script src="js/html5shiv.min.js"></script><![endif]--></head><body><div class="container"><h1>这是一个简单的Bootstrap主页</h1><p>这是一个简单的Bootstrap主页，制作这个主页，可以分为三个步骤：</p><p>一、使用HTML5基本文档类型，并写好网站声明。
</p><p>二、引入必须的Bootstrap核心文件。
</p><p>三、将页面代码放入container类容器中。
</p></div><!-- jQuery文件，必须在bootstrap.min.js之前引入 --><script src="js/jQuery.min.js"></script><!-- Bootstrap 核心 javascript文件--><script src="js/bootstrap.min.js"></script></body></html>现在在浏览器中打开这个页面浏览，拖动浏览器窗口的大小，可以看到页面随着浏览器的大小变化，而出现相应的适应变化，这个简单的Bootstrap主页，到这里就写完了。
(模拟手机端显示)（模拟平板电脑显示）（模拟桌面设备显示）可以看到，在不同分辨率下，页面边距是自动变化和适应的，这就是Bootstrap 的强大之处。
文：十二。