Q(为孩子们创建一个故事页面，将孩子们的故事封装在引导井容器中。
页面布局必须如下所示
涵盖的概念：-好吧，Glyphicons，引导的帮助程序类
注：-
-
创建如图所示的故事布局。图像已附加。
-
为类容器和井创建div标记
-
该故事必须包含在井内
-
为字形图标打印、搜索和信封创建适当的div标签
-
打印和信封必须链接
-
搜索必须嵌入按钮中
-
为页脚创建一个div，其中包含一个alert危险类以保存版权信息
我的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- DO NOT CHANGE ANY THING UNDER HEAD SECTION -->
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Childrens story for the day</h2>
<div class="well">
A fox passed by a grapevine winding around the branches of a tree. He saw a bunch of grapes hanging above. He jumped to snatch some grapes. But the grapes were too high for him. "You have to grow up fox," said a monkey living on the tree; "here take some grapes."The monkey shook the branch and a few grapes fell out. The fox caught them neatly in his mouth. "Are they sweet?" asked the monkey. "Not so sweet,"the fox said as he walked away. The next day, the fox came by the tree again. He took a look at the bunches of grapes hanging above. He took a short run and jumped. This time he could jump higher, but not high enough to get at the grapes. The friendly monkey pressed down the branch, helping the fox snatch one or two grapes as they fell."Is it sweet?" asked the monkey."Not so sweet,"said the fox as he walked away. The next day, the fox was back.This time he looked determined to get the grapes.
</div>
<a id="gly1" href="#" class=" btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print this story
</a>
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search for new stories
</button>
<a id="gly2" href="#"><span class="glyphicon glyphicon-envelope"></span>Mail this story</a>
</div>
<br>
<div id="foot" class="alert alert-danger">
<strong>Copyright Information :- </strong> Do not copy or reproduce
</div>
</body>
</html>
所需输出图像错误图像
class="btn btn成功btn lg"-在你的打印类中使用这个
这是将要工作的确切代码，错误不在打印类中，错误是您在应该关闭容器div之前关闭了容器div。您需要将容器结束div放在结束body标记之前
<!DOCTYPE html>
<html lang="en">
<head>
<!-- DO NOT CHANGE ANY THING UNDER HEAD SECTION -->
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Childrens story for the day</h1>
<div class="well">
A fox passed by a grapevine winding around the branches of a tree. He saw a bunch of grapes hanging above. He jumped to snatch some grapes. But the grapes were too high for him. "You have to grow up fox," said a monkey living on the tree; "here take some grapes."The monkey shook the branch and a few grapes fell out. The fox caught them neatly in his mouth. "Are they sweet?" asked the monkey. "Not so sweet,"the fox said as he walked away. The next day, the fox came by the tree again. He took a look at the bunches of grapes hanging above. He took a short run and jumped. This time he could jump higher, but not high enough to get at the grapes. The friendly monkey pressed down the branch, helping the fox snatch one or two grapes as they fell."Is it sweet?" asked the monkey."Not so sweet,"said the fox as he walked away. The next day, the fox was back.This time he looked determined to get the grapes.
</div>
<a id="gly1" href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print this story
</a>
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search for new stories
</button>
<a id="gly2" href="#"><span class="glyphicon glyphicon-envelope"></span>Mail this story</a>
<div id="foot" class="alert alert-danger">
<strong>Copyright Information :- </strong> Do not copy or reproduce
</div>
</div>
</body>
</html>add id="打印"；字形打印的跨度内标签
将单独的div用于打印、搜索和邮件目的，并将其内联显示。
<div style="display: inline-block">
<a>..</a>
</div>
<div style="display: inline-block">
<button>..</button>
</div>
<div style="display: inline-block">
<a>..</a>
</div>