:::

4-3 bootstrap2.html 流動版面XOOPS布局練習

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap 練習檔3</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-fluid">
      <div class="row-fluid">
        <div class="span12">
          header
        </div>
      </div>

      <div class="row-fluid">

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

        <div class="span6">

          <div class="row-fluid">
            <div class="span12">
              上中
            </div>
          </div>

          <div class="row-fluid">
            <div class="span6">
              上中左
            </div>
            <div class="span6">
              上中右
            </div>
          </div>

          <div class="row-fluid">
            <div class="span12">
              主內容區
            </div>
          </div>

          <div class="row-fluid">
            <div class="span12">
              下中
            </div>
          </div>


          <div class="row-fluid">
            <div class="span6">
              下中左
            </div>
            <div class="span6">
              下中右
            </div>
          </div>

        </div>

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

      <div class="row-fluid">
        <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>

 


:::

搜尋

QR Code 區塊

https%3A%2F%2Ftad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D922%26tbsn%3D32

書籍目錄

展開 | 闔起

線上使用者

56人線上 (26人在瀏覽線上書籍)

會員: 0

訪客: 56

更多…