twitter-bootstrap
Миграция в Bootstrap 4

Вступление

замечания

Изменения компоновки столбцов сетки в Bootstrap 4

Первый блок кода написан в Bootstrap 3. В Bootstrap 3 существует 4 типа спецификаций столбцов, а именно col-md-* col-lg-* col-sm-* col-xs-* . Полностью отзывчивый макет будет выглядеть так в Bootstrap 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 они добавили новый уровень сетки sm ниже 768px для более детального контроля. Таким образом, Bootstrap 4 имеет col-* (xs), col-sm-*, col-md-*, col-lg-*, and col-xl-* . Итак, то, что раньше было .col-md-6 в v3, теперь .col-lg-6 в v4. Обратите внимание, что infix -xs был удален, поэтому .col-6 представляет 6 столбцов на дополнительной небольшой (по умолчанию) точке останова.

Итак, если теперь мы хотим написать тот же пример выше в Bootstrap 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>

Сетка-макет Bootstrap 4

Изменения в поддержке браузера

В twitter-bootstrap 4 поддержка IE8, IE9, and iOS 6 была удалена. v4 теперь только IE10+ and iOS 7+ . Для сайтов, нуждающихся в любом из них, используйте v3.

В twitter-bootstrap 4 была добавлена ​​официальная поддержка Android v5.0 Lollipop's Browser and WebView . Более ранние версии Android-браузера и WebView остаются только unofficially supported .

Удаление класса Affix

Аффикс удален из Bootstrap 4.

Вместо этого рекомендуется использовать position: sticky полипол.

Если вы использовали Affix для применения дополнительных стилей без позиции, полисы могут не поддерживать ваш прецедент. Одним из вариантов такого использования является сторонняя библиотека ScrollPos-Styler.

Согласно документации Bootstrap

Выбросил плагин Affix jQuery. Вместо этого рекомендуем использовать позицию: липкий полипол. См. HTML5. Пожалуйста, введите подробную информацию и конкретные рекомендации по заполнению полиса.

Если вы использовали Affix для применения дополнительных стилей без позиции, полисы могут не поддерживать ваш прецедент. Одним из вариантов такого использования является сторонняя библиотека 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);
  });
  
});

Bootstrap 4 Navbar

Новый компонент Bootstrap 4 Navbar улучшен по сравнению с предшественником Bootstrap 3.x. В Bootstrap 4 Navbar реагирует по умолчанию и использует flexbox для упрощения выравнивания контента Navbar. Также просто использовать новые navbar-toggleable-* для изменения точки останова Navbar. Теперь Navbar имеет 6 точек останова или «состояний», так что вы можете легко иметь один из следующих вариантов Navbar.

• Navbar никогда не сворачивается в вертикальное мобильное представление и всегда горизонтально.
• Navbar всегда сворачивается в вертикальный вид и переключается через гамбургер.
• Navbar сворачивается в вертикальный вид на одной из 4 чувствительных точек останова .

Базовый Bootstrap 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 класс navbar-header был удален из Bootstrap 4, и container-fluid больше не требуется для Navbar полной ширины.

Изменение точки останова Navbar

Класс navbar-toggleable-md делает вышеупомянутый краф Navbar вертикальным (и показывает значок toggler) в точке останова среды (md) 992px. Чтобы изменить это на другую navbar-toggleable-md останова, нам просто нужно поменять swap navbar-toggleable-md с одним из них.

• navbar-toggleable = свернуть по ширине xs <576px
• Navbar-переключаемые-см = коллапс на sm ширине <768px
• navbar-toggleable-lg = свернуть по ширине lg <1200px

Bootstrap 4 Breakpoint Navbar Demo

Изменение выравнивания Navbar

Flexbox позволяет нам легко изменять выравнивание Navbar и его содержимого (бренд, ссылки, формы или текст). Содержимое Navbar по умолчанию выравнивается влево. Конечно, есть много других сценариев выравнивания ...

• Бренд слева (по умолчанию), центр ссылок и право
• Центр брендов, ссылки слева и справа
• Бренд слева и ссылки справа
• Входной сигнал формы, ссылок и заполнения
• Нет бренда, центр ссылок и права
• Бренд слева, ссылки прямо внутри контейнера
• Обозначенные ссылки (ширина заливки) с центрированием

Bootstrap 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>

Bootstrap 4 Navbar с маркой Left, Links Center и Right

<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

Настройка цвета, выравнивания или высоты

Bootstrap 3 в Bootstrap 4 Изменения CSS

Поскольку Bootstrap 4 является основным переписыванием, многие из названий классов Bootstrap 3.x были изменены или удалены. Перестройка таких компонентов, как Navbar и внедрение новых классов CSS и поддержка Flexbox, означает, что обновление до 4.x не является простым процессом преобразования из 3.x.

Тем не менее, есть некоторые классы CSS Bootstrap 3.x, которые имеют определенную замену Bootstrap 4.

Имя / селектор класса CSS изменяется от Bootstrap 3.3.7 до 4 (alpha 6)

{t} - представляет собой уровень или точку останова (т.е.: sm, md, lg и т. д.).
xs является стандартным, и его не нужно указывать: col-3 , col-6 и т. д.

{u} - представляет собой размер единицы измерения (то есть: 1-12)

Также см:
Bootstrap 3.x to 4 Migration Tool
Что нового в Bootstrap 4

Бутстрап 4 Вертикальное выравнивание

Приведение элементов в центр или нижнее выравнивание по вертикали всегда было проблемой с помощью CSS и Bootstrap. Желаемое выравнивание по вертикали может находиться внутри родительского контейнера или относительно смежных элементов.

Теперь, когда Bootstrap 4 является Flexbox по умолчанию существует множество различных подходов к вертикальной линии с использованием: Авто-поля , Flexbox Utilities , или Display Utilities вместе с вертикальным Совместите Utilities .

Сначала Утилиты вертикального выравнивания кажутся очевидным выбором, но они работают только с встроенными и табличными элементами отображения. Вот некоторые варианты и сценарии вертикального выравнивания Bootstrap 4 ...

1 - Вертикальный центр с использованием автоматических полей:

Один из способов вертикального центра - использовать my-auto . Это будет центрировать элемент внутри контейнера. Например, h-100 делает высоту строки, а my-auto будет вертикально col-sm-12 столбец 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>

Вертикальный центр Использование Авто Margins Demo

my-auto представляет поля на вертикальной оси y и эквивалентен:

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

2 - Вертикальный центр с Flexbox:

Поскольку Bootstrap 4 .row теперь 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>

или, используйте 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 - Вертикальный центр с использованием дисплеев:

В Bootstrap 4 есть утилиты отображения, которые могут использоваться для display:table , display:table-cell , display:inline и т. Д. Они могут использоваться с утилитами вертикального выравнивания для выравнивания встроенных, встроенных блоков или элементов ячейки таблицы.

<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 Центрирование

Как центрировать элемент, столбец или содержимое внутри столбца работает по-разному в Bootstrap 4.

Горизонтальный центр

• text-center по-прежнему используется для display:inline элементы
• mx-auto заменяет center-block на центральный display:block элементы display:block
• offset-* или mx-auto можно использовать для центрирования столбцов сетки

mx-auto (auto x-axis margin) будет display:block центре display:block или display:flex элементы с определенной шириной ( % , vw , px и т. д.). 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 Горизонтальное центрирование

Вертикальный центр

Для вертикального центрирования в Bootstrap 4 (ось y) см. Документы по: Bootstrap 4 Vertical Align

Бутстрап 4 Колонный заказ

Изменение порядка (или позиции) возможно в Bootstrap 3 с использованием классов push pull. В Bootstrap 4 классы push pull все еще работают, и, кроме того, можно использовать порядок flexbox .

В Bootstrap 4 классы push pull теперь push-{viewport}-{units} и pull-{viewport}-{units} а xs- infix удалены. Рассмотрим этот пример, который изменяет порядок столбцов на 1-3-2 макета на xs и sm :

<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>

Bootstrap 4 Push Pull Demo

Поскольку новая версия 4 является гибкой, другой вариант заключается в использовании классов утилиты flexbox для изменения порядка столбцов. Теперь полная ширина, 12 единиц столбца col-*-12 столбцов могут быть отменены с помощью упорядочивания гибких дисков .

<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