用bootstrap知识完成要求：1、当页面小于576px时，显示竖屏首页页面效果左上角显示时间，下面4行每行四个图标。 2、当页面大于576px时，出现横屏手机效果，左上角显示时间，右上两行每行五个图标。

好的，让我来回答您的问题。

这是一个关于响应式布局的问题。您可以使用Bootstrap进行开发，并使用媒体查询来设置不同屏幕大小下的布局。您可以在CSS文件中设置以下规则：

1、小于或等于576像素的屏幕：

/*左上角显示时间的样式*/
#time {
  position: absolute;
  top: 10px;
  left: 10px;
}

/*4行4列图标的样式*/
.icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  margin-top: 50px;
}

同时，在HTML文件中，您可以添加以下代码：

<div id="time">当前时间</div>
<div class="icons">
  <div>图标1</div>
  <div>图标2</div>
  <div>图标3</div>
  <div>图标4</div>
  <div>图标5</div>
  <div>图标6</div>
  <div>图标7</div>
  <div>图标8</div>
  <div>图标9</div>
  <div>图标10</div>
  <div>图标11</div>
  <div>图标12</div>
</div>

2、大于576像素的屏幕：

/*左上角显示时间的样式*/
#time {
  position: absolute;
  top: 10px;
  left: 10px;
}

/*右上两行每行五个图标的样式*/
.icons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 20px;
  margin-top: 50px;
}

在HTML文件中，您可以添加以下代码：

<div id="time">当前时间</div>
<div class="icons">
  <div>图标1</div>
  <div>图标2</div>
  <div>图标3</div>
  <div>图标4</div>
  <div>图标5</div>
  <div>图标6</div>
  <div>图标7</div>
  <div>图标8</div>
  <div>图标9</div>
  <div>图标10</div>
  <div>图标11</div>
  <div>图标12</div>
  <div>图标13</div>
  <div>图标14</div>
  <div>图标15</div>
  <div>图标16</div>
  <div>图标17</div>
</div>

这样，当页面大小发生更改时，您的网页将能够相应地调整布局。

我希望这个答案能够帮助到您。如果您还有其他问题，请随时联系我。