Bootstrap의 그리드 시스템에서 row 클래스 안의 표시 순서를 바꾸고 싶을 때

2959 단어 HTMLBootstrapCSSHTML,CSSHTML5

목적


  • Bootstrap의 그리드 시스템에서의 표시로 row 클래스내의 표시 순서를 좌우로 변경했을 때의 방법을 정리한다.

    • 전제 조건


  • Bootstrap 설정이로드됩니다.
  • Bootstrap 템플릿을 사용하여 HTML 파일을 코딩합니다.
    ※Bootstrap의 설정을 반영시키기 위한 템플릿은 여기 의 스타터 템플릿내의 코드를 카피한다.

    • 누르는 포인트


  • Bootstrap에서 이미 정의된 내용을 설정하고 싶을 때는 HTML 파일의 클래스명에 정의명을 기재한다.
  • 좌우의 표시 순서를 변경하고 싶을 때는 col 클래스의 div에 우선 순위를 붙인다.
  • 우선순위는 클래스명에 order-数字로 한다.
  • 우선 순위는 모든 비교 대상으로 지정됩니다.
    ※ 숫자가 작을수록 우선 순위가 높습니다

    • 쓰기 방법의 예


  • 원래 설명한 내용은 왼쪽 영역을 사용하고 다음 설명은 앞서 설명한 영역의 끝 부분에서 사용됩니다.
  • 아래의 이미지①의 표시를 코드의 대폭적인 변경을 하지 않고 이미지②의 상태로 하고 싶다.
  • 좌측에 기재하고 싶은 내용의 div에 클래스명으로 order-1로서 그 다음 좌측에 대고 기재하고 싶은 내용의 div의 클래스명에 order-2로 한다.

    • 이미지①


    이미지②

  • 아래에 이미지 ①의 HTML 파일의 내용을 기재한다 
    •           <div class="row">
            <div class="col-8">
              <p>こんにちは</p>
            </div>
            <div class="col-4">
              <p>おはよう</p>
            </div>
          </div> 
        </div>
  • 아래에 이미지 ②의 HTML 파일의 내용을 기재한다 
    •           <div class="row">
            <div class="col-8 order-2">
              <p>こんにちは</p>
            </div>
            <div class="col-4 order-1">
              <p>おはよう</p>
            </div>
          </div> 
        </div>
    배쉬 팁
    Node.js를 사용하여 테이크아웃 시작하기

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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