테스트 사이트 - 개발 중인 베타 버전입니다

[G5.5] 반응형 테마 (부트스트랩5.3.0-alpha3-dist for Gnuborad)

· 2년 전 · 10359 · 30
부트스트랩5.3.0-alpha3-dist-carousel.png

[부트스트랩 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/

 

설치방법은 기본 테마 설치 방법을 참고 바랍니다.

 

시간이 부족하여 급하게 제작하였습니다. 부족한 부분이 있어도 너그러히 양해 바랍니다.

오늘 하루도 행복한 하루 보내세요~!!!

 

[테마 적용 후 화면]

2113047393_1685441928.1497.png

2113047393_1685441973.8333.png

 

2113047393_1685441983.8444.png

 

2113047393_1685441995.2038.png

 

 

2113047393_1685442005.1147.png

 

 

2113047393_1685442026.7123.png

네비게이션 바 고정 되어 있음

2113047393_1685442057.042.png

 

2113047393_1685442066.3839.png

 

 

하단 화면

2113047393_1685442079.3727.png

[각 페이지 디자인시 기초 디지안 소스 코드]

<!-- 콘텐츠 시작 { -->
<!-- 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

    - 내비게이션바 드롭다운 버튼 에러 수정, 로긴/로그아웃(회원관련 링크) 기능 추가

    - 쪽지함, 스크립트 페이지 수정

   - 기타 발견한 간단하 에러 수정

 

 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 30개

2년 전
모바일버전으로 접근하면 우측상단 메뉴토글이 활성화가 안되는데 혹시 어떤문제일까요?



감사합니다.
감사합니다~
2년 전
저도 모바일 메뉴탭이 제대로 안되네요..ㅜㅜ 소스공개좀 부탁드립니다..
위쪽 첨부파일 다운로드 받으시면 소스 모두 보실 수 있습니다. ^.^

테마 적용해보니 좋습니다!! 그런데 쇼핑몰을 띄우게 되면 깨져 보이는데 이건 어떻게 해결해야 될까요?

1년 전

감사합니다

1년 전

감사합니다.

감사합니다.

1년 전
감사합니다.
7개월 전
참조

게시글 목록

번호 제목
10417
10319
10312
10281
10244
10110
9656
9529
9500
9442
9387
9351