더북(TheBook)

5. 부트스트랩 코드가 전체 웹 사이트의 레이아웃을 담당한다. 부트스트랩 코드를 포함해 Site.Master 파일에 입력한 전체 코드는 다음과 같다. 다음 코드에서는 부트스트랩, 제이쿼리 등 외부 라이브러리의 버전과 경로에 주의하자. 제시된 코드 대로가 아니라 자신의 환경에 맞게 입력해야 한다.


<%@ Master Language=“C#” AutoEventWireup=“true”
  CodeBehind=“Site.master.cs” Inherits=“DevMasterPage.Site” %>

<!DOCTYPE html>

<html lang=“ko”>
<head runat=“server”>
  <meta charset=“utf-8” />
  <meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
  <title></title>
  <link href=“Content/bootstrap.css” rel=“stylesheet” />
  <link href=“Content/Site.css” rel=“stylesheet” />
  <asp:ContentPlaceHolder ID=“HeaderContent” runat=“server”>
  </asp:ContentPlaceHolder>
</head>
<body>
<form id=“form1” runat=“server”>
<div class=“navbar navbar-inverse navbar-fixed-top”>
  <div class=“container”>
      <div class=“navbar-header”>
          <button type=“button” class=“navbar-toggle”
              data-toggle=“collapse” data-target=”.navbar-collapse”>
              <span class=“icon-bar”></span>
              <span class=“icon-bar”></span>
              <span class=“icon-bar”></span>
          </button>
          <a class=“navbar-brand” runat=“server” href=“~/”>마스터 페이지</a>
      </div>
      <div class=“navbar-collapse collapse”>
          <ul class=“nav navbar-nav”>
              <li><a runat=“server” href=“~/”></a></li>
              <li><a runat=“server” href=“~/About.aspx”>정보</a></li>
              <li><a runat=“server” href=“~/Contact.aspx”>연락처</a></li>
          </ul>
          <ul class=“nav navbar-nav navbar-right”>
              <li><a runat=“server” href=“~/Account/Register”>등록</a></li>
              <li><a runat=“server” href=“~/Account/Login”>로그인</a></li>
          </ul>
      </div>
  </div>
</div>
<div class=“container body-content”>
  <asp:ContentPlaceHolder ID=“MainContent” runat=“server”>
  </asp:ContentPlaceHolder>
  <hr />
  <footer>
      <p>&copy; <%: DateTime.Now.Year %> - ASP.NET 웹 프로젝트</p>
  </footer>
</div>

<script src=“Scripts/jquery-1.9.1.js></script> ► 버전 주의
<script src=“Scripts/bootstrap.js”></script>

<asp:ContentPlaceHolder ID=“FooterContent” runat=“server”>
</asp:ContentPlaceHolder>
</form>
</body>
</html>

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.