使用Bootstrap重疊設計3

嘿，我正在做Bootstrap Grid系統的第一步。使用Bootstrap重疊設計3

我想知道如何創建與電網系統以下設計爲大型顯示器： Layout

我很困惑如何創建使用正確的語法和使用權的網格系統的重疊部分。

你有什麼建議如何開始？

在此先感謝

來源

2015-06-21 user1137370

那裏嗨，你可以是一個更加清楚一點到你要在這裏幫助這部分/彩色塊，這樣很容易爲人們提供幫助。把你的代碼放到目前爲止，所以有人不必從頭開始。你問這裏只有2個暗藍色和1個深綠色的塊嗎？ – AngularJR

嗯，我在問每個重疊的部分。例如。頂部的白色，中間的兩個藍色和綠色的等等。我需要一個摘錄來開始使用網格系統。我知道如何用靜態HTML做到這一點。但我不明白如何在網格系統的背景下做到這一點。 – user1137370

我已成立了一個Fiddle here，方便您瞭解如何開始這一點。

在此代碼中，它使用幾個col-XX-XX類來幫助顯示這些div如何改變它們的位置和寬度。只是想給你一個想法。抓住窗戶，嘗試調整大小，看看它是如何工作的。

我給了2藍色和1綠色一些抵消使用col-lg-offset-6向右。
在小屏幕尺寸上，我將2藍色和1綠色的寬度改爲等寬。你現在可以讓這些div做你想要的東西。

希望這會讓你開始。

<div class="container col-lg-12"> 
     <div class="row col-xs-4 col-xs-offset-1 col-sm-2 col-sm-offset-1 col-md-2 col-md-offset-1 col-lg-2 col-lg-offset-2 block-white"> 
     </div> 
    </div><!-- /.container --> 


    <div class="container col-lg-12">  
     <div class="col-xs-8 col-xs-offset-2 col-sm-5 col-sm-offset-6 col-md-5 col-md-offset-6 col-lg-6 col-lg-offset-6 block-blue"> 
     </div> 
     <div class="col-xs-8 col-xs-offset-2 col-sm-4 col-sm-offset-6 col-md-4 col-md-offset-6 col-lg-5 col-lg-offset-6 block-blue"> 
     </div> 
     <div class="col-xs-8 col-xs-offset-2 col-sm-3 col-sm-offset-6 col-md-3 col-md-offset-6 col-lg-4 col-lg-offset-6 block-green"> 
     </div> 
    </div><!-- /.container -->

來源

2015-06-22 11:23:54 AngularJR

太棒了！這有助於我瞭解它是如何工作的！非常感謝你！ – user1137370

不客氣。 – AngularJR

使用Bootstrap重疊設計3

回答

相關問題