Bootstrap前端开发案例二

Bootstrap前端开发案例二

我接着前面的一篇布局接着写，前一篇我已经完成了导航条和广告的布局。

开始继续码起来：

我想最终实现的效果图是这样的，如下：分了三个页面截图，太大了：

接着上次的未完成的，继续码起来：

第五步、增加栅格系统，我选择了三列的布局col-md-4;满格是12，4是12的三分之一，还可以响应式布局，设置多个栅格：

林卡酒店刚说风寒看到个后面发的搜房大机构老夫

click me

林卡酒店刚说风寒看到个后面发的搜房大机构老夫

click me

林卡酒店刚说风寒看到个后面发的搜房大机构老夫

click me

1）栅格必须在container 或 container-fluent （满屏）的div里面，这样可以自动赋予合适的排列（aligment）和内补（padding）。

2）使 id为"tag_container"，类为col-md-4的部分居中对齐：

#tag_container .col-md-4{

text-align: center;

}

第六步、设置一行间距，分割上下部分

css为

hr .divider{

margin:40px;

}

第七步、标签页的制作,下图是三个标签页的效果图：

1）标签页的原理：

标签页结构是：ul列表声明标签，并且标注class="nav nav-tabs" role="tablist"

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

展开的布局结构：

2）增加标签页面里面的布局

<div class="tab-pane active" id="an1">

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

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

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

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;

}

第八步、增加底部版权声明，效果图如下：

回到顶部

@2016 rongyu制

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

第九步、增加关于的弹出框按钮：

×

《疯狂动物城》由迪士尼影业出品的3D动画片，由里奇摩尔、拜恩霍华德及杰拉德布什联合执导，金妮弗古德温、杰森贝特曼、夏奇拉、艾伦图代克、伊德瑞斯艾尔巴、JK西蒙斯等加盟配音[1] 。

了解了

1）静态弹窗口，分为三部分，标题，窗体和按钮；其中，我们只需要一个按钮，另一个注释掉了。并增加 id=about，方便下面定位；

2）在关于导航条的菜单栏，增加toggle链接，data-toggle="modal"，id对应data-target="#about"：

第十步、菜单定位

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

1）通过id定位 $("#demo-navbar .dropdown-menu a")导航，设置点击事件；

2）定位到$("#tab-list a[href='" + href +"']")的打开标签页的方法tab("'show")。

这样，bootstrap的学习才刚刚起步。

如果大家还想深入学习，可以点击这里进行学习，再为大家附一个精彩的专题：Bootstrap学习教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。