관리 메뉴

moozi

bootstrap04.html 본문

TIS_2016/HTML5_3기

bootstrap04.html

moozi 2016. 7. 22. 15:28

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- 뷰포트 ------------------------------------------->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    

    <title>Bootstrap연습</title>

    <!-- 부트스트랩CSS -->

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">


    <!-- jQuery -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


    <!-- 부트스트랩 JavaScript -->

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    

</head>

<body>

    <div id="myCarousel" class="carousel slide" data-ride="carousel">

      <!-- Indicators -->

      <ol class="carousel-indicators">

        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

        <li data-target="#myCarousel" data-slide-to="1"></li>

        <li data-target="#myCarousel" data-slide-to="2"></li>

        <li data-target="#myCarousel" data-slide-to="3"></li>

      </ol>


  <!-- Wrapper for slides -->

  <div class="carousel-inner" role="listbox">

    <div class="item active">

      <img src="img/title1.png" alt="안랩">

<!--

      <div class="carousel-caption">

        <h3>New York</h3>

        <p>The atmosphere in New York is lorem ipsum.</p>

      </div> 

-->

    </div>


    <div class="item">

      <img src="img/title2.png" alt="안랩">      

    </div>


    <div class="item">

      <img src="img/title3.png" alt="안랩">

    </div>

    

    <div class="item">

      <img src="img/title4.png" alt="안랩">

    </div>

  </div>


  <!-- Left and right controls -->

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

    <span class="sr-only">Previous</span>

  </a>

  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

    <span class="sr-only">Next</span>

  </a>

</div>


<div class="container-fluid">

    <div class="row">

        <div class="col-md-4">

            <h3>보안경보</h3>

            <p>

                <img src="img/icon1.png" alt="보안경보">

            </p>

        </div>

        <div class="col-md-4">

            <ul class="nav nav-tabs">

              <li class="active"><a data-toggle="tab" href="#notice">Notice</a></li>

              <li><a data-toggle="tab" href="#press">Press</a></li>             

            </ul>


            <div class="tab-content">

              <div id="notice" class="tab-pane fade in active">

                  <p>[공지] V3 MSS ‘IT자산관리’ 업그레이..2016.07.15</p>

                  <p>[공지] 안랩 웹 보안 업그레이드 캠페인2016.07.14</p>

                  <p>[공지] V3 제품군, ASTx 엔진 패치(ASD 2...2016.07.13</p>

              </div>

              <div id="press" class="tab-pane fade">

                <p>

                   안랩, 역사학자 신병주 교수 초청 인문학 특강 진행2016.06.24 

                </p>

                <p>

                    안랩, '이메일 랜섬웨어 보안 서비스' 출시2016.06.24 

                </p>

                <p>

                    안랩 V3 모바일 시큐리티, ‘URL/문자메..2016.06.24

                </p>

              </div>

            </div>            

        </div>

        <div class="col-md-4">

            

        </div>

    </div>

    

</div>




</body>

</html>

'TIS_2016 > HTML5_3기' 카테고리의 다른 글

bootstrap04.html  (0) 2016.07.25
bootstrap연습문제02  (0) 2016.07.22
bootstrap03.html  (0) 2016.07.22
bootstrap연습문제01 풀이  (0) 2016.07.22
7/21 bootstrap03.html  (0) 2016.07.21
Comments