Bootstrap前端开发案例二

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

 
animal1
 
animal2
 
animal3
 
 
 

 

  

  

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

   
  
  
 
 

  

  

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

   
  
  
 
 

  

  

   
Animal3 疯狂动物城
   
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;
 } 

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

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

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

 

 

  

  ×
  
关于
  
  

  
《疯狂动物城》由迪士尼影业出品的3D动画片，由里奇·摩尔、拜恩·霍华德及杰拉德·布什联合执导，金妮弗·古德温、杰森·贝特曼、夏奇拉、艾伦·图代克、伊德瑞斯·艾尔巴、J·K·西蒙斯等加盟配音[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的学习才刚刚起步。。。

本文出处：http://www.cnblogs.com/rongyux/

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

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