menu nav 導航 for ul tag

Posted on Edited on In Views: Disqus:

 

1.menus nav-tabs樣式

Alternate Text

<!DOCTYPE html>
<html>
                            <head>
                            <title>Bootstrap Case</title>
                            <meta charset="utf-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1">
                            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
                            </head>

                            <body>
                            <div class="container">
                            <div class="jumbotron">
                            <h1>My first Bootstrap website!</h1>      
                            <p>This page will grow as we add more and more components from Bootstrap...</p>      
                            <a href="#" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-search"></span> Search</a>
                            </div>
                            </div>

                            <div class="container">
                            <ul class="nav nav-tabs">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Menu 1</a></li>
                            <li><a href="#">Menu 2</a></li>
                            <li><a href="#">Menu 3</a></li>
                            </ul>
                            </div>
    
                            <div class="container">
                            <div class="row">
                            <div class="col-md-3">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                            <div class="col-md-3"> 
                            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            </div>
                            <div class="col-md-3"> 
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                            </div>
                            <div class="col-md-3"> 
                            <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                            </div>
                            </div>
                            </div>
                            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
                            </body>
</html>

 

2.menu nav-pills樣式

Alternate Text

<!DOCTYPE html>
<html>
                            <head>
                            <title>Bootstrap Case</title>
                            <meta charset="utf-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1">
                            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
                            </head>

                            <body>
                            <div class="container">
                            <div class="jumbotron">
                            <h1>My first Bootstrap website!</h1>      
                            <p>This page will grow as we add more and more components from Bootstrap...</p>      
                            <a href="#" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-search"></span> Search</a>
                            </div>
                            </div>

                            <div class="container">
                            <ul class="nav nav-pills">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Menu 1</a></li>
                            <li><a href="#">Menu 2</a></li>
                            <li><a href="#">Menu 3</a></li>
                            </ul>
                            </div>
    
                            <div class="container">
                            <div class="row">
                            <div class="col-md-3">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                            <div class="col-md-3"> 
                            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                            </div>
                            <div class="col-md-3"> 
                            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                            </div>
                            <div class="col-md-3"> 
                            <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
                            </div>
                            </div>
                            </div>
                            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
                            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
                            </body>
</html>

 

3.四種樣式比較

Bootstrap Case

 

4.說明

(1)「導航」都會依賴一個基類 .nav

(2)「導航」通常都會被加入ul元素裡

(3)還有水平與垂直排列的樣式nav-justitied、nav-stacked

(4)任何導航組件都可添加.disabled禁用樣式，但還是有連結功能。如下

<ul class="nav nav-pills">

...

<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>

...

</ul>

(5)nav-justified與navbar-nav是不使用.active的，

而且兩者寬度大於小於768px的樣式將會明顯有所不同。