강의제목: 16강, 17강 bootstrap ModernBusiness페이지 클론
- html로 작성된 bootstrap ModernBusiness페이지를 .razor 페이지로 클론해 보기.
- bootstrap ModernBusiness 템플릿은
Start Bootstrap 사이트에 접속해서 다운로드 혹은 구글에서 "bootstrap template"으로 검색 해서 사이트 접속.
1. bootstrap 샘플 다운로드 및 적용
- 사이트에 접속해서 free download를 클릭해서 압축파일 다운로드
- 압축 해제후 wwwroot경로로 복사 붙여넣기
- 디버깅 시작후 경로를 ./index.html로 변경하면 wwwrot경로에 붙여넣은 index 페이지로 이동.
2. 레이아웃 적용하기(상단 네비게이션, 하단 copyright)
- MaintLayout.razor 페이지에 네비게이션 부분을 날리고
@Body부분만 남김.- wwwrot에 있는 각 html마다 navigation과 footer가 존재하며 _Layout.cshtml에 해당 부분을 복사 하면 다른 .razor 페이지에 navigation, footer에 따로 적용 할 필요 없음.
- MainLayout.razor
@inherits LayoutComponentBase
<PageTitle>Blazor_Academy</PageTitle>
@Bodyindex.html 소스이며 main 안쪽 Navigation, Footer, Bootstrap core JS, Core theme JS , head안에 Favicon,Bootstrap icons,Core theme CSS (includes Bootstrap) 도 복사 하여 _Layout.cshtml파일에 붙여넣기
- index.html
- Layout.csthml
@using Microsoft.AspNetCore.Components.Web
@namespace Blazor_Academy.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
@*<link href="css/site.css" rel="stylesheet" />*@
<link href="Blazor_Academy.styles.css" rel="stylesheet" />
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
</head>
<body>
<main class="flex-shrink-0">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container px-5">
<a class="navbar-brand" href="/">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="About">About</a></li>
<li class="nav-item"><a class="nav-link" href="/Contact">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="/Pricing">Pricing</a></li>
<li class="nav-item"><a class="nav-link" href="/FAQ">FAQ</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
<li><a class="dropdown-item" href="/BlogHome">Blog Home</a></li>
<li><a class="dropdown-item" href="/BlogPost">Blog Post</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownPortfolio" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Portfolio</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownPortfolio">
<li><a class="dropdown-item" href="/PortfolioOverview">Portfolio Overview</a></li>
<li><a class="dropdown-item" href="/PortfolioItem">Portfolio Item</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
@RenderBody()
</main>
<!-- Footer-->
<footer class="bg-dark py-4 mt-auto">
<div class="container px-5">
<div class="row align-items-center justify-content-between flex-column flex-sm-row">
<div class="col-auto"><div class="small m-0 text-white">Copyright © Your Website 2023</div></div>
<div class="col-auto">
<a class="link-light small" href="#!">Privacy</a>
<span class="text-white mx-1">·</span>
<a class="link-light small" href="#!">Terms</a>
<span class="text-white mx-1">·</span>
<a class="link-light small" href="#!">Contact</a>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
@*<link href="css/site.css" rel="stylesheet" />*@을 주석한 이유는 기존 razor 템플릿 style.css로 ModernBusiness에서 사용하는 style.css를 사용 하기 위함.- 레이아웃을 적용하면 razor샘플인 Counter 페이지를 수정 하지 않더라도
clone한 페이지의 레이아웃이 적용됨.
3. 각페이지를 razor 페이지로 변환
- html 페이지를 clone 하기위한 .razor페이지를 pages폴더 안에 생성.
- html 페이지에서 body/main 에서 Navigation을 제외한 부분을 복사 하여
razor 페이지에 붙여넣고 @page 지시문을 사용해 라우팅 적용- _Layout.csthml에 적용한 Navigation에서 링크 경로를 @page 지시문을 사용한 경로로 변경
- 샘플로 FAQ페이지만 기록으로 남김.
-
faq.html에서 Page Content부분만 복사
-
FAQ.razor페이지 생성후 복사한 코드 붙여넣고 라우팅 경로 지정
@page "/FAQ"
<!-- Page Content-->
<section class="py-5">
<div class="container px-5 my-5">
<div class="text-center mb-5">
<h1 class="fw-bolder">Frequently Asked Questions</h1>
<p class="lead fw-normal text-muted mb-0">How can we help you?</p>
</div>
<div class="row gx-5">
<div class="col-xl-8">
<!-- FAQ Accordion 1-->
<h2 class="fw-bolder mb-3">Account & Billing</h2>
<div class="accordion mb-5" id="accordionExample">
<div class="accordion-item">
<h3 class="accordion-header" id="headingOne"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Accordion Item #1</button></h3>
<div class="accordion-collapse collapse show" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong>
It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header" id="headingTwo"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Accordion Item #2</button></h3>
<div class="accordion-collapse collapse" id="collapseTwo" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header" id="headingThree"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Accordion Item #3</button></h3>
<div class="accordion-collapse collapse" id="collapseThree" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</div>
</div>
</div>
</div>
<!-- FAQ Accordion 2-->
<h2 class="fw-bolder mb-3">Website Issues</h2>
<div class="accordion mb-5 mb-xl-0" id="accordionExample2">
<div class="accordion-item">
<h3 class="accordion-header" id="headingOne"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">Accordion Item #1</button></h3>
<div class="accordion-collapse collapse show" id="collapseOne2" aria-labelledby="headingOne" data-bs-parent="#accordionExample2">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong>
It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header" id="headingTwo"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">Accordion Item #2</button></h3>
<div class="accordion-collapse collapse" id="collapseTwo2" aria-labelledby="headingTwo" data-bs-parent="#accordionExample2">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header" id="headingThree"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2">Accordion Item #3</button></h3>
<div class="accordion-collapse collapse" id="collapseThree2" aria-labelledby="headingThree" data-bs-parent="#accordionExample2">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong>
It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
<code>.accordion-body</code>
, though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card border-0 bg-light mt-xl-5">
<div class="card-body p-4 py-lg-5">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<div class="h6 fw-bolder">Have more questions?</div>
<p class="text-muted mb-4">
Contact us at
<br />
<a href="#!">support@domain.com</a>
</p>
<div class="h6 fw-bolder">Follow us</div>
<a class="fs-5 px-2 link-dark" href="#!"><i class="bi-twitter"></i></a>
<a class="fs-5 px-2 link-dark" href="#!"><i class="bi-facebook"></i></a>
<a class="fs-5 px-2 link-dark" href="#!"><i class="bi-linkedin"></i></a>
<a class="fs-5 px-2 link-dark" href="#!"><i class="bi-youtube"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>- _Layout.cshtml에서 라우팅 경로 수정.
기존<li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
변경<li class="nav-item"><a class="nav-link" href="/FAQ">FAQ</a></li>
- 다른 페이지들도 동일하게 진행.
기존 html파일에서는 Get Started 버튼을 누르면 화면이 내려가는데
razor페이지에서 html과 같은 방식으로 javascript code를 호출하지 못해 적용되지 않았으며 적용 방법은 뒤로 강의가 넘어가다보면 나올것 같으며 추후 수정 예정.
temlpalte이 현재 시점과 달라질수 있어서 github 경로에 resouce폴더에 현시점 탬플릿 파일 업로드되어 있음.
실제로 강의 시점과 페이지가 바뀜,.
