bootstrap 화면 Layout 예 (초보자 지금 들리지 않는 몇 가지)

17840 단어 jstreeHTML자바스크립트BootstrapCSS

배경



Html 쓸 때 매번 화면 LAYOUT에 고민합니다. 훨씬 옛날 table과 gif 사용했지만 CSS 시대의 방법을 다시 공부하고, 요점을 남겨 미래의 참고가 된다고 생각합니다.

요구사항


  • 이런 느낌의 화면을 만들고 싶다.
  • 화면은 좌우로 나뉘며 왼쪽은 더 위아래로 나뉩니다
  • 화면 전체는 scroll 발생하지 않도록 자동 조정한다
  • 오른쪽은 jstree 사용, 항목이 많을 때 화면을 찢지 않고 자신 내부에서 scroll



    • 그림 1: 화면 LAYOUT 상상도

    사용 도구



  • bootstrap : LAYOUT 담당. 전체 배치, 크기, 테두리, 색상을 제어. CSS만 실현되고 javascript 쓸 필요가 없는 곳이 편리.

  • jquery 는 자바스크립트 내에서 HTML을 조작할 때 편리한 기능을 제공한다. 이번은 ADD 버튼과 jstree의 초기화에 이용. 이제 한 번 누가 jquery 사용할 것이라고 생각했지만, 조사하면 의외로.

  • jstree 는 데이터를 트리 모양으로 표시하는 라이브러리. 이번에 동적으로 아이템을 추가하고 화면 높이의 영향을 확인하기 위해 이용한다.


    • 그림 2 : jquery는 건재

    기본 LAYOUT



    우선 전체를 그린다. bootscrap에 LAYOUT하는 방법 여러 ( 그리드 , float , position , 디스플레이 , flex ) 있습니다. flex는 가장 유연하고 내용에 맞게 자동으로 개행되거나 적절하게 배치할 수 있습니다만, 이번 요건은 고정 위치에서 표시하므로 grid를 선택했습니다.
    
<body>
    <div class="container-fluid">
      <div class="row">                  <!-- 行 -->
        <div class="col-8">              <!-- 左側 -->
          <div class="row">
            <div class="col">up</div>     <!-- 上 -->
          </div>
          <div class="row">
            <div class="col">down</div>   <!-- 下 -->
          </div>
        </div>
        <div class="col-4">right</div>    <!-- 右側 -->
      </div>
    </div>
</body>

    그리드 레이아웃은
    1. 우선 container를 세운다. container-fluid는 container와 달리 화면 가득 사용할 수 있습니다.
    1. 하나의 행(row)
    1. 행 안에 2열(col)이 있다
    2. 전부 12 분할 중, 좌측은 8(col-8), 우측은 4(col-4)로 배치한다
    2. 좌측의 열중에 2개의 행을 배치해, 각각 1개만 열을 가지는

    이하의 느낌이 됩니다.

    그림 3: LAYOUT 효과

    테두리 추가



    문자 이외에는 아무것도 모르기 때문에 테두리를 넣는다.
    
<body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-8 border border-warning">　　　　　　　<!-- 枠線 -->
          <div class="row">
            <div class="col border border-warning">up</div>
          </div>
          <div class="row">
            <div class="col border border-warning">down</div>
          </div>
        </div>
        <div class="col-4 border border-warning">right</div>
      </div>
    </div>
</body>

    다음은 효과


    덧붙여 pad나 margin를 미조정할 필요가 있다면 bootstrap를 참고해 주십시오.

    높이 고정



    보통 내용에 따라 태그의 높이가 변동합니다. 높이를 고정하려면 height 를 명시합니다. bootstrap이 제공하는 vh-100 ( CSS 의 height:100vh;에 해당)를 이용하여 window(=viewport)의 100%를 사용합니다.

    또, height 를 퍼센트로 지정할 때, 부모 태그도 height 를 지정이 필요합니다, 하지 않는 태그가 자동 확장되어 결국 화면을 찢어 버립니다.
    
<body class="vh-100 vw-100">　　　　　　　　　　　　　　　　　<!-- 全体の高さ -->
    <div class="container-fluid h-100 w-100">              <!-- 各層全部高さ設定 -->
      <div class="row h-100">
        <div class="col-8 border border-warning">
          <div class="row">
            <div class="col border border-warning">up</div>
          </div>
          <div class="row">
            <div class="col border border-warning">down
              <button id="add" class="btn btn-success">add</button>
            </div>
          </div>
        </div>
        <div class="col-4 border border-warning h-100">　　　<!-- 各層全部高さ設定 -->
            <div id="jstree" class="h-100 overflow-auto">   <!-- ここの高さ指定したい -->
              <ul>
                <li id="rootnode" data-jstree='{"opened":true,"selected":true}'>Root node</li>
              </ul>
            </div>
        </div>
      </div>
    </div>
</body>

    덤



    LAYOUT은 아니지만 jstree를 사용할 때 함정에주의하십시오.
  • jstree 추가 삭제 등 변경하고 싶을 때, "check_callback" : true, 는 필수
  • jstree의 루트 노드에 data-jstree='{"opened":true} 넣지 않으면 트리가 열리지 않습니다

    • 예제 전체



    jsfiddle 에서 시도할 수 있습니다.
    
<!DOCTYPE html>
<html>
  <link rel="shortcut icon" type="image/x-icon" href="https://github.com/favicon.ico">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
  <head>
    <meta charset="UTF-8">
    <title>jstree bootstrap demo</title>
  </head>

<body class="vh-100 vw-100">
    <div class="container-fluid h-100 w-100">
      <div class="row h-100">
        <div class="col-8 border border-warning">
          <div class="row">
            <div class="col border border-warning">up</div>
          </div>
          <div class="row">
            <div class="col border border-warning">down
              <button id="add" class="btn btn-success">add</button>
            </div>
          </div>
        </div>
        <div class="col-4 border border-warning h-100">
            <div id="jstree" class="h-100 overflow-auto">
              <ul>　                        <!-- ↓↓↓↓　opened指定しないとツリー開けない -->
                <li id="rootnode" data-jstree='{"opened":true,"selected":true}'>Root node</li>  
              </ul>
            </div>
        </div>
      </div>
    </div>
</body>
<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/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.10/jstree.min.js"></script>
<script>
  $('#jstree').jstree({
    "core" : {
      "check_callback" : true, // これがないと修正系関数効かない
    },
    "plugins" : [
      "wholerow",
    ]
  });

  $('#add').on("click", function(e, data){
    $('#jstree').jstree().create_node('rootnode', "new item");
  });
</script>
</html>
    부트스트랩의 전체 카드를 링크로 만들기
    GAS로 웹 앱 "영화 감상 기록"만들기 ⑤/Vue.js에서 대화 상자 표시 (전편)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage