菜单

下拉菜单

将下拉菜单触发器和下拉菜单都包裹在.dropdown里，然后添加组成菜单的HTML代码。

可以通过上面的代码发现，里面可能有很多陌生的样式类或者属性。

一个Dropdown按钮和右侧有个小图标caret，当然这个小图标和按钮的文本是平级的。
首先看button按钮中有个dropdown-toggle，还有一个data-toggle属性，根据这个属性来弹出下来列表。
紧接着ul标签的dropdown-menu应该是和上面button按钮的样式类dropdown-toggle联合使用，在通过aria-labelledby绑定上面的button按钮。

下来第四个li标签中有个divider其实是一个分割线的样式类。

按钮组

把一系列的.btn按钮放入.btn-group。

通过.btn-group就可以将一组button按钮并且为其添加样式类btn

bootstrap8

加入.btn-group-vertical类则可变成垂直显示。

输入框组

附加按钮

bootstrap9

导航、标签、面包屑

导航

标签页样式

 
• Home

 
• Profile

 
• Messages

bootstrap10

胶囊式标签页样式

 
• Home

 
• Profile

 
• Messages

bootstrap11

标签

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

bootstrap12

面包屑导航

 
1. Home

 
2. Library

 
3. Data

bootstrap13

导航条

这段代码有点长，先上点效果吧。

bootstrap14

首先最外面的容器是nav标签，并添加nav-bar样式类，表示这里面属于导航条。
然后在浏览器放缩到一定程度的时候，可以看到的Header。
按钮标签里嵌套了三个span的icon。然后给与navbar-toggle样式类和属性collapse(收起)，点击的时候目标为data-target。
再接下来就比较简单，嵌套了下拉菜单、form表单、再是下拉菜单。

添加.navbar-fixed-top可以让导航条固定在顶部。

分页

链接在不同情况下可以定制。给不能点击的链接用.disabled 并且用.active显示是当前页。

     
• «

     
• 1

     
• 2

     
• 3

     
• 4

     
• 5

     
• »

   

大屏幕介绍

• 上一个： Jquery AJAX获取数据动态并生成表格例子

• 下一个： jQuery next()方法的使用详解