부트스트랩 입문서(4) 메뉴, 버튼 및 Navigation_javascript 기술
- WBOY원래의
- 2016-05-16 15:14:571303검색
다음으로 배울 내용은 Bootstrap에서 제공하는 몇 가지 구성 요소입니다. 이러한 구성 요소는 사용이 매우 간단하고 웹 사이트를 빠르고 편리하게 구축하는 데 도움이 되며 좋은 디스플레이 효과를 얻을 수 있습니다. 우리가 가장 주목해야 할 것은 HTML의 구조와 부트스트랩이 구조에 추가하기 위해 제공하는 클래스 및 속성입니다.
이러한 구성 요소의 대화형 기능은 jQuery 라이브러리에 의존하므로 jQuery.js도 도입되어야 하며 Bootstrap.js보다 먼저 있어야 합니다. 정식으로 출시된다면 아래와 같이 압축버전을 사용하시면 됩니다.
<script src="../js/jquery-min-1.11.3.js"></script><script src="../js/bootstrap.min.js"></script>
메뉴
기본 사용법
공식 문서에서 볼 수 있는 드롭다운 메뉴 구성요소는 다음과 같습니다.
<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>
그럼 행동을 통제하려면 어떤 속성이 필요한가요? 수정에는 어떤 부분이 사용되나요?
이 코드를 직접 단순화해 보겠습니다.
<div class="dropdown"> <button class="dropdown-toggle"data-toggle="dropdown">下拉菜单</button> <ul class="dropdown-menu" > <li>菜单项1</li> <li>菜单项2</li> </ul></div>
단순화 전과 후를 비교해 보겠습니다.
부트스트랩 프레임워크에서 드롭다운 메뉴 컴포넌트를 사용할 때 올바른 구조를 사용하는 것이 매우 중요합니다. 구조와 클래스 이름을 올바르게 사용하지 않으면 컴포넌트의 정상적인 사용 여부에 직접적인 영향을 미칩니다. 위의 단순화를 통해 마침내 핵심 요구 사항이 다음과 같다는 것을 알 수 있습니다.
.dropdown이라는 컨테이너를 사용하여 전체 드롭다운 메뉴 요소를 래핑합니다. 예에서는 c015d0f164ad1b1988b34ffbc5d30df016b28748ea4df4d9c2150843fecfba68 버튼을 상위 메뉴로 사용합니다. 그리고 클래스 이름 .dropdown-toggle 및 사용자 정의 data-toggle 속성을 정의하고 값은 가장 바깥쪽 컨테이너 클래스 이름과 일치해야 합니다. 이 예는 다음과 같습니다. data-toggle="dropdown" 드롭다운 메뉴 항목은 ul 목록을 사용합니다. 그리고 .dropdown-menu 라는 클래스를 정의합니다. 이 예는 다음과 같습니다: a03e72f68170606d7442fa279cbc8f14
즉, 드롭다운 메뉴를 효과적으로 만들려면 이 3단계만 기억하면 됩니다. bb9345e55eb71822850ff156dfde57c8 내의 45a2772a6b6107b401db3c9b82c049c2 태그는 메뉴를 더 명확하게 하기 위해 아이콘을 표시하는 데만 사용됩니다. 하지만 그럼에도 불구하고 실제 사용 과정에서 부트스트랩 프레임워크의 드롭다운 메뉴에 다른 속성도 추가하면 스크린 리더와 같은 다양한 고객에게 더 친숙하고 고품질의 경험을 제공할 수 있다고 개인적으로 추천합니다. .
그럼 어떻게 작동하나요?
CSS 소스 코드를 보면 .dropdown-menu에 display:none이 있으므로 드롭다운 목록 항목이 기본적으로 숨겨져 있음을 알 수 있습니다.
Chrome 개발자 도구(F12)를 계속 열면 목록 항목이 표시될 때마다 .dropdown 클래스 뒤에 .open 클래스가 추가되는 것을 볼 수 있습니다. 이 클래스는 확실히 작동합니다. . 계속해서 CSS 소스 코드로 돌아가서 다음을 볼 수 있습니다.
.open > .dropdown-menu { display: block;}
이렇게 보면 길게 설명할 필요가 없습니다. .open 클래스를 추가하면 자연스럽게 .dropdown-menu가 표시됩니다.
드롭다운 메뉴 장식
드롭다운 구분선
Bootstrap 프레임워크의 드롭다운 메뉴는 드롭다운 구분 기호도 제공합니다. 드롭다운 메뉴에 두 개의 그룹이 있다고 가정하면 그룹 사이에 빈 25edfb22a4f469ecb59f1190150159c6 ; 드롭다운 구분선을 추가하는 기능을 구현하기 위한 클래스 이름 .divider.
9d1f934341079c21cf67f67b315c4d5ebed06894275b65c1ab86501b08a632eb 해당 스타일 코드:
.dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5;}
메뉴 제목
이전 섹션에서는 구분선을 추가하여 드롭다운 메뉴를 그룹화할 수 있다고 설명했습니다. 이 그룹화를 더욱 명확하게 하기 위해 각 그룹에 헤더(제목)를 추가할 수도 있습니다. 575edeb4ea7c714d80b864a148d2361e 메뉴 헤더의 일부bed06894275b65c1ab86501b08a632eb
소스 코드의 두 가지 핵심 사항은 제목의 글꼴 색상: 색상: #777 및 패딩: 3px 20px입니다.
정렬
<ul class="dropdown-menu pull-right" >
.dropdown-menu.pull-right,.dropdown-menu-right {/*两个类自选*/ right: 0; left: auto;}
.dropdown{ float: left;}
菜单项状态
下拉菜单项的默认的状态（不用设置）有悬浮状态（ :hover ）和焦点状态（ :focus ）：（包括下面提到的状态都必须在li中包含a标签才有- -）
下拉菜单项除了上面两种状态，还有 当前状态 （ .active ）和 禁用状态 （ .disabled ）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名如： 3d5e0f707da47114fda4a8cb3cd40472ee7959cc8dd4be16ef633321c03dac32桃5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb
我们可以实现下面这样的效果：
按钮
我们在 《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 ，就可以实现垂直分组的效果。
按钮的向下向上三角形
我们在下拉菜单和嵌套分组都都看到了一个按钮的向下三角形，我们是通过在 bb9345e55eb71822850ff156dfde57c8 标签中添加一个 45a2772a6b6107b401db3c9b82c049c2 标签元素，并且命名为 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 类名即可，同时，我们和下拉菜单一样，同样可以使用组之间的分割线例，只需要在导航项之间添加 fb75b957dfbba076c236b53c0f93301fbed06894275b65c1ab86501b08a632eb ,如：
<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入门书籍之（五）导航条、分页导航，感兴趣的朋友继续关注，谢谢！