Bootstrap 导航.pdfVIP

Bootstrap 导航 Bootstrap 导航 简介 在本教程中，您将学习如何使⽤ Bootstrap ⼯具包来创建基于导航、标签、胶囊式标 签的导航 我们有演⽰实例及相关的解释，包括：基本的基于标签和胶囊式标签的导航、堆叠的 或垂直的基于标签和胶囊式标签的导航、基于标签和胶囊式标签的下拉菜单、使⽤导 航列表创建堆叠导航、使⽤ JavaScript 创建可点击导航 （不同的⽅向） 基本的标签 两个 CSS class .nav 和 .nav-tabs ⽤于创建基本的基于标签的导航 在 Bootstrap 版本 v2.0 .1 中，CSS class .nav 的样式在⾏号 2 176 到 2220 （这⾥也包含⼀些相关样式）中 声明 ⾏号 2222 到 2267 包含 .nav-tabs 的样式 下⾯的实例演⽰如何使⽤ Bootstrap 创建⼀个基本的基于标签的导航 Bootstrap 基本的基于标签的导航实例 实例 div class=container div class=row div class=span6 l class=nav nav-tabs li class=activea href=# Home/a/li lia href=# T torials/a/li lia href=# Practice Editor /a/li lia href=# Gallery/a/li lia href=# Contact/a/li / l /div /div /div 输出 在线查看 在不同的浏览器窗⼜查看上⾯实例 基本的胶囊式标签 ⼀旦您知道如何通过 Bootstrap 创建基本的基于标签的导航，要想创建基本的基于胶 囊式标签的导航就显得很容易了 在这⾥不是使⽤ .nav-tabs class ，⽽是使⽤ .nav-pills class .nav-pills 的样式位于 bootstrap .css 中的⾏号 2222 到 2224 ，在 bootstrap .css 中的 ⾏号 2268 到 2280 再次重复 （在最后⼀个实例中使⽤到） 下⾯的实例演⽰如何创建⼀个基本的基于胶囊式标签的导航 Bootstrap 基本的基于胶囊式标签的导航实例 实例 div class=container div class=row div class=span8 l class=nav nav-pills li class=activea href=# Home/a/li lia href=# T torials/a/li lia href=# Practice Editor /a/li lia href=# Gallery/a/li lia href=# Contact/a/li / l /div /div /div 输出 在线查看 在不同的浏览器窗⼜查看上⾯实例 堆叠的或垂直的标签 如需创建堆叠的或垂直的基于标签的导航，您必须添加 .nav-stacked、.nav 和 .nav-tabs class 到您的标记中，默认是创建⽔平的基于标签的导航 从⾏号 2281 到 2309 包含了 .nav-stacked 的样式 下⾯是⼀个实例 Bootstrap 堆叠的或垂直的基于标签的导航实例 实例 div class=container div class=row div class=span8 l class=nav nav-tabs nav-stacked li class=activea href=# Home/a/li lia href=# T torials/a/li lia href=# Practice Editor /a/