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 相关文章推荐
js移除事件 js绑定事件实例应用
Nov 28 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
jQuery Datatables表头不对齐的解决办法
Nov 27 jQuery
webpack构建的详细流程探底
Jan 08 Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 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调用Java对象的方法
2006/10/09 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
EXT中xtype的含义分析
2010/01/07 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
angular中使用路由和$location切换视图
2015/01/23 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
javascript实现对表格元素进行排序操作
2015/11/18 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
2017/06/13 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
python对json的相关操作实例详解
2017/01/04 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python函数的作用域及关键字详解
2019/08/20 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
pymysql模块使用简介与示例
2020/11/17 Python
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
外语系毕业生自荐信范文
2013/12/16 职场文书
清洁工岗位职责
2014/01/29 职场文书
体育之星事迹材料
2014/05/11 职场文书
平安工地汇报材料
2014/08/19 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
自查自纠整改报告
2014/11/06 职场文书
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python