Bootstrap前端开发案例二

时间:2020-05-15 rongyux 人气:0

我接着前面的一篇布局接着写，前一篇我已经完成了导航条和广告的布局。

开始继续码起来：
我想最终实现的效果图是这样的，如下：分了三个页面截图，太大了：

接着上次的未完成的，继续码起来：
第五步、增加栅格系统，我选择了三列的布局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学习教程

加载全部内容