Buku pengenalan Bootstrap (4) Menu, butang dan kemahiran navigation_javascript

Apa yang akan kami pelajari seterusnya ialah beberapa komponen yang disediakan oleh Bootstrap Komponen ini sangat mudah digunakan, boleh membantu kami membina tapak web dengan cepat dan mudah, serta boleh mencapai kesan paparan yang baik. Perkara yang paling perlu kita perhatikan ialah: struktur HTML dan kelas serta atribut yang disediakan oleh bootstrap untuk ditambahkan pada struktur.

Fungsi interaktif komponen ini bergantung pada perpustakaan jQuery, jadi jQuery.js juga mesti diperkenalkan, dan ia mesti sebelum Bootstrap.js. Jika ia dilancarkan secara rasmi, hanya gunakan versi mampat seperti berikut:

<script src="../js/jquery-min-1.11.3.js"></script><script src="../js/bootstrap.min.js"></script>

Menu

Penggunaan asas

Dalam dokumentasi rasmi, komponen menu lungsur yang kita lihat kelihatan seperti ini:

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 下拉菜单<span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> </ul></div>

Jadi, atribut manakah yang diperlukan untuk mengawal tingkah laku? Bahagian yang manakah digunakan untuk pengubahsuaian?

Mari kita mudahkan kod ini sendiri:

<div class="dropdown"> <button class="dropdown-toggle"data-toggle="dropdown">下拉菜单</button> <ul class="dropdown-menu" > <li>菜单项1</li> <li>菜单项2</li> </ul></div>

Mari kita lihat perbandingan sebelum dan selepas pemudahan:

Apabila menggunakan komponen menu lungsur dalam rangka kerja Bootstrap, adalah sangat penting untuk menggunakan struktur yang betul Jika struktur dan nama kelas tidak digunakan dengan betul, ia akan menjejaskan sama ada komponen itu boleh digunakan secara normal. Selepas pemudahan kami di atas, akhirnya kami dapat melihat bahawa keperluan teras adalah seperti berikut:

Gunakan bekas bernama .dropdown untuk membalut keseluruhan elemen menu drop-down Dalam contoh:

menggunakan butang Dan takrifkan nama kelas .dropdown-toggle dan atribut data-toggle tersuai, dan nilainya mestilah konsisten dengan nama kelas bekas paling luar Contoh ini ialah: data-toggle="dropdown" item menu drop-down menggunakan senarai ul dan mentakrifkan kelas Bernama .dropdown-menu , contoh ini ialah:

Dalam erti kata lain, kita hanya perlu mengingati 3 langkah ini untuk menjadikan menu lungsur yang berkesan Teg dalam Tetapi walaupun ini, saya secara peribadi mengesyorkan bahawa dalam proses penggunaan sebenar, atribut lain menu lungsur dalam rangka kerja Bootstrap juga ditambah, supaya ia lebih mesra dan memberikan pengalaman berkualiti tinggi untuk pelanggan yang berbeza seperti pembaca skrin .

Jadi bagaimana ini berfungsi?

Melihat kod sumber CSS, anda dapat melihat bahawa .dropdown-menu mempunyai paparan:tiada, jadi item senarai lungsur disembunyikan secara lalai;

Kami terus membuka alat pembangun chrome (F12), dan kami dapat melihat bahawa setiap kali item senarai dipaparkan, kelas .open ditambah selepas kelas .dropdown tidak perlu dikatakan, kelas ini sudah pasti di tempat kerja . , kita boleh terus kembali ke kod sumber CSS dan lihat:




.open > .dropdown-menu { display: block;}

Anda tidak perlu menjelaskan terlalu banyak apabila anda melihat ini Apabila kelas .open ditambahkan, menu .dropdown akan dipaparkan secara semula jadi.




Hiasan menu lungsur

Pembahagi lungsur


Menu lungsur turun dalam rangka kerja Bootstrap juga menyediakan pemisah lungsur turun dengan mengandaikan bahawa menu lungsur turun mempunyai dua kumpulan, anda boleh menambah
• yang kosong di antara kumpulan dan menambah
• ; Nama kelas .pembahagi untuk melaksanakan fungsi menambah pembahagi lungsur.

• Kod gaya sepadan:

  
  

  .dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;}

  Tajuk menu
  

  Bahagian sebelumnya menjelaskan bahawa menu lungsur turun boleh dikumpulkan dengan menambahkan pembahagi Untuk menjadikan kumpulan ini lebih jelas, anda juga boleh menambah pengepala (tajuk) pada setiap kumpulan:
• Sebahagian daripada pengepala menu
.
Dua perkara utama daripada kod sumber ialah: warna fon tajuk ialah: warna: #777; dan padding: 3px 20px;




Penjajaran
Menu lungsur turun dalam rangka kerja Bootstrap dijajarkan ke kiri secara lalai, yang boleh dicapai dengan menambah kelas .dropdown-menu-left. Jika anda mahu menu lungsur turun dijajar kanan pada bekas induk, anda boleh menambahkannya pada .dropdown-menu ( Iaitu, ul item menu anda) tambahkan nama kelas .pull-right atau .dropdown-menu-right, seperti yang ditunjukkan di bawah:

<ul class="dropdown-menu pull-right" >

Kod sumber adalah seperti berikut:




.dropdown-menu.pull-right,.dropdown-menu-right {/*两个类自选*/ right: 0; left: auto;}

Sudah tentu, jika anda hanya membuat tetapan ini, beberapa situasi pelik mungkin berlaku, seperti item senarai berjalan ke hujung kanan skrin, jadi anda juga mesti menambah gaya float:left ke .dropdown.




 

菜单项状态


下拉菜单项的默认的状态（不用设置）有悬浮状态（ :hover ）和焦点状态（ :focus ）：（包括下面提到的状态都必须在li中包含a标签才有- -）

下拉菜单项除了上面两种状态，还有 当前状态 （ .active ）和 禁用状态 （ .disabled ）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名如：

桃

我们可以实现下面这样的效果：

 


按钮


我们在 《Bootstrap入门书籍之（二）表单》 中，已经了解过了Bootstrap中按钮的使用，在这里我们继续进行一些扩展！


按钮组及工具栏


单个按钮在Web页面中的运用有时候并不能满足我们的业务需求，常常会看到将多个按钮组合在一起使用，比如富文本编辑器里的一组小图标按钮等。这个时候我们就会需要用到按钮组

对于结构方面，非常的简单。使用一个名为 .btn-group 的容器，把多个按钮放到这个容器中。如：


<div class="btn-group"> <button type="button" class="btn btn-default">向左</button> <button type="button" class="btn btn-danger">中间</button> <button type="button" class="btn btn-default">向右</button></div>




如何转化成工具栏呢？只需要再用一个 .btn-toolbar 的内容，将我们的 .btn-group 再进行一次包裹，同时，我们还可以使用 .btn-group-lg 大按钮组、 .btn-group-xs :超小按钮组这一系列的类添加到 .btn-group 容器来进行对一组按钮进行大小控制如下：


<div class= "btn-toolbar"> <!-- …… --> <div class= "btn-group "> <button type="button" class="btn btn-default">向左</button> <button type="button" class="btn btn-danger">中间</button> <button type="button" class="btn btn-default">向右</button> </div> <div class= "btn-group btn-group-sm"> <button type="button" class="btn btn-default">向左</button> <button type="button" class="btn btn-danger">中间</button> <button type="button" class="btn btn-default">向右</button> </div> <!-- …… --></div>

上面两段代码效果如下：

 


嵌套分组


这里的嵌套分组其实就是在分组按钮中嵌套了一个下拉菜单。使用的时候，只需要把当初制作下拉菜单的 .dropdown 的容器换成 .btn-group ，并且和普通的按钮放在同一级。如下所示：


<div class="btn-group"> <button class="btn btn-default" type="button">首页</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">产品展示<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="##">公司简介</a></li> <li><a href="##">企业文化</a></li> <li><a href="##">组织结构</a></li> <li><a href="##">客服服务</a></li> </ul> </div> <button class="btn btn-default" type="button">关于</button></div>

当然我们还可以从 水平按钮组 变成 垂直分组 ，只需要在水平分组的最外层容器的类名 .btn-group 替换成 .btn-group-vertical ，就可以实现垂直分组的效果。


按钮的向下向上三角形


我们在下拉菜单和嵌套分组都都看到了一个按钮的向下三角形，我们是通过在 标签中添加一个 标签元素，并且命名为 caret ，这个三角形完全是通过CSS代码来实现的：


.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent;}

有的时候我们的下拉菜单会 向上弹起 ，这个时候我们的 三角方向需要朝上 显示，实现方法：需要在 .btn-group 类上追加 dropup 类名（这也是做向上弹起下拉菜单要用的类名）。


.dropup .caret{ content: ""; border-top: 0;/*可以看到这里top与bottom的变化*/ border-bottom: 4px solid;}


那么现在就来对比一下，上面代码以及类的添加可以达到的不同效果：

 


导航


导航对于一位前端开发人来说眼应该都不陌生。可以说，每一个网页里面都会有导航的存在，便于用户查找网站所提供的各项功能服务。那么如何使用Bootstrap框架制作各式各样的导航呢？


基础样式


Bootstrap框架中制作导航条主要通过 .nav 样式。默认的 .nav 样式 不提供 默认的导航样式，必须附加另外一个样式才会有效，比如 nav-tabs 、 nav-pills 之类。


<ul class="nav nav-tabs"> <li><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li><a href="#">JavaScript</a></li></ul>

当然他们同样也有 当前状态 （ .active ）和 禁用状态 （ .disabled ），我们给第一个导航添加当前状态，最后一个导航添加禁用状态，实现效果如下：

 


修饰

垂直堆叠的导航


在实际运用当中，除了水平导航之外，还有垂直导航，就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在 .nav-pills的基础上添加一个 .nav-stacked 类名即可，同时，我们和下拉菜单一样，同样可以使用组之间的分割线例，只需要在导航项之间添加

,如：


<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li class="nav-divider"></li> <li class="disabled"><a href="#">JavaScript</a></li></ul>

复制到浏览器中看看效果吧！

你应该已经发现了在垂直导航中，每一个导航项都是占 文字居左 ，占100%的父容器宽度的，如果你想有响应式的效果，应该和栅格系统一起使用，另外为什么不试试使用 nav-tabs 来实现垂直导航呢？看看效果，你就会明白为什么不使用了。


自适应导航


自适应导航和前面制作自适应按钮是一样的，不过更换了一个类名， .nav-justified 。当然他需要和 .nav-tabs 或者 .nav-pills

配合在一起使用。 它是响应式的，在宽度足够时，给多个导航项，均分空间；在达到一个临界值（768px）时，它会和垂直导航一样：每一项都充满父容器的宽度，不同的是，他的文字是 居中显示 的


导航中加下拉菜单（二级导航）


前面介绍的都是使用制作一级导航，但很多时候，在Web页面常常会用到二级导航的效果。

在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名 .dropdown ，同时在 li 中嵌套另一个列表 ul


<ul class="nav nav-pills"> <li ><a href="#">HTML5</a></li> <li><a href="#">CSS3</a></li> <li class="dropdown"> <a href="##" class="dropdown-toggle" data-toggle="dropdown">JavaScript<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">JQuery</a></li> <li><a href="##">Vue</a></li> … </ul></ul>

这里的话不进行太多的讲解，与上面的嵌套按钮效果一致。


面包屑式导航


面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（ 当前位置 ）。一般在文章、博客、列表处用的比较多，需要用到 .breadcrumb 类。


<ol class="breadcrumb"> <li><a href="#">个人首页</a></li> <li><a href="#">标签</a></li> <li class="active">Bootstrap</li></ol>

可以实现的效果：

 

是不是很简洁明了呢？

关于Bootstrap入门书籍之（四）菜单、按钮及导航的相关知识就给大家介绍这么多，下篇给大家介绍Bootstrap入门书籍之（五）导航条、分页导航，感兴趣的朋友继续关注，谢谢！