关于 html:bootstrap 3: 侧边导航栏折叠到顶部导航栏

bootstrap 3: side navbar on collapse into top navbar

我认为我的措辞不正确,所以让我详细说明一下,我正试图让我的侧导航栏折叠成一个按钮,用作顶部按钮导航栏,所以这个 [实际上是导航药片];

left

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 <header class="container">
  <nav class="navbar navbar-default" role="navigation">
   
      <h1 class="brand">bootstrap
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
   
  </nav>
</header>

 
    <!–aside–>
     
         
        <h4>Menu</h4>
          <ul class="nav nav-pills nav-stacked">
           
<li>
home
</li>

           
<li>
about
</li>

           
<li>
gallery
</li>

           
<li>
CV
</li>

           
<li>
link
</li>

           
<li>
Contact
</li>

         
</ul>

       
      </aside>

希望这是有道理的谢谢!


找到了有效的可见和隐藏类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<header class="container"><!–header–>
 
   
      <nav class="navbar navbar-default" role="navigation">
       
          <h1 class="brand">John Doe
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
       
      </nav>
   
   
   
    <ul class="nav navbar-nav visible-xs">
     
<li>
project 01
</li>

     
<li>
project 02
</li>

     
<li>
project 03
</li>

     
     
<li>
About
</li>

     
<li>
link
</li>

     
<li>
Contact
</li>

   
</ul>

 
</header><!–header–>
<!–content area>
 
    <!–aside–>
       
        <ul class="nav nav-pills nav-stacked hidden-xs">
          <h4>Works</h4>
           
<li>
project 01
</li>

           
<li>
project 02
</li>

           
<li>
project 03
</li>

           
           
<li>
About
</li>

           
<li>
link
</li>

           
<li>
Contact
</li>

       
</ul>

     
    </aside><!–aside–>


原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/269201.html

(0)
上一篇 2022年6月20日 18:01
下一篇 2022年6月20日 18:07

相关推荐

发表回复

登录后才能评论