Bootstrap3_ 네비게이션바

728x90

http://bootstrapk.com/components/#navbar-inverted

콤포넌트 · 부트스트랩

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

bootstrapk.com

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap_3.4.1_css_bootstrap_madebyjyc.css">
    <!-- 부가적인 테마 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
    <!-- jQuery (부트스트랩의 자바스크립트 플러그인을 위해 필요합니다) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- 합쳐지고 최소화된 최신 자바스크립트 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

</head>
<body>
    <!-- 부트스트랩 네비게이션 바 -->
    <!-- http://bootstrapk.com/components/#navbar -->
    <!-- 반응형 고정폭 콘테이너를 위해 .container를 사용하시기 바랍니다 -->
    <div class="container" style="padding-top: 100px;">
        <!-- 콤포넌트 - 네비게이션 바- 반전된 네비게이션 바 .navbar-inverse를 적용해 줍니다 -->
    <nav class="navbar  navbar-inverse">
        <!-- 뷰포트 전체폭까지 늘어나는 최대폭 콘테이너를 위해 .container-fluid를 적용해줍니다 -->
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <!-- 확장과 축소가 되는 버튼 영역을 button 태그로 마크업하고 -->lo
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <!-- sr-only(장애인분들을 배려한 웹접근성 screen reader only)
            클래스를 사용하여 원하는 요소를 화면상에서는 사라지게 하는 동시에 웹 접근성을 높여줍니다. -->
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <img alt="Brand" src="bootstrap_source/images/star.svg" style="height: 20px; width: 20px;">
            </a>
            <a class="navbar-brand" href="#">Bootstrap 활용 예시!</a>
          </div>
      
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active" ><a href="http://www.kbs.co.kr" target="_blank">KBS한국방송 <span class="sr-only">(current)</span></a></li>
              <li class="active"><a href="http://www.sbs.co.kr" target="_blank">SBS 서울방송 <span class="sr-only">(current)</span></a></li>
              <li class="active"><a href="http://www.MBC.co.kr" target="_blank">MBC 문화방송 <span class="sr-only">(current)</span></a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>
    </div>

</body>
</html>

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

[BACKEND]JAVA_ 변수와 자료형 (0)	2023.08.16
[BACKEND]ECLIPSE_01 (0)	2023.08.16
Bootstrap_1 (0)	2023.08.11
AOS(Animate on scroll library) (0)	2023.08.09
PARALLAX_SCROLLING (0)	2023.08.07