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 相关文章推荐
javascript options属性集合操作代码
Dec 28 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
Sep 08 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
11款新鲜的jQuery插件[附所有demo下载]
Jan 24 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
js实现一个简易计算器
Mar 30 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
删除无限级目录与文件代码共享
2006/07/12 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
2007/11/30 Javascript
点图片上一页下一页翻页效果
2008/07/09 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
python 将字符串转换成字典dict
2013/03/24 Python
Python实现通过继承覆盖方法示例
2018/07/02 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
如何唤起类中的一个方法
2013/11/29 面试题
餐饮业创业计划书范文
2014/01/06 职场文书
违纪检讨书2000字
2014/02/08 职场文书
房屋产权证明书
2015/06/19 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书