:::
4-3 bootstrap2.html 流動版面XOOPS布局練習
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>
