bootstrap 响应式的导航栏

响应式的导航栏

为了给导航栏添加响应式特性,您要折叠的内容必须包裹class.collapse、.navbar-collapse 的中。折叠起来的导航栏实际上是 一个带有class.navbar-toggle及两个data-元素的按钮。第一个是data-toggle,用于告诉JavaScript 需要对按钮做什么,第二个是data-target ,指示要切换到哪一个元素.三个带有class.icon-bar的创建所谓的汉堡按钮。这些会切换为.nav-collapse

中的元素。为了 实现以上这些功能,您必须包含Bootstrap 折叠(Collapse插件) 下面实例演示了这点:

 




    
    Title
    
    
    
    






响应式的导航栏

为了给导航栏添加响应式特性,您要折叠的内容必须包裹class.collapse、.navbar-collapse 的<div>中。折叠起来的导航栏实际上是 一个带有class.navbar-toggle及两个data-元素的按钮。第一个是data-toggle,用于告诉JavaScript 需要对按钮做什么,第二个是data-target ,指示要切换到哪一个元素.三个带有class.icon-bar的<span>创建所谓的汉堡按钮。这些会切换为.nav-collapse<div>中的元素。为了 实现以上这些功能,您必须包含Bootstrap 折叠(Collapse插件) 下面实例演示了这点:

 

你可能感兴趣的:(css,bootstrap3)