:::

4-2 bootstrap2.html 固定版面XOOPS布局練習

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap 練習檔2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="span12">
          header
        </div>
      </div>

      <div class="row">
        <div class="span3">
          左區域
        </div>
        <div class="span6">

          <div class="row">
            <div class="span6">
              上中
            </div>
          </div>

          <div class="row">
            <div class="span3">
              上中左
            </div>
            <div class="span3">
              上中右
            </div>
          </div>

          <div class="row">
            <div class="span6">
              主內容區
            </div>
          </div>

          <div class="row">
            <div class="span6">
              下中
            </div>
          </div>


          <div class="row">
            <div class="span3">
              下中左
            </div>
            <div class="span3">
              下中右
            </div>
          </div>

        </div>
        <div class="span3">
          右區域
        </div>
      </div>

      <div class="row">
        <div class="span12">
          footer
        </div>
      </div>
    </div>


    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

 


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

15人線上 (3人在瀏覽線上書籍)

會員: 0

訪客: 15

更多…