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

第六步、

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

第七步、

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

1)标签页的原理:

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

li标签里的a链接标注role="tab" data-toggle="tab",这样才可以具有标签页打开页面功能,href="#an1"每个标签页的href分别链接到下面的显示布局 展开的布局结构:


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

1)设置标签页的上边距

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

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

第八步、

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

@2016 rongyu制

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

第九步、

增加关于的弹出框按钮:

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

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

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

    原文链接:https://www.f2er.com/bootstrap/47784.html
    web前端前端开发

    猜你在找的Bootstrap相关文章