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的学习才刚刚起步。

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

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

    web前端前端开发

    相关文章

    Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...
    如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
    要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
    是的,可以将status设置为布尔类型,这样可以在前端使用复选...
    前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
    起步导入:<linkrel="stylesheet"href="b...