bootstrap nav 颜色导航条怎么改图标

一、基础导航条
  在制作一个基础导航条时,主要分以下几步:
  第一步:首先在制作导航的列表(&ul class=&nav&&)基础上添加类名&navbar-nav&
  第二步:在列表外部添加一个容器(div),并且使用类名&navbar&和&navbar-default&
&div class="navbar navbar-default"&
&!-- 导航条标题--&
 &div class="navbar-header"&
&a href="##" class="navbar-brand"&LOGO&/a&
&!-- 基础导航条--&
&ul class="nav navbar-nav"&
&li&&a href="##"&网站首页&/a&&/li&
&!-- 二级菜单--&
&li class="dropdown"&
&a href="##" data-toggle="dropdown" class="dropdown-toggle"&系列教程&span class="caret"&&/span&&/a&
&ul class="dropdown-menu"&
&li&&a href="##"&CSS3&/a&&/li&
&li&&a href="##"&JavaScript&/a&&/li&
&li class="disabled"&&a href="##"&PHP&/a&&/li&
&li&&a href="##"&名师介绍&/a&&/li&
&li&&a href="##"&成功案例&/a&&/li&
&li&&a href="##"&关于我们&/a&&/li&
&!-- 搜索表单--&
&form action="##" class="navbar-form navbar-left"&
&div class="form-group"&
&input type="text" class="form-control" placeholder="请输入关键词" /&
&button type="submit" class="btn btn-default"&搜索&/button&
1、在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其通过&navbar-header&和&navbar-brand&来实现。
&!-- 导航条标题--&
 &div class="navbar-header"&
&a href="##" class="navbar-brand"&LOGO&/a&
2、二级菜单通过&ul&嵌套来实现。
&!-- 二级菜单--&
&li class="dropdown"&
&a href="##" data-toggle="dropdown" class="dropdown-toggle"&系列教程&span class="caret"&&/span&&/a&
&ul class="dropdown-menu"&
&li&&a href="##"&CSS3&/a&&/li&
&li&&a href="##"&JavaScript&/a&&/li&
&li class="disabled"&&a href="##"&PHP&/a&&/li&
3、在Bootstrap框架中提供了一个&navbar-form&,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单。
  &navbar-left&让表单左浮动,&navbar-right&样式,让元素在导航条靠右对齐。
&!-- 搜索表单--&
&form action="##" class="navbar-form navbar-left"&
&div class="form-group"&
&input type="text" class="form-control" placeholder="请输入关键词" /&
&button type="submit" class="btn btn-default"&搜索&/button&
二、反色导航条
  反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条,只是将"navbar-deafult"类名换成"navbar-inverse"。
&div class="navbar navbar-inverse" role="navigation"&
&div class="navbar-header"&
&a href="##" class="navbar-brand"&LOGO&/a&
&ul class="nav navbar-nav"&
&li class="active"&&a href=""&首页&/a&&/li&
&li&&a href=""&教程&/a&&/li&
&li&&a href=""&关于我们&/a&&/li&
三、固定导航条
  很多情况之一,设计师希望导航条固定在浏览器顶部或底部。
  Bootstrap框架提供了两种固定导航条的方式:
  ? .navbar-fixed-top:导航条固定在浏览器窗口顶部
  ? .navbar-fixed-bottom:导航条固定在浏览器窗口底部
  使用方法很简单,只需要在制作导航条最外部容器navbar上追加对应的类名即可。
&!--导航条固定在浏览器窗口顶部--&
&div class="navbar navbar-default navbar-fixed-top"&
&!--导航条固定在浏览器窗口底部--&
&div class="navbar navbar-default navbar-fixed-bottom"&
四、响应式导航条
&div class="navbar navbar-default"&
&div class="navbar-header"&
 &!-- .navbar-toggle样式用于toggle收缩的内容,即nav-collapse collapse样式所在元素 --&
&button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#demo"&
&span class="sr-only"&Toggle Navigation&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&!-- 确保无论是宽屏还是窄屏,navbar-brand都显示 --&
&a href="##" class="navbar-brand"&LOGO&/a&
&!-- 屏幕宽度小于768px时,div.navbar-responsive-collapse容器里的内容都会隐藏,显示icon-bar图标,当点击icon-bar图标时,再展开。屏幕大于768px时,默认显示。 --&
&div class="collapse navbar-collapse navbar-responsive-collapse" id="demo"&
&ul class="nav navbar-nav"&
&li&&a href="##"&网站首页&/a&&/li&
&li&&a href="##"&系列教程&/a&&/li&
&li&&a href="##"&名师介绍&/a&&/li&
&li&&a href="##"&成功案例&/a&&/li&
&li&&a href="##"&关于我们&/a&&/li&
宽屏模式下:
窄屏模式下:
使用方法:
1、保证在窄屏时需要折叠的内容必须包裹在带一个div内,并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。
2、保证在窄屏时要显示的图标样式(固定写法):
&button class="navbar-toggle" type="button" data-toggle="collapse"&
&span class="sr-only"&Toggle Navigation&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
&span class="icon-bar"&&/span&
3、并为button添加data-target=".类名/#id名"
阅读(...) 评论()WordPress教程:输出Bootstrap结构的导航栏菜单 - 91wordpress
本站所有服务费用均支持淘宝担保交易
>> WordPress教程:输出Bootstrap结构的导航栏菜单
WordPress教程:输出Bootstrap结构的导航栏菜单
站长朋友们在使用的过程中,当做成自适应网站,引入Bootstrap框架的时候,希望可以输出Bootstrap结构的导航栏菜单,这样就够利用Bootstrap提供的样式进行菜单的显示。这篇WordPress教程里我们就向大家介绍一下如何在wordpress网站中输出Bootstrap结构的菜单。我们先来看一下Bootstrap导航栏结构HTML代码:XHTML
&nav class="navbar navbar-default" role="navigation"&
&div class="navbar-header"&
&a class="navbar-brand" href="#"&91wordpress&/a&
&ul class="nav navbar-nav"&
&li class="active"&&a href="/"&首页&/a&&/li&
&li&&a href="/news"&WordPress资讯&/a&&/li&
&li class="dropdown"&
&a href="/tutorials" class="dropdown-toggle" data-toggle="dropdown"&
WordPress教程
&b class="caret"&&/b&
&ul class="dropdown-menu"&
&li&&a href="/tutorials/tips"&基础教程&/a&&/li&
&li&&a href="/tutorials/plugins"&插件分享&/a&&/li&
&li&&a href="/tutorials/optimization"&优化加速&/a&&/li&
&li&&a href="/tutorials/seo"&网站SEO&/a&&/li&
&li&&a href="/tutorials/admin-panel"&后台定制&/a&&/li&
&li&&a href="/tutorials/host"&主机环境&/a&&/li&
&li&&a href="/tutorials/maintenance"&网站维护&/a&&/li&
&/nav&1234567891011121314151617181920212223242526&nav class="navbar navbar-default" role="navigation"& &div class="navbar-header"& &a class="navbar-brand" href="#"&91wordpress&/a& &/div& &div& &ul class="nav navbar-nav"& &li class="active"&&a href="/"&首页&/a&&/li& &li&&a href="/news"&WordPress资讯&/a&&/li& &li class="dropdown"& &a href="/tutorials" class="dropdown-toggle" data-toggle="dropdown"& WordPress教程
&b class="caret"&&/b& &/a& &ul class="dropdown-menu"& &li&&a href="/tutorials/tips"&基础教程&/a&&/li& &li&&a href="/tutorials/plugins"&插件分享&/a&&/li& &li&&a href="/tutorials/optimization"&优化加速&/a&&/li& &li&&a href="/tutorials/seo"&网站SEO&/a&&/li& &li&&a href="/tutorials/admin-panel"&后台定制&/a&&/li& &li&&a href="/tutorials/host"&主机环境&/a&&/li& &li&&a href="/tutorials/maintenance"&网站维护&/a&&/li& &/ul& &/li& &/ul& &/div&&/nav&WordPress一般采用wp_nav_menu函数输出导航栏菜单,而通过该函数输出的菜单是得不到上述的html结构的。可喜的是wp_nav_menu函数支持自定义输出html结构。wordpress中wp_nav_menu函数的参数如下所示:
$defaults = array(
'theme_location'
'container'
'container_class' =& '',
'container_id'
'menu_class'
=& 'menu',
'fallback_cb'
=& 'wp_page_menu',
'link_before'
'link_after'
'items_wrap'
=& '&ul id="%1$s" class="%2$s"&%3$s&/ul&',
wp_nav_menu( $defaults );
?&123456789101112131415161718192021&?php&&
$defaults = array(&&
'theme_location'&&=& '',&&
'menu'&&&&&&&&&&&&=& '',&&
'container'&&&&&& =& 'div',&&
'container_class' =& '',&&
'container_id'&&&&=& '',&&
'menu_class'&&&&&&=& 'menu',&&
'menu_id'&&&&&&&& =& '',&&
'echo'&&&&&&&&&&&&=& true,&&
'fallback_cb'&&&& =& 'wp_page_menu',&&
'before'&&&&&&&&&&=& '',&&
'after'&&&&&&&&&& =& '',&&
'link_before'&&&& =& '',&&
'link_after'&&&&&&=& '',&&
'items_wrap'&&&&&&=& '&ul id="%1$s" class="%2$s"&%3$s&/ul&',&&
'depth'&&&&&&&&&& =& 0,&&
'walker'&&&&&&&&&&=& ''&& );&&
wp_nav_menu( $defaults );?&我们要修改的是walker参数。1. 切换到主题目录,打开functions.php文件,加入以下代码:functions.phpPHP
* Class Name: wp_bootstrap_navwalker
* GitHub URI: /twittem/wp-bootstrap-navwalker
* Description: A custom WordPress nav walker class to implement the Bootstrap 3 navigation style in a custom theme using the WordPress built in menu manager.
* Version: 2.0.4
* Author: Edward McIntyre - @twittem
* License: GPL-2.0+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
class wp_bootstrap_navwalker extends Walker_Nav_Menu {
* @see Walker::start_lvl()
* @since 3.0.0
* @param string $output Passed by reference. Used to append additional content.
* @param int $depth Depth of page. Used for padding.
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent&ul role=\"menu\" class=\" dropdown-menu\"&\n";
* @see Walker::start_el()
* @since 3.0.0
* @param string $output Passed by reference. Used to append additional content.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param int $current_page Menu item ID.
* @param object $args
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
* Dividers, Headers or Disabled
* =============================
* Determine whether the item is a Divider, Header, Disabled or regular
* menu item. To prevent errors we use the strcasecmp() function to so a
* comparison that is not case sensitive. The strcasecmp() function returns
* a 0 if the strings are equal.
if ( strcasecmp( $item-&attr_title, 'divider' ) == 0 && $depth === 1 ) {
$output .= $indent . '&li role="presentation" class="divider"&';
} else if ( strcasecmp( $item-&title, 'divider') == 0 && $depth === 1 ) {
$output .= $indent . '&li role="presentation" class="divider"&';
} else if ( strcasecmp( $item-&attr_title, 'dropdown-header') == 0 && $depth === 1 ) {
$output .= $indent . '&li role="presentation" class="dropdown-header"&' . esc_attr( $item-&title );
} else if ( strcasecmp($item-&attr_title, 'disabled' ) == 0 ) {
$output .= $indent . '&li role="presentation" class="disabled"&&a href="#"&' . esc_attr( $item-&title ) . '&/a&';
$class_names = $value = '';
$classes = empty( $item-&classes ) ? array() : (array) $item-&
$classes[] = 'menu-item-' . $item-&ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
if ( $args-&has_children )
$class_names .= ' dropdown';
if ( in_array( 'current-menu-item', $classes ) )
$class_names .= ' active';
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item-&ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '&li' . $id . $value . $class_names .'&';
$atts = array();
$atts['title']
= ! empty( $item-&title ) ? $item-&title : '';
$atts['target'] = ! empty( $item-&target ) ? $item-&target : '';
$atts['rel']
= ! empty( $item-&xfn )
? $item-&xfn : '';
// If item has_children add atts to a.
if ( $args-&has_children && $depth === 0 ) {
$atts['href']
$atts['data-toggle'] = 'dropdown';
$atts['class']
= 'dropdown-toggle';
$atts['aria-haspopup'] = 'true';
$atts['href'] = ! empty( $item-&url ) ? $item-&url : '';
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr =& $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
$item_output = $args-&
* Glyphicons
* ===========
* Since the the menu item is NOT a Divider or Header we check the see
* if there is a value in the attr_title property. If the attr_title
* property is NOT null we apply it as the class name for the glyphicon.
if ( ! empty( $item-&attr_title ) )
$item_output .= '&a'. $attributes .'&&span class="glyphicon ' . esc_attr( $item-&attr_title ) . '"&&/span&&';
$item_output .= '&a'. $attributes .'&';
$item_output .= $args-&link_before . apply_filters( 'the_title', $item-&title, $item-&ID ) . $args-&link_
$item_output .= ( $args-&has_children && 0 === $depth ) ? ' &span class="caret"&&/span&&/a&' : '&/a&';
$item_output .= $args-&
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
* Traverse elements to create list from elements.
* Display one element if the element doesn't have any children otherwise,
* display the element and its children. Will only traverse up to the max
* depth and no ignore elements under that depth.
* This method shouldn't be called directly, use the walk() method instead.
* @see Walker::start_el()
* @since 2.5.0
* @param object $element Data object
* @param array $children_elements List of elements to continue traversing.
* @param int $max_depth Max depth to traverse.
* @param int $depth Depth of current element.
* @param array $args
* @param string $output Passed by reference. Used to append additional content.
* @return null Null on failure with no changes to parameters.
public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
if ( ! $element )
$id_field = $this-&db_fields['id'];
// Display this element.
if ( is_object( $args[0] ) )
$args[0]-&has_children = ! empty( $children_elements[ $element-&$id_field ] );
parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
* Menu Fallback
* =============
* If this function is assigned to the wp_nav_menu's fallback_cb variable
* and a manu has not been assigned to the theme location in the WordPress
* menu manager the function with display nothing to a non-logged in user,
* and will add a link to the WordPress menu manager if logged in as an admin.
* @param array $args passed from the wp_nav_menu function.
public static function fallback( $args ) {
if ( current_user_can( 'manage_options' ) ) {
extract( $args );
$fb_output =
if ( $container ) {
$fb_output = '&' . $
if ( $container_id )
$fb_output .= ' id="' . $container_id . '"';
if ( $container_class )
$fb_output .= ' class="' . $container_class . '"';
$fb_output .= '&';
$fb_output .= '&ul';
if ( $menu_id )
$fb_output .= ' id="' . $menu_id . '"';
if ( $menu_class )
$fb_output .= ' class="' . $menu_class . '"';
$fb_output .= '&';
$fb_output .= '&li&&a href="' . admin_url( 'nav-menus.php' ) . '"&Add a menu&/a&&/li&';
$fb_output .= '&/ul&';
if ( $container )
$fb_output .= '&/' . $container . '&';
}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206&?php&/** * Class Name: wp_bootstrap_navwalker * GitHub URI: /twittem/wp-bootstrap-navwalker * Description: A custom WordPress nav walker class to implement the Bootstrap 3 navigation style in a custom theme using the WordPress built in menu manager. * Version: 2.0.4 * Author: Edward McIntyre - @twittem * License: GPL-2.0+ * License URI: http://www.gnu.org/licenses/gpl-2.0.txt */&class wp_bootstrap_navwalker extends Walker_Nav_Menu {& /** * @see Walker::start_lvl() * @since 3.0.0 * * @param string $output Passed by reference. Used to append additional content. * @param int $depth Depth of page. Used for padding. */ public function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat( "\t", $depth ); $output .= "\n$indent&ul role=\"menu\" class=\" dropdown-menu\"&\n"; }& /** * @see Walker::start_el() * @since 3.0.0 * * @param string $output Passed by reference. Used to append additional content. * @param object $item Menu item data object. * @param int $depth Depth of menu item. Used for padding. * @param int $current_page Menu item ID. * @param object $args */ public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';& /** * Dividers, Headers or Disabled * ============================= * Determine whether the item is a Divider, Header, Disabled or regular * menu item. To prevent errors we use the strcasecmp() function to so a * comparison that is not case sensitive. The strcasecmp() function returns * a 0 if the strings are equal. */ if ( strcasecmp( $item-&attr_title, 'divider' ) == 0 && $depth === 1 ) { $output .= $indent . '&li role="presentation" class="divider"&'; } else if ( strcasecmp( $item-&title, 'divider') == 0 && $depth === 1 ) { $output .= $indent . '&li role="presentation" class="divider"&'; } else if ( strcasecmp( $item-&attr_title, 'dropdown-header') == 0 && $depth === 1 ) { $output .= $indent . '&li role="presentation" class="dropdown-header"&' . esc_attr( $item-&title ); } else if ( strcasecmp($item-&attr_title, 'disabled' ) == 0 ) { $output .= $indent . '&li role="presentation" class="disabled"&&a href="#"&' . esc_attr( $item-&title ) . '&/a&'; } else {& $class_names = $value = '';& $classes = empty( $item-&classes ) ? array() : (array) $item-&classes; $classes[] = 'menu-item-' . $item-&ID;& $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );& if ( $args-&has_children ) $class_names .= ' dropdown';& if ( in_array( 'current-menu-item', $classes ) ) $class_names .= ' active';& $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';& $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item-&ID, $item, $args ); $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';& $output .= $indent . '&li' . $id . $value . $class_names .'&';& $atts = array(); $atts['title']&&= ! empty( $item-&title ) ? $item-&title : ''; $atts['target'] = ! empty( $item-&target ) ? $item-&target : ''; $atts['rel']&&&&= ! empty( $item-&xfn ) ? $item-&xfn : '';& // If item has_children add atts to a. if ( $args-&has_children && $depth === 0 ) { $atts['href']&& = '#'; $atts['data-toggle'] = 'dropdown'; $atts['class'] = 'dropdown-toggle'; $atts['aria-haspopup'] = 'true'; } else { $atts['href'] = ! empty( $item-&url ) ? $item-&url : ''; }& $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );& $attributes = ''; foreach ( $atts as $attr =& $value ) { if ( ! empty( $value ) ) { $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value ); $attributes .= ' ' . $attr . '="' . $value . '"'; } }& $item_output = $args-&before;& /* * Glyphicons * =========== * Since the the menu item is NOT a Divider or Header we check the see * if there is a value in the attr_title property. If the attr_title * property is NOT null we apply it as the class name for the glyphicon. */ if ( ! empty( $item-&attr_title ) ) $item_output .= '&a'. $attributes .'&&span class="glyphicon ' . esc_attr( $item-&attr_title ) . '"&&/span&&'; else $item_output .= '&a'. $attributes .'&';& $item_output .= $args-&link_before . apply_filters( 'the_title', $item-&title, $item-&ID ) . $args-&link_after; $item_output .= ( $args-&has_children && 0 === $depth ) ? ' &span class="caret"&&/span&&/a&' : '&/a&'; $item_output .= $args-&after;& $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } }& /** * Traverse elements to create list from elements. * * Display one element if the element doesn't have any children otherwise, * display the element and its children. Will only traverse up to the max * depth and no ignore elements under that depth. * * This method shouldn't be called directly, use the walk() method instead. * * @see Walker::start_el() * @since 2.5.0 * * @param object $element Data object * @param array $children_elements List of elements to continue traversing. * @param int $max_depth Max depth to traverse. * @param int $depth Depth of current element. * @param array $args * @param string $output Passed by reference. Used to append additional content. * @return null Null on failure with no changes to parameters. */ public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {&&&&&&&&if ( ! $element )&&&&&&&&&&&&return;&&&&&&&&&$id_field = $this-&db_fields['id'];&&&&&&&&&// Display this element.&&&&&&&&if ( is_object( $args[0] ) )&&&&&&&&&& $args[0]-&has_children = ! empty( $children_elements[ $element-&$id_field ] );&&&&&&&&&parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );&&&&}& /** * Menu Fallback * ============= * If this function is assigned to the wp_nav_menu's fallback_cb variable * and a manu has not been assigned to the theme location in the WordPress * menu manager the function with display nothing to a non-logged in user, * and will add a link to the WordPress menu manager if logged in as an admin. * * @param array $args passed from the wp_nav_menu function. * */ public static function fallback( $args ) { if ( current_user_can( 'manage_options' ) ) {& extract( $args );& $fb_output = null;& if ( $container ) { $fb_output = '&' . $container;& if ( $container_id ) $fb_output .= ' id="' . $container_id . '"';& if ( $container_class ) $fb_output .= ' class="' . $container_class . '"';& $fb_output .= '&'; }& $fb_output .= '&ul';& if ( $menu_id ) $fb_output .= ' id="' . $menu_id . '"';& if ( $menu_class ) $fb_output .= ' class="' . $menu_class . '"';& $fb_output .= '&'; $fb_output .= '&li&&a href="' . admin_url( 'nav-menus.php' ) . '"&Add a menu&/a&&/li&'; $fb_output .= '&/ul&';& if ( $container ) $fb_output .= '&/' . $container . '&';& echo $fb_output; } }}2. 在需要的地方(header.php文件中)通过如下代码输出导航栏菜单:header.php
&nav class="navbar navbar-default" role="navigation"&
&div class="navbar-header"&
&a class="navbar-brand" href="#"&TENNFY WU&/a&
wp_nav_menu( array(
'theme_location' =& 'cat_nav',
'depth' =& 2,
'container' =& false,
'menu_class' =& 'nav navbar-nav',
'fallback_cb' =& 'wp_page_menu',
//添加或更改walker参数
'walker' =& new wp_bootstrap_navwalker())
&/nav&123456789101112131415161718&nav class="navbar navbar-default" role="navigation"& &div class="navbar-header"& &a class="navbar-brand" href="#"&TENNFY WU&/a& &/div& &div& &?php&&
wp_nav_menu( array(&& 'theme_location' =& 'cat_nav',&& 'depth' =& 2,&&
'container' =& false,&&
'menu_class' =& 'nav navbar-nav',&&
'fallback_cb' =& 'wp_page_menu',&&
//添加或更改walker参数&&
'walker' =& new wp_bootstrap_navwalker())&&
?& &/div&&/nav&业务范围新闻中心成功案例友情链接

我要回帖

更多关于 bootstrap nav active 的文章

 

随机推荐