동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
부트스트랩 작업을 위해 기존 코딩부분의 레이아웃 부분과 css부분은 상당부분 삭제 또는 수정할 겁니다.
1. 부트스트랩 CDN 삽입
부트스트랩을 적용하기 위해 CDN으로 제공되는 아래의 CSS, jQuery, JS library를 기존 html문서내 <head>내에 추가합니다.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
2. 부트스트랩 기본 구조
부트스트랩에서 제공하는 css 클래스를 적절히 추가하면 수려한 홈페이지 디자인이 자동으로 완성됩니다.
또한, 부트스트랩에서 적용하고 있는 grid시스템을 이해하면 쉽게 레이아웃을 구성할 수 있습니다.
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
내용
</div>
<div class="col-md-9">
내용
</div>
</div>
</div> 3. 부트스트랩 컴포넌트 및 JS plugin
반응형 처리 및 특정 기능 처리를 위해 부트스트랩에서 제공하는 컴포넌트 및 js plugin을 사용할 수 있습니다.
-, 정열할 때
text-left, text-center, text-right 클래스를 추가하기만 하면 됩니다.
-, 메뉴 부분
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</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><a href="sub.html">회사소개</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">사업분야 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">온라인강좌</a></li>
<li><a href="#">프로그램</a></li>
<li><a href="#">디자인</a></li>
</ul>
</li>
<li><a href="#">제품소개</a></li>
<li><a href="#">자료실</a></li>
<li><a href="#">고객센터</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>- 슬라이드 (carousel)
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/main.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/main.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/main.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>-, 3단 나눔
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
내용
</div>
<div class="col-md-4">
내용
</div>
<div class="col-md-4">
내용
</div>
</div>
</div> 등록된 댓글이 없습니다.