배포 중단합니다. - 오류발생 그누보드 버전 v5.6.6 용(업그레이드 버전)은 컨텐츠몰(유료)에 있습니다.
[G5.5] 반응형 테마 (부트스트랩5.3.0-alpha3-dist for Gnuborad)
[부트스트랩 5.3.0-alpha3-dist for Gnuborad]
그누보드 5.5.x 기본 테마를 활용하여 부트스트랩(bootstrap5) 반응형 테마를 만들어 봤습니다.
부트스트랩5.3.0-alpha3-dist을 활용하였으면 부분적으로 제가 올렸던 adminlte관련 테마도 조금 적용해서 만들어봤습니다.
부트스트랩5 화면 참고 URL: https://getbootstrap.com/docs/5.3/examples/carousel/
설치방법은 기본 테마 설치 방법을 참고 바랍니다.
시간이 부족하여 급하게 제작하였습니다. 부족한 부분이 있어도 너그러히 양해 바랍니다.
오늘 하루도 행복한 하루 보내세요~!!!
[테마 적용 후 화면]
네비게이션 바 고정 되어 있음
하단 화면
[각 페이지 디자인시 기초 디지안 소스 코드]
<!-- 콘텐츠 시작 { -->
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) { -->
<section class="content-header">
<div class="container"><!--div class="container-fluid" -->
<div class="row mb-2">
<div class="col-sm-6">
<h1><?php echo $g5['title']; ?></h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="<?php echo G5_URL; ?>">Home</a></li>
<li class="breadcrumb-item active"><?php echo $g5['title']; ?></li>
</ol>
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<!-- } Content Header (Page header) --><!-- Main content { -->
<section class="content">
<div class="container"><!--div class="container-fluid" -->
<div class="row">
<div class="col-12">
<!-- Default box -->
<div class="card">
<div class="card-header">
<h3 class="card-title"><?php echo $g5['title']; ?></h3><div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse"><i class="bi bi-dash-lg"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove"><i class="bi bi-x-lg"></i></button>
</div>
</div>
<div class="card-body">
<?php echo $str; ?>
</div><!-- /.card-body --><div class="card-footer">
Footer
</div><!-- /.card-footer-->
</div><!-- /.card -->
</div>
</div>
</div><!-- /.container-fluid -->
</section><!-- /.content -->
<!-- } Main content -->
</div><!-- /.content-wrapper -->
<!-- } 콘텐츠 끝 -->
[수정 후 파일 재업로드 기록]
-. 2023-05-31 / 파일명: bootstrap5_1.tar.gz
- 내비게이션바 드롭다운 버튼 에러 수정, 로긴/로그아웃(회원관련 링크) 기능 추가
- 쪽지함, 스크립트 페이지 수정
- 기타 발견한 간단하 에러 수정
버전 정보
테스트한 버전
5.5.8.3
호환 가능 버전
5.5 이상
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
그누보드5 테마
204건좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
본테마는 무료로서 수정요청은 받지 않습니다. 그리고 1도메인 1카피를 준수합니다. [설치방법] https://youtu.be/lH_CDh6AtEw ① 그누보드 ...
1.0.2 - Bootstrap 5.3.1 으로 업데이트 되었습니다. - Tinymce 에디터를 독립 사용 가능하게 업데이트된 버전 포함 https://sir.kr/g5_plugi...
1.0.1 - Bootstrap 5.3 으로 업데이트 되었습니다. 부트스트랩 5.3 로 제작된 그누보드 영카트 테마입니다. php 8.2 에서 테스트 되었습니다....
[부트스트랩 5.3.0-alpha3-dist for Gnuborad] 그누보드 5.5.x 기본 테마를 활용하여 부트스트랩(bootstrap5) 반응형 테마를 만들어 봤습니다. 부트...
예전에 공개했던 테마 "[G5.3] 반응형 테마 (AdminLTE 2.4.5)"가 있는데 AdminLTE가 버전 3.2으로 최신버전이 있어 다시 제작해서 올립니다. 설치 및 적...
부트스트랩5를 그누보드5 에서 코어 모듈의 수정 없이 사용할 수 있도록 만든 테마입니다. 설치 테마를 다운로드 받으신 후 그누보드 테마 폴더에 설치합니다. 테마설정에서 ...
부트스트랩 5.2.4 로 제작된 그누보드 영카트 테마입니다. php 8.2 에서 테스트 되었습니다. 8.2 이상에서 사용하세요. 최소 php 7 이상에서 사용하세요. php 8 ...
해당 테마는 순수 html 로 만든것이며, 그누보드5 에 적용하실때는 따로 작업하셔야 합니다. 학원 공부용으로 만든거라, 안에 있는 사진들은 사용하시면 안됩니다.
mobile first의 원페이지 테마를 만들어보았습니다. 모바일위주의 단일 홈페이지입니다. 개인포트폴리오 등에 사용하면 무난 할 듯합니다. 그누보드 설치와 관계없이 작동합니다. ...
1. 사이트 - http://gnuworld.kr/_theme/front_1/ 2. 테마 설명 - https://cafe.daum.net/gnuworld/Zrob/1 3. on...
■ 사용 환경 - 그누/영카트 5.5 이상 - jQuery 3.5.1 - Bootstrap 4.6 - php 8.x 지원 ■ 주요 기능 https://amina.co...
댓글 30개
메인 페이지 슬라이드 배경(회색)을 없애거나 opacity 를 낯추려고 하면 어디를 건드려야 할지요?
theme.default.css 에서 조정이 가능한 것 같은데 너무 코드를 꼬아놔서 뭐가 뭔지 모르겠네요.^^
테마가 멋있습니다.
감사합니다.
https://getbootstrap.kr/docs/5.2/components/carousel/
참고) theme.default.css는 그누보드를 잘 동작 시키기 위한 그누보드용 기본 설정과 adminlte라는 코드가 썩어 놓았습니다. 실제로는 없어도 bootstrap동작에는 문제가 없습니다.
감사합니다...^^
사이트를 구성해서 메뉴정보 입력하고 컴퓨터는 메뉴가 잘 동작하는데, 모바일에서는 메뉴버튼을 눌러도 메뉴가 열리지 않습니다.
무엇을 어떻게 해야 열릴까요?..
번거로우시겠으나 답변 부탁드립니다.
감사합니다.
https://getbootstrap.com/docs/5.3/examples/carousel/ 의 소스를 퍼다가 붙이니 모바일 메뉴가 동작하네요...^^
소스를 비교해 보니 몇 가지 다른 부분이 있었는데, 어떤 게 결정적인 차이를 내는 것인지는 잘 모르겠습니다.
아무튼 해결되어서 감사할 따름입니다.
좋은 테마 정말 고맙습니다...^^
소스공유 부탁드려도 될까요~
감사합니다~~^^
테마파일중 "theme.config.php" 상단에 접속관련 설정은
if(!defined('G5_THEME_DEVICE')) define('G5_THEME_DEVICE', 'pc');
이렇게 모바일 접속시을 강제로 pc접속으로 설정되어있습니다.
참고해보세요.
위 URL로 접속해보시면 우측 하단에 라이트모드, 다크모드, 오토 모드 버튼이 있습니다.
관련 소스를 참고하시어 추가 기능으로 넣으시면 될 것 같습니다.
참고로 관련 버튼 소스는 아래와 같습니다.
<div class="dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
<button class="btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
id="bd-theme"
type="button"
aria-expanded="false"
data-bs-toggle="dropdown"
aria-label="Toggle theme (auto)">
<svg class="bi my-1 theme-icon-active" width="1em" height="1em"><use href="#circle-half"></use></svg>
<span class="visually-hidden" id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bd-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#sun-fill"></use></svg>
Light
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#moon-stars-fill"></use></svg>
Dark
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
<li>
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
<svg class="bi me-2 opacity-50 theme-icon" width="1em" height="1em"><use href="#circle-half"></use></svg>
Auto
<svg class="bi ms-auto d-none" width="1em" height="1em"><use href="#check2"></use></svg>
</button>
</li>
</ul>
</div>
감사합니다.
테마 적용해보니 좋습니다!! 그런데 쇼핑몰을 띄우게 되면 깨져 보이는데 이건 어떻게 해결해야 될까요?
감사합니다
감사합니다.
감사합니다.