>  기사  >  웹 프론트엔드  >  부트스트랩 공식 웹사이트의 구성요소는 무엇입니까?

부트스트랩 공식 웹사이트의 구성요소는 무엇입니까?

(*-*)浩
(*-*)浩원래의
2019-07-18 14:56:252464검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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