android studio 頂部導航欄_基于bootstrap的頂部導航欄和側邊多級導航

效果圖：

頂部導航：

首先引入三個：

<
           

在body裡面做：

<!--navbar是nav導航标簽的一個基類必須添加，navbar-default是對導覽列樣式的添加-->
           

注意：

1.導航頭部距離頂部的距離 style=“margin-top:”

2.導航頭部圖檔的大小 height=

3.ul清單文字的大小 style="font-size:"

4.ul清單距離頂部的距離style=“margin-top:”

5.導航整體的大小 nav style=“height：”

這些自己調整。。。。。。。。。。。。。。

側邊功能清單

<a data-toggle="collapsee" href="#pp1" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="list-group-item" href="#pp1" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >欄目子產品</a>
<ul class="collapse list-group" id="pp1" style="margin-bottom=0px"> 
    <li class="collapse list-group-item"><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >增加欄目</a></li>
    <li class="collapse list-group-item"><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >删除欄目</a></li>
    <li class="collapse list-group-item"><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >修改欄目</a></li>
    <li class="collapse list-group-item"><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >檢視欄目</a></li>
</ul>
<a data-toggle="collapsee" href="#pp1" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="list-group-item" href="#pp2" target="_blank" rel="external nofollow" >個人子產品</a>
<ul class="collapse list-group" id="pp2" style="margin-bottom=0px"> 
    <li class="collapse list-group-item"><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >檢視個人資訊</a></li>
    <li class="collapse list-group-item"><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >修改密碼</a></li>
    <li class="collapse list-group-item"><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >成績查詢</a></li>
</ul>
           

注意：

1.側邊功能清單，主要依賴list-group-item 添加樣式

2.利用折疊實作折疊展開功能