========
BootStrap整体框架之基础布局组件
什么是BootStrap整体框架？
Bootstrap是Twitter推出的前端框架，由Twitter的工程师Mark Otto和Jacob Thornton共同开发。Bootstrap提供了用于开发Web应用程序的HTML，CSS和JavaScript组件。使用Bootstrap可以帮助我们在Web应用程序的开发中，快速搭建一个美观且具有响应式的界面。
基础布局组件功能
BootStrap整体框架提供了很多有用的基础布局组件，例如：
- 栅格系统（Grid System）
- 嵌入式媒体（Embedding Media）
- 响应式工具（Responsive Utilities）
- 列表组（List Group）
- 面板（Panel）等
在这里我们主要介绍一下BootStrap整体框架之基础布局组件的使用方法。
栅格系统
栅格系统是Bootstrap整体框架中最基础的组件之一。它提供了一个灵活的、响应式的12列网格系统，方便我们进行页面布局设计。
栅格系统使用方法
栅格系统的使用方法很简单，我们只需要将一个父级元素（例如\
<div class="row">
<div class="col-md-4">内容 1</div>
<div class="col-md-4">内容 2</div>
<div class="col-md-4">内容 3</div>
</div>
上述代码表示将一个父级元素定义为.row类，然后在该元素下面添加了三个宽度为4列的子元素，并将它们分别包含在.col-md-4类中。这样的话，三个子元素会自动平分父级元素的宽度，并且能够自适应窗口大小的变化。
其中.col-md-4类中的md表示屏幕的中等大小（medium），它还可以取值为xs（超小屏幕）、sm（小屏幕）、lg（大屏幕）等。如果我们同时需要在不同屏幕大小下使用不同的布局样式，可以根据需要添加不同的类名即可。
栅格系统实例
以下是一个使用栅格系统进行页面布局的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>栅格系统实例</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">内容 1</div>
<div class="col-md-3 col-sm-6">内容 2</div>
<div class="col-md-3 col-sm-6">内容 3</div>
<div class="col-md-3 col-sm-6">内容 4</div>
</div>
</div>
</body>
</html>
在上述例子中，我们首先定义了一个类为.container的元素作为容器，并将一个类为.row的元素作为容器的一部分。在.row元素下面，我们又定义了四个类为.col-md-3和.col-sm-6的子元素，表示在中等屏幕和小屏幕下，将父级元素分为四份，每份宽度占3列（也就是宽度为25%），以响应不同屏幕下的排版布局需求。
实际上，通过栅格系统，在页面布局设计时让代码更为简洁、易懂，具有十分重要的意义。
嵌入式媒体
Bootstrap的嵌入式媒体功能是另一种非常方便的功能，它可以让图片、音频、视频或其他类型的媒体轻松地与其他内容一起包含在页面中，通常在与响应式设计有关的地方使用。
嵌入式媒体使用方法
Bootstrap中提供了两个类用于嵌入式媒体：.embed-responsive和.embed-responsive-item。其中.embed-responsive-item类用于定义要嵌入的媒体内容；而.embed-responsive类用于定义该媒体内容的宽高比和其他样式。例如：
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="http://v.youku.com/v_show/id_XMzAyMjU0NTg1Ng==.html"></iframe>
</div>
上述代码表示，我们将一个类为.embed-responsive的\