Bootstrap3 是一个流行的前端开发框架，由Twitter公司于2011年首次发布，用于简化网页设计和开发过程。这个框架包含了一系列预先设计的CSS样式、JavaScript组件和HTML模板，帮助开发者快速创建响应式和移动优先的网站。在本章中，我们将深入探讨Bootstrap3的基础知识，以及如何创建一个简单的"Hello, World!"页面。
Bootstrap3 的核心特性包括响应式布局（Responsive Grid System）、预定义的CSS类、JavaScript插件和强大的定制选项。响应式网格系统基于12列的布局，可以根据不同的设备屏幕尺寸自动调整内容的排列方式，确保在桌面、平板和手机等不同设备上都能提供良好的用户体验。预定义的CSS类则提供了丰富的样式选择，如按钮、表单、导航栏、提示信息等，极大地提高了开发效率。
在使用Bootstrap3 开始开发前，你需要将Bootstrap库引入到项目中。这通常通过在HTML文件中添加CDN链接或者下载Bootstrap的压缩包并本地引用实现。对于初学者，使用CDN链接是最简单的方法，因为这样可以避免额外的文件管理和更新问题。例如，在`<head>`标签内添加以下代码：
```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
```
接下来，我们来创建一个基本的"Hello, World!"页面。Bootstrap3 提供了`container`类，用于包裹内容并为其提供适当的内边距。我们可以创建一个包含`container`类的`div`元素，然后在其中放入一个`jumbotron`类的`div`，用于展示突出的内容。以下是示例代码：
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap3 Hello World</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Hello, World!</h1>
<p>这是使用Bootstrap3 创建的第一个“Hello, World!”页面。</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
```
这个简单的页面将展示一个带有大标题“Hello, World!”和一段描述的醒目区域。Bootstrap3 的CSS样式会自动应用到这些元素上，使得页面看起来整洁且专业。
除了基本的HTML结构，Bootstrap3 还提供了许多JavaScript插件，如模态框（Modal）、下拉菜单（Dropdown）、轮播（Carousel）等。这些插件可以通过在HTML中添加特定的类和数据属性，并在页面加载后初始化JavaScript代码来实现。例如，要创建一个模态框，可以这样做：
```html
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
打开模态框
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="关闭">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
这是模态框的内容。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>
```
在这个例子中，点击按钮会触发模态框的显示，而点击模态框上的关闭按钮或背景则会关闭模态框。
Bootstrap3 是一个强大且实用的前端框架，可以帮助开发者快速构建响应式、美观的网页。通过学习和熟练掌握其基础结构和组件，你可以大大提高开发效率，同时保证网站在不同设备上的表现力。在实际项目中，还可以结合自己的需求进行自定义和扩展，以实现更加个性化的设计。
Bootstrap.zip （26个子文件） 
Bootstrap 
MANIFEST.MF 39B
glyphicons-halflings-regular.svg 61KB
