具有检查，取消值的Bootstrap响应定价表

时间：2016-09-01 04:30:47

标签： html css twitter-bootstrap

我正在尝试创建一个bootstrap定价表，我有一个代码，但在移动设备中，由于代码，我无法看到我的切换导航栏菜单。

On desktop the table looks as follows:

代码如下：

＆＃13;
＆＃13; 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <section id="pakete">
<h1>Responsive Flipping Price-Table</h1>
<div class="box"><!-- The surrounding box -->

  <!-- The front container -->
  <div class="front">
    <table border="0">
      <tr>
        <th>...</th>
        <th>Paket 1</th>
        <th>Paket 2</th>
        <th>Paket 3</th>

      </tr>
      <tr>
        <th>Updating & formatting pages</th>
        <td class="entypo-check"></td>
        <td class="entypo-check"></td>
        <td class="entypo-check"></td>

      </tr>
      <tr>
        <th>Update text</th>
        <td class="entypo-check"></td>
        <td class="entypo-check"></td>
        <td class="entypo-check"></td>

      </tr>
      <tr>
        <th>Update Images</th>
        <td class="entypo-check"></td>
        <td class="entypo-check"></td>
        <td class="entypo-check"></td>
   </tr>
      <tr>
        <th>Proofing & Spell checking </th>
       <td class="entypo-check"></td>
        <td class="entypo-check"></td>
        <td class="entypo-check"></td>
 </tr>
      <tr>
        <th>Updates to the website</th>
        <td class="entypo-check"></td>
        <td class="entypo-check"></td>
        <td class="entypo-check"></td>
      </tr>
      <tr>
        <th>Testing updates on the live site</th>
        <td class="entypo-check"></td>
        <td class="entypo-check"></td>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>Fixing broken links</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Fixing & Testing web-forms</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>Internal link analysis</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>Update sitemap.xml & robots.txt</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Meta tag Optimization</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>Image Optimization</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>Monthly SEO & Keyword update reports</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>Page size & loading time optimization</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>URL renaming & redirects</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>Competitive Analysis</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>W3C Validation</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Google & Bing Site Map Creation</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Robot.txt file creation</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Custom 404 error page setup</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Integrating Google Webmaster Tools</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Google Analytics setup</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Google local business listing</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>FREE Live chat application</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Monthly website backup</th>
        <td class="entypo-cancel"></td>
        <td class="entypo-cancel"></td>
        <td class="entypo-check"></td>
      </tr>
      <tr>
        <th>TAT(Working days)</th>
        <td>5-7 days</td>
        <td>3-5 days</td>
        <td>3 days</td>
      </tr>
      <tr>
        <th>On site meeting per year</th>
        <td>1</td>
        <td>1</td>
        <td>2</td>
      </tr>

      <tr>
        <th>Price</th>
        <td>1123,00$</td>
        <td>5813,00$</td>
        <td>2134,00$</td>

      </tr>      
      <tr>
        <th>...</th>
        <td><button class="show-me_1">Details</button></td>
        <td><button class="show-me_2">Details</button></td>
        <td><button class="show-me_3">Details</button></td>

      </tr>
    </table>    
  </div>
<div class="responsive-tables">
  <div class="little1 active">
    <table>
      <tr>
        <th>...</th>
        <th>Paket 1</th>
      </tr>
    <tr>
        <th>Updating & formatting pages</th>
        <td class="entypo-check"></td>

      </tr>
      <tr>
        <th>Update text</th>
        <td class="entypo-check"></td>

      </tr>
      <tr>
        <th>Update Images</th>
        <td class="entypo-check"></td>

   </tr>
      <tr>
        <th>Proofing & Spell checking </th>
       <td class="entypo-check"></td>

 </tr>
      <tr>
        <th>Updates to the website</th>
        <td class="entypo-check"></td>

      </tr>
      <tr>
        <th>Testing updates on the live site</th>
        <td class="entypo-check"></td>

      </tr>
       <tr>
        <th>Fixing broken links</th>
        <td class="entypo-cancel"></td>

      </tr>
        <tr>
        <th>Fixing & Testing web-forms</th>
        <td class="entypo-cancel"></td>

      </tr>
       <tr>
        <th>Internal link analysis</th>
        <td class="entypo-cancel"></td>

      </tr>
       <tr>
        <th>Update sitemap.xml & robots.txt</th>
        <td class="entypo-cancel"></td>

      </tr>
        <tr>
        <th>Meta tag Optimization</th>
        <td class="entypo-cancel"></td>

      </tr>
       <tr>
        <th>Image Optimization</th>
        <td class="entypo-cancel"></td>

      </tr>
       <tr>
        <th>Monthly SEO & Keyword update reports</th>
        <td class="entypo-cancel"></td>

      </tr>
       <tr>
        <th>Page size & loading time optimization</th>
        <td class="entypo-cancel"></td>

      </tr>
       <tr>
        <th>URL renaming & redirects</th>
        <td class="entypo-cancel"></td>

      </tr>
       <tr>
        <th>Competitive Analysis</th>
        <td class="entypo-cancel"></td>

      </tr>
       <tr>
        <th>W3C Validation</th>
        <td class="entypo-cancel"></td>

      </tr>
        <tr>
        <th>Google & Bing Site Map Creation</th>
        <td class="entypo-cancel"></td>

      </tr>
        <tr>
        <th>Robot.txt file creation</th>
        <td class="entypo-cancel"></td>

      </tr>
        <tr>
        <th>Custom 404 error page setup</th>
        <td class="entypo-cancel"></td>

      </tr>
        <tr>
        <th>Integrating Google Webmaster Tools</th>
        <td class="entypo-cancel"></td>

      </tr>
        <tr>
        <th>Google Analytics setup</th>
        <td class="entypo-cancel"></td>

      </tr>
        <tr>
        <th>Google local business listing</th>
        <td class="entypo-cancel"></td>

      </tr>
        <tr>
        <th>FREE Live chat application</th>
        <td class="entypo-cancel"></td>

      </tr>
        <tr>
        <th>Monthly website backup</th>
        <td class="entypo-cancel"></td>

      </tr>
      <tr>
        <th>TAT(Working days)</th>
        <td>5-7 days</td>

      </tr>
      <tr>
        <th>On site meeting per year</th>
        <td>1</td>

      </tr>

      <tr>
        <th>Price</th>
        <td>1123,00$</td>

      </tr>      
      <tr>
        <th>...</th>
        <td><button class="show-me_1">Details</button></td>
        </tr>
    </table>
  </div>
  <div class="little2 activetwo">
    <table>
      <tr>
        <th>...</th>
        <th>Paket 2</th>
      </tr>
       <tr>
        <th>Updating & formatting pages</th>
        <td class="entypo-check"></td>
</tr>
      <tr>
        <th>Update text</th>
        <td class="entypo-check"></td>
     </tr>
      <tr>
        <th>Update Images</th>
       <td class="entypo-check"></td>
   </tr>
      <tr>
        <th>Proofing & Spell checking </th>
         <td class="entypo-check"></td>

 </tr>
      <tr>
        <th>Updates to the website</th>
       <td class="entypo-check"></td>
    </tr>
      <tr>
        <th>Testing updates on the live site</th>
         <td class="entypo-check"></td>
       </tr>
       <tr>
        <th>Fixing broken links</th>
      <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Fixing & Testing web-forms</th>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>Internal link analysis</th>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>Update sitemap.xml & robots.txt</th>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Meta tag Optimization</th>
        <td class="entypo-cancel"></td>
      </tr>
       <tr>
        <th>Image Optimization</th>
        <td class="entypo-cancel"></td>
      </tr>
       <tr>
        <th>Monthly SEO & Keyword update reports</th>
        <td class="entypo-cancel"></td>
      </tr>
       <tr>
        <th>Page size & loading time optimization</th>
        <td class="entypo-cancel"></td>
      </tr>
       <tr>
        <th>URL renaming & redirects</th>
        <td class="entypo-cancel"></td>
      </tr>
       <tr>
        <th>Competitive Analysis</th>
        <td class="entypo-cancel"></td>
        </tr>
       <tr>
        <th>W3C Validation</th>
      <td class="entypo-cancel"></td>
      </tr>
        <tr>
        <th>Google & Bing Site Map Creation</th>
      <td class="entypo-cancel"></td>
      </tr>
        <tr>
        <th>Robot.txt file creation</th>
     <td class="entypo-cancel"></td>
      </tr>
        <tr>
        <th>Custom 404 error page setup</th>
        <td class="entypo-cancel"></td>
      </tr>
        <tr>
        <th>Integrating Google Webmaster Tools</th>
        <td class="entypo-cancel"></td>
      </tr>
        <tr>
        <th>Google Analytics setup</th>
        <td class="entypo-cancel"></td>
      </tr>
        <tr>
        <th>Google local business listing</th>
        <td class="entypo-cancel"></td>
      </tr>
        <tr>
        <th>FREE Live chat application</th>
        <td class="entypo-cancel"></td>
      </tr>
        <tr>
        <th>Monthly website backup</th>
        <td class="entypo-cancel"></td>
      </tr>
      <tr>
        <th>TAT(Working days)</th>
        <td>3-5 days</td>
      </tr>
      <tr>
        <th>On site meeting per year</th>
        <td>1</td>
</tr>

      <tr>
        <th>Price</th>
        <td>5813,00$</td>
      </tr> 
      <tr>
        <th>...</th>
        <td><button class="show-me_2">Details</button></td>
      </tr>
    </table>
  </div>
  <div class="little3">
    <table>
      <tr>
        <th>...</th>
        <th>Paket 3</th>
      </tr>
        <tr>
        <th>Updating & formatting pages</th>
        <td class="entypo-check"></td>
        </tr>
      <tr>
        <th>Update text</th>
        <td class="entypo-check"></td>
</tr>
      <tr>
        <th>Update Images</th>
        <td class="entypo-check"></td>
   </tr>
      <tr>
        <th>Proofing & Spell checking </th>
        <td class="entypo-check"></td>
 </tr>
      <tr>
        <th>Updates to the website</th>
        <td class="entypo-check"></td>
      </tr>
      <tr>
        <th>Testing updates on the live site</th>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>Fixing broken links</th>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Fixing & Testing web-forms</th>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>Internal link analysis</th>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>Update sitemap.xml & robots.txt</th>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Meta tag Optimization</th>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>Image Optimization</th>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>Monthly SEO & Keyword update reports</th>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>Page size & loading time optimization</th>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>URL renaming & redirects</th>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>Competitive Analysis</th>
        <td class="entypo-check"></td>
      </tr>
       <tr>
        <th>W3C Validation</th>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Google & Bing Site Map Creation</th>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Robot.txt file creation</th>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Custom 404 error page setup</th>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Integrating Google Webmaster Tools</th>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Google Analytics setup</th>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Google local business listing</th>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>FREE Live chat application</th>
        <td class="entypo-check"></td>
      </tr>
        <tr>
        <th>Monthly website backup</th>
        <td class="entypo-check"></td>
      </tr>
      <tr>
        <th>TAT(Working days)</th>
        <td>3 days</td>
      </tr>
      <tr>
        <th>On site meeting per year</th>
        <td>2</td>
      </tr>

      <tr>
        <th>Price</th>
        <td>2134,00$</td>
    </tr> 
      <tr>
        <th>...</th>
        <td><button class="show-me_3">Details</button></td>
      </tr>
    </table>
  </div>

  <button class="next-table entypo-right-dir"></button>
  <button class="prev-table entypo-left-dir"></button>

</div>
  <!-- The backside containers -->  
  <div class="back first">
    <h1>Paket 1</h1>
    <p>
    </p>
    <button class="hide-me_1"></button>
  </div>
  <div class="back second">
    <h1>Paket 2</h1>
    <p> </p>
    <button class="hide-me_2"></button>
  </div>
  <div class="back third">
    <h1>Paket 3</h1>
    <p>
    </p>
    <button class="hide-me_3"></button>
  </div>

</div><!-- The end of the box -->  

</section>
＆＃13;
＆＃13;
＆＃13;

我试图在bootstrap表中做同样的事情但是在移动设备中它并不适合。请指导我如何使用支票执行此响应表，取消使其在移动和桌面功能。

0 个答案:

没有答案
相关问题
最新问题