bootstrap学习2

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@section RenderCSS{
.marLeft0{margin-left:0px;}
}
@section RenderCSSFile{
<link rel="stylesheet" href="http://wbpreview.com/previews/WB0F35928/css/unicorn.main.css" />
}
@section RenderJQReady{
var log = function(s){
window.console && console.log(s)
}
$('.nav-tabs a:last').tab('show')
$('a[data-toggle="tab"]').on('show', function (e) {
log(e)
})
$('a[data-toggle="tab"]').on('shown', function (e) {
log(e.target)
log(e.relatedTarget)
})

$('.carousel').carousel();
}

<div class="row marLeft0">
<div class="span5 marLeft0">
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">首页</a></li>
<li><a href="#profile" data-toggle="tab">介绍</a></li>
<li><a href="#messages" data-toggle="tab">消息</a></li>
<li><a href="#settings" data-toggle="tab">设置</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">111</div>
<div class="tab-pane" id="profile">2222</div>
<div class="tab-pane" id="messages">333</div>
<div class="tab-pane" id="settings">444</div>
</div>
</div>

<div class="span7 marLeft0">
<div id="myCarousel" class="carousel slide" style="width:99%;">
<div class="carousel-inner">
<div class="item active left">
<img src="http://wrongwaycn.github.com/bootstrap/docs/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
<div class="carousel-caption">
<h4>即使杀光所有报晓的公鸡，天，还是会亮的</h4>
<p>
昨天是李尚平被枪杀10周年，我发的那条纪念微博，成为我的新浪微博账号最后一条微博。
</p>
</div>
</div>
<div class="item next left">
<img src="http://wrongwaycn.github.com/bootstrap/docs/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
<div class="carousel-caption">
<h4>如果人民不欢迎我们，就该我们下台了</h4>
<p>
【胡耀邦语录】①历史是混不过去的。②民主、自由、平等、博爱等观念是人类精神的一大解放。③如果人民不欢迎我们，
</p>
</div>
</div>
<div class="item">
<img src="http://wrongwaycn.github.com/bootstrap/docs/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
<div class="carousel-caption">
<h4>国家像需要空气一样需要变革</h4>
<p>
据戈尔巴乔夫基金会新闻处通报，俄总统梅德韦杰夫今天向前苏联总统戈尔巴乔夫颁发圣徒安德烈
</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>

<div class="row marLeft0">
<div class="span5 marLeft0">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
国土问题
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner">
前一段时间一个段子说，某国的网民在因国土问题与中国网民争吵时说，我要打到北京，中国的网民非常淡然地回应，就你那经济水平，交得起过路费吗？这两天新的段子说，李白要是活在今天的话，估计一大半以上他的诗根本写不出来，因为名山大川的门票他根本买不起。
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
门票问题
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner">
目前，中国半数5A级景区门票达到100元，黄山门票10年来由80元涨至230元。山东曲阜称，与同类景区相比收费较低，仅收150元，不涨票价就丢身价。曲阜的孔庙、孔府和孔林，年收入1.5亿元左右，全部上缴了地方财政，但景区维护成本从未公开。
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
超生罚款
</a>
</div>
<div id="collapseThree" class="accordion-body in" style="height: auto;">
<div class="accordion-inner">
学者杨支柱因生二胎被取消公职，并罚款24万余元。他称，计生罚款以前直接叫超生罚款，入世后改成“社会抚养费”。根据9省市超生罚款的平均数，全国31个省市每年征收的超生罚款可高达279亿元。其中大城市将该收入上缴财政，而地方则分配混乱，部分罚款去向成谜。
</div>
</div>
</div>
</div>
</div>
<div class="span7 marLeft0">

</div>
</div>

<div class="row-fluid">
<div class="span6">
<div class="widget-box">
<div class="widget-title"><span class="icon"><i class="icon-file"></i></span><h5>Recent Posts</h5><span title="54 total posts" class="label label-info tip-left">54</span></div>
<div class="widget-content nopadding">
<ul class="recent-posts">
<li>
<div class="user-thumb">
<img width="40" height="40" alt="User" src="img/demo/av2.jpg">
</div>
<div class="article-post">
<span class="user-info"> By: neytiri on 2 Aug 2012, 09:27 AM, IP: 186.56.45.7 </span>
<p>
<a href="#">Vivamus sed auctor nibh congue, ligula vitae tempus pharetra...</a>
</p>
<a href="#" class="btn btn-primary btn-mini">Edit</a> <a href="#" class="btn btn-success btn-mini">Publish</a> <a href="#" class="btn btn-danger btn-mini">Delete</a>
</div>
</li>
<li>
<div class="user-thumb">
<img width="40" height="40" alt="User" src="img/demo/av3.jpg">
</div>
<div class="article-post">
<span class="user-info"> By: john on on 24 Jun 2012, 04:12 PM, IP: 192.168.24.3 </span>
<p>
<a href="#">Vivamus sed auctor nibh congue, ligula vitae tempus pharetra...</a>
</p>
<a href="#" class="btn btn-primary btn-mini">Edit</a> <a href="#" class="btn btn-success btn-mini">Publish</a> <a href="#" class="btn btn-danger btn-mini">Delete</a>
</div>
</li>
<li>
<div class="user-thumb">
<img width="40" height="40" alt="User" src="img/demo/av1.jpg">
</div>
<div class="article-post">
<span class="user-info"> By: michelle on 22 Jun 2012, 02:44 PM, IP: 172.10.56.3 </span>
<p>
<a href="#">Vivamus sed auctor nibh congue, ligula vitae tempus pharetra...</a>
</p>
<a href="#" class="btn btn-primary btn-mini">Edit</a> <a href="#" class="btn btn-success btn-mini">Publish</a> <a href="#" class="btn btn-danger btn-mini">Delete</a>
</div>
</li>
<li class="viewall">
<a title="View all posts" class="tip-top" href="#"> + View all + </a>
</li>
</ul>
</div>
</div>
</div>
<div class="span6">
<div class="widget-box">
<div class="widget-title"><span class="icon"><i class="icon-comment"></i></span><h5>Recent Comments</h5><span title="88 total comments" class="label label-info tip-left">88</span></div>
<div class="widget-content nopadding">
<ul class="recent-comments">
<li>
<div class="user-thumb">
<img width="40" height="40" alt="User" src="img/demo/av1.jpg">
</div>
<div class="comments">
<span class="user-info"> User: michelle on IP: 172.10.56.3 </span>
<p>
<a href="#">Vivamus sed auctor nibh congue, ligula vitae tempus pharetra...</a>
</p>
<a href="#" class="btn btn-primary btn-mini">Edit</a> <a href="#" class="btn btn-success btn-mini">Approve</a> <a href="#" class="btn btn-warning btn-mini">Mark as spam</a> <a href="#" class="btn btn-danger btn-mini">Delete</a>
</div>
</li>
<li>
<div class="user-thumb">
<img width="40" height="40" alt="User" src="img/demo/av3.jpg">
</div>
<div class="comments">
<span class="user-info"> User: john on IP: 192.168.24.3 </span>
<p>
<a href="#">Vivamus sed auctor nibh congue, ligula vitae tempus pharetra...</a>
</p>
<a href="#" class="btn btn-primary btn-mini">Edit</a> <a href="#" class="btn btn-success btn-mini">Approve</a> <a href="#" class="btn btn-warning btn-mini">Mark as spam</a> <a href="#" class="btn btn-danger btn-mini">Delete</a>
</div>
</li>
<li>
<div class="user-thumb">
<img width="40" height="40" alt="User" src="img/demo/av2.jpg">
</div>
<div class="comments">
<span class="user-info"> User: neytiri on IP: 186.56.45.7 </span>
<p>
<a href="#">Vivamus sed auctor nibh congue, ligula vitae tempus pharetra...</a>
</p>
<a href="#" class="btn btn-primary btn-mini">Edit</a> <a href="#" class="btn btn-success btn-mini">Approve</a> <a href="#" class="btn btn-warning btn-mini">Mark as spam</a> <a href="#" class="btn btn-danger btn-mini">Delete</a>
</div>
</li>
<li class="viewall">
<a title="View all comments" class="tip-top" href="#"> + View all + </a>
</li>
</ul>
</div>
</div>
</div>
</div>