Chapter 7 메뉴버튼 아이콘 Component_Javascript Skills

Twitter의 Bootstrap은 현재 가장 인기 있는 프런트엔드 프레임워크입니다. Bootstrap은 HTML, CSS 및 JAVASCRIPT를 기반으로 하며 간단하고 유연하여 웹 개발을 더 빠르게 만듭니다.

학습 포인트:

1. 작은 아이콘 구성요소

2. 드롭다운 메뉴 구성요소

3. 버튼 그룹 구성요소

4. 버튼 드롭다운 메뉴

이번 강의에서는 주로 Bootstrap의 세 가지 구성 요소인 작은 아이콘 구성 요소, 드롭다운 메뉴 구성 요소 및 다양한 버튼 구성 요소를 연구합니다.

1. 작은 아이콘 구성 요소

Bootstrap은 263개의 무료 작은 아이콘을 제공합니다(두 번 계산됨). 자세한 내용은 중국 공식 웹사이트의 구성 요소 링크를 참조하세요:

http://v3.bootcss.com/comComponents/#glyphicons.

일부 아이콘은 다음과 같습니다.

은 다음과 같이 또는 태그와 함께 사용할 수 있습니다.

//使用小图标
<i class="glyphicon glyphicon-star"></i>
<span class="glyphicon glyphicon-star"></span> 
//也可以结合按钮
<button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn">
<span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star"></span>
</button>
<button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star"></span>
</button> 

2. 드롭다운 메뉴 구성요소

드롭다운 메뉴는 요소나 버튼을 클릭하여 숨겨진 목록이 표시되도록 하는 것입니다.

//基本格式
<div class="dropdown">
<button class="btn btn-default" data-toggle="dropdown">
下拉菜单
<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> 

버튼과 메뉴는 .dropdown 컨테이너에 래핑되어야 하며, 클릭한 요소인 버튼은 data-toggle="dropdown"으로 설정되어야 효과적입니다. 메뉴 섹션의 경우 고정 스타일을 자동으로 숨기고 추가하려면 class="dropdown-menu"를 설정하세요. 위쪽 또는 아래쪽 화살표를 나타내려면 class="caret"를 설정합니다.

//设置向上触发
<div class="dropup"> 
//菜单项居右对齐，默认值是 dropdown-menu-left
<ul class="dropdown-menu dropdown-menu-right"> 
//设置菜单的标题，不要加超链接
<li class="dropdown-header">网站导航</li> 
//设置菜单的分割线
<li class="divider"></li> 
//设置菜单的禁用项
<li class="disabled"><a href="#">产品</a></li> 
//让菜单默认显示
<div class="dropdown open"> 

3. 버튼 그룹 구성요소

버튼 그룹은 컨테이너에 통합된 여러 개의 버튼으로 독특한 효과를 만들어냅니다.

//基本格式
<div class="btn-group">
<button type="button" class="btn btn-default">
左
</button>
<button type="button" class="btn btn-default">
中
</button>
<button type="button" class="btn btn-default">
右
</button>
</div> 
//将多个按钮组整合起来便于管理
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">
左
</button>
<button type="button" class="btn btn-default">
中
</button>
<button type="button" class="btn btn-default">
右
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
</button>
<button type="button" class="btn btn-default">
</button>
<button type="button" class="btn btn-default">
</button>
</div>
</div> 
//设置按钮组大小
<div class="btn-group btn-group-lg">
<div class="btn-group>
<div class="btn-group btn-group-sm">
<div class="btn-group btn-group-xs"> 
//嵌套一个分组，比如下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default">
左
</button>
<button type="button" class="btn btn-default">
中
</button>
<button type="button" class="btn btn-default">
右
</button>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
下拉菜单
<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>
</div> 

참고: Class="dropdown"은 여기

에서 구현되지 않습니다. 소스 코드 분석을 통해 중첩 자체가 이미 배치되어 있으므로 다시 설정할 필요가 없습니다. . 오른쪽의 둥근 모서리에는 class="dropdown-toggle"을 하나 더 추가하면 됩니다.

//设置按钮组垂直排列
<div class="btn-group-vertical"> 
//设置两端对齐按钮组，使用<a>标签
<div class="btn-group-justified">
<a type="button" class="btn btn-default">左</a>
<a type="button" class="btn btn-default">中</a>
<a type="button" class="btn btn-default">右</a>
</div> 
//如果需要使用<button>标签，则需要对每个按钮进行群组
<div class="btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">
左
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
中
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">
右
</button>
</div>
</div> 

4. 버튼 드롭다운 메뉴

이 드롭다운 메뉴는 그룹에 속해 있고

에서 class="dropdown"을 선언할 필요가 없다는 점만 제외하면 실제로 두 번째 지식 포인트와 동일합니다.

//群组按钮下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown">
下拉菜单
<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> 
//分裂式按钮下拉菜单
<div class="btn-group">
<button type="button" class="btn btn-default">
下拉菜单
</button>
<button type="button" class="btn btn-default dropdown-toggle"data-toggle="dropdown">
<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> 
//向上弹出式
<div class="btn-group dropup">

위 내용은 에디터가 소개한 BootStrap 컴포넌트의 메뉴 버튼 아이콘 컴포넌트입니다. 모두에게 도움이 되었으면 좋겠습니다!

관련 라벨：

菜单组件

원천：php.cn

이전 기사：눈이 옵니다. JavaScript가 눈송이를 춤추게 합니다._javascript 기술. 다음 기사：Bootstrap이 매일매일 배워야 하는 버튼 플러그인_javascript 기술

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사

• NullPointerException은 무엇이며 어떻게 해결합니까?
  2024-10-22 09:46:29
• 초보자에서 코더까지: C 기초로 시작되는 여정
  2024-10-13 13:53:41
• PHP로 웹 개발 잠금 해제: 초보자 가이드
  2024-10-12 12:15:51
• C에 대한 이해: 새로운 프로그래머를 위한 명확하고 간단한 길
  2024-10-11 22:47:31
• 코딩 잠재력 발휘: 완전 초보자를 위한 C 프로그래밍
  2024-10-11 19:36:51
• 내면의 프로그래머를 깨워보세요: 완전 초보자를 위한 C
  2024-10-11 15:50:41
• C로 일상을 자동화하세요: 초보자를 위한 스크립트 및 도구
  2024-10-11 15:07:41
• PHP가 쉬워졌습니다: 웹 개발의 첫 번째 단계
  2024-10-11 14:21:21
• Python으로 무엇이든 빌드하기: 창의력을 발휘하기 위한 초보자 가이드
  2024-10-11 12:59:11
• 코딩의 핵심: 초보자를 위한 Python의 힘 활용
  2024-10-11 12:17:31

최신 이슈

모바일 보기에서 사용자가 링크를 클릭할 때 이 탐색 표시줄을 어떻게 닫을 수 있나요? 사용자가 웹 사이트를 탐색하기 위해 링크를 클릭하면 탐색 표시줄이 닫히지 않습니까? 내비게이션 바를 닫기 위해 각 링크에 클릭 이벤트 리스너를 추가해 보았지만 작...

에서 2024-04-06 19:23:03

0

1

411

Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...

에서 2024-04-06 14:54:03

0

2

421

jquery를 사용하여 HTML 데이터 테이블에서 선택되지 않은 행의 값을 검색하는 방법 버튼을 클릭하지 않은 모든 행의 값을 얻으려고합니다. 예를 들어, 첫 번째 행의 버튼을 클릭했을 때 클릭되지 않은 행의 값을 검색하고 싶습니다. vartable=...

에서 2024-04-05 09:26:49

0

1

1418

그림자 복제 버전으로 메뉴 버튼을 x 모양으로 변환하는 호버 효과 만들기 먼저 제 제목이 혼란스럽다는 점을 인정하고 죄송합니다. 내가 달성하고 싶은 것은 hover에 대한 다음과 같은 효과입니다. 내 웹 사이트는 여기 https://w...

에서 2024-04-04 11:55:21

0

2

315

확인란이 여전히 멈춰 있고 기본값으로 돌아갈 수 없는 이유는 무엇입니까? 방금 토글 버튼을 클릭한 후 페이지 제목을 변경하기 위해 이 기능을 만들었는데, 어떤 이유에서인지 클릭하면 멈춥니다. 이 함수에 어떤 문제가 있는지 잘 모르겠습니...

에서 2024-04-04 00:14:23

0

1

390

관련 주제

더>

• 대형 함수와 최대 함수의 차이점
• 교대 백도어 사용법
• 메타버스란 무엇인가
• XP에서 전원 켜기 비밀번호 취소
• 리플 통화 오늘의 시장 가격
• Win10에서 자동 업데이트를 끄는 방법
• CSS 프레임워크와 구성 요소 라이브러리의 차이점은 무엇입니까
• 휴대폰으로 전화는 걸 수 없지만 인터넷 서핑은 할 수 없는 이유는 무엇입니까?