twitter-bootstrap
부트 스트랩 4로 마이그레이션

소개

비고

부트 스트랩 4의 그리드 시스템의 열 레이아웃 변경

첫 번째 코드 블록은 부트 스트랩 3에 기록됩니다. 부트 스트랩 3에는 4 가지 유형의 컬럼 스펙, 즉 col-md-* col-lg-* col-sm-* col-xs-* 있습니다. 완전히 반응하는 레이아웃은 부트 스트랩 3에서 다음과 같이 보입니다.

<div class="row">
    <div class="col-lg-4 col-md-8 col-sm-8 col-xs-8">
        contents
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
        contents
    </div>
</div>

Bootstrap 4에서는 768px 아래에 새로운 sm 그리드 계층을 추가하여보다 세부적인 제어를 제공합니다. 따라서 부트 스트랩 4에는 col-* (xs), col-sm-*, col-md-*, col-lg-*, and col-xl-* 있습니다. 그래서 v3에서 .col-md-6 이었던 것은 이제 v4에서 .col-lg-6 입니다. 여분의 (기본) 중단 점에서 .col-6 6 열 단위를 나타내도록 -xs 중위가 제거되었습니다.

이제 부트 스트랩 4에 위의 예제를 작성하려면 다음과 같이 작성해야합니다.

<div class="row">
    <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8">
        contents
    </div>
    <div class="col-xl-8 col-lg-8 col-md-4 col-sm-4 col-4">
        contents
    </div>
</div>

그리드 레이아웃 부트 스트랩 4

브라우저 지원 변경

트위터 - 부트 스트랩 4에서는 IE8, IE9, and iOS 6 대한 지원이 중단되었습니다. v4는 현재 IE10+ and iOS 7+ 입니다. 그 중 하나가 필요한 사이트의 경우 v3을 사용하십시오.

트위터 - 부트 스트랩 4에서는 Android v5.0 Lollipop's Browser and WebView 대한 공식 지원이 추가되었습니다. 이전 버전의 Android 브라우저 및 WebView는 unofficially supported 만 unofficially supported .

연관 클래스 제거

접미사는 부트 스트랩 4에서 제거됩니다.

position: sticky 대신 position: sticky polyfill을 사용하는 것이 좋습니다.

접미어를 사용하여 위치가 아닌 스타일을 추가로 적용하는 경우 폴리필은 사용 사례를 지원하지 않을 수 있습니다. 이러한 용도로 사용할 수있는 옵션 중 하나는 타사 ScrollPos-Styler 라이브러리입니다.

부트 스트랩 문서에 따르면

Affix jQuery 플러그인을 삭제했습니다. 위치 대신 sticky polyfill을 사용하는 것이 좋습니다. 자세한 내용 및 특정 polyfill 권장 사항은 HTML5 Please 항목을 참조하십시오.

접미어를 사용하여 위치가 아닌 스타일을 추가로 적용하는 경우 폴리필은 사용 사례를 지원하지 않을 수 있습니다. 이러한 용도로 사용할 수있는 옵션 중 하나는 타사 ScrollPos-Styler 라이브러리입니다.

누군가가 Bootstrap v3 에서 Bootstrap v4 로 마이그레이션하는 경우 대체 접근법이 아래에 나와 있습니다.

HTML

<header>
    
</header>
<nav class="navbar navbar-light bg-faded" data-toggle="affix">
    <button class="navbar-toggler hidden-sm-up pull-xs-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        ☰
    </button>
    <a class="navbar-brand" href="#">Brand</a>
    <div class="collapse navbar-toggleable-xs" id="collapsingNavbar">

        <ul class="nav navbar-nav pull-xs-right">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    Menu
                </a>
                <div class="dropdown-menu" aria-labelledby="Preview">
                    <a class="dropdown-item" href="">Logout</a>

                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item ">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container" id="main">
    <h2>Hello Bootstrap 4.</h2>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-9">
            <p>3 wolf moon retro jean shorts chambray sustainable roof party. Shoreditch vegan artisan Helvetica. Tattooed Codeply Echo Park Godard kogi, next level irony ennui twee squid fap selvage. Meggings flannel Brooklyn literally small batch, mumblecore
                PBR try-hard kale chips. Brooklyn vinyl lumbersexual bicycle rights, viral fap cronut leggings squid chillwave pickled gentrify mustache. 3 wolf moon hashtag church-key Odd Future. Austin messenger bag normcore, Helvetica Williamsburg
                sartorial tote bag distillery Portland before they sold out gastropub taxidermy Vice.</p>
        </div>
        <div class="col-xs-6 col-md-3">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra codeply varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt codeply condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
                Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
            </p>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra codeply varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt codeply condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi.
                Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6 col-sm-4">
            <div class="card card-outline-primary">
               <div class="card-block">
               <h3 class="card-title">Card</h3>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-4">
            <div class="card card-outline-primary">
               <div class="card-block">
               <h3 class="card-title">Card</h3>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
        <div class="col-xs-6 col-sm-4">
            <div class="card card-outline-primary">
               <div class="card-block">
               <h3 class="card-title">Card</h3>
                <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-outline-secondary">Outline</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

header {
height: 220px;
background: #ccc;
}

JAVASCRIPT

$(document).ready(function() {

  var toggleAffix = function(affixElement, scrollElement, wrapper) {
  
    var height = affixElement.outerHeight(),
        top = wrapper.offset().top;
    
    if (scrollElement.scrollTop() >= top){
        wrapper.height(height);
        affixElement.addClass("affix");
    }
    else {
        affixElement.removeClass("affix");
        wrapper.height('auto');
    }
      
  };
  

  $('[data-toggle="affix"]').each(function() {
    var ele = $(this),
        wrapper = $('<div></div>');
    
    ele.before(wrapper);
    $(window).on('scroll resize', function() {
        toggleAffix(ele, $(this), wrapper);
    });
    
    // init
    toggleAffix(ele, $(window), wrapper);
  });
  
});

부트 스트랩 4 Navbar

새로운 Bootstrap 4 Navbar Component가 Bootstrap 3.x의 이전 버전보다 향상되었습니다. 부트 스트랩 4에서는 Navbar가 기본적으로 반응하며 flexbox 를 사용하여 Navbar 내용의 정렬을 훨씬 쉽게합니다. 새로운 navbar-toggleable-* 클래스를 사용하여 Navbar 중단 점을 변경하는 것도 간단합니다. 이제 Navbar에는 다음과 같은 Navbar 옵션 중 하나를 쉽게 가질 수 있도록 6 개의 중단 점 크기 또는 "상태"가 있습니다.

• Navbar는 수직 모바일보기로 접히지 않으며 항상 수평입니다.
• Navbar는 항상 세로보기로 축소되어 햄버거를 통해 전환됩니다.
• Navbar 는 4 개의 응답 중단 점 중 하나 에서 세로보기로 축소됩니다.

기본 부트 스트랩 4 Navbar

<nav class="navbar navbar-toggleable-md">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbar1">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

위의 코드에서 알 수 있듯이 navbar-header 클래스는 Bootstrap 4에서 제거되었으며 전체 너비 Navbar에는 container-fluid 가 더 이상 필요하지 않습니다.

탐색 모음 중단 점 변경

navbar-toggleable-md 클래스는 위의 Navbar를 중급 (md) 중단 점 992px에서 세로로 축소하고 ( navbar-toggleable-md 러 아이콘 표시) 만듭니다. 이것을 다른 중단 점으로 변경하려면 다음 중 하나와 함께 navbar-toggleable-md 를 교체해야합니다.

• navbar-toggleable = xs 너비에서 접기 <576px
• navbar-toggleable-sm = sm 너비에서 축소. <768px
• 메뉴 바에서-토글-LG가 붕괴 = lg 폭 <1200 픽셀

부트 스트랩 4 브레이크 포인트 Navbar 데모

Navbar Alignment 변경

Flexbox를 사용하여 Navbar와 해당 내용 (브랜드, 링크, 양식 또는 텍스트)의 정렬을 쉽게 변경할 수 있습니다. 기본 Navbar 콘텐츠는 왼쪽 정렬됩니다. 물론 다른 많은 정렬 시나리오가 있습니다 ...

• 브랜드 왼쪽 (기본값), 링크 중앙 및 오른쪽
• 브랜드 센터, 왼쪽 및 오른쪽 링크
• 왼쪽 브랜드와 오른쪽 링크
• 브랜드, 링크 및 채우기 폭 입력 양식
• 브랜드 없음, 링크 중앙 및 오른쪽
• 브랜드 왼쪽, 컨테이너 내부 링크
• 양쪽 맞춤 링크 (폭을 채우기)를 중심으로 정렬

부트 스트랩 4 Navbar 중심 브랜드 및 왼쪽 / 오른쪽 링크

<nav class="navbar navbar-toggleable-sm navbar-inverse bg-primary">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=".dual-collapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse dual-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#features">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
    <a class="navbar-brand d-flex mx-auto" href="#">Navbar 2</a>
    <div class="navbar-collapse collapse dual-collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

부트 스트랩 4 Navbar, 브랜드 왼쪽, 링크 센터 및 오른쪽

<nav class="navbar navbar-light navbar-toggleable-sm bg-faded justify-content-center">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a href="/" class="navbar-brand d-flex w-50 mr-auto">Brand</a>
    <div class="navbar-collapse collapse" id="collapsingNavbar3">
        <ul class="navbar-nav mx-auto w-100 justify-content-center">
            <li class="nav-item active">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
        <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
        </ul>
    </div>
</nav>

Navbar Alignment 데모 : http://www.codeply.com/go/qhaBrcWp3v

Bootstrap 4 Navbar에 대한 추가 정보

색상, 정렬 또는 높이 사용자 정의

부트 스트랩 3에서 부트 스트랩 4로 CSS 변경

부트 스트랩 4는 주요 재 작성이므로 많은 Bootstrap 3.x 클래스 이름이 변경되거나 제거되었습니다. Navbar와 같은 구성 요소의 재구성, 새로운 CSS 클래스 및 Flexbox 지원의 도입은 4.x 로의 업그레이드가 3.x에서의 간단한 변환 프로세스가 아니라는 것을 의미합니다.

그러나 특정 Bootstrap 4 대체품이있는 Bootstrap 3.x CSS 클래스가 있습니다.

CSS 클래스 이름 / 셀렉터가 부트 스트랩 3.3.7에서 4 (알파 6)

{t} - 계층 또는 중단 점을 나타냅니다 (예 : sm, md, lg 등).
xs 티어가 기본값이며 col-3 , col-6 등 지정 될 필요가 없습니다.

{u} - col 단위 크기를 나타냅니다 (예 : 1-12).

참조 :
부트 스트랩 3.x에서 4로 마이그레이션 도구
부트 스트랩 4의 새로운 기능

부트 스트랩 4 수직 정렬

CSS 또는 부트 스트랩을 사용하면 요소를 가운데 정렬 또는 맨 아래 정렬로 가져 오는 것이 항상 어려움이되었습니다. 원하는 수직 정렬은 부모 컨테이너 내에 있거나 인접한 요소를 기준으로 할 수 있습니다.

이제 Bootstrap 4는 기본적으로 flexbox입니다 . 자동 정렬, Flexbox 유틸리티 또는 디스플레이 정렬 유틸리티 와 함께 수직 정렬에 대한 다양한 접근 방법이 있습니다.

처음에는 수직 정렬 유틸리티 (Vertical Alignment Utilities) 가 확실한 선택 인 것처럼 보일 수 있지만 인라인 및 테이블 표시 요소 에서만 작동합니다. 여기에 몇 가지 부트 스트랩 4 수직 정렬 옵션과 시나리오가 있습니다 ...

1 - 자동 여백을 사용하는 수직 중심 :

수직 중심의 한 가지 방법은 my-auto 를 사용하는 my-auto 입니다. 그러면 컨테이너 안에 요소가 가운데에 배치됩니다. 예를 들어, h-100 은 행을 전체 높이로 만들고 my-auto 는 col-sm-12 열을 세로로 가운데로 배치합니다.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

자동 여백 데모를 사용하는 수직 센터

my-auto 는 수직 y 축의 여백을 나타내며 다음과 같습니다.

margin-top: auto;
margin-bottom: auto;

2 - Flexbox가 장착 된 수직 센터 :

부트 스트랩 4 .row 가 이제 display:flex 되기 때문에 display:flex 를 사용하면 어떤 열에도 align-self-center 를 사용하여 세로로 가운데 align-self-center 할 수 있습니다.

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

또는 전체 .row 에 align-items-center 를 사용하여 행의 모든 .row col-* 을 세로로 가운데 맞추기 ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

세로 센터 다른 높이 열 데모

3 - 디스플레이 센터를 사용하는 수직 센터 :

부트 스트랩 4는 display:table , display:table-cell , display:inline 등의 display:table 사용할 수있는 디스플레이 유틸리티를 가지고 있습니다. 이들은 인라인, 인라인 블록 또는 테이블 셀 요소를 정렬하기 위해 수직 정렬 유틸리티 와 함께 사용할 수 있습니다.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

디스플레이 센터 데모를 사용한 수직 센터

부트 스트랩 4 센터링

열 안의 요소, 열 또는 내용의 중심을 맞추는 방법은 부트 스트랩 4에서 다르게 작동합니다.

수평 중심

• text-center 는 여전히 display:inline 용으로 사용 display:inline 요소
• mx-auto 는 center-block 을 센터 display:block 대체합니다 display:block 요소
• offset-* 또는 mx-auto 를 사용하여 그리드 열을 가운데로 offset-* 수 있습니다.

mx-auto (자동 x 축 여백)은 가운데를 display:block 또는 display:flex 폭 , ( % , vw , px 등)이 정의 된 요소를 display:flex 합니다. Flexbox는 그리드 열에 기본적 으로 사용 되므로 다양한 flexbox 중심 맞춤 방법이 있습니다.

가운데 텍스트 또는 인라인 요소 : text-center

<div class="container">
    <h1 class="text-center">i'm centered</h1>
    <div class="row">
        <div class="col text-center">i'm centered!</div>
    </div>
</div>

가운데 display:block 또는 display:flex : mx-auto

<div class="row">
    <div class="col-12">
        <img class="mx-auto d-block" src="//placehold.it/200x150?text=mx-auto">
    </div>
</div>

오프셋을 사용하여 가운데 열 : offset-*

<div class="row">
    <div class="col-4 offset-4">
        <h6>I'm .col-4 centered (offset 4)
    </div>
</div>

mx-auto 와 함께 열을 가운데에 배치 할 수도 있습니다.

<div class="row">
    <div class="col-4 mx-auto">
        <h6>I'm .col-4 centered</h6>
    </div>
</div>

데모 부트 스트랩 4 수평 중심 맞춤

수직 중심

부트 스트랩 4 (Y 축)의 세로 가운데 맞춤 에 대해서는 다음 위치의 문서를 참조하십시오. 부트 스트랩 4 세로 맞춤

부트 스트랩 4 열 순서

부트 스트랩 3에서는 푸시 풀 클래스를 사용하여 순서 (또는 위치)를 변경할 수있었습니다. 부트 스트랩 4에서는 푸시 풀 클래스가 여전히 작동하며, 플렉스 박스 주문도 사용할 수 있습니다.

부트 스트랩 4에서는 푸시 풀 클래스가 push-{viewport}-{units} 및 pull-{viewport}-{units} 이되어 xs- 삽입이 제거되었습니다. xs 및 sm 에서 열 순서를 1-3-2 레이아웃으로 변경하는이 예제를 고려하십시오.

<div class="row">
    <div class="col-3 col-md-6">
        1
    </div>
    <div class="col-3 col-md-6 push-6 push-md-0">
        2
    </div>
    <div class="col-6 col-md-12 pull-3 pull-md-0">
        3
    </div>
</div>

부트 스트랩 4 푸시 풀 데모

새 버전 4는 flexbox이므로 다른 옵션 은 flexbox 유틸리티 클래스를 사용하여 열의 순서를 변경하는 것입니다. 이제 전폭, 12 단위 col-*-12 열 flexbox 주문을 사용하여 되돌릴 수 있습니다.

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 flex-first flex-md-unordered">
        Col 2
    </div>
</div>

Flexbox 데모 주문