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.

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

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

//使用小图标
<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"은 여기 dc6dce4a544fdca2df29d5ac0ea9906b에서 구현되지 않습니다. 소스 코드 분석을 통해 중첩 자체가 이미 배치되어 있으므로 다시 설정할 필요가 없습니다. . 오른쪽의 둥근 모서리에는 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 컴포넌트의 메뉴 버튼 아이콘 컴포넌트입니다. 모두에게 도움이 되었으면 좋겠습니다!