Question

该表如何转换为引导行和列？我对Bootstrap不太熟悉，但我想尝试将其尽可能最佳地转换，但不确定从哪里开始。非常感谢您的帮助。我已经粘贴了html和css。谢谢

<div id="section1">
     <header>WEEKLY HOURS</header>
     <table class="section1table">
    <tr class="last-row">
        <th>Clocked</th>
        <th>Regular</th>
        <th>Overtime</th>
        <th>Incentive</th>
        <th>Holiday</th>
        <th>Personal</th>
        <th>Vacation</th>

        <th colspan=4>Off-Clock</th>
        <th class="total"><strong>Total</strong></th>
    </tr>

    <tr class="last-row">
        <td id="clockHours">clockHrs</td>
        <td id="regularHours">regularHrs</td>
        <td id="overtime">overtimeHrs</td>
        <td id="Incentive">incentiveHrs</td>
        <td id="holiday">holidayHrs</td>
        <td id="personal">sickHrs</td>
        <td id="vacation">vacationHrs</td>
        <td colspan=4>offClockHrs</td>
        <td class="total">totalHrs</td>
    </tr>

</table>

    #printPage 
{
  margin: 0px;
  padding: 0px;
  width: 910px;
  margin-bottom: 0.4%;
  font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
}
#timetitle
{
    font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
    font-weight: bolder;
    font-size: 14pt;
    margin-bottom: 0%;
}
#name
{
    font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
    font-weight: normal;
    margin-top: 0;
    margin-left: 15px

}
div#namesection
{
    margin-top: 1%;
    padding: 0px;
    width: 670px; 
    margin-left:0%;


}

div#section1
{
    margin-top: 5px;
    padding: 0px;
    border-top: 2px solid black;
    width: 870px; 
    margin-bottom: 5px;


}
div#section1 header
{
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 0px;
    font-weight: bold;
}
table.section1table td 
{
    vertical-align:top;
    text-align: left;
    padding: 5px;

}
table.section1table th 
{
    font-weight: normal;
    padding: 0 5px 0 5px;
    vertical-align:top;
    text-align: left;
}
div#section2 /*labeled wrong, this is the sec2 header*/
{
  padding: 0;
  border-top: 2px solid black;
  width: 870px;
  margin-left:0;
  margin-bottom: 0;


}
table.section1table 
{
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 0%;
    margin-top: 0.15%;
}

div#section2 header /*labeled wrong, this is the actual box in sec2*/
{
  margin-left: 0.5%;
  margin-top: 5px;
  font-weight: bold;
  font-size: 14pt;
}

table.section2table 
{
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 0;
  margin-top: .15%;
}

table.section2table th,
table.section2table td 
{
  vertical-align:top;
  text-align: left;
  font-size: 12pt;
  /* The following rule (white-space) is used to allow the last cell   */
  /* to fill the remaining width.                                      */

  white-space: nowrap;
}

table.section2table th 
{
  /* padding to keep THs right aligned with TDs                        */
  padding: 0 5px 0 5px;
}

table.section2table td 
{
  padding: 5px;
}

table.section2table tr.last-row th,
table.section2table tr.last-row td 
{
  background-color: #dddddd;
}

table.section2table tr.last-row th.total,
table.section2table tr.last-row td.total 
{
  /* The following rule (width) is used to allow the last cell to fill */
  /* the remaining width.                                              */

  width: 99%;
  text-align: right;
}

该表如何转换为引导行和列？

Answer 1

首先，您应该经历bootstrap并熟悉它，这样做您将可以自己进行。

第二，如果仅关于此表，则下面的代码将完成您的工作。

这里发生的是引导程序grid structure，<tr>被<div class="row">取代，行分为12列，因此这里我们使用<div class="col-sm-1">，并且对于具有colspan=4的单元格，您可以使用class="col-sm-4"。

在此代码段中，我们的显示区域较小，因此我使用了col-sm-*，对于较大的显示尺寸，可以使用col-md-* / col-lg-*。查看引导文档以获取更多详细信息。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-1 text-center">Clocked</div>
    <div class="col-sm-1 text-center">Regular</div>
    <div class="col-sm-1 text-center">Overtime</div>
    <div class="col-sm-1 text-center">Incentive</div>
    <div class="col-sm-1 text-center">Holiday</div>
    <div class="col-sm-1 text-center">Personal</div>
    <div class="col-sm-1 text-center">Vacation</div>
    <div class="col-sm-4 text-center">Off-Clock</div>
    <div class="total col-sm-1 text-center"><strong>Total</strong></div>
  </div>

  <div class="row">
    <div class="col-sm-1 text-center" id="clockHours">clockHrs</div>
    <div class="col-sm-1 text-center" id="regularHours">regularHrs</div>
    <div class="col-sm-1 text-center" id="overtime">overtimeHrs</div>
    <div class="col-sm-1 text-center" id="Incentive">incentiveHrs</div>
    <div class="col-sm-1 text-center" id="holiday">holidayHrs</div>
    <div class="col-sm-1 text-center" id="personal">sickHrs</div>
    <div class="col-sm-1 text-center" id="vacation">vacationHrs</div>
    <div class="col-sm-4 text-center">offClockHrs</div>
    <div class="total col-sm-1 text-center">totalHrs</div>
  </div>
</div>

如何将该HTML代码段转换为引导程序

1 个答案: