Bootstrap3-导航

Bootstrap 导航

1. 定义导航组件

基本结构:



1-1. 设计标签页


1-2. pills胶囊导航



2. 设置导航选项

2-1. 设计导航对齐方式(pull-right pull-left类)







2-2. 设计禁用项(disabled)


2-3. 设计堆叠效果(stacked)


3 绑定导航和下拉菜单

需要引用jquery.js和bootstrap.js





3-1. 设计标签页下拉菜单


3-2. 设计pills下拉菜单


4. 激活标签页

  1. 引入jQuery和bootstrap-tab.js文件
  2. 在标签页结构基础上,添加内容包含框,通过tab-content定义,子内容框类为tab-pane
  3. 为每个内容框定义id值,并在标签列表项中为每个超链接绑定锚链接
  4. 为每个标签项超链接定义data-toggle="tab"属性,激活标签页的交互行为
  5. 在每个子内容框中添加fade类,可以实现淡入效果

首页内容
微信内容
微博内容

你可能感兴趣的:(Bootstrap3-导航)