Bar navigasi yang Bootstrap mesti pelajari setiap hari (2)_kemahiran javascript

1. Bar navigasi asas

Apabila membuat bar navigasi asas, terdapat terutamanya langkah berikut:

Langkah 1: Mula-mula, tambahkan nama kelas “navbar-nav” berdasarkan senarai navigasi (

)

Langkah 2: Tambahkan bekas (div) di luar senarai dan gunakan nama kelas "navbar" dan "navbar-default"


<div class="navbar navbar-default">
 <!-- 导航条标题-->
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">LOGO</a>
 　</div>
 <!-- 基础导航条-->
 <ul class="nav navbar-nav">
 <li><a href="##">网站首页</a></li>
 <!-- 二级菜单-->
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 <!-- 搜索表单-->
 <form action="##" class="navbar-form navbar-left">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>

Salin selepas log masuk

1. Dalam pengeluaran halaman Web, selalunya terdapat tajuk di hadapan menu (saiz teks lebih besar sedikit daripada teks lain), yang dilaksanakan melalui "navbar-header" dan "navbar-brand".

 <!-- 导航条标题-->
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">LOGO</a>
 　</div>

Salin selepas log masuk

2. Menu kedua dilaksanakan melalui

 <!-- 二级菜单-->
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>

Salin selepas log masuk

3. "Borang-navbar" disediakan dalam rangka kerja Bootstrap Kaedah penggunaannya sangat mudah.

"navbar-left" menjadikan borang terapung ke kiri dan gaya "navbar-right" menjajarkan elemen ke kanan dalam bar navigasi.


 <!-- 搜索表单-->
 <form action="##" class="navbar-form navbar-left">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>

Salin selepas log masuk

2. Bar navigasi terbalik

Bar navigasi songsang sebenarnya adalah gaya kedua bar navigasi yang disediakan oleh rangka kerja Bootstrap Ia hanya menggantikan nama kelas "navbar-deafult" dengan "navbar-inverse".

<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a href="##" class="navbar-brand">LOGO</a>
 </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="">首页</a></li>
 <li><a href="">教程</a></li>
 <li><a href="">关于我们</a></li>
 </ul>
</div>

Salin selepas log masuk




3. Bar navigasi tetap

Salah satu daripada banyak situasi di mana pereka bentuk mahu bar navigasi dibetulkan di bahagian atas atau bawah penyemak imbas.

Rangka kerja Bootstrap menyediakan dua cara untuk membetulkan bar navigasi:

　☑ .navbar-fixed-top: Bar navigasi ditetapkan di bahagian atas tetingkap penyemak imbas

　☑ .navbar-fixed-bottom: Bar navigasi ditetapkan di bahagian bawah tetingkap penyemak imbas

Kaedah penggunaan adalah sangat mudah Anda hanya perlu menambahkan nama kelas yang sepadan pada bar navigasi, bekas paling luar bar navigasi.


<!--导航条固定在浏览器窗口顶部-->
<div class="navbar navbar-default navbar-fixed-top">
 　…
</div>
<!--导航条固定在浏览器窗口底部-->
<div class="navbar navbar-default navbar-fixed-bottom">
 　…
</div>

Salin selepas log masuk

4. Bar navigasi responsif


<div class="navbar navbar-default">
 <div class="navbar-header">
 　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#demo">
 <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
 <a href="##" class="navbar-brand">LOGO</a>
 </div>
 <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse" id="demo">
 <ul class="nav navbar-nav">
 <li><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 </div>
</div>

Salin selepas log masuk

Dalam mod skrin lebar:



Dalam mod skrin sempit:



Penggunaan:

1. Pastikan kandungan yang perlu dilipat dalam skrin sempit mesti dibalut dalam div dan tambahkan dua nama kelas runtuh dan navbar-runtuh pada div ini. Akhir sekali, tambahkan nama kelas atau nama id pada div ini.

2. Pastikan gaya ikon dipaparkan dalam skrin sempit (kaedah penulisan tetap):

<button class="navbar-toggle" type="button" data-toggle="collapse">
 <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</button>

Salin selepas log masuk

3. Tambahkan data-target=".class name/#id name" pada butang

Rakan-rakan yang ingin mengetahui lebih lanjut tentang Bootstrap boleh klik "Tutorial Pembelajaran Bootstrap" untuk kajian yang mendalam.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

Anda juga boleh menggabungkan "Bar navigasi Bootstrap yang anda mesti pelajari setiap hari" untuk belajar.