모바일 장치용 표준 부트스트랩 Navbar 및 버튼을 만드는 방법

게시 됨: 2022-02-16
모바일 장치용 표준 부트스트랩 Navbar 버튼을 만드는 방법

부트스트랩은 HTML, CSS 및 JavaScript 프레임워크입니다. 이를 활용하면 모바일 우선 반응형 웹사이트를 쉽게 구축할 수 있습니다. 탐색 모음을 포함하여 웹 요소에 대해 미리 설정된 CSS 스타일을 많이 제공합니다.

이 튜토리얼에서는 기본 부트스트랩 반응형 탐색 모음을 쉽게 만드는 방법을 배웁니다. 그런 다음 모바일 장치용 부트스트랩 표준 Navbar 버튼을 사용하는 방법을 배우게 됩니다.

부트스트랩을 사용하려면 먼저 부트스트랩을 설치해야 합니다. 이 자습서의 목적에 따라 로컬 PC의 아무 곳에나 설치할 수 있습니다. 웹 서버일 필요는 없습니다. 같이 합시다.

1 단계. 부트스트랩 다운로드

    • getboostrap.com으로 이동하여 "부트스트랩 다운로드" 버튼을 클릭합니다.

01 부트스트랩 다운로드

    • 다음 "시작하기" 페이지에서 다른 "부트스트랩 다운로드" 버튼을 클릭합니다.

02 부트스트랩 버튼 02 다운로드

    • 이 파일을 하드 드라이브의 아무 곳에나 저장합니다.

03 부트스트랩 폴더

2 단계. 로컬 PC에 부트스트랩 설치

    • 이 파일의 압축을 풉니다
    • 결과 폴더의 이름을 부트스트랩 으로 바꿉니다.

3단계. 기본 index.html 파일 만들기

    • 부트스트랩 폴더에 다음 코드를 사용하여 index.htm l 파일을 만듭니다.
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>Trusthub</h1> <div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> <div class="row"> <div class="col-md-3 col-xs-6"> <h3>Innovate</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Sustain</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Lead</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> <div class="col-md-3 col-xs-6"> <h3>Inspire</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis.</p> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="/js/bootstrap.min.js"></script> </body> </html>

4단계. 반응형 탐색 모음 만들기

    • 여는 본문 div 바로 아래에 컨테이너 Bootstrap 클래스를 사용하여 새 div를 만듭니다.

<div class="container"><!-- Start navbar container div -->

    • Enter 키를 몇 번 눌러 공간을 만들고 이 새 div를 닫습니다.

</div><!-- Finish navbar container div -->

04 navbar 컨테이너 div

    • 새 컨테이너 div 안에 새 탐색 모음에 대한 탐색 태그를 만듭니다.

<nav class="navbar navbar-default">

    • 키보드에서 Enter 키를 두 번 누르고 태그를 닫습니다.

05 탐색 모음 의 태그

    • nav 태그 내에서 다른 컨테이너 div를 만들고 navbar의 실제 콘텐츠 만들기를 시작합니다.

<div class="container">
<div class="navbar-header"><!-- Start navbar-header -->
<a href="#" class="navbar-brand">Trusthub</a>
</div><!-- Finish navbar-header -->
</div>

06 탐색 태그 안의 콘텐츠

    • <h1> 태그와 그 내용을 삭제합니다.
    • navbar-header div가 닫히는 위치를 찾고 그 바로 아래에 아직 클래스가 없는 다른 div를 만듭니다.

07 닫는 navbar 헤더 아래의 새 div

    • 이 div 내에서 반응형 탐색 모음의 실제 요소를 포함하는 순서 없는 목록을 시작합니다.

<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>

08 ul 목록

    • index.html 파일을 저장합니다.
    • 브라우저에서 이 파일을 엽니다. 이제 반응형 탐색 모음이 표시됩니다. 표준 모바일 탐색 모음으로 만들 준비가 거의 완료되었습니다. 그 전에 약간 개선해 보겠습니다.
    • index.html 파일로 돌아가십시오.
    • 탐색 태그에서 기본값 을 역 으로 변경하여 다음 코드를 가져옵니다.

<nav class="navbar navbar-inverse">

    • 파일을 저장합니다.
    • 사이트로 돌아가서 페이지를 새로 고칩니다. 이제 탐색 표시줄이 더 멋지게 보입니다.

09 역 탐색 태그

잘 했어! 반응형 탐색 모음이 이제 추가 작업을 수행할 준비가 되었습니다.

모바일 사용자를 위한 표준 부트스트랩 메뉴 버튼으로 방금 생성한 탐색 표시줄을 교체하는 방법을 배우려면 아래 비디오를 시청하십시오.