Bootstrap에는 다양한 웹 구성 요소가 포함되어 있으며 이러한 구성 요소를 기반으로 아름답고 완전한 기능을 갖춘 웹 사이트를 빠르게 구축할 수 있습니다. 여기에는 다음 구성 요소가 포함됩니다:
드롭다운 메뉴, 버튼 그룹, 버튼 드롭다운 메뉴, 탐색, 탐색 모음, 경로 탐색, 페이징, 레이아웃, 썸네일, 경고 대화 상자, 진행률 표시줄, 미디어 개체 등.
다음은 이러한 구성 요소 중 일부에 대한 데모입니다. (추천 학습: Bootstrap 비디오 튜토리얼)
Dropdowns(드롭다운)
드롭다운 메뉴는 전환 가능하며 링크를 목록 형식으로 표시하는 컨텍스트 메뉴입니다. 이는 Dropdown JavaScript 플러그인과 상호작용하여 달성할 수 있습니다.
드롭다운 메뉴를 사용해야 하는 경우 클래스 .dropdown에 드롭다운 메뉴만 추가하면 됩니다. 다음 예는 기본 드롭다운 메뉴를 보여줍니다.
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Java</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">数据挖掘</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a> </li> <li role="presentation" class="divider"></li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">分离的链接</a> </li> </ul> </div>
Navigation
이 메뉴는 동일한 마크업과 기본 클래스 .nav를 사용합니다. Bootstrap은 마크업과 상태를 공유하기 위한 도우미 클래스도 제공합니다. 수정된 클래스를 변경하면 다양한 스타일 간에 전환할 수 있습니다.
<p>标签式的导航菜单</p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li> </ul>
Bootstrap과 관련된 더 많은 기술 기사를 보려면 Bootstrap Tutorial 칼럼을 방문하여 알아보세요!
위 내용은 부트스트랩 공식 웹사이트의 구성요소는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!