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 入门教程 [翻译] 推荐
Aug 17 Javascript
IE下js调试工具Companion.JS
Oct 15 Javascript
jquery中动态效果小结
Dec 16 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
javascript每日必学之基础入门
Feb 16 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
PHP生成月历代码
2007/06/14 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
Vue组件模板的几种书写形式(3种)
2020/02/19 Javascript
Python设计模式之单例模式实例
2014/04/26 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
美国在线鞋类零售商:LifeStride
2019/06/09 全球购物
致跳高运动员广播稿
2014/01/13 职场文书
副厂长岗位职责
2014/02/02 职场文书
工作作风承诺书
2014/08/30 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
银行贷款委托书范本
2014/10/11 职场文书
自信主题班会
2015/08/14 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
基于Python实现股票收益率分析
2022/04/02 Python
排查MySQL生产环境索引没有效果
2022/04/11 MySQL