微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

1)栅格必须在container 或 container-fluent (满屏)的div里面,这样可以自动赋予合适的排列(aligment)和内补(padding)。 2)使 id为"tag_container",类为col-md-4的部分居中对齐:

rush:css;"> #tag_container .col-md-4{ text-align: center; }

第六步、

设置一行间距,分割上下部分 css为

rush:css;"> hr .divider{ margin:40px; }

第七步、

标签页的制作,下图是三个标签页的效果图:

1)标签页的原理:

标签页结构是:ul列表声明标签,并且标注

li标签里的a链接标注role="tab" data-toggle="tab",这样才可以具有标签页打开页面功能,href="#an1"每个标签页的href分别链接到下面的显示布局 展开的布局结构:
标签页一个panel ,注意id与上面的标签页相互映射,为了可以打开该页面


<p class="lead">ajdkgjfd咯见到噶是开发的价格啊的时间覅技术的飞机如果大使馆四国警方日结果的代价K歌人工吊丧irjeigrugitajdokgjijrgi

heading">Animal2

heading">Animal3

1)设置标签页的上边距

rush:css;"> .feature{ padding: 30px 0 }

2)设置标签页的题目字体等

rush:css;"> .feature-heading{ font-size: 50px; color:#2a6496; margin-top: 120px; }

3)设置标签页的副标题格式:

rush:css;"> .feature-heading .text-muted{ font-size: 28px; color: #999; }

第八步、

增加底部版权声明,效果图如下:

rush:xhtml;">

注意:class="pull-right"可以将元素拉到右侧,这是bootstrap的css的一个功能。

第九步、

增加关于的弹出框按钮:

1)静态弹窗口,分为三部分,标题,窗体和按钮;其中,我们只需要一个按钮,另一个注释掉了。并增加 id=about,方便下面定位; 2)在关于导航条的菜单栏,增加toggle链接,data-toggle="modal",id对应data-target="#about":

  • 第十步、

    菜单定位

    点击导航条的特点栏目,就会打开对应的标签页;需要一段js代码实现

    rush:js;">

    1)通过id定位 $("#demo-navbar .dropdown-menu a")导航,设置点击事件; 2)定位到$("#tab-list a[href='" + href +"']")的打开标签页的方法tab("'show")。 这样,bootstrap的学习才刚刚起步。

    如果大家还想深入学习,可以点击进行学习,再为大家附一个精彩的专题:

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    web前端前端开发

    相关推荐