masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

H5 pembangunan responsif bar navigasi responsif (2)

Bar navigasi boleh lipat

Kami menulis bar navigasi di bahagian sebelumnya, tetapi kami akan mendapati bahawa walaupun bar navigasi adalah Ia telah ditarik balik, tetapi lajur navigasi yang diisi tidak lagi kelihatan apabila halaman dikurangkan.

Beginilah rupa paparan biasa

QQ截图20161102103016.png

Apabila dizum keluar

QQ截图20161102103023.png

Lajur navigasi kami telah hilang, bagaimana kami harus menyelesaikannya.

Buat lajur boleh lipat:

Gunakan kaedah togol bar navigasi yang disertakan dengan pemalam untuk beroperasi 

<button type="button"class="navbar-toggle"data-toggle="collapse" data-target="#navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>
rrree

Satu pernyataan mewakili satu baris, tiga pernyataan mewakili tiga baris, kesannya adalah seperti berikut

QQ截图20161102103435.png

QQ截图20161102103442.png

Dengan cara ini, bar navigasi kami lengkap.

Kesukaran dalam bab ini:

Menggunakan bootstrap Cipta bar navigasi boleh lipat.

Meneruskan pembelajaran
||
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>PHP中文网</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <style> .logo{ padding: 0; } </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand logo" ><img src="https://img.php.cn/upload/course/000/000/004/5819475ea4910787.png" height="50" alt="PHP中文网"></a> <button type="button"class="navbar-toggle"data-toggle="collapse" data-target="#navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse"id="navbar-collapse"> <ul class="nav navbar-nav navbar-right daohang " > <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li> <li><a href="#"><span class="glyphicon glyphicon-bookmark"></span> 资讯</a></li> <li><a href="#"><span class="glyphicon glyphicon-fire"></span> 实例</a></li> <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> 关于我们</a></li> </ul> </div> </div> </nav> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script type="text/javascript"> </script> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492414 permainan