Bootstrap模板问题

时间:2013-11-28 14:42:15

标签: html css twitter-bootstrap

我想用Bootstrap完成什么:

desktop view
+-------------------------------------------+
|          |                                |
|          |                                |          
|          |                                |
|          |                                |
|          |                                |
|          |                                |
| sidebar  |            content             |
|accordion |                                |
|  menu    |                                |
|          |                                |
|          |                                |
|          |                                |
|          |                                |
|----------|                                |
| submenu  |                                |
+-------------------------------------------+


tablet view
+-------------------------------+
|     |        submenu          |
|     |-------------------------|          
|     |                         |
|     |                         |
|     |                         |
|     |                         |
|side |        content          |
|bar  |                         |
|     |                         |
|     |                         |
|     |                         |
|     |                         |
|     |                         |
|     |                         |
|     |                         |
+-------------------------------+


phone view
+--------------+
|   submenu    |
|--------------|          
|   sidebar    |
|  accordion   |
|    toogle    |
|--------------|
|              |
|              |
|              |
|   content    |
|              |
|              |
|              |
|              |
|              |
+--------------+

到目前为止我做了什么:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title></title>
    <!-- Bootstrap core CSS -->
    <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
        <style>
          .row {
          margin-bottom: 20px;
          }
          .row .row {
          margin-top: 10px;
          margin-bottom: 0;
          }
          [class*="col-"] {
          padding-top: 15px;
          padding-bottom: 15px;
          background-color: #eee;
          border: 1px solid #ddd;
          background-color: rgba(86,61,124,.15);
          border: 1px solid rgba(86,61,124,.2);
          } 


        </style>
  </head>

  <body>

  <div class="container">
      <div class="row">
          <div class="col-md-4 col-sm-2 col-xs-12">
              side bar
              <div class="row">
                  <div class="col-md-12 col-xs-12">sub menu</div>
              </div>
          </div>
        <div class="col-md-8 col-sm-10 col-xs-12">content</div>
      </div>
  </div>





    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
  </body>
</html>

是否真的可以使用Bootstrap制作此样本模板?这里有任何Bootstrap大师来帮助我吗? .............................................

1 个答案:

答案 0 :(得分:1)

选中此fiddle

诀窍是利用响应式实用程序

http://getbootstrap.com/css/#responsive-utilities