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 相关文章推荐
jquery 学习之一 对象访问
Nov 23 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
详解Javascript动态操作CSS
Dec 08 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
js实现自定义右键菜单
May 18 Javascript
深入理解Vue的数据响应式
May 15 Vue.js
36个正则表达式(开发效率提高80%)
Nov 17 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 实现公历日期与农历日期的互转换
2017/09/13 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
原生js结合html5制作小飞龙的简易跳球
2015/03/30 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
js密码强度检测
2016/01/07 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
详解Vite的新体验
2021/02/22 Javascript
python中zip和unzip数据的方法
2015/05/27 Python
mac系统安装Python3初体验
2018/01/02 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
推荐信格式范文
2014/05/09 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
义卖募捐活动总结
2015/05/09 职场文书
《失物招领》教学反思
2016/02/20 职场文书