Bootstrap 4 panel: Bootstrap 4 Card — Оформление контента в виде карточки

Навигационная панель. Компоненты · Bootstrap. Версия v4.0.0

Документация и примеры для мощного и отзывчивого навигационного заголовка Bootstrap и навигационной панели. Включает поддержку брендинга, навигации и прочего, включая поддержку нашего плагина для сворачивания.

Как это работает

Вот что вам надо знать перед использованием навбара:

• Навбары требуют «обертки» из классов .navbar и .navbar-expand{-sm|-md|-lg|-xl} для отзывчивости при «складывании»и классы , а также классы цветовых схем.
• Навбары и их содержимое по умолчанию занимают 100% ширины. Используйте опциональные контейнеры для ограничения их горизонтальной ширины.
• Используйте наши классы спейсинга и «флекс» для контроля над пространством и выравниванием внутри навбаров.
• Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» JavaScript.
• Навбары скрыты по умолчанию при печати. Сделайте их печатаемыми, добавив класс .d-print в .navbar. Смотри класс отображения.
• Придайте им доступность использованием элемента <nav>, или, если используется менее специфический элемент – например <div>: добавьте role="navigation" в каждый навбар для придания ему большей доступности для пользователей вспомогательных технологий.

Дальше вы увидите примеры и список поддерживаемых под-компонентов.

Поддерживаемые типы содержимого

В навбарах присутствуют встроенная поддержка многих суб-компонентов. Выбирайте нужный:

• .navbar-brand для названия вашей компании, продукта или имени проекта.
• .navbar-nav для навигации полной высоты (включая выпадающие элементы).
• .navbar-toggler для использования с нашим JS-«плагином свертывания» и других изменяющихся состояний навигации.
• .form-inline для любых органов контроля форм и действий с ними.
• .navbar-text для добавления вертикально центрированных строк текста.
• .collapse.navbar-collapse для группирования и скрытия содержимого навбара на определенном брейкпойнте родителя.

Вот пример всех суб-компонентов, которые включены в отзывчивый светлый навбар с автоматическим сворачиванием на брейкпойнте

lg (большой).

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>

  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div aria-labelledby="navbarDropdown">
          <a href="#">Action</a>
          <a href="#">Another action</a>
          <div></div>
          <a href="#">Something else here</a>
        </div>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search" aria-label="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>  

В этом примере использованы классы цвета bg-light и спейсинга my-2, my-lg-0, mr-sm-0, my-sm-0.

Бренд

.navbar-brand можно применять к большинству элементов, но лучше всего – к ссылке, т.к. некоторые элементы могут потребовать классы или стили.

<!-- As a link -->
<nav>
  <a href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav>
  <span>Navbar</span>
</nav> 

Добавление изображений к .navbar-brand почти всегда потребует дополнительной стилизации CSS и классов.

<!-- Just an image -->
<nav>
  <a href="#">
    <img src="/assets/brand/bootstrap-solid.svg" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav>
  <a href="#">
    <img src="/assets/brand/bootstrap-solid.svg" alt="">
    Bootstrap
  </a>
</nav>

Навбар

Ссылки в навигации навбара сделаны на параметрах класса

.nav, с их собственными классами-модификаторами; и требуют использования классов тогглера для правильного «отзывчивого» поведения. Навигация в навбарах также займет максимально возможное количество горизонтального места, для правильного выравнивания элементов навбара.

Активные состояния – с классом .active – нужны для индикации возможности применения текущей страницы напрямую к .nav-link или их непосредственному «родителю» .nav-item.

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav> 

И т.к. мы используем классы в наших навбарах, вы можете избегать «списочного» подхода к разметке, если вам надо.

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <div>
      <a href="#">Home <span>(current)</span></a>
      <a href="#">Features</a>
      <a href="#">Pricing</a>
      <a href="#">Disabled</a>
    </div>
  </div>
</nav> 

Выпадающие меню требуют оборачивающего элемента для позиционирования, так что удостоверьтесь в использовании раздельных и вложенных элементов для .nav-item и .nav-link, как в примере ниже.

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
      <li>
        <a href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div aria-labelledby="navbarDropdownMenuLink">
          <a href="#">Action</a>
          <a href="#">Another action</a>
          <a href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav> 
 

Формы

Размещайте внутри навбара различные элементы контроля форм и компоненты, добавив в них класс .form-inline.

<nav>
  <form>
    <input type="search" placeholder="Search" aria-label="Search">
    <button type="submit">Search</button>
  </form>
</nav>

Выравнивайте содержимое ваших строчных форм классами-утилитами, как необходимо.

<nav>
  <a>Navbar</a>
  <form>
    <input type="search" placeholder="Search" aria-label="Search">
    <button type="submit">Search</button>
  </form>
</nav> 

Работают и формы ввода, также:

<nav>
  <form>
    <div>
      <div>
        <span>@</span>
      </div>
      <input type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

Разные кнопки поддерживаются как часть этих форм в навбарах. Это также хорошее напоминание о том, что утилиты вертикального выравнивания можно использовать для выравнивания элементов различных размеров.

Main button Smaller button

<nav>
  <form>
    <button type="button">Main button</button>
    <button type="button">Smaller button</button>
  </form>
</nav>

Текст

Благодаря классу .navbar-text навбары могут содержать «крупицы» текста. Этот класс придает строкам текста вертикальное выравнивание и горизонтальный спейсинг.

Navbar text with an inline element

<nav>
  <span>
    Navbar text with an inline element
  </span>
</nav>

Смешивайте и добивайтесь необходимого соответствия с другими компонентами и утилитами, как вам надо.

<nav>
  <a href="#">Navbar w/ text</a>
  <button type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
    </ul>
    <span>
      Navbar text with an inline element
    </span>
  </div>
</nav>

Цветовые схемы

Настройка оформления навбаров в BS4 стала столь легкой благодаря сочетанию классов оформления и утилит background-color. Выбирайте .navbar-light для навбара со светлым фоном, или .navbar-dark для навбара с темным фоном. Далее настраивайте их классами .bg-*.

<nav>
  <!-- Navbar content -->
</nav>

<nav>
  <!-- Navbar content -->
</nav>

<nav>
  <!-- Navbar content -->
</nav>

Контейнеры

Хотя это и не требуется, вы можете обернуть навбар в .container для центрирования навбара на странице или добавить один навбар в .container лишь для центрирования содержимого навбара с фиксированной позицией “top”.

<div>
  <nav>
    <a href="#">Navbar</a>
  </nav>
</div>

Когда контейнер внутри вашего навбара, его горизонтальный паддинг удаляется на брейкпойнтах, меньших чем заданный вами .navbar-expand{-sm|-md|-lg|-xl}. Это гарантирует, что не произойдет ненужного удвоения паддинга на меньших вьюпортах, когда ваш навбар свернут.

<nav>
  <div>
    <a href="#">Navbar</a>
  </div>
</nav>

Размещение

Используйте наши утилиты позиционирования для размещения навбаров в нестатичных позициях. Выбирайте из фиксированного наверху, внизу или «приклеивающегося» (прокручивается со страницей, пока не достигнет верха, и остается там). Фиксированные навбары используют position: fixed, поэтому они «исключены» из нормального строения DOM и могут потребовать добавления CSS (например, padding-top в <body>).

Также обратите внимание, что .sticky-top использует position: sticky, которая не поддерживается полностью в каждом браузере.

<nav>
  <a href="#">Default</a>
</nav>

<nav>
  <a href="#">Fixed top</a>
</nav>

<nav>
  <a href="#">Fixed bottom</a>
</nav>

<nav>
  <a href="#">Sticky top</a>
</nav>

Отзывчивое поведение

Навбары могут использовать классы .navbar-toggler, .navbar-collapse и .navbar-expand{-sm|-md|-lg|-xl} для изменения, когда их содержимое «схлапывается» по нажатию кнопки. В сочетании с другими классами вы можете легко выбрать, когда показать или скрыть некие элементы.

Для навбаров, которые не скрываются, добавьте в навбар класс .navbar-expand. Для навбаров, которые всегда скрываются, не добавляйте его.

Тогглер (кнопка разворачивания меню)

Тогглеры по умолчанию выровнены по левому краю, но если они идут за дочерними элементами как .navbar-brand – они автоматически выровняются по правому краю. Зеркальное отражение вашей разметки переставит и тогглер.

Без показанного элемента класса .navbar-brand, на самых маленьких брейкпойнтах:

<nav>
  <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <div>
    <a href="#">Hidden brand</a>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search" aria-label="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>

С «брендом», показанный слева, и тогглером — справа:

<nav>
  <a href="#">Navbar</a>
  <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>

  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>

С тогглером слева и «брендом» справа:

<nav>
  <button type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span></span>
  </button>
  <a href="#">Navbar</a>

  <div>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
    <form>
      <input type="search" placeholder="Search" aria-label="Search">
      <button type="submit">Search</button>
    </form>
  </div>
</nav>

Внешнее содержимое

Иногда надо использовать плагин коллапса для запуска скрытого содержимого на странице. Т.к. наш плагин работает через id и data-target – вам будет легко это сделать!

Collapsed content

Toggleable via the navbar brand.

<div>
  <div>
    <div>
      <h5>Collapsed content</h5>
      <span>Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav>
    <button type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span></span>
    </button>
  </nav>
</div>

Карты. Компоненты · Bootstrap. Версия v4.0.0

Карты Bootstrap предоставляют собой гибкий и расширяемый контейнер контента с несколькими вариантами и опциями.

О карточках

Карточка – это гибкий и расширяемый контейнер содержимого. Она включает опции заголовков и футеров, широкий спектр контента, контекстуальные цвета бэкграунда и мощные опции отображения. Если вы знакомы с Bootstrap 3, — карты заменили наши старые панели, «колодцы» (закругленная граница вокруг элемента с серой заливкой и паддингом) и маленькие версии изображений — «тамбнейлы». Схожая с этими элементами функциональность доступна для карточек в виде классов-модификаторов.

Пример

Карточки созданы с применением как можно более меньшего количества кода и стилей, но они все же имеют множество инструментов для настройки и контроля. Их легко выравнивать и сочетать с другими компонентами Bootstrap, т.к. они созданы с помощью «флексбокса». По умолчанию они не имеют margin, поэтому при необходимости используйте утилиты расстояния.

Внизу – пример базовой карточки фиксированной ширины со смешанным содержимым. Карточки не имеют фиксированной ширины по умолчанию, так что они будут автоматически заполнять полную ширину родительского элемента. Этот параметр можно настроить с помощью различных опций размеров.

<div>
  <img src="..." alt="Card image cap">
  <div>
    <h5>Название карточки</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#">Переход куда-нибудь</a>
  </div>
</div>

Типы содержимого

Карточки поддерживают широкий спектр содержимого, включая изображения, текст, списки, и т.д. Внизу – примеры.

Тело

«Фундамент» карточки – класс .card-body. Используйте его всегда, когда вам нужна выделенная секция внутри карточки.

This is some text within a card body.

<div>
  <div>
    This is some text within a card body.
  </div>
</div>

Названия, текст и ссылки

Названия карточек создаются добавлением класса .card-title к тэгу <h*>. Аналогично, ссылки добавляются и размещаются рядом друг с другом добавлением класса .card-link в тэг <a>.

«Подназвания» добавляются классом .card-subtitle в тэг <h*>. Если элементы с классами .card-title и .card-subtitle размещены в элементе с классом .card-body, название и «подназвание» карточки выровняются прекрасно.

<div>
  <div>
    <h5>Название карточки</h5>
    <h6>Подзаголовок карты</h6>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#">Ссылка карты</a>
    <a href="#">Другая ссылка</a>
  </div>
</div>

Изображения

Класс .card-img-top размещает изображение наверху карточки. Текст может быть добавлен к карточке классом .card-text. Текст внутри этого класса может быть оформлен стандартными тэгами HTML.

Some quick example text to build on the card title and make up the bulk of the card’s content.

<div>
  <img src="..." alt="Card image cap">
  <div>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Списки

Создавайте списки содержимого в карточке с помощью «расширенных» списков.

• Cras justo odio
• Dapibus ac facilisis in
• Vestibulum at eros

<div>
  <ul>
    <li>Cras justo odio</li>
    <li>Dapibus ac facilisis in</li>
    <li>Vestibulum at eros</li>
  </ul>
</div>

• Cras justo odio
• Dapibus ac facilisis in
• Vestibulum at eros

<div>
  <div>
    Featured
  </div>
  <ul>
    <li>Cras justo odio</li>
    <li>Dapibus ac facilisis in</li>
    <li>Vestibulum at eros</li>
  </ul>
</div>

«Плавильный котел» (в смысле – бросайте все что есть)

Смешивайте и подгоняйте друг под друга разные типы содержимого в карточке. Показанный ниже пример включает стили для изображений, текста, групп списков – и все это обернуто в карточку фиксированной ширины.

<div>
  <img src="..." alt="Card image cap">
  <div>
    <h5>Название карточки</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul>
    <li>Cras justo odio</li>
    <li>Dapibus ac facilisis in</li>
    <li>Vestibulum at eros</li>
  </ul>
  <div>
    <a href="#">Ссылка карты</a>
    <a href="#">Другая ссылка</a>
  </div>
</div>

Заголовок и «подвал»

Добавьте заголовок и\или подвал к карточке.

<div>
  <div>
    Featured
  </div>
  <div>
    <h5>Специальный заголовок</h5>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#">Переход куда-нибудь</a>
  </div>
</div>

Заголовки карточек можно стилизовать добавлением стиля .card-header к <h*>.

<div>
  <h5>Featured</h5>
  <div>
    <h5>Специальный заголовок</h5>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#">Переход куда-нибудь</a>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<div>
  <div>
    Quote
  </div>
  <div>
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

<div>
  <div>
    Featured
  </div>
  <div>
    <h5>Специальный заголовок</h5>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#">Переход куда-нибудь</a>
  </div>
  <div>
    2 days ago
  </div>
</div>

Размеры

У карточек нет определенной ширины width, так что они всегда будут занимать 100% ширины, пока не объявлено иное. Вы можете изменить ширины в CSS, классами сетки, SASS или утилити-классами.

Использование разметки сеток

Используя сетку, оборачивайте карточки в колонки и ряды, если необходимо.

<div>
  <div>
    <div>
      <div>
        <h5>Специальный заголовок</h5>
        <p>With supporting text below as a natural lead-in to additional content.</p>
        <a href="#">Переход куда-нибудь</a>
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        <h5>Специальный заголовок</h5>
        <p>With supporting text below as a natural lead-in to additional content.</p>
        <a href="#">Переход куда-нибудь</a>
      </div>
    </div>
  </div>
</div>

Утилиты

Используйте наши утилиты размеров для быстрой настройки ширины карточки.

Название карточки

With supporting text below as a natural lead-in to additional content.

Кнопка

Название карточки

With supporting text below as a natural lead-in to additional content.

Кнопка

<div>
  <div>
    <h5>Название карточки</h5>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#">Кнопка</a>
  </div>
</div>

<div>
  <div>
    <h5>Название карточки</h5>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#">Кнопка</a>
  </div>
</div>

Обычный CSS

Используйте обычный CSS для установки ширины.

<div>
  <div>
    <h5>Специальный заголовок</h5>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#">Переход куда-нибудь</a>
  </div>
</div>

Выравнивание текста

Вы можете быстро изменить выравнивание текста любой карточки – в ее частях или в целом – с помощью наших классов выравнивания.

<div>
  <div>
    <h5>Специальный заголовок</h5>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#">Переход куда-нибудь</a>
  </div>
</div>

<div>
  <div>
    <h5>Специальный заголовок</h5>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#">Переход куда-нибудь</a>
  </div>
</div>

<div>
  <div>
    <h5>Специальный заголовок</h5>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#">Переход куда-нибудь</a>
  </div>
</div>

Навигация

Добавляйте элементы навигации в заголовок карточки (или блок) с компонентами навигации Bootstrap.

<div>
  <div>
    <ul>
      <li>
        <a href="#">Active</a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div>
    <h5>Специальный заголовок</h5>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#">Переход куда-нибудь</a>
  </div>
</div>

<div>
  <div>
    <ul>
      <li>
        <a href="#">Active</a>
      </li>
      <li>
        <a href="#">Link</a>
      </li>
      <li>
        <a href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div>
    <h5>Специальный заголовок</h5>
    <p>With supporting text below as a natural lead-in to additional content.</p>
    <a href="#">Переход куда-нибудь</a>
  </div>
</div>

Изображения

В карточках есть настройки для работы с изображениями. Вы можете добавить «уменьшенное изображение» к низу карточки, наложить содержимое карточки на изображение либо просто вставить его в карточку.

Маленькие изображения

По аналогии с заголовками и «подвалами», карточки могут иметь image cap вверху и внизу – маленькие изображения.

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

<div>
  <img src="..." alt="Card image cap">
  <div>
    <h5>Название карточки</h5>
    <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p><small>Last updated 3 mins ago</small></p>
  </div>
</div>
<div>
  <div>
    <h5>Название карточки</h5>
    <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p><small>Last updated 3 mins ago</small></p>
  </div>
  <img src="..." alt="Card image cap">
</div>

«Наложение» изображений

Превратите изображение в фон карточки и наложите на него текст карточки. В зависимости от изображения тут могут потребоваться дополнительные стили или утилиты.

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

<div>
  <img src="..." alt="Card image">
  <div>
    <h5>Название карточки</h5>
    <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p>Last updated 3 mins ago</p>
  </div>
</div>

Стили карточек

У карточек есть множество опций для настройки их фона, границ и цвета.

Фон и цвет

Используйте утилиты фона и текста для изменения внешнего вида карточки.

Primary card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Success card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Danger card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Warning card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Info card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Light card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Dark card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

<div>
  <div>Header</div>
  <div>
    <h5>Primary card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div>
  <div>Header</div>
  <div>
    <h5>Secondary card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div>
  <div>Header</div>
  <div>
    <h5>Success card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div>
  <div>Header</div>
  <div>
    <h5>Danger card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div>
  <div>Header</div>
  <div>
    <h5>Warning card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div>
  <div>Header</div>
  <div>
    <h5>Info card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div>
  <div>Header</div>
  <div>
    <h5>Light card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div>
  <div>Header</div>
  <div>
    <h5>Dark card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

Границы

Используйте утилиты границ для изменения атрибута border-color карточки. Заметьте, что вы можете вставить классы .text-{color} в родительский элемент класса .card или в поднабор содержимого краточки – как показано ниже.

Primary card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Secondary card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Success card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Danger card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Warning card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Info card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Light card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Dark card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

<div>
  <div>Header</div>
  <div>
    <h5>Primary card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div>
  <div>Header</div>
  <div>
    <h5>Secondary card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div>
  <div>Header</div>
  <div>
    <h5>Success card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div>
  <div>Header</div>
  <div>
    <h5>Danger card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div>
  <div>Header</div>
  <div>
    <h5>Warning card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div>
  <div>Header</div>
  <div>
    <h5>Info card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div>
  <div>Header</div>
  <div>
    <h5>Light card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div>
  <div>Header</div>
  <div>
    <h5>Dark card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Утилиты миксинов

Вы также можете изменить границы заголовка карточки и «подвала», и даже удалить их background-color с помощью класса .bg-transparent.

Success card title

Some quick example text to build on the card title and make up the bulk of the card’s content.

<div>
  <div>Header</div>
  <div>
    <h5>Success card title</h5>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div>Footer</div>
</div>

Расположение карточек

В дополнение к стилизации содержимого карточек, Bootstrap включает несколько параметров расположения серий карточек. В настоящее время эти параметры не являются отзывчивыми.

Группы карточек

Используйте их для отрисовки карточек как единого, прикрепленного элемента с колонками равной ширины и высоты. Группы карточек используют display: flex; для достижения таких свойств размеров.

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Название карточки

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div>
  <div>
    <img src="..." alt="Card image cap">
    <div>
      <h5>Название карточки</h5>
      <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p><small>Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div>
    <img src="..." alt="Card image cap">
    <div>
      <h5>Название карточки</h5>
      <p>This card has supporting text below as a natural lead-in to additional content.</p>
      <p><small>Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div>
    <img src="..." alt="Card image cap">
    <div>
      <h5>Название карточки</h5>
      <p>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p><small>Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

При использовании групп карточек с «подвалами» содержимое карточек расположится автоматически.

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Название карточки

This card has supporting text below as a natural lead-in to additional content.

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

<div>
  <div>
    <img src="..." alt="Card image cap">
    <div>
      <h5>Название карточки</h5>
      <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div>
      <small>Last updated 3 mins ago</small>
    </div>
  </div>
  <div>
    <img src="..." alt="Card image cap">
    <div>
      <h5>Название карточки</h5>
      <p>This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div>
      <small>Last updated 3 mins ago</small>
    </div>
  </div>
  <div>
    <img src="..." alt="Card image cap">
    <div>
      <h5>Название карточки</h5>
      <p>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div>
      <small>Last updated 3 mins ago</small>
    </div>
  </div>
</div>

«Карточный стол»

Нужен набор карточек равной ширины и высоты, не прикрепленных друг к другу? Используйте «карточный стол».

Название карточки

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Название карточки

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div>
  <div>
    <img src="..." alt="Card image cap">
    <div>
      <h5>Название карточки</h5>
      <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p><small>Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div>
    <img src="..." alt="Card image cap">
    <div>
      <h5>Название карточки</h5>
      <p>This card has supporting text below as a natural lead-in to additional content.</p>
      <p><small>Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div>
    <img src="..." alt="Card image cap">
    <div>
      <h5>Название карточки</h5>
      <p>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p><small>Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Как и в группах карточек, подвалы карточек в «столах» автоматически расположатся в линию.

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Название карточки

This card has supporting text below as a natural lead-in to additional content.

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

<div>
  <div>
    <img src="..." alt="Card image cap">
    <div>
      <h5>Название карточки</h5>
      <p>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div>
      <small>Last updated 3 mins ago</small>
    </div>
  </div>
  <div>
    <img src="..." alt="Card image cap">
    <div>
      <h5>Название карточки</h5>
      <p>This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div>
      <small>Last updated 3 mins ago</small>
    </div>
  </div>
  <div>
    <img src="..." alt="Card image cap">
    <div>
      <h5>Название карточки</h5>
      <p>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div>
      <small>Last updated 3 mins ago</small>
    </div>
  </div>
</div>

Колонки карточек

Карточки можно выстроить в Masonry-подобные колонки с помощью CSS, обернув их в .card-columns. Для облегчения выравнивания карточки созданы на основе column, а не на flexbox.

Внимание! Размеры карточек могут быть разными, поэтому положение колонок тоже может разниться. Чтобы карточки не выходили из колонок, задайте display: inline-block, т.к. column-break-inside: avoid не совсем рабочее решение.

Название карточки, которое завершает новую строку

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Название карточки

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Название карточки

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Название карточки

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div>
  <div>
    <img src="..." alt="Card image cap">
    <div>
      <h5>Название карточки, которое завершает новую строку</h5>
      <p>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div>
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div>
    <img src="..." alt="Card image cap">
    <div>
      <h5>Название карточки</h5>
      <p>This card has supporting text below as a natural lead-in to additional content.</p>
      <p><small>Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div>
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div>
    <div>
      <h5>Название карточки</h5>
      <p>This card has supporting text below as a natural lead-in to additional content.</p>
      <p><small>Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div>
    <img src="..." alt="Card image">
  </div>
  <div>
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div>
    <div>
      <h5>Название карточки</h5>
      <p>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p><small>Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Колонки карточек также можно растянуть и настроить с помощью кода. Ниже показано расширение класса .card-columns с использованием такого же CSS, как мы использовали в колонках, — который создает набор отзывчивых ярусов для изменения числа колонок.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

Навигационная панель · Bootstrap на русском

Навигационная панель является простой оболочкой для позиционирования брендинг, навигация и другие элементы в заголовке краткое навигации. Это легко расширяемый и, с помощью нашего плагина крах, его можно легко интегрировать контент закадровый.

Содержание

Основы

Вот что вы должны знать перед началом работы с навигационной панелью:

• Navbar’у требуется задать класс .navbar и указать цветовую схему.
• По-умолчанию Navbars и его содержание могут изменяться. Используйте контейнеры для ограничения их ширины.
• Используйте .pull-*-left и .pull-*-right чтобы быстро выровнять компоненты.
• Обеспечить доступность с помощью <nav> элемент или, если использовать более общий элемент, например <div> добавить role="navigation" для каждой панели, чтобы однозначно идентифицировать его в качестве ориентира регион для пользователей вспомогательных технологий.

Поддерживает содержимоe

Navbars оснащены встроенной поддержкой для нескольких компонентов. Смешивать и сочетать из следующих настроек:

• .navbar-brand для Вашей компании, продукта или название проекта
• .navbar-nav для полной высоты и облегченная навигация (включая поддержку для раскрывающихся списков)
• .navbar-toggler для использования с нашими плагина крах и других навигация переключение поведения.

Вот пример для всех вложенных компонентов, включенных по умолчанию, светлых панелей:

<nav>
  <a href="#">Navbar</a>
  <ul>
    <li>
      <a href="#">Home <span>(current)</span></a>
    </li>
    <li>
      <a href="#">Features</a>
    </li>
    <li>
      <a href="#">Pricing</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
  </ul>
  <form>
    <input type="text" placeholder="Search">
    <button type="submit">Search</button>
  </form>
</nav>

Бренд

.navbar-brand могут быть применены к большинству элементов, но якорь лучше всего работает в качестве некоторых элементов может потребоваться служебные классы и пользовательские стили.

<nav>
  <a href="#">Navbar</a>
</nav>

<nav>
  <h2>Navbar</h2>
</nav>

Nav

Навигации навигации похожа на наших регулярных навигация вариантов—использовать .nav базового класса с модификатором, чтобы достигнуть определенного взгляда. В данном случае вы хотите .nav.navbar-nav.

<nav>
  <ul>
    <li>
      <a href="#">Home <span>(current)</span></a>
    </li>
    <li>
      <a href="#">Features</a>
    </li>
    <li>
      <a href="#">Pricing</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
  </ul>
</nav>

И поскольку мы используем классы для наших навигаций, вы можете избежать на основе списка подходом целиком и полностью, если вам нравится.

<nav>
  <div>
    <a href="#">Home <span>(current)</span></a>
    <a href="#">Features</a>
    <a href="#">Pricing</a>
    <a href="#">About</a>
  </div>
</nav>

Цветовые схемы

Темы оформления панели навигации никогда не было проще благодаря сочетанию простого ссылке цвет модификатором класса и background-color утилиты. Иначе говоря, вы укажете светлый или темный и применить Цвет фона.

Вот некоторые примеры, чтобы показать что мы имеем в виду.

<nav>
  <!-- Навигационная панель содержимое -->
</nav>

<nav>
  <!-- Навигационная панель содержимое -->
</nav>

<nav>
  <!-- Навигационная панель содержимое -->
</nav>

Контейнеры

Хотя это не требуется, вы можете обернуть навигации в .container, чтобы центр его на странице или добавить в один только центр Содержание фиксированный или статический топ navbar.

<div>
  <nav>
    <a href="#">Navbar</a>
  </nav>
</div>

<nav>
  <div>
    <a href="#">Navbar</a>
  </div>
</nav>

Размещение

Navbars можно статически (поведение по умолчанию), статический без скругленных углов или крепится к верхней или нижней части области просмотра.

<nav>
  <a href="#">Full width</a>
</nav>

<nav>
  <a href="#">Fixed top</a>
</nav>

<nav>
  <a href="#">Fixed bottom</a>
</nav>

Складной содержания

Наш плагин развал позволяет использовать <button> или <a> для переключения скрытый контент.

☰

Collapsed content

Toggleable via the navbar brand.

<nav>
  <button type="button" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
    &#9776;
  </button>
  <div>
    <div>
      <h5>Collapsed content</h5>
      <span>Toggleable via the navbar brand.</span>
    </div>
  </div>
</nav>

Для более сложных моделей навигации, как те используемые в Bootstrap v3, используйте .navbar-toggleable-* классы в сочетании с .navbar-toggler. Эти классы пересилить aдаптивный утилит, чтобы показать навигацию только тогда, когда содержание должно быть показано.

<nav>
  <button type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation">
    &#9776;
  </button>
  <div>
    <a href="#">Responsive navbar</a>
    <ul>
      <li>
        <a href="#">Home <span>(current)</span></a>
      </li>
      <li>
        <a href="#">Features</a>
      </li>
      <li>
        <a href="#">Pricing</a>
      </li>
      <li>
        <a href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

Web-разработка • HTML и CSS

Для удобного выделения блоков с текстом предусмотрен компонент «Панель». Чтобы создать панель, необходимо заключить текст в блочный элемент div с классом panel-body. Который, в свою очередь, заключить в ещё один блочный элемент div с классами panel и panel-default.

<div>
    <div>Содержимое панели</div>
</div>

Чтобы добавить заголовок:

<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>

<div>
    <div>
        <h4>Заголовок панели</h4>
    </div>
    <div>
        Содержимое панели
    </div>
</div>

Чтобы добавить подвал:

<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
    <div>Подвал панели</div>
</div>

К панелям, как и к большинству других компонентов, можно применять дополнительные классы, которые выделяют её с помощью цвета:

<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>
<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>
<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>
<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>
<div>
    <div>Заголовок панели</div>
    <div>Содержимое панели</div>
</div>

В панелях можно размещать таблицы:

<div>
    <div>Заголовок панели</div>
    <div>
        <p>...</p>
    </div>
    <table>
        ...
    </table>
</div>

При отсутствии содержимого панели, таблица примыкает к заголовку без отступа:

<div>
    <div>Заголовок панели</div>
    <table>
        ...
    </table>
</div>

Внутри панели можно размещать групповые списки:

<div>
    <div>Товары</div>
    <div>
        Список наименований товаров, доступных в магазине.
    </div>
    <div>
        <a href="#">Смартфоны <span>32</span></a>
        <a href="#">Ноутбуки <span>93</span></a>
        <a href="#">Планшеты <span>127</span></a>  
        <a href="#">Компьютеры <span>71</span></a>
    </div>
</div>

Поиск: Bootstrap • CSS • HTML • Web-разработка • Верстка • Фреймворк

css — Добавление логотипа в панель навигации bootstrap 4 beta

Я хочу добавить свой логотип на панель навигации в фреймворке bootstrap 4 beta. Высота панели навигации должна быть такой же или почти такой же, как обычная высота без логотипа, как вы можете видеть в первом примере.

Пример без логотипа и с логотипом

<nav>
       <a href="/"><img src="logo.png"></a>
      <button type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span></span>
      </button>
      <div>
        <ul>
          <li>
          ....
          </li>           
        </ul>
      </div>
    </nav>

Решения от другого вопрос здесь только для работы bootstrap 4 alpha.

2

Grischa 16 Сен 2017 в 01:37

2 ответа

Лучший ответ

Вы можете указать высоту изображения, чтобы оно не увеличивало размер навигационной панели, добавив класс в img. Как это:

.logo {
  max-height: 40px;
  padding: 0;
}

3

Kyle Higginson 15 Сен 2017 в 22:49

<a href="/">
 <img src="https://www.lern-online.net/bilder/logo.png">
</a>

Здесь, как вы можете ясно видеть, я дал встроенный стиль, который вы можете вручную изменить дальше в зависимости от того, что вам нужно.

Проблема заключалась в том, что изображение, которое вы использовали, отображалось в своем размере по умолчанию, поэтому панель навигации изменялась, чтобы приспособиться к нему, мы можем избежать этого, предварительно обеспечив размер нашего изображения.

Надеюсь я помог.

0

samar taj Shaikh 15 Сен 2017 в 23:07

Загрузочные панели

---

Панели

Панель в bootstrap — это рамка с рамкой и некоторым отступом вокруг ее содержимого:

Панели создаются с помощью класса .panel , а содержимое внутри панели имеет .панель-кузов класс:

Пример

Попробуй сам »

Класс .panel-default используется для стилизации цвета панель.См. Последний пример на этой странице для получения дополнительных контекстных классов.

---

Заголовок панели

Заголовок панели

Содержание панели

Класс .panel-heading добавляет заголовок к панели:

Пример

Попробуй сам »

---

---

Нижний колонтитул панели

Модель .Panel-footer класс добавляет нижний колонтитул к панели:

Пример

Попробуй сам »

---

Группа панелей

Чтобы сгруппировать несколько панелей вместе, оберните