BootStrap实战三之导航条

心已赠人 2021-09-13 23:12 308阅读 0赞

**目标网站：**[http://www.ghostchina.com/][http_www.ghostchina.com]

导航条的创建

<nav class="main-navigation"> 
            <div class="container">     
                <div class="row">       
                    <div class="col-md-12">
                        <div class="nav-header">
                            <span class="nav-toggle-botton collapse" data-target="#main-menu">
                                <span class="sr-only">Toggle Navigation</span> 
                                <i class="fa fa-bars"></i>
                            </span>
                        </div>
                        <div class="collapse navbar-collapse id="main-menu">
                            <ul class="menu"> 
                                <li class="nav-current" role="presentation"><a href="#">首页</a></li> 
                                <li role="presentation"><a href="#">论坛</a></li>
                                <li role="presentation"><a href="#">快捷手册</a></li>
                                <li role="presentation"><a href="#">中文文档</a></li>
                                <li role="presentation"><a href="#">下载</a></li>
                                <li role="presentation"><a href="#">关于</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

对应的css文件内容

/*导航条*/
    .main-navigation{ text-align: center; background: #ffffff; border-top: 1px solid #ebebeb; border-bottom: 3px solid #e1e1e1; margin-bottom: 35px; }
    .main-navigation .menu{ padding: 0; margin: 0; }
    
    .main-navigation .menu li.nav-current{ border-bottom: 3px solid #e67e22; margin-bottom: -2px; }
    
    .main-navigation .menu li{ list-style: none; display: inline-block; position: relative; }
    
    .main-navigation .menu li a{ color: #505050; line-height: 4em; display: block; padding: 0 21px; }

[http_www.ghostchina.com]: http://www.ghostchina.com/