Bootstrap шаблон вопрос

Что я хотел бы достичь с 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 здесь, чтобы помочь мне? .............................................

источник

2013-11-28 Sergie Waterhouse

Проверьте fiddle

Хитрость заключается в том воспользоваться Отзывчивой утилиты

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

источник

2013-11-28 15:38:47 ppollono

спасибо. Ответственные утилиты решили мою проблему. Теперь я могу создать свой шаблон с вашим решением. –

Bootstrap шаблон вопрос

ответ

Смежные вопросы