고래씌

[jQuery] 11. 종합응용예시(부트스트랩) 본문

Front-End/jQuery

[jQuery] 11. 종합응용예시(부트스트랩)

고래씌 2023. 11. 15. 20:50

1. 부트스트랩 이용 환경 만들기

- 우리는 부트스랩 4.5버전을 이용하겠다.

 

① 사이트 접속 - 버전 4.5 선택 후, CSS와 Bundle를 복사하여 head태그에 붙여넣기

https://getbootstrap.com/docs/4.5/getting-started/introduction/

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

getbootstrap.com

 

 

② 11_종합응용예시.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>11_종합응용예시</title>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

</head>

 

2. 게시판 리스트

    <table class="table table-hover">    <!-- 부트스트랩에서 제공하고 있는 css임 -->
        <thead>
            <tr>
                <td>글빈호</td>
                <td>제목</td>
                <td>작성자</td>
                <td>조회수</td>
                <td>작성일</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>3</td>
                <td>세번째 글제목</td>
                <td>user01</td>
                <td>26</td>
                <td>2023-01-11</td>
            </tr>
            <tr>
                <td>2</td>
                <td>두번째 글제목</td>
                <td>user01</td>
                <td>21</td>
                <td>2023-01-10</td>
            </tr>
            <tr>
                <td>1</td>
                <td>첫번째 글제목</td>
                <td>user01</td>
                <td>22</td>
                <td>2023-01-09</td>
            </tr>
        </tbody>
    </table>

    선택된 게시글 정보 :
    <label id="l0">글번호</label> /
    <label id="l1">제목</label> /
    <label id="l2">작성자</label> /
    <label id="l3">조회수</label> /
    <label id="l4">작성일</label>/ 

    <script>
        $(function(){
            $("tbody>tr").click(function(){ // tbody내부의 tr태그들에 클릭이벤트가 발생한 경우
                
                // console.log(this)

                // 현재 클릭이벤트가 발생한 tr요소의 자손들에 순차적으로 접근하기
                $(this).children().each(function(index, el){
                    // index : 순차적으로 접근할 때의 인덱스
                    // el : 순차적으로 접근되는 요소객체(td)
                    // console.log($(el).text());

                    $("#l"+index).text($(el).text());    // => 클릭하는거에 따라 결과 출력됨
                })
            })
        })
    </script>

 

첫번째 줄 클릭(글번호 "3", 제목 세번째 글제목)

 

☞ 첫번째 줄 클릭 결과, 내용이 관련 내용으로 바뀜

 

 

2. 버튼과 관련된 부트스트랩 스타일

    <button class="btn btn-primary">로그인</button>
    <button class="btn btn-secondary">로그인</button>
    <button class="btn btn-warning">로그인</button>
    <button class="btn btn-primary btn-sm">로그인</button>
    <button class="btn btn-outline-warning btn-sm">로그인</button>

    <div class="btn btn-outline-warning">로그인</div>
    <a href="" class="btn btn-outline-warning">로그인</a>  <!-- a 태그에서 사용할 수 있다-->

 

 

3. 회원가입창

 

https://getbootstrap.com/docs/4.5/examples/

 

Examples

Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.

getbootstrap.com

=> 검사를 눌러 form 클릭 후, F2 이용하여 수정할 수 있는데 복붙하기

 

    <form class="form-signin">
        <h1 class="h3 mb-3 font-weight-normal">로그인</h1>
        <label for="inputEmail" class="sr-only">이메일</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="이메일" required="" autofocus="">
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required="">
        <div class="checkbox mb-3">
          <label>
            <input type="checkbox" value="remember-me"> 자동로그인
          </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit">로그인</button>
    </form>

 

 

 

4. 모달(Modal)

: 부트스트랩에서 제공하는 팝업창 같은 것, div 요소를 띄어준다.

 

☞ data-toggle : 모달창을 띄울려면 필요한 속성. 부트스트랩에서 제공하는 속성

 

https://getbootstrap.com/docs/4.5/components/modal/

 

Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

getbootstrap.com

=> search에 Modal 입력하여 검색 후, 맘에드는 팝업창 코드 복사

 

 

    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
        <!-- data-toggle과 data-target은 꼭 필요하다 -->
        Open Modal
    </button>

    <div class="modal" tabindex="-1" id="myModal">   <!-- 기본적으로 class="modal" 인경우 기본적으로 화면에 안보임, 그리고 고유한 id값이 필요함-->
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Modal title</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

 

저작자표시 비영리 변경금지

'Front-End > jQuery' 카테고리의 다른 글

[jQuery] 13. 시각적인 효과 메소드 ① (show, hide, toggle / fadeIn, fadeOut, fadeToggle)  (0) 2023.11.15
[jQuery] 12. 이벤트(on메소드, 키보드 관련 메소드)  (0) 2023.11.15
[jQuery] 10. 추가적인 메소드(each, is 메소드)  (0) 2023.11.15
[jQuery] 9. 요소생성 및 제거  (0) 2023.11.15
[jQuery] 8. 영역 관련 메소드(innerHTML속성과 관련된 메소드)  (1) 2023.11.15
'Front-End/jQuery' Related Articles more