我接着前面的一篇布局接着写,前一篇我已经完成了导航条和广告的布局。
开始继续码起来:
我想最终实现的效果图是这样的,如下:分了三个页面截图,太大了:
接着上次的未完成的,继续码起来:
第五步、增加栅格系统,我选择了三列的布局col-md-4;满格是12,4是12的三分之一,还可以响应式布局,设置多个栅格:
<div class="container" id="tag_container"> <div class="row"> <div class="col-md-4"> <img src="image/3.jpg" alt="animal1" width="200px" height="200px"> <h2>animal1</h2> <p>林卡酒店刚说风寒看到个后面发的搜房大机构老夫</p> <p><a href="#">click me</a></p> </div> <div class="col-md-4"> <img src="image/3.jpg" alt="animal1" width="200px" height="200px"> <h2>animal1</h2> <p>林卡酒店刚说风寒看到个后面发的搜房大机构老夫</p> <p><a href="#">click me</a></p> </div> <div class="col-md-4"> <img src="image/3.jpg" alt="animal1" width="200px" height="200px"> <h2>animal1</h2> <p>林卡酒店刚说风寒看到个后面发的搜房大机构老夫</p> <p><a href="#">click me</a></p> </div> </div> </div>
1)栅格必须在container 或 container-fluent (满屏)的div里面,这样可以自动赋予合适的排列(aligment)和内补(padding)。
2)使 id为"tag_container",类为col-md-4的部分居中对齐:
#tag_container .col-md-4{ text-align: center; }
第六步、设置一行间距,分割上下部分
<hr class="divider"></hr>
css为
hr .divider{ margin:40px; }
第七步、标签页的制作,下图是三个标签页的效果图:
1)标签页的原理:
<ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#an1" role="tab" data-toggle="tab">animal1</a></li> <li><a href="#an2" role="tab" data-toggle="tab">animal2</a></li> <li><a href="#an3" role="tab" data-toggle="tab">animal3</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="an1"> </div> <div class="tab-pane" id="an2"> </div> <div class="tab-pane" id="an3"></div> </div>
标签页结构是:ul列表声明标签,并且标注class="nav nav-tabs" role="tablist"
li标签里的a链接标注role="tab" data-toggle="tab",这样才可以具有标签页打开页面的功能,href="#an1"每个标签页的href分别链接到下面的显示布局
展开的布局结构:<div class="tab-content">里面,每个标签页一个panel ,注意id与上面的标签页相互映射,为了可以打开该页面。<div class="tab-pane" id="an3">
2)增加标签页面里面的布局
<ul class="nav nav-tabs" role="tablist"> <li class="active"><a href="#an1" role="tab" data-toggle="tab">animal1</a></li> <li><a href="#an2" role="tab" data-toggle="tab">animal2</a></li> <li><a href="#an3" role="tab" data-toggle="tab">animal3</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="an1"> <div class="row feature"> <div class="col-md-7"> <h2 class="feature-heading">Animal1 <span class="text-muted">疯狂动物城</span></h2> <p class="lead">ajdkgjfd咯见到噶是开发的价格啊的时间?技术的飞机如果大使馆四国警方日结果的代价K歌人工吊丧irjeigrugitajdokgjijrgi</p> </div> <div class="col-md-5"> <img class="feature-image img-responsive" src="image/1.jpg"> </div> </div> </div> <div class="tab-pane" id="an2"> <div class="row feature"> <div class="col-md-7"> <h2 class="feature-heading">Animal2 <span class="text-muted">疯狂动物城</span></h2> <p class="lead">ajdkgjfd咯见到噶是开发的价格啊的时间?技术的飞机如果大使馆四国警方日结果的代价K歌人工吊丧irjeigrugitajdokgjijrgi</p> </div> <div class="col-md-5"> <img class="feature-image img-responsive" src="image/2.jpg"> </div> </div> </div> <div class="tab-pane" id="an3"> <div class="row feature"> <div class="col-md-7"> <h2 class="feature-heading">Animal3 <span class="text-muted">疯狂动物城</span></h2> <p class="lead">ajdkgjfd咯见到噶是开发的价格啊的时间?技术的飞机如果大使馆四国警方日结果的代价K歌人工吊丧irjeigrugitajdokgjijrgi</p> </div> <div class="col-md-5"> <img class="feature-image img-responsive" src="image/3.jpg"> </div> </div> </div>
1)设置标签页的上边距
.feature{ padding: 30px 0 }
2)设置标签页的题目字体等
.feature-heading{ font-size: 50px; color:#2a6496; margin-top: 120px; }
3)设置标签页的副标题格式:
.feature-heading .text-muted{ font-size: 28px; color: #999; }
第八步、增加底部版权声明,效果图如下:
<footer> <p class="pull-right"><a href="#top">回到顶部</a></p> <p>@2016 rongyu制</p> </footer>
注意:class="pull-right"可以将元素拉到右侧,这是bootstrap的css的一个功能。
第九步、增加关于的弹出框按钮:
<div class="modal fade" id="about"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title">关于</h4> </div> <div class="modal-body"> <p>《疯狂动物城》由迪士尼影业出品的3D动画片,由里奇·摩尔、拜恩·霍华德及杰拉德·布什联合执导,金妮弗·古德温、杰森·贝特曼、夏奇拉、艾伦·图代克、伊德瑞斯·艾尔巴、J·K·西蒙斯等加盟配音[1] 。</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">了解了</button> <!-- <button type="button" class="btn btn-primary">Save changes</button> --> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal -->
1)静态弹窗口,分为三部分,标题,窗体和按钮;其中,我们只需要一个按钮,另一个注释掉了。并增加 id=about,方便下面定位;
2)在关于导航条的菜单栏,增加toggle链接,data-toggle="modal",id对应data-target="#about":
<li><a href="#" data-toggle="modal" data-target="#about">关于</a></li>
第十步、菜单定位
点击导航条的特点栏目,就会打开对应的标签页;需要一段js代码实现
<script> $(document).ready(function() { $("#demo-navbar .dropdown-menu a").click(function(){ var href = $(this).attr('href'); // alert(href); $("#tab-list a[href='" + href +"']").tab("'show"); }); }); </script>
1)通过id定位 $("#demo-navbar .dropdown-menu a")导航,设置点击事件;
2)定位到$("#tab-list a[href='" + href +"']")的打开标签页的方法tab("'show")。
这样,bootstrap的学习才刚刚起步。
如果大家还想深入学习,可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
Bootstrap前端开发案例二
- Author -
rongyux声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@