Bootstrap前端开发案例二


Posted in Javascript onJune 17, 2016

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

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

Bootstrap前端开发案例二 

Bootstrap前端开发案例二

Bootstrap前端开发案例二

接着上次的未完成的,继续码起来:
第五步、增加栅格系统,我选择了三列的布局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;
 }

第七步、标签页的制作,下图是三个标签页的效果图:

Bootstrap前端开发案例二

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的一个功能。

第九步、增加关于的弹出框按钮:

Bootstrap前端开发案例二

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

第十步、菜单定位

Bootstrap前端开发案例二

点击导航条的特点栏目,就会打开对应的标签页;需要一段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学习教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
Javascript 读书笔记索引贴
Jan 11 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
Javascript中replace()小结
Sep 30 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
js 上传文件预览的简单实例
Aug 16 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
vue.js实现双击放大预览功能
Jun 23 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 #Javascript
Bootstrap前端开发案例一
Jun 17 #Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 #Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 #Javascript
基于JS实现导航条flash导航条
Jun 17 #Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 #Javascript
Javascript中的数组常用方法解析
Jun 17 #Javascript
You might like
php strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
php时间函数用法分析
2016/05/28 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
原生js实现查询天气小应用
2016/12/09 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
2017/03/08 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
Python对切片命名的实现方法
2018/10/16 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
常用的HTML5列表标签
2017/06/20 HTML / CSS
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
Joules官网:女士、男士和儿童服装和鞋类
2018/10/23 全球购物
主管会计岗位职责
2014/03/13 职场文书
大学生自荐材料范文
2014/12/30 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技