고정 헤더 영역
상세 컨텐츠
본문
이번포스트 목표: 부트스트랩3.x용 반응형 본문과 푸터 적용하기
- 확인 URL: http://timespace12.dothome.co.kr/publish/
- 비교 xe : http://timespace12.dothome.co.kr/xe/
- 소스코드 확인(아래)
</body><!-- //바디 -->
<!--
위에서 [실제퍼블리싱 영역] 에 신규제작할 레이아웃 파일의 내용이 들어 갑니다.
-->
<!-- ================== 메인/서브 공통부분 ==================== -->
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- META -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 주) 이 코드가 없으면 모바일기기에서 PC버전으로 보이게 됨 -->
<meta charset="utf-8">
<meta name="Generator" content="XpressEngine">
<!-- TITLE -->
<title>Welcome Page</title>
<!-- CSS -->
<link rel="stylesheet" href="/xe/common/css/xe.min.css?20170520175852" />
<link rel="stylesheet" href="/xe/common/js/plugins/ui/jquery-ui.css?20170520175852" />
<link rel="stylesheet" href="/xe/layouts/new/default.layout.css?20170520175852" />
<!--[if lt IE 9]><link rel="stylesheet" href="/xe/layouts/new/default.layout.ie78.css?20170520175852" />
<![endif]--><!--[if IE 7]><link rel="stylesheet" href="/xe/layouts/new/default.layout.ie7.css?20170520175852" />
<![endif]--><link rel="stylesheet" href="/xe/modules/editor/styles/default/style.css?20170520175853" />
<link rel="stylesheet" href="/xe/widgets/login_info/skins/default/default.login.css?20170520175852" />
<!-- JS -->
<script src="/xe/common/js/jquery.min.js?20170520175852"></script>
<script src="/xe/common/js/x.min.js?20170520175852"></script>
<script src="/xe/common/js/xe.min.js?20170520175852"></script>
<!--[if lt IE 9]><script src="/xe/common/js/respond.min.js?20170520175852"></script>
<![endif]--><script src="/xe/widgets/login_info/skins/default/default.login.js?20170520175852"></script>
<!--[if lt IE 9]><script src="/xe/common/js/html5.js"></script><![endif]-->
</head>
<!-- 바디 -->
<body>
<!-- //================== 메인/서브 공통부분 ==================== -->
<!-- 부트스트랩3 관련 -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="assets/js/respond/respond.min.js"></script>
<![endif]-->
<!-- 아이콘 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="assets/ico/favicon.png"><!-- //부트스트랩3 관련 -->
<!-- 헤더 -->
<div class="header">
<!-- 상단 네비 -->
<div class="navbar navbar-fixed-top navbar-inverse">
<!-- 컨테이너 -->
<div class="container">
<a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse" href="#">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="index.html">부트스트랩 3.x</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">대메뉴_01</a></li>
<li><a href="#">대메뉴_02</a></li>
<li><a href="#">대메뉴_03</a></li>
<li><a href="#">대메뉴_04</a></li>
<li><a href="#">대메뉴_05</a></li>
<li><a href="#">대메뉴_06</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">대메뉴_07<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">서브메뉴_01</a></li>
<li><a href="#">서브메뉴_02</a></li>
<li><a href="#">서브메뉴_03</a></li>
<li><a href="#">서브메뉴_04</a></li>
<li><a href="#">서브메뉴_05</a></li>
<li><a href="#">서브메뉴_06</a></li>
<li><a href="#">서브메뉴_07</a></li>
<li><a href="#">서브메뉴_08</a></li>
<li><a href="#">서브메뉴_09</a></li>
<li><a href="#">서브메뉴_10</a></li>
<li><a href="#">서브메뉴_11</a></li>
<li><a href="#">서브메뉴_12</a></li>
</ul>
</li>
</ul>
</div><!-- //.nav-collapse -->
</div><!-- //컨테이너 -->
</div><!-- //상단 네비 -->
<!-- 메인 비주얼 -->
<div id="myCarousel" class="carousel slide">
<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>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="#" title="링크1">
<img src="assets/img/examples/slide-01.jpg" alt="">
</a>
</div>
<div class="item">
<a href="#" title="링크2">
<img src="assets/img/examples/slide-02.jpg" alt="">
</a>
</div>
<div class="item">
<a href="#" title="링크3">
<img src="assets/img/examples/slide-03.jpg" alt="">
</a>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- //메인 비주얼 -->
</div><!-- //헤더 -->
<!-- 본문 -->
<div class="body main">
<!-- 컨테이너 -->
<div class="container">
<h4>XE core '1.7.3.6' 설치를 환영합니다!</h4>
<div class="row">
<div class="span4">
<img class="marketing-img" src="assets/img/bs-docs-twitter-github.png">
<h2>By nerds, for nerds.</h2>
<p>Built at Twitter by <a href="http://twitter.com/mdo">@mdo</a> and <a href="http://twitter.com/fat">@fat</a>, Bootstrap utilizes <a href="http://lesscss.org">LESS CSS</a>, is compiled via <a href="http://nodejs.org">Node</a>, and is managed through <a href="http://github.com">GitHub</a> to help nerds do awesome stuff on the web.</p>
</div>
<div class="span4">
<img class="marketing-img" src="assets/img/bs-docs-responsive-illustrations.png">
<h2>Made for everyone.</h2>
<p>Bootstrap 3 has been rebuilt from the ground up to push the Web forward. It looks and behaves great on the latest smartphones, tablets, and desktops (including support for IE8+).</p>
</div>
<div class="span4">
<img class="marketing-img" src="assets/img/bs-docs-bootstrap-features.png">
<h2>Packed with features.</h2>
<p>A 12-column responsive <a href="css.html#grid-system">grid</a>, dozens of components, <a href="javascript.html">JavaScript plugins</a>, typography, form controls, and even a <a href="customize.html">web-based Customizer</a> to make Bootstrap your own.</p>
</div>
</div><!-- //.row -->
</div><!-- //컨테이너 -->
</div><!-- //본문 -->
<!-- 푸터 -->
<footer>
<!-- 컨테이너 -->
<div class="container">
<p>Powered by <a href="http://xpressengine.com/">XE</a>.</p>
</div><!-- //컨테이너 -->
</footer><!-- //푸터 -->
<!-- 부트스트랩3 관련 -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-alert.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>
<script src="assets/js/bootstrap-dropdown.js"></script>
<script src="assets/js/bootstrap-scrollspy.js"></script>
<script src="assets/js/bootstrap-tab.js"></script>
<script src="assets/js/bootstrap-tooltip.js"></script>
<script src="assets/js/bootstrap-popover.js"></script>
<script src="assets/js/bootstrap-button.js"></script>
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap-carousel.js"></script>
<script src="assets/js/bootstrap-typeahead.js"></script>
<script src="assets/js/bootstrap-affix.js"></script>
<script src="assets/js/holder/holder.js"></script>
<script src="assets/js/google-code-prettify/prettify.js"></script>
<!--[if lt IE 9]>
<script src="assets/js/respond/respond.min.js"></script>
<![endif]-->
<script src="assets/js/application.js"></script><!-- //부트스트랩3 관련 -->
<!-- 사용자 js추가 -->
<script type="text/javascript" language="javascript">
//!를 사용하면 함수는 단항(논리적) NOT연산자의 단일 피연산자가됨. 이렇게하면 함수가 표현식으로 평가되므로 강제로 인라인으로 호출 할 수 있습니다.
!function($){
$(function(){
var $window = $(window)
$('.carousel').carousel({
interval:2000
});
})
}(window.jQuery)
//(window.jQuery)는 원래 jQuery Object에 $대한 별칭을 만들고, 다른 라이브러리가 충돌없이 항상 그 jQuery object내부를 참조 하도록 보장함.
</script><!-- //사용자 js추가 -->
<!-- 사용자 스타일 추가 -->
<style>
@media (max-width: 979px) {
.container { width: 100% !important; text-align:center; }
}
/* 반응형 CSS사용예 필요시 사용
--------------------------------------------------
.carousel .item {
height: 500px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
@media (max-width: 979px) {
.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}
}
@media (max-width: 767px) {
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
}
*/
</style><!-- //사용자 스타일 추가 -->
<!-- ================== 메인/서브 공통부분 ==================== -->
<script src="/xe/addons/autolink/autolink.js?20170521184820"></script>
<script src="/xe/common/js/plugins/ui/jquery-ui.min.js?20170520175852"></script>
<script src="/xe/common/js/plugins/ui/jquery.ui.datepicker-ko.js?20170520175852"></script>
<script src="/xe/addons/resize_image/js/resize_image.min.js?20170521184820"></script>
<script src="/xe/layouts/new/default.layout.js?20170520175852"></script>
<script src="/xe/files/cache/js_filter_compiled/30bafb68498c64b466579e488f27113e.ko.compiled.js?20170521191555"></script>
<script src="/xe/files/cache/ruleset/ede42a495c65a9393860a66b824264ca.ko.js?20170521191555"></script>
<!-- //================== 메인/서브 공통부분 ==================== -->
</body><!-- //바디 -->
# 다음포스트는 상단메뉴에 로그인/검색 퍼블리싱 추가예정 입니다.
'PHP(Class)' 카테고리의 다른 글
| 부트스트랩3.x 용 레이아웃 퍼블리싱_05(네이버xe레이아웃을위한) (0) | 2017.06.01 |
|---|---|
| 부트스트랩3.x 용 레이아웃 퍼블리싱_04(네이버xe레이아웃을위한) (0) | 2017.05.31 |
| 부트스트랩3.x 용 레이아웃 퍼블리싱_02(네이버xe레이아웃을위한) (0) | 2017.05.29 |
| 부트스트랩3.x 용 레이아웃 퍼블리싱_01(네이버xe레이아웃을위한) (0) | 2017.05.28 |
| 네이버XE HTML기본 구조 및 부트스트랩3.x 기본지식 (0) | 2017.05.28 |
댓글 영역