:::

4-4 bootstrap3.html 流動版面網頁排版練習

內容來源:http://www.weide.org.tw/magtxt3/42-mag-002/79-2010-12-02-06-12-35.html

<!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">

    <style>
      body{
        background: #fcfcfc url(images/d.gif);
        font-family:微軟正黑體;
        font-size:16px;
      }

      .img-rounded{
        box-shadow: 2px 2px 4px 1px gray;
      }

      .wrap{
        margin:20px auto;
        background-color: #fff;
        box-shadow: 2px 2px 4px 1px gray;
        border-radius: 5px;
      }

      #left-zone{
        margin-left:20px;
      }

      #right-zone{
        margin-right:20px;
      }

      #footer{
        background-color: gray;
        min-height: 80px;
      }
    </style>


  </head>
  <body>

    <div class="container">
      <div class="wrap">

        <div class="row-fluid">
          <div class="span12">
            <img src="images/slide_3_4.png" class="img-rounded">
          </div>
        </div>

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

        <div class="row-fluid">
          <div class="span3">
            <div id="left-zone">
              <div class="hero-unit">
                詩詞賞析
              </div>
            </div>
          </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 class="page-header">
                  <h1>楊慎《臨江仙》<small>文‧趙秀華</small></h1>
                </div>
                <blockquote>
                  <p>
                    滾滾長江東逝水,浪花<abbr title="淘光、淘乾淨、一點不剩">淘盡</abbr><span class="label label-info">1</span>英雄。<br>
                    是非成敗轉頭空。<br>
                    青山依舊在,幾度夕陽紅。<br>
                    <abbr title="指老人">白髮</abbr><span class="label label-info">2</span><abbr title="這裡是名詞當動詞用,打魚、砍柴的意思。">漁樵</abbr><span class="label label-info">3</span>江<abbr title="音同「主」,江上的小島。">渚</abbr><span class="label label-info">4</span>上,慣看秋月春風。<br>
                    一壺<abbr title="濁 :不清澈,相對於「清」。濁酒 :用糯米、黃米等釀製的酒,酒較混濁。">濁酒</abbr><span class="label label-info">5</span>喜相逢。<br>
                    古今多少事,都付笑談中。
                  </p>
                  <small>楊慎《臨江仙》</small>
                </blockquote>

                <ul class="unstyled">
                  <li><span class="label label-info">1</span> 淘盡:淘光、淘乾淨、一點不剩。</li>
                  <li><span class="label label-info">2</span> 白髮:指老人。</li>
                  <li><span class="label label-info">3</span> 漁樵:這裡是名詞當動詞用,打魚、砍柴的意思。</li>
                  <li><span class="label label-info">4</span> 渚:音同「主」,江上的小島。</li>
                  <li><span class="label label-info">5</span> 濁 :不清澈,相對於「清」。濁酒 :用糯米、黃米等釀製的酒,酒較混濁。</li>
                </ul>

                <div class="alert alert-info">
                  <button type="button" class="close" data-dismiss="alert">×</button>
                  長江波濤洶湧的向東流,一去不回頭,<br>多少英雄豪傑都像翻滾的浪花一樣,消逝在歷史長河中。<br>無論是對或錯,成功或失敗,轉眼間就不存在。<br>只有青山依然存在,<br>歲月依然流轉,日升日落依舊。<br>白髮老翁在江上捕魚、小島上砍柴,<br>早已習慣春夏秋冬四季輪轉。<br>難得和老朋友相見,一起高興的喝幾杯酒,<br>歷史上發生的多少大事,只不過是下酒的閒談話題罷了。
                </div>

              </div>
            </div>

            <div class="row-fluid">
              <div class="span12">
                <table class="table table-bordered table-hover table-condensed">
                <tr><th>表格標題1</th>  <th>表格標題2</th>  <th>表格標題3</th>  <th>表格標題4</th></tr>
                <tr class="success"><td>表格內容1</td>  <td>表格內容2</td>  <td>表格內容3</td>  <td>表格內容4</td></tr>
                <tr class="info"><td>表格內容1</td>  <td>表格內容2</td>  <td>表格內容3</td>  <td>表格內容4</td></tr>
                </table>
              </div>
            </div>


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

          </div>

          <!--右區域開始-->
          <div class="span3">
            <div id="right-zone">
              <div class="well well-small">
                <div class="row-fluid">
                  <div class="span3">
                    <img src="images/Yang_Shen.png" class="img-circle">
                  </div>
                  <div class="span8 offset1">
                    <div class="text-info">
                      <abbr title="楊慎">楊慎</abbr>
                    </div>
                    <div class="muted">追諡「文憲」</div>
                    <div class="text-success">著有《升菴集》</div>
                  </div>
                </div>
                <p>
                  一四八八年至一五五九年;約等同西方文藝復興三巨匠在世之時)明代文學家。字用修,號升庵。新都(今成都)人。明武宗正德六年(一五一一年),楊慎錄取為進士的第一名,是蜀中地區(四川)在明朝的唯一一名狀元。楊慎性情剛直,遇事直言直書。明世宗嘉靖三年(一五二四年),因「議大禮」被貶至雲南永昌衛(今保山),居住三十幾年,死於當地。後由明熹宗天啟年間(一六二一至一六二七年。</p>
                  <p>楊慎博學廣識,《明史》本傳稱其著述豐富,為明代第一。 他的長篇彈唱敘述歷史的作品《二十一史彈詞》,敘述三代至元及明末歷史,文筆流暢,廣為傳誦。<br>羅貫中《三國演義》開卷前面的一首小詞,就是楊慎作的這首《臨江仙》。</p>
                </p>
              </div>
            </div>
          </div>
          <!--右區域結束-->

        </div>

        <div class="row-fluid">
          <div class="span12">
            <div id="footer"></div>
          </div>
        </div>
      </div>
    </div>

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

  </body>
</html>

 


:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

20人線上 (7人在瀏覽線上書籍)

會員: 0

訪客: 20

更多…