如何創建響應式z版式

我想使用引導程序創建響應式z版式頁面。問題是移動時，佈局是不同的。如何創建響應式z版式

以下是我HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <div class="col-md-4"><img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" style="width:100%"></div> 
       <div class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
      </div> 
     </div> 
    </div> 
    <br> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <div class="col-md-8 z-first">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
       cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
       proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
       <div class="col-md-4 z-second"><img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder" style="width:100%"></div> 
      </div> 
     </div> 
    </div> 
</div>

請參考 without JS和with JS。有沒有辦法沒有JS。

來源

2014-11-07 Mifas

從未使用Bootstrap，但恕我直言，我發現HTML標記有點複雜和語義差。

我敢肯定，它不是完美的，但我更喜歡用這種標記的工作：

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="Reset.css"> 
     <link rel="stylesheet" href="Style.css"> 
    </head> 
    <body> 
     <section> 
      <img src='YourPicture.png'> 
      </img> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </p> 
     </section> 
     <section> 
      <img src='YourPicture.png'> 
      </img> 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
      </p> 
     </section> 
    </body> 
</html>

這裏有一個準系統的style.css文件需要照顧的響應式佈局部分中你想要的方式對於此標記：

section 
{ 
    clear: both; 
    display: block; 
} 

img 
{ 
    display: block; 
} 

p 
{ 
    display: block; 
} 

section:first-child img 
{ 
    float: left; 
} 

section:nth-child(2) img 
{ 
    float: right; 
} 

@media (max-width: 768px) 
{ 
    section:first-child img 
    { 
     width: 100%; 
     float: none; 
    } 

    section:nth-child(2) img 
    { 
     width: 100%; 
     float: none; 
    } 
}

沒有Javascript :)。

來源

2014-11-07 03:51:13 Magnitus

如何創建響應式z版式

回答

相關問題