Bootstrap是Twitter推出的开源前端框架（CSS、js、图标字体，该有的都有了），响应式设计，操作简单，上手容易，但是要写出优秀的网页，那就得多实践、多学习了！顺便说一下，Bootstrap比阿里巴巴推出的Kissy(js库)要好使多了！
本文传播一个适用于Wordpress的Bootstrap菜单开源类！

先上代码：

< ?php  
             
    add_action( 'after_setup_theme', 'bootstrap_setup' );  
             
    if ( ! function_exists( 'bootstrap_setup' ) ):  
             
        function bootstrap_setup(){  
             
            add_action( 'init', 'register_menu' );  
                        
            function register_menu(){  
                register_nav_menu( 'top-bar', 'Bootstrap Top Menu' );   
            }  
             
            class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu {  
             
                        
                function start_lvl( &$output, $depth ) {  
             
                    $indent = str_repeat( "\t", $depth );  
                    $output    .= "\n$indent<ul class=\"dropdown-menu\">\n";  
                            
                }  
             
                function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {  
                            
                    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';  
             
                    $li_attributes = '';  
                    $class_names = $value = '';  
             
                    $classes = emptyempty( $item->classes ) ? array() : (array) $item->classes;  
                    $classes[] = ($args->has_children) ? 'dropdown' : '';  
                    $classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';  
                    $classes[] = 'menu-item-' . $item->ID;  
             
             
                    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );  
                    $class_names = ' class="' . esc_attr( $class_names ) . '"';  
             
                    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );  
                    $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';  
             
                    $output .= $indent . '<li ' . $id . $value . $class_names . $li_attributes . '>';  
             
                    $attributes  = ! emptyempty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';  
                    $attributes .= ! emptyempty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';  
                    $attributes .= ! emptyempty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';  
                    $attributes .= ! emptyempty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';  
                    $attributes .= ($args->has_children)        ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';  
             
                    $item_output = $args->before;  
                    $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) ? ' <b class="caret"></b></a>' : '';  
                    $item_output .= $args->after;  
             
                    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );  
                }  
             
                function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {  
                            
                    if ( !$element )  
                        return;  
                            
                    $id_field = $this->db_fields['id'];  
             
                    //display this element  
                    if ( is_array( $args[0] ) )   
                        $args[0]['has_children'] = ! emptyempty( $children_elements[$element->$id_field] );  
                    else if ( is_object( $args[0] ) )   
                        $args[0]->has_children = ! emptyempty( $children_elements[$element->$id_field] );   
                    $cb_args = array_merge( array(&$output, $element, $depth), $args);  
                    call_user_func_array(array(&$this, 'start_el'), $cb_args);  
             
                    $id = $element->$id_field;  
             
                    // descend only when the depth is right and there are childrens for this element  
                    if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {  
             
                        foreach( $children_elements[ $id ] as $child ){  
             
                            if ( !isset($newlevel) ) {  
                                $newlevel = true;  
                                //start the child delimiter  
                                $cb_args = array_merge( array(&$output, $depth), $args);  
                                call_user_func_array(array(&$this, 'start_lvl'), $cb_args);  
                            }  
                            $this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );  
                        }  
                            unset( $children_elements[ $id ] );  
                    }  
             
                    if ( isset($newlevel) && $newlevel ){  
                        //end the child delimiter  
                        $cb_args = array_merge( array(&$output, $depth), $args);  
                        call_user_func_array(array(&$this, 'end_lvl'), $cb_args);  
                    }  
             
                    //end this element  
                    $cb_args = array_merge( array(&$output, $element, $depth), $args);  
                    call_user_func_array(array(&$this, 'end_el'), $cb_args);  
                            
                }  
                        
            }  
             
        }  
             
    endif;  
    ?></li>

上面的代码复制到functions.php中，使用很简单，示例：

<div class="navbar navbar-fixed-top">  
    <div class="navbar-inner">  
        <div class="container">  
            < ?php  
                      
                $args = array(  
                    'theme_location' => 'top-bar',  
                    'depth'      => 2,  
                    'container'  => false,  
                    'menu_class'     => 'nav',  
                    'walker'     => new Bootstrap_Walker_Nav_Menu()  
                );  
       
                wp_nav_menu($args);  
                  
            ?>  
        </div>  
    </div>  
</div>

开源库链接：

https://gist.github.com/johnmegahan/1597994

作者：
Johnny Megahan

Via：http://suoling.net/bootstrap-menu-walker/