Bootstrap前端开发案例二
|
我接着前面的一篇布局接着写，我已经完成了导航条和广告的布局。 开始继续码起来： 我想最终实现的效果图是这样的，如下：分了三个页面截图，太大了：
接着上次的未完成的，继续码起来： 第五步、增加栅格系统，我选择了三列的布局col-md-4;满格是12，4是12的三分之一，还可以响应式布局，设置多个栅格：animal1
林卡酒店刚说风寒看到个后面发的搜房大机构老夫 animal1
林卡酒店刚说风寒看到个后面发的搜房大机构老夫 animal1
林卡酒店刚说风寒看到个后面发的搜房大机构老夫 1）栅格必须在container 或 container-fluent （满屏）的div里面，这样可以自动赋予合适的排列（aligment）和内补（padding）。 2）使 id为"tag_container"，类为col-md-4的部分居中对齐： 第六步、设置一行间距，分割上下部分 css为第七步、标签页的制作,下图是三个标签页的效果图：1）标签页的原理： <div class="tab-content"> 标签页结构是：ul列表声明标签，并且标注 li标签里的a链接标注role="tab" data-toggle="tab"，这样才可以具有标签页打开页面的功能，href="#an1"每个标签页的href分别链接到下面的显示布局
展开的布局结构：class="pull-right"可以将元素拉到右侧，这是bootstrap的css的一个功能。
<div class="tab-content">
@2016 rongyu制 第九步、增加关于的弹出框按钮：《疯狂动物城》由迪士尼影业出品的3D动画片，由里奇·摩尔、拜恩·霍华德及杰拉德·布什联合执导，金妮弗·古德温、杰森·贝特曼、夏奇拉、艾伦·图代克、伊德瑞斯·艾尔巴、J·K·西蒙斯等加盟配音[1] 。
1）静态弹窗口，分为三部分，标题，窗体和按钮；其中，我们只需要一个按钮，另一个注释掉了。并增加 id=about，方便下面定位； 2）在关于导航条的菜单栏，增加toggle链接，data-toggle="modal"，id对应data-target="#about"： 第十步、菜单定位
点击导航条的特点栏目，就会打开对应的标签页；需要一段js代码实现
$(document).ready(function() {
$("#demo-navbar .dropdown-menu a").click(function(){
var href = $(this).attr('href');
// alert(href);
$("#tab-list a[href='" + href +"']").tab("'show");
});
});
1）通过id定位 $("#demo-navbar .dropdown-menu a")导航，设置点击事件； 2）定位到$("#tab-list a[href='" + href +"']")的打开标签页的方法tab("'show")。 这样，bootstrap的学习才刚刚起步。 如果大家还想深入学习，可以点击进行学习，再为大家附一个精彩的专题： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
