부트스트랩 드롭다운 메뉴 작성 방법

Bootstrap 드롭다운 메뉴는 하위 메뉴를 아래쪽으로 확장하는 메뉴 구성 요소입니다. 생성 방법은 다음과 같습니다. 상위 메뉴 항목을 만들고 "dropdown-toggle" 및 "data-toggle="dropdown"" 속성을 추가합니다. 드롭다운 콘텐츠를 만들고 "dropdown-menu" 클래스를 사용하여 드롭다운 메뉴 항목을 래핑합니다. 상위 메뉴 항목에 드롭다운 콘텐츠를 추가합니다. "드롭다운 메뉴 오른쪽" 또는 "드롭다운 메뉴 왼쪽" 정렬 드롭다운 메뉴를 추가합니다. 메뉴 항목을 구분하려면 "divider" 클래스를 추가하세요. 헤더를 생성하려면 "dropdown-header" 클래스를 추가하세요.

부트스트랩 드롭다운 메뉴

드롭다운 메뉴는 부트스트랩에서 제공하는 메뉴 컴포넌트로, 상위 메뉴 항목에서 하위 메뉴가 아래쪽으로 확장되는 효과를 낼 수 있는 공통 요소입니다. 탐색 표시줄 및 사용자 인터페이스.

Bootstrap 드롭다운 메뉴를 만드는 방법

<li>

상위 메뉴 항목 만들기: <a></a> 요소를 사용하여 메뉴 항목 콘텐츠를 래핑하고 추가 dropdown-toggle code> 클래스와 <code>data-toggle="dropdown" 속성. <a></a> 元素包裹菜单项内容，并为其添加 dropdown-toggle 类和 data-toggle="dropdown" 属性。

<a class="dropdown-toggle" data-toggle="dropdown" href="#">菜单项</a>

<li>

创建下拉内容：使用 <ul></ul> 元素包裹下拉菜单项，并为其添加 dropdown-menu 类。

<ul class="dropdown-menu">
  <li><a href="#">子菜单项1</a></li>
  <li><a href="#">子菜单项2</a></li>
  <li><a href="#">子菜单项3</a></li>
</ul>

<li>

将下拉内容添加到父菜单项中：将 <ul></ul> 元素嵌套在 <a></a> 元素的后面，形成下拉菜单结构。

<a class="dropdown-toggle" data-toggle="dropdown" href="#">菜单项
  <ul class="dropdown-menu">
 <li><a href="#">子菜单项1</a></li>
 <li><a href="#">子菜单项2</a></li>
 <li><a href="#">子菜单项3</a></li>
  </ul>
</a>

<li>

添加对齐方式：可通过添加 dropdown-menu-right 或 dropdown-menu-left 类来调整下拉菜单的对齐方式。

<a class="dropdown-toggle" data-toggle="dropdown" href="#">菜单项
  <ul class="dropdown-menu dropdown-menu-right">
 <li><a href="#">子菜单项1</a></li>
 <li><a href="#">子菜单项2</a></li>
 <li><a href="#">子菜单项3</a></li>
  </ul>
</a>

<li>

添加分隔符：可以使用 <li> 元素，并为其添加 divider 类来添加分隔符。

<ul class="dropdown-menu">
  <li><a href="#">子菜单项1</a></li>
  <li class="divider"></li>
  <li><a href="#">子菜单项3</a></li>
</ul>

<li>

添加标题：可以使用 <li> 元素，并为其添加 dropdown-header

<ul class="dropdown-menu">
  <li><a href="#">子菜单项1</a></li>
  <li class="dropdown-header">标题</li>
  <li><a href="#">子菜单项3</a></li>
</ul>

🎜드롭다운 콘텐츠 만들기: 🎜드롭다운 메뉴 항목을 <ul></ul> 요소로 래핑하고 여기에 dropdown-menu 클래스를 추가합니다. 🎜rrreee🎜🎜🎜🎜상위 메뉴 항목에 드롭다운 콘텐츠를 추가합니다. 🎜<a></a> 요소 뒤에 <ul></ul> 요소를 중첩하여 드롭다운 메뉴 구조. 🎜rrreee🎜🎜🎜🎜정렬 추가: 🎜드롭다운 메뉴의 정렬은 dropdown-menu-right 또는 dropdown-menu-left 클래스를 추가하여 조정할 수 있습니다. 🎜rrreee🎜🎜🎜🎜 구분 기호 추가: 🎜 <li> 요소를 사용하고 여기에 divider 클래스를 추가하여 구분 기호를 추가할 수 있습니다. 🎜rrreee🎜🎜🎜🎜헤더 추가: 🎜 <li> 요소를 사용하고 여기에 dropdown-header 클래스를 추가하여 헤더를 추가할 수 있습니다. 🎜rreee🎜🎜

위 내용은 부트스트랩 드롭다운 메뉴 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!