輕量級超級簡單的element的layout柵格化佈局

晚星晨發表於2019-10-19

輕量級超級簡單的element的layout柵格化佈局

基於element主題提取出來的. 輕量級超級簡單的element的layout柵格化佈局 在你使用了element框架時不需要使用這個框架 Layout 佈局 通過基礎的 24 分欄,迅速簡便地建立佈局。

使用

    <head>
        <link rel="stylesheet" href="cc-layout-simple.css">
    </head>

     <div title="基礎佈局">
        <h3>基礎佈局</h3>
        <p>使用單一分欄建立基礎的柵格佈局</p>
        <div class="cc-row">
          <div class="cc-col-24"><div class="demo-test bg-1"></div></div>
        </div>
        <div class="cc-row">
          <div class="cc-col-12"><div class="demo-test bg-1"></div></div>
          <div class="cc-col-12"><div class="demo-test bg-2"></div></div>
        </div>
        <div class="cc-row">
          <div class="cc-col-8"><div class="demo-test bg-1"></div></div>
          <div class="cc-col-8"><div class="demo-test bg-2"></div></div>
          <div class="cc-col-8"><div class="demo-test bg-3"></div></div>
        </div>
        <div class="cc-row">
          <div class="cc-col-6"><div class="demo-test bg-1"></div></div>
          <div class="cc-col-6"><div class="demo-test bg-2"></div></div>
          <div class="cc-col-6"><div class="demo-test bg-3"></div></div>
          <div class="cc-col-6"><div class="demo-test bg-1"></div></div>
        </div>
        <div class="cc-row">
          <div class="cc-col-4"><div class="demo-test bg-1"></div></div>
          <div class="cc-col-4"><div class="demo-test bg-2"></div></div>
          <div class="cc-col-4"><div class="demo-test bg-3"></div></div>
          <div class="cc-col-4"><div class="demo-test bg-1"></div></div>
          <div class="cc-col-4"><div class="demo-test bg-2"></div></div>
          <div class="cc-col-4"><div class="demo-test bg-3"></div></div>
        </div>
     </div>

複製程式碼

演示地址

GitHub倉庫

歡迎給星星謝謝了

輕量級超級簡單的element的layout柵格化佈局

輕量級超級簡單的element的layout柵格化佈局

輕量級超級簡單的element的layout柵格化佈局

相關文章