부트스트랩: 멋진 패널 UI를 만드는 가장 빠른 방법
부트스트랩 사이트에서 필수 CSS 및 JavaScript에 대한 링크를 얻을 수 있습니다(예제에서 볼 수 있음).
알약 버튼의 기능이 선택 항목을 이동하고 연결된 각 콘텐츠를 로드하려면 JavaScript 링크가 필요합니다
div.<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Panel</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
</body>
</html>
다음으로 할 일은 공식 사이트에서 알약 버튼과 탭을 사용하여 샘플을 가져와 HTML에 붙여넣는 것입니다.
다음을 복사하여 본문 태그 사이에 붙여넣습니다.
아래 jsfiddle에서 HTML 탭을 클릭하면 볼 수 있습니다.
결과 탭을 클릭하여 작동하는 모습을 볼 수도 있습니다.
첫 번째 내부 사업부
첫 번째 내부
div에는 사용자가 클릭할 수 있는 알약 버튼을 나타내는 <a> 태그가 포함되어 있습니다.두 번째 내부 사업부
두 번째 내부
div에는 div 집합이 포함되어 있으며, 각 div는 연결된 알약을 클릭할 때 표시되는 연결된 콘텐츠를 나타냅니다.볼 것은 많지 않지만 기능은 이미 있습니다.
이제 콘텐츠를 표시하고 싶은 것으로 변경하기만 하면 됩니다.
콘텐츠 변경
다음은 몇 가지 추가 콘텐츠가 포함된 예입니다. 내가 한 일은 두 번째 내부 div 사이에 일부 콘텐츠를 추가하는 것뿐이었습니다.
이것은 이러한 유형의 멋진 사용자 인터페이스와 기능을 빠르게 사용할 수 있는 방법입니다.
이 내용이 마음에 든다면 여기 dev.to의 책에 대한 내 기사에서 내 새 책을 확인하세요.
저도 그냥 여기 dev.to에 썼습니다.
Reference
이 문제에 관하여(부트스트랩: 멋진 패널 UI를 만드는 가장 빠른 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/raddevus/bootstrap-the-fastest-way-to-nice-panel-ui-278n텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
