Artikel ini akan membantu anda mempelajari bar navigasi dan navigasi halaman dalam Bootstrap

Artikel ini akan membawa anda melalui bar navigasi dan navigasi halaman dalam Bootstrap, dan juga memperkenalkan label dan lencana saya harap ia akan membantu anda.

1 Asas bar navigasi

Bar navigasi (navbar) berbeza daripada navigasi (nav) yang diperkenalkan dalam bahagian sebelumnya Satu perkataan, satu lagi perkataan "tiao". Malah, mereka masih jelas berbeza dalam rangka kerja Bootstrap. Terdapat warna latar belakang dalam bar navigasi (navbar), dan bar navigasi boleh menjadi pautan tulen (serupa dengan navigasi), borang, atau gabungan bentuk dan navigasi. [Cadangan berkaitan: "tutorial bootstrap"]

2. Bar navigasi asas

Dalam kotak Bootstrap, bar navigasi dan navigasi secara visual Perbezaannya tidak terlalu besar, tetapi dalam penggunaan sebenar bar navigasi jauh lebih rumit daripada navigasi.

Penggunaan:

Apabila membuat bar navigasi asas, terdapat terutamanya langkah berikut:

Langkah 1: Mula-mula, buat navigasi Tambah nama kelas "navbar-nav" berdasarkan senarai (<ul class="nav">) Langkah 2: Tambahkan bekas (div) di luar senarai dan gunakan nama kelas "navbar" dan "navbar-default"

Analisis prinsip:

untuk menavigasi Warna bar dikawal melalui ".navbar-default".

3. Tambahkan tajuk, menu kedua dan status pada bar navigasi

Dalam penghasilan halaman web, selalunya terdapat tajuk di hadapan menu (teks saiz fon lebih besar daripada yang lain Teksnya lebih besar sedikit). Malah, rangka kerja Bootstrap juga telah membuat pertimbangan ini untuk semua orang Ia dilaksanakan melalui "navbar-brand" dan "navbar-brand". Sudah tentu, ia boleh dianggap sebagai penambahbaikan demi penambahbaikan logo (bukan untuk menghuraikan terlalu banyak di sini). Gaya utama adalah untuk meningkatkan tetapan fon dan menetapkan lebar maksimum Juga di bawah bar navigasi lalai (navbar-default), jenama navbar juga diproses dengan warna yang sama, menu disediakan dalam bar navigasi asas , keadaan dilumpuhkan, keadaan digantung dan kesan lain, dan juga boleh mempunyai bar navigasi dengan menu kedua.

4. Bar navigasi dengan borang

menyediakan "navbar-form" dalam rangka kerja Bootstrap Kaedah penggunaan adalah sangat mudah borang dalam bekas navbar Untuk borang dengan nama kelas bentuk-navbar, rangka kerja Bootstrap juga menyediakan gaya "navbar-kanan" untuk menjajarkan elemen di sebelah kanan bar navigasi. Terdapat syarat di sini, yang hanya berkuat kuasa apabila lebar tetingkap penyemak imbas lebih besar daripada 768px.

5. Butang, teks dan pautan dalam bar navigasi

Selain menggunakan elemen dalam jenama-navbar dan ul navbar-nav dalam navigasi bar rangka kerja Bootstrap Selain bentuk navbar, elemen lain boleh digunakan. Rangka kerja menyediakan tiga gaya tambahan:

1) Butang navbar-btn dalam bar navigasi

2) Teks dalam bar navigasi teks-navbar

3) Navigation bar The pautan biasa dalam pautan-navbar

, tetapi ketiga-tiga gaya ini tertakluk kepada sekatan tertentu apabila digunakan dalam rangka kerja, dan perlu digunakan bersama-sama dengan jenama-navbar dan navbar-nav. Terdapat juga had tertentu pada kuantiti Secara amnya, tidak akan ada masalah jika anda menggunakan satu atau dua, tetapi akan ada masalah jika anda menggunakan lebih daripada dua.

6. Bar navigasi tetap

Dalam satu daripada banyak kes, pereka bentuk mahu bar navigasi dibetulkan di bahagian atas atau bawah penyemak imbas bar navigasi tetap berada dalam Lebih biasa dalam pembangunan mudah alih. Rangka kerja Bootstrap menyediakan dua cara untuk membetulkan bar navigasi:

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

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

Kaedah penggunaannya 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" role="navigation">
　…
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>

7. Bar navigasi responsif

Pada masa kini, terminal yang menyemak imbas halaman Web tidak lagi sama Bar navigasi yang dilaksanakan dalam contoh sebelumnya sahaja disesuaikan dengan Ia sesuai untuk pelayar skrin besar, tetapi ia tidak sesuai apabila skrin penyemak imbas menjadi lebih kecil. Jadi reka bentuk responsif mengikuti. Jadi dalam halaman Web responsif, bar navigasi responsif adalah sangat penting.

Penggunaan:

1) Pastikan kandungan yang perlu dilipat dalam skrin sempit mesti dibalut dalam div, dan tambah collapse dan navbar-collapse pada ini div Dua nama kelas. 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>

3) Dan tambah data-target=".class name/#id name to butang ", adakah ia nama kelas atau nama id? Ditentukan oleh div yang perlu dilipat.

Segmen kod div yang perlu dilipat:

<div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时显示的图标代码段：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
</button>也可以这么写，需要折叠的div代码段：<div class="collapse navbar-collapse example" >
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时要显示的图标：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
  ...
</button>

8、反色导航条

反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。

9、分页导航（带页码的分页导航）

分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航：

☑ 带页码的分页导航

☑ 带翻页的分页导航

带页码的分页导航

带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。

使用方法：

平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法：

<ul class="pagination">
   <li><a href="#">&laquo;</a></li>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
   <li><a href="#">&raquo;</a></li>
</ul>

10、分页导航（翻页分页导航）

Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。

使用方法：

在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类：

<ul class="pager">
   <li><a href="#">&laquo;上一页</a></li>
   <li><a href="#">下一页&raquo;</a></li>
</ul>

11、标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。如果使用的是a标签元素来制作的话，为了让其更美观，在hover状态去掉下划线之类。只要在span标签上添加vertical-align: super; 就可以实现标签定位在右上角了。

使用原理：

使用方法很简单，你可以在使用span这样的行内标签：

<h3>Example heading <span class="label label-default">New</span></h3>

12、徽章

从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读，在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现。不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。

使用方法：

使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类：

<a href="#">Inbox <span class="badge">42</span></a>

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

Atas ialah kandungan terperinci Artikel ini akan membantu anda mempelajari bar navigasi dan navigasi halaman dalam Bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!