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 컴포넌트의 메뉴 버튼 아이콘 컴포넌트입니다. 모두에게 도움이 되었으면 좋겠습니다!

본 웹사이트의 성명

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

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. 최고의 그래픽 설정

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

3 몇 주 전 By DDD

Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법

2 몇 주 전 By DDD

Will R.E.P.O. 크로스 플레이가 있습니까?

1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7554

15

Cakephp 튜토리얼

1382

52

Steam의 계정 이름 형식은 무엇입니까?

83

11

Win11 활성화 키 영구

59

19

NYT 연결 힌트와 답변

25

96

더보기