Ul bootstrap: File not found · Bootstrap v5.1 — Программирование на Python и Objective-C в Mac OS

Содержание

Как удалить границу элемента списка в группе bootstrap list?

Я просто хочу удалить первую верхнюю границу list-group-item:

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

.borderless li {
    border-top: none;
}

но не работает, кто-нибудь может мне помочь, заранее спасибо!

css

twitter-bootstrap-3

Поделиться

Источник

pangpang

01 сентября 2015 в 02:49

6 ответов

Удалить границу из окна ввода bootstrap
Я создаю веб-сайт с помощью bootstrap, less и angular, и я весь день боролся с полем ввода для строки поиска. Я попытался использовать загрузочную входную группу как с input-group-addon, так и с input-group-button, но, похоже, не могу удалить границу между кнопкой и входом. На самом деле я вообще…
Как мы можем установить границу для элемента списка в представлении списка
По умолчанию в Listview фокус будет сосредоточен на элементе списка. Вместо этого могу ли я получить только границу элемента списка? Я могу добиться этого, используя прозрачное изображение в качестве селектора списка. Существует ли какой-либо другой простейший способ достижения этого требования?

В Bootstrap 4.0 вы можете просто установить каждый по отдельности или все, используя класс border-*.

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
<ul />

Bootstrap 4.0 Документирование границ

Поделиться

Mike

20 марта 2018 в 16:58

Проблема:

Текущий код, который вы пытаетесь использовать, является селектором потомков и будет работать только тогда, когда li является дочерним элементом .borderless , как показано ниже:

<div>
  <li></li>

Решение:

Попробуйте использовать приведенный ниже селектор нескольких классов, который выбирает элементы списка, имеющие класс borderless .

li.borderless { border-top: 0 none; }

Выход:

li.borderless {
  border-top: 0 none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Поделиться

m4n0

01 сентября 2015 в 02:53

Вы можете воспользоваться селектором : nth-child(), поэтому вам не нужно добавлять класс без границ .

Пример:

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

markup

.list-group li:nth-child(1){
  border-top: 0 none;
}

Ваше здоровье!

Поделиться

Sergio Marron

01 сентября 2015 в 04:51

Вы можете удалить границы , объявив border to none в элементе style. Пожалуйста, смотрите ниже

<h3>Basic List Group</h3>
  <ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ul>

Поделиться

SHINERAJ ARATHIL

14 июня 2016 в 13:40

Как удалить границу выпадающего списка: CSS
Я хочу удалить границу, которая выходит прямо за пределы выпадающего списка. Я пытаюсь: select#xyz option { Border: none; } Но у меня это не работает.
Как скрыть границу при выборе навигационного элемента
Я создаю навигационную панель (в div) с вертикальным списком. При нажатии на элемент навигации всплывает div, который касается списка nagigation. У этого div есть граница (избавление от этой границы выглядит странно, поэтому я этого не делаю). Как удалить часть этой границы (ту часть, которая…

Поделиться

javapedia.net

13 апреля 2019 в 22:13

Я использую это :

  <ul *ngFor="let f of checkFields">
    <li > {{f.title}}</li>
  </ul>

Поделиться

Pasha GR

18 августа 2020 в 12:45

Руководство Bootstrap 4 List Group

для создания активных ссылок, как показано ниже:

<div>
<a href="https://www.webnots.com/bootstrap-4-list-group-tutorial/#">List Item 1 with Anchor Tag</a>
<a href="https://www.webnots.com/bootstrap-4-list-group-tutorial/#">List Item 2 with Anchor Tag</a>
</div>

Обратите внимание на использование класса «.list-group-item-action» в элементах списка, чтобы указать, что это элемент, требующий действий. Результат будет похож на группу списков по умолчанию с возможностью нажимать на элементы ссылки.

3. Использование тега кнопки в группе списка

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

<div>
<button type="button">List Item 1 with Button Tag</button>
<button type="button">List Item 1 with Button Tag</button>
</div>

И снова результат будет похожим, но разница элементов будет иметь эффект кнопки.

4. Отображение активных и отключенных элементов

Просто добавьте классы «.active» или «.disabled» к любому из элементов группы списка, чтобы сделать его активным или отключенным. Активный элемент будет иметь основной цвет фона, а отключенный элемент будет тусклым, показывая символ остановки курсора при наведении курсора мыши.

<ul>
<li>Active List Item 1</li>
<li>Normal List Item 2</li>
<li>Disabled List Item 3</li>
</ul>

Он должен дать следующие результаты, как описано:

5. Группа списков Bootstrap 4 с цветами фона

Всегда смотреть на белый фон будет скучно. Добавьте цвета фона в элементы группы списка с помощью предопределенных классов фона. Например, цвет успеха можно добавить с помощью класса «.list-group-item-success» к необходимому элементу списка.

<div>
  <a href="https://www.webnots.com/bootstrap-4-list-group-tutorial/#">No Background</a>
  <a href="https://www.webnots.com/bootstrap-4-list-group-tutorial/#">Success Background</a>
  <a href="https://www.webnots.com/bootstrap-4-list-group-tutorial/#">Info Background</a>
  <a href="https://www.webnots.com/bootstrap-4-list-group-tutorial/#">Warning Background</a>
  <a href="https://www.webnots.com/bootstrap-4-list-group-tutorial/#">Danger Background</a>
  <a href="https://www.webnots.com/bootstrap-4-list-group-tutorial/#">Secondary Background</a>
  <a href="https://www.webnots.com/bootstrap-4-list-group-tutorial/#">Light Background</a>
  <a href="https://www.webnots.com/bootstrap-4-list-group-tutorial/#">Dark Background</a> 
</div>

Результат в браузере будет выглядеть следующим образом:

6. Группа списков Bootstrap 4 со значками

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

<ul>
  <li>Open Tickets
  <span>20</span>
  </li>
  <li>Closed Tickets
  <span>50</span>
  </li>
  <li>Solved Tickets
  <span>10</span>
  </li>
  <li>Work In Progress Tickets
  <span>6</span>
    </li>
  <li>Ticket In Assigned Status
  <span>16</span>
  <li>Some Primary Badge
  <span>10</span>
  <li>Some Light Badge
  <span>26</span>
  <li>Some Dark Badge
  <span>14</span>
  </li>
</ul>

«.Justify-content-between» используется для выравнивания промежутка между текстом элемента списка и значком. Это даст результат, как показано ниже:

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

7. Список групп с фоном и значком

Цвет фона элемента списка будет светлым при использовании классов фона элементов группы списков, таких как «.list-group-item-success». Вы можете использовать фоновые контекстные классы вместо более темного фона.

<ul>
  <li>Open Tickets
  <span>20</span>
  </li>
  <li>Closed Tickets
  <span>50</span>
  </li>
  <li>Solved Tickets
  <span>10</span>
  </li>
  <li>Work In Progress Tickets
  <span>6</span>
  </li>
  <li>Ticket In Assigned Status
  <span>6</span>
  </li>
</ul>

Результат будет выглядеть привлекательно, как показано ниже:

8. Список групп с HTML-контентом

Служебные классы flexbox позволяют добавлять любой тип содержимого HTML внутри компонента группы списков.

<div>
<a href="https://www.webnots.com/bootstrap-4-list-group-tutorial/#">
<div>
<h5>This is a heading1</h5>
<small>3 days ago</small>
</div>
<p>Enter any content here.</p>
<small>Some small text here.</small>
</a>
<a href="https://www.webnots.com/bootstrap-4-list-group-tutorial/#">
<div>
<h5>This is a heading2</h5>
<small>3 days ago</small>
</div>
<p>Enter any content here.</p>
<small>Some small text here.</small>
</a>
</div>

Это даст следующий результат:

9. Группа списков Bootstrap 4 с вертикальными вкладками

Также возможно создавать содержимое с вкладками, используя группу списков и стандартный JavaScript Bootstrap. Ниже приведен пример кода для создания вкладок с вертикальным выравниванием, и под каждой вкладкой будет отображаться различное содержимое.

<div>
<div>
<!-- List group -->
<div role="tablist">
<a data-toggle="list" href="https://www.webnots.com/bootstrap-4-list-group-tutorial/#tab1" role="tab">TAB 1</a>
<a data-toggle="list" href="#tab2" role="tab">TAB 2</a>
<a data-toggle="list" href="#tab3" role="tab">TAB 3</a>
<a data-toggle="list" href="#tab4" role="tab">TAB 4</a>
</div>
</div>
<div>
<!-- Tab panes -->
<div>
<div role="tabpanel">Content for tab 1 here...</div>
<div role="tabpanel"> Tab 2 content goes here...</div>
<div role="tabpanel">Enter anything for tab 3...</div>
<div role="tabpanel">Finally tab 4 content is here...</div>
</div>
</div>
</div>

Контент с вертикальными вкладками будет выглядеть следующим образом:

Заключение

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

Навигация по записям

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

Для стилизации маркированных и нумерованных списков предназначены классы list-unstyled и list-inline. Класс dl-horizontal позволяет разместить элементы списка определений в одну строку. Классы list-group и list-group-item позволяют создать красивое вертикальное меню.

Убрать у списков номера и маркеры:

<ul>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
    <li>Элемент маркированного списка</li>
</ul>

<ol>
    <li>Элемент нуменованного списка</li>
    <li>Элемент нуменованного списка</li>
    <li>Элемент нуменованного списка</li>
</ol>

Класс list-unstyled удаляет свойство list-style и отступы слева только для элементов, которые расположены внутри контейнеров ul или ol.

Размещение элементов списка в одну строку:

<ul>
    <li>Главная</li>
    <li>Каталог</li>
    <li>Доставка</li>
    <li>Оплата</li>
    <li>Контакты</li>
</ul>

<ol>
    <li>Главная</li>
    <li>Каталог</li>
    <li>Доставка</li>
    <li>Оплата</li>
    <li>Контакты</li>
</ol>

Создание горизонтального списка определений:

<dl>
    <dt>HTML</dt>
    <dd>Стандартный язык разметки документов во Всемирной паутине.</dd>
    <dt>CSS</dt>
    <dd>Формальный язык описания внешнего вида HTML-документа.</dd>
    <dt>JavaScript</dt>
    <dd>Прототипно-ориентированный сценарный язык программирования.</dd>
</dl>

Создание групповых списков:

<ul>
    <li>Избранное</li>
    <li>Пользователи</li>
    <li>Публикации</li>
    <li>Изображения</li>
</ul>

<div>
    <a href="#">
        <span></span> Избранное <span>9</span>
    </a>
    <a href="#">
        <span></span> Пользователи <span>24</span>
    </a>
    <a href="#">
        <span></span> Публикации <span>97</span>
    </a>
    <a href="#">
        <span></span> Фотографии <span>25</span>
    </a>
</div>

<div>
    <li>
        <h5>Что такое HTML?</h5>
        <p>
            HTML — это стандартный язык разметки документов во Всемирной паутине.
        </p>
    </li>
    <li>
        <h5>Что такое CSS?</h5>
        <p>
            CSS — это формальный язык описания внешнего вида HTML-документа.
        </p>
    </li>
    <li>
        <h5>Что такое JavaScript?</h5>
        <p>
            JavaScript — это прототипно-ориентированный сценарный язык программирования.
        </p>
    </li>
</div>

<ul>
    <li>Item success</li>
    <li>Item info</li>
    <li>Item warning</li>
    <li>Item danger</li>
</ul>

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

Детская городская клиническая больница №5 им. Н.Ф.Филатова

Default buttons

Button styles can be applied to anything with the .btn class applied. However, typically you’ll want to apply these to only <a> and <button> elements for the best rendering.

Button	class=»»	Description
Default	`btn`	Standard gray button with gradient
Primary	`btn btn-primary`	Provides extra visual weight and identifies the primary action in a set of buttons
Info	`btn btn-info`	Used as an alternative to the default styles
Success	`btn btn-success`	Indicates a successful or positive action
Warning	`btn btn-warning`	Indicates caution should be taken with this action
Danger	`btn btn-danger`	Indicates a dangerous or potentially negative action
Inverse	`btn btn-inverse`	Alternate dark gray button, not tied to a semantic action or use
Link	`btn btn-link`	Deemphasize a button by making it look like a link while maintaining button behavior

Cross browser compatibility

IE9 doesn’t crop background gradients on rounded corners, so we remove it. Related, IE9 jankifies disabled
button elements, rendering text gray with a nasty text-shadow that we cannot fix.

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

Large button
Large button

Default button
Default button

Small button
Small button

Mini button
Mini button


<p>
  <button type="button">Large button</button>
  <button type="button">Large button</button>
</p>
<p>
  <button type="button">Default button</button>
  <button type="button">Default button</button>
</p>
<p>
  <button type="button">Small button</button>
  <button type="button">Small button</button>
</p>
<p>
  <button type="button">Mini button</button>
  <button type="button">Mini button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

Block level button
Block level button


<button type="button">Block level button</button>
<button type="button">Block level button</button>

Add the .disabled class to <a> buttons.

Primary link

Link


<a href="#">Primary link</a>
<a href="#">Link</a>

Heads up! We use .disabled as a utility class here, similar to the common .active class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.

Add the disabled attribute to <button> buttons.

Primary button
Button


<button type="button" disabled="disabled">Primary button</button>
<button type="button" disabled>Button</button>

Default styles

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter


<table>
  …
</table>

Optional classes

Add any of the follow classes to the .table base class.

.table-striped

Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-IE8).

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter


<table>
  …
</table>

.table-bordered

Add borders and rounded corners to the table.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
1	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter


<table>
  …
</table>

.table-hover

Enable a hover state on table rows within a <tbody>.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter


<table>
  …
</table>

.table-condensed

Makes tables more compact by cutting cell padding in half.

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter


<table>
  …
</table>

Optional row classes

Use contextual classes to color table rows.

Class	Description
`.success`	Indicates a successful or positive action.
`.error`	Indicates a dangerous or potentially negative action.
`.warning`	Indicates a warning that might need attention.
`.info`	Used as an alternative to the default styles.

#	Product	Payment Taken	Status
1	TB — Monthly	01/04/2012	Approved
2	TB — Monthly	02/04/2012	Declined
3	TB — Monthly	03/04/2012	Pending
4	TB — Monthly	04/04/2012	Call in to confirm


...
  <tr>
    <td>1</td>
    <td>TB - Monthly</td>
    <td>01/04/2012</td>
    <td>Approved</td>
  </tr>
...

Supported table markup

List of supported table HTML elements and how they should be used.

Tag	Description
`<table>`	Wrapping element for displaying data in a tabular format
`<thead>`	Container element for table header rows (`<tr>`) to label table columns
`<tbody>`	Container element for table rows (`<tr>`) in the body of the table
`<tr>`	Container element for a set of table cells (`<td>` or `<th>`) that appears on a single row
`<td>`	Default table cell
`<th>`	Special table cell for column (or row, depending on scope and placement) labels Must be used within a `<thead>`
`<caption>`	Description or summary of what the table holds, especially useful for screen readers


<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
&tt;/table>

Default styles

Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.


<form>
  <legend>Legend</legend>
  <label>Label name</label>
  <input type="text" placeholder="Type something…">
  <span>Example block-level help text here.</span>
  <label>
    <input type="checkbox"> Check me out
  </label>
  <button type="submit">Submit</button>
</form>

Optional layouts

Included with Bootstrap are three optional form layouts for common use cases.

Search form

Add .form-search to the form and .search-query to the <input> for an extra-rounded text input.


<form>
  <input type="text">
  <button type="submit">Search</button>
</form>

Inline form

Add .form-inline for left-aligned labels and inline-block controls for a compact layout.


<form>
  <input type="text" placeholder="Email">
  <input type="password" placeholder="Password">
  <label>
    <input type="checkbox"> Remember me
  </label>
  <button type="submit">Sign in</button>
</form>

Horizontal form

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

Add .form-horizontal to the form

Wrap labels and controls in .control-group

Add .control-label to the label

Wrap any associated controls in .controls for proper alignment


<form>
  <div>
    <label for="inputEmail">Email</label>
    <div>
      <input type="text" placeholder="Email">
    </div>
  </div>
  <div>
    <label for="inputPassword">Password</label>
    <div>
      <input type="password" placeholder="Password">
    </div>
  </div>
  <div>
    <div>
      <label>
        <input type="checkbox"> Remember me
      </label>
      <button type="submit">Sign in</button>
    </div>
  </div>
</form>

Supported form controls

Examples of standard form controls supported in an example form layout.

Inputs

Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

Requires the use of a specified type at all times.


<input type="text" placeholder="Text input">

Textarea

Form control which supports multiple lines of text. Change rows attribute as necessary.


<textarea rows="3"></textarea>

Checkboxes and radios

Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.

Default (stacked)


<label>
  <input type="checkbox" value="">
  Option one is this and that—be sure to include why it's great
</label>
<label>
  <input type="radio" name="optionsRadios" value="option1" checked>
  Option one is this and that—be sure to include why it's great
</label>
<label>
  <input type="radio" name="optionsRadios" value="option2">
  Option two can be something else and selecting it will deselect option one
</label>

Inline checkboxes

Add the .inline class to a series of checkboxes or radios for controls appear on the same line.


<label>
  <input type="checkbox" value="option1"> 1
</label>
<label>
  <input type="checkbox" value="option2"> 2
</label>
<label>
  <input type="checkbox" value="option3"> 3
</label>

Selects

Use the default option or specify a multiple="multiple" to show multiple options at once.


<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Extending form controls

Adding on top of existing browser controls, Bootstrap includes other useful form components.

Prepended and appended inputs

Add text or buttons before or after any text-based input. Do note that select elements are not supported here.

Default options

Wrap an .add-on and an input with one of two classes to prepend or append text to an input.


<div>
  <span>@</span><input size="16" type="text" placeholder="Username">
</div>
<div>
  <input size="16" type="text"><span>.00</span>
</div>

Combined

Use both classes and two instances of .add-on to prepend and append an input.


<div>
  <span>$</span><input size="16" type="text"><span>.00</span>
</div>

Buttons instead of text

Instead of a <span> with text, use a .btn to attach a button (or two) to an input.


<div>
  <input size="16" type="text"><button type="button">Go!</button>
</div>
<div>
  <input size="16" type="text"><button type="button">Search</button><button type="button">Options</button>
</div>

Search form


<form>
  <div>
    <input type="text">
    <button type="submit">Search</button>
  </div>
  <div>
    <button type="submit">Search</button>
    <input type="text">
  </div>
</form>

Control sizing

Use relative sizing classes like .input-large or match your inputs to the grid column sizes using .span* classes.

Relative sizing


<input type="text" placeholder=".input-mini">
<input type="text" placeholder=".input-small">
<input type="text" placeholder=".input-medium">
<input type="text" placeholder=".input-large">
<input type="text" placeholder=".input-xlarge">
<input type="text" placeholder=".input-xxlarge">

Heads up! In future versions, we’ll be altering the use of these relative input classes to match our button sizes. For example, .input-large will increase the padding and font-size of an input.

Grid sizing

Use .span1 to .span12 for inputs that match the same sizes of the grid columns.


<input type="text" placeholder=".span1">
<input type="text" placeholder=".span2">
<input type="text" placeholder=".span3">
<select>
  ...
</select>
<select>
  ...
</select>
<select>
  ...
</select>

For multiple grid inputs per line, use the .controls-row modifier class for proper spacing. It floats the inputs to collapse white-space, sets the proper margins, and the clears the float.


<div>
  <input type="text" placeholder=".span5">
</div>
<div>
  <input type="text" placeholder=".span4">
  <input type="text" placeholder=".span1">
</div>
...

Uneditable inputs

Present data in a form that’s not editable without using actual form markup.


<span>Some value here</span>

Form actions

End a form with a group of actions (buttons). When placed within a .form-horizontal, the buttons will automatically indent to line up with the form controls.


<div>
  <button type="submit">Save changes</button>
  <button type="button">Cancel</button>
</div>

Help text

Inline and block level support for help text that appears around form controls.

Inline help


<input type="text"><span>Inline help text</span>

Block help


<input type="text"><span>A longer block of help text that breaks onto a new line and may extend beyond one line.</span>

Form control states

Provide feedback to users or visitors with basic feedback states on form controls and labels.

Input focus

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.


<input type="text" value="This is focused...">

Disabled inputs

Add the disabled attribute on an input to prevent user input and trigger a slightly different look.


<input type="text" placeholder="Disabled input here..." disabled>

Validation states

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.


<div>
  <label for="inputWarning">Input with warning</label>
  <div>
    <input type="text">
    <span>Something may have gone wrong</span>
  </div>
</div>
<div>
  <label for="inputError">Input with error</label>
  <div>
    <input type="text">
    <span>Please correct the error</span>
  </div>
</div>
<div>
  <label for="inputSuccess">Input with success</label>
  <div>
    <input type="text">
    <span>Woohoo!</span>
  </div>
</div>

Add classes to an <img> element to easily style images in any project.


<img src="/...">
<img src="/...">
<img src="/...">

Heads up!
.img-rounded and .img-circle do not work in IE7-8 due to lack of border-radius support.

Default thumbnails

By default, Bootstrap’s thumbnails are designed to showcase linked images with minimal required markup.

Highly customizable

With a bit of extra markup, it’s possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action

Action

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action

Action

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Action

Action

Why use thumbnails

Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

Simple, flexible markup

Thumbnail markup is simple—a ul with any number of li elements is all that is required. It’s also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

Uses grid column sizes

Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

Markup

As mentioned previously, the required markup for thumbnails is light and straightforward. Here’s a look at the default setup for linked images:


<ul>
  <li>
    <a href="#">
      <img src="/images/stories/300x200.jpg" alt="">
    </a>
  </li>
  ...
</ul>

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:


<ul>
  <li>
    <div>
      <img src="/images/stories/300x200.jpg" alt="">
      <h4>Thumbnail label</h4>
      <p>Thumbnail caption...</p>
    </div>
  </li>
  ...
</ul>

More examples

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

Default alert

Wrap any text and an optional dismiss button in .alert for a basic warning alert message.

×
Warning! Best check yo self, you’re not looking too good.


<div>
  <button type="button" data-dismiss="alert">×</button>
  <strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>

Dismiss buttons

Mobile Safari and Mobile Opera browsers, in addition to the data-dismiss="alert" attribute, require an href="#" for the dismissal of alerts when using an <a> tag.


<a href="#" data-dismiss="alert">×</a>

Alternatively, you may use a <button> element with the data attribute, which we have opted to do for our docs. When using <button>, you must include type="button" or your forms may not submit.


<button type="button" data-dismiss="alert">×</button>

Dismiss alerts via javascript

Use the

alerts jQuery plugin

for quick and easy dismissal of alerts.

Options

For longer messages, increase the padding on the top and bottom of the alert wrapper by adding .alert-block.

Warning!

Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.


<div>
  <button type="button" data-dismiss="alert">×</button>
  <h5>Warning!</h5>
  Best check yo self, you're not...
</div>

Contextual alternatives

Add optional classes to change an alert’s connotation.

Error or danger

×
Oh snap! Change a few things up and try submitting again.


<div>
  ...
</div>

Success

×
Well done! You successfully read this important alert message.


<div>
  ...
</div>

Information

×
Heads up! This alert needs your attention, but it’s not super important.


<div>
  ...
</div>

Examples and markup

Basic

Default progress bar with a vertical gradient.


<div>
  <div></div>
</div>

Striped

Uses a gradient to create a striped effect. Not available in IE7-8.


<div>
  <div></div>
</div>

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.


<div>
  <div></div>
</div>

Stacked

Place multiple bars into the same .progress to stack them.


<div>
  <div></div>
  <div></div>
  <div></div>
</div>

Options

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.


<div>
  <div></div>
</div>
<div>
  <div></div>
</div>
<div>
  <div></div>
</div>
<div>
  <div></div>
</div>

Striped bars

Similar to the solid colors, we have varied striped progress bars.


<div>
  <div></div>
</div>
<div>
  <div></div>
</div>
<div>
  <div></div>
</div>
<div>
  <div></div>
</div>

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Example

Toggleable, contextual menu for displaying lists of links. Made interactive with the

dropdown javascript plugin

.


<ul role="menu" aria-labelledby="dropdownMenu">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
  <li><a tabindex="-1" href="#">Something else here</a></li>
  <li></li>
  <li><a tabindex="-1" href="#">Separated link</a></li>
</ul>

Markup

Looking at just the dropdown menu, here’s the required HTML. You need to wrap the dropdown’s trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.


<div>
  <!-- Link or button to toggle dropdown -->
  <ul role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

Options

Align menus to the right and add include additional levels of dropdowns.

Aligning the menus

Add .pull-right to a .dropdown-menu to right align the dropdown menu.


<ul role="menu" aria-labelledby="dLabel">
  ...
</ul>

Sub menus on dropdowns

Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.


<ul role="menu" aria-labelledby="dLabel">
  ...
  <li>
    <a tabindex="-1" href="#">More options</a>
    <ul>
      ...
    </ul>
  </li>
</ul>

Within a navbar

Within tabs

Usage

Via data attributes

Add data-toggle="dropdown" to a link or button to toggle a dropdown.


<div>
  <a data-toggle="dropdown" href="#">Dropdown trigger</a>
  <ul role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

To keep URLs intact, use the data-target attribute instead of href="#".


<div>
  <a role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown
    <b></b>
  </a>
  <ul role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

Via JavaScript

Call the dropdowns via JavaScript:


$('.dropdown-toggle').dropdown()

Options

None

Methods

$().dropdown()

A programatic api for activating menus for a given navbar or tabbed navigation.

Examples

Two basic options, along with two more specific variations.

Single button group

Wrap a series of buttons with .btn in .btn-group.


<div>
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>

Multiple button groups

Combine sets of <div> into a <div> for more complex components.


<div>
  <div>
    ...
  </div>
</div>

Vertical button groups

Make a set of buttons appear vertically stacked rather than horizontally.


<div>
  ...
</div>

Checkbox and radio flavors

Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View

the Javascript docs

for that.

Dropdowns in button groups

Heads up! Buttons with dropdowns must be individually wrapped in their own .btn-group within a .btn-toolbar for proper rendering.

Overview and examples

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.


<div>
  <a data-toggle="dropdown" href="#">
    Action
    <span></span>
  </a>
  <ul>
    <!-- dropdown menu links -->
  </ul>
</div>

Works with all button sizes

Button dropdowns work at any size: .btn-large, .btn-small, or .btn-mini.

Requires javascript

Button dropdowns require the

Bootstrap dropdown plugin

to function.

In some cases—like mobile—dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.

Split button dropdowns

Building on the button group styles and markup, we can easily create a split button. Split buttons feature a standard action on the left and a dropdown toggle on the right with contextual links.


<div>
  <button>Action</button>
  <button data-toggle="dropdown">
    <span></span>
  </button>
  <ul>
    <!-- dropdown menu links -->
  </ul>
</div>

Sizes

Utilize the extra button classes .btn-mini, .btn-small, or .btn-large for sizing.


<div>
  <button>Action</button>
  <button data-toggle="dropdown">
    <span></span>
  </button>
  <ul>
    <!-- dropdown menu links -->
  </ul>
</div>

Dropup menus

Dropdown menus can also be toggled from the bottom up by adding a single class to the immediate parent of .dropdown-menu. It will flip the direction of the .caret and reposition the menu itself to move from the bottom up instead of top down.


<div>
  <button>Dropup</button>
  <button data-toggle="dropdown">
    <span></span>
  </button>
  <ul>
    <!-- dropdown menu links -->
  </ul>
</div>

Lightweight defaults

Same markup, different classes

All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.

Basic tabs

Take a regular <ul> of links and add .nav-tabs:


<ul>
  <li>
    <a href="#">Home</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Basic pills

Take that same HTML, but use .nav-pills instead:


<ul>
  <li>
    <a href="#">Home</a>
  </li>
  <li><a href="#">...</a></li>
  <li><a href="#">...</a></li>
</ul>

Disabled state

For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects. Links will remain clickable, however, unless custom javascript is implemented to prevent those clicks.


<ul>
  ...
  <li><a href="#">Home</a></li>
  ...
</ul>

Component alignment

To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.

Stackable

As tabs and pills are horizontal by default, just add a second class, .nav-stacked, to make them appear vertically stacked.

Stacked tabs


<ul>
  ...
</ul>

Stacked pills


<ul>
  ...
</ul>

Dropdowns

Add dropdown menus with a little extra HTML and the

dropdowns javascript plugin

.

Tabs with dropdowns


<ul>
  <li>
    <a
       data-toggle="dropdown"
       href="#">
        Dropdown
        <b></b>
      </a>
    <ul>
      <!-- links -->
    </ul>
  </li>
</ul>

Pills with dropdowns


<ul>
  <li>
    <a
       data-toggle="dropdown"
       href="#">
        Dropdown
        <b></b>
      </a>
    <ul>
      <!-- links -->
    </ul>
  </li>
</ul>

Nav lists

A simple and easy way to build groups of nav links with optional headers. They’re best used in sidebars like the Finder in OS X.

Example nav list

Take a list of links and add class="nav nav-list":


<ul>
  <li>List header</li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  ...
</ul>

Note For nesting within a nav list, include class="nav nav-list" on any nested <ul>.

Horizontal dividers

Add a horizontal divider by creating an empty list item with the class .divider, like so:


<ul>
  ...
  <li></li>
  ...
</ul>

Tabbable nav

Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.

Tabbable example

To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.

What up girl, this is Section 3.


<div> <!-- Only required for left/right tabs -->
  <ul>
    <li><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div>
    <div>
      <p>I'm in Section 1.</p>
    </div>
    <div>
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

Fade in tabs

To make tabs fade in, add .fade to each .tab-pane.

Tabbable in any direction

Tabs on the bottom

Flip the order of the HTML and add a class to put tabs on the bottom.

What up girl, this is Section C.


<div>
  <div>
    ...
  </div>
  <ul>
    ...
  </ul>
</div>

Tabs on the left

Swap the class to put tabs on the left.

What up girl, this is Section C.


<div>
  <ul>
    ...
  </ul>
  <div>
    ...
  </div>
</div>

Tabs on the right

Swap the class to put tabs on the right.

What up girl, this is Section C.


<div>
  <ul>
    ...
  </ul>
  <div>
    ...
  </div>
</div>

Examples

A single example shown as it might be displayed across multiple pages.


<ul>
  <li><a href="#">Home</a> <span>/</span></li>
  <li><a href="#">Library</a> <span>/</span></li>
  <li>Data</li>
</ul>

Labels

Labels	Markup
Default	`<span>Default</span>`
Success	`<span>Success</span>`
Warning	`<span>Warning</span>`
Important	`<span>Important</span>`
Info	`<span>Info</span>`
Inverse	`<span>Inverse</span>`

Badges

Name	Example	Markup
Default	1	`<span>1</span>`
Success	2	`<span>2</span>`
Warning	4	`<span>4</span>`
Important	6	`<span>6</span>`
Info	8	`<span>8</span>`
Inverse	10	`<span>10</span>`

Wells

Use the well as a simple effect on an element to give it an inset effect.

<div>
  ...
</div>

Optional classes

Control padding and rounded corners with two optional modifier classes.

<div>
  ...
</div>

<div>
  ...
</div>

Close icon

Use the generic close icon for dismissing content like modals and alerts.

<button>&times;</button>

iOS devices require an href=»#» for click events if you rather use an anchor.

<a href="#">&times;</a>

Helper classes

Simple, focused classes for small display or behavior tweaks.

.pull-left

Float an element left

class="pull-left"

.pull-left {
  float: left;
}

.pull-right

Float an element right

class="pull-right"

.pull-right {
  float: right;
}

.muted

Change an element’s color to #999

class="muted"

.muted {
  color: #999;
}

.clearfix

Clear the float on any element

class="clearfix"

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

Отслеживание прокрутки · Bootstrap v5.0

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

У отслеживания прокрутки есть несколько требований для правильной работы:

Он должен использоваться в Bootstrap компонент навигации или группа списка.
Отслеживание прокрутки требует position: relative; на элементе, за которым Вы шпионите, обычно это <body>.
Якоря (<a>) обязательны и должны указывать на элемент с этим id.

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

Прокручиваемые контейнеры и доступ с клавиатуры

Если вы создаете контейнер с возможностью прокрутки (кроме <body>), обязательно установите height и примените к нему overflow-y: scroll; наряду с tabindex="0" чтобы обеспечить доступ с клавиатуры.

Пример на панели навигации

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

<nav>
  <a href="#">Панель навигации</a>
  <ul>
    <li>
      <a href="#scrollspyHeading1">Первый</a>
    </li>
    <li>
      <a href="#scrollspyHeading2">Второй</a>
    </li>
    <li>
      <a data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Выпадающий список</a>
      <ul>
        <li><a href="#scrollspyHeading3">Третий</a></li>
        <li><a href="#scrollspyHeading4">Четвертый</a></li>
        <li><hr></li>
        <li><a href="#scrollspyHeading5">Пятый</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" tabindex="0">
  <h5>Первый заголовок</h5>
  <p>...</p>
  <h5>Второй заголовок</h5>
  <p>...</p>
  <h5>Третий заголовок</h5>
  <p>...</p>
  <h5>Четвертый заголовок</h5>
  <p>...</p>
  <h5>Пятый заголовок</h5>
  <p>...</p>
</div>

Пример с вложенной навигацией

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

Элемент 1

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

Элемент 1-1

Элемент 1-2

Элемент 2

Элемент 3

Элемент 3-1

Элемент 3-2

<nav>
  <a href="#">Панель навигации</a>
  <nav>
    <a href="#item-1">Элемент 1</a>
    <nav>
      <a href="#item-1-1">Элемент 1-1</a>
      <a href="#item-1-2">Элемент 1-2</a>
    </nav>
    <a href="#item-2">Элемент 2</a>
    <a href="#item-3">Элемент 3</a>
    <nav>
      <a href="#item-3-1">Элемент 3-1</a>
      <a href="#item-3-2">Элемент 3-2</a>
    </nav>
  </nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
  <h5>Элемент 1</h5>
  <p>...</p>
  <h5>Элемент 1-1</h5>
  <p>...</p>
  <h5>Элемент 1-2</h5>
  <p>...</p>
  <h5>Элемент 2</h5>
  <p>...</p>
  <h5>Элемент 3</h5>
  <p>...</p>
  <h5>Элемент 3-1</h5>
  <p>...</p>
  <h5>Элемент 3-2</h5>
  <p>...</p>
</div>

Пример со списком-группой

Отслеживание прокрутки также работает с .list-group. Прокрутите область рядом с группой списка и посмотрите, как меняется активный класс.

<div>
  <a href="#list-item-1">Элемент 1</a>
  <a href="#list-item-2">Элемент 2</a>
  <a href="#list-item-3">Элемент 3</a>
  <a href="#list-item-4">Элемент 4</a>
</div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" tabindex="0">
  <h5>Элемент 1</h5>
  <p>...</p>
  <h5>Элемент 2</h5>
  <p>...</p>
  <h5>Элемент 3</h5>
  <p>...</p>
  <h5>Элемент 4</h5>
  <p>...</p>
</div>

Использование

Через атрибуты данных

Чтобы легко добавить поведение прокрутки к Вашей навигации на верхней панели, добавьте data-bs-spy="scroll" к элементу, за которым Вы хотите следить (чаще всего это <body>). Затем добавьте атрибут data-bs-target с идентификатором или классом родительского элемента любого компонента Bootstrap .nav.

body {
  position: relative;
}

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div>
    <ul role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Через JavaScript

После добавления position: relative; в Ваш CSS вызовите scrollspy через JavaScript:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Требуются разрешаемые цели Идентификатора

Ссылки навигационной панели должны иметь разрешаемые идентификаторы. Например, <a href="#home">Главная</a> должен соответствовать чему-то в DOM, например, <div></div>.

Невидимые целевые элементы игнорируются

Целевые элементы, которые не видны, будут игнорироваться, а соответствующие им элементы навигации никогда не будут выделены.

Методы

refresh

При использовании отслеживания прокрутки в сочетании с добавлением или удалением элементов из DOM Вам необходимо вызвать метод обновления следующим образом:

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

dispose

Уничтожает отслеживание прокрутки элемента. (Удаляет сохраненные данные в элементе DOM)

getInstance

Статический метод, позволяющий получить экземпляр отслеживание прокрутки, связанный с элементом DOM.

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

Статический метод, который позволяет вам получить экземпляр scrollspy, связанный с элементом DOM, или создать новый, если он не был инициализирован

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Параметры

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data-bs-, как в data-bs-offset="".

Наименование	Тип	По умочланию	Описание
`offset`	number	`10`	Пиксели для смещения сверху при вычислении положения прокрутки.
`method`	string	`auto`	Находит, в каком разделе находится отслеживаемый элемент. `auto` выберет лучший метод для получения координат прокрутки. `offset` будет использовать `Element.getBoundingClientRect()` для получения координат прокрутки. `position` будет использовать `HTMLElement.offsetTop` and `HTMLElement.offsetLeft` свойства для получения координат прокрутки.
`target`	string \| jQuery object \| DOM element		Определяет элемент для применения подключаемого модуля Отслеживания прокрутки.

События

Тип события	Описание
`activate.bs.scrollspy`	Это событие запускается в элементе прокрутки всякий раз, когда новый элемент активируется отслеживанием прокрутки.

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // сделайте что-нибудь...
})

Списки Bootstrap | Bootstrap 4

В этом уроке мы рассмотрим пример создания и оформления списков.

Для создания листа списку ul добавим класс list-group, и зададим длину в четыре колонки. Каждому элементу списка будет добавлен класс list-group-item.


<ul>
    <li>Cras justo odio</li>
    <li>Dapibus ac facilisis in</li>
    <li>Morbi leo risus</li>
    <li>Porta ac consectetur ac</li>
    <li>Vestibulum at eros</li>
</ul>

Элементам списка можно менять фон для этого используется класс list-group-item-*(где * — название фона). Каждому элементу поменяем фон.


<ul>
    <li>Dapibus ac facilisis in</li>
    <li>Dapibus ac facilisis in</li>
    <li>Cras sit amet nibh libero</li>
    <li>Porta ac consectetur ac</li>
    <li>Vestibulum at eros</li>
</ul>

В Bootstrap есть такой элемент как badge в котором мы можем задавать небольшую информацию. Каждому элементу списка добавим тег span с классами badge badge-default badge-pill. Клас badge-default указывает что у значка будет стандартный фон, badge-pill задает форму значка. Для того что бы значки отображались в правой стороне, каждому элементу списка укажем класс justify-content-between.


<ul>
    <li>
        Cras justo odio
        <span>14</span>
    </li>

    <li>
        Dapibus ac facilisis in
        <span>2</span>
    </li>

    <li>
        Morbi leo risus
        <span>1</span>
    </li>
</ul>

В последнем примере рассмотрим создание списка в карточках. Для этого нужно, после блока с классом card-block li, добавить наш список.


<div>
    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Card image cap">
    <div>
        <h5>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>

    <ul>
        <li>Cras justo odio</li>
        <li>Dapibus ac facilisis in</li>
        <li>Vestibulum at eros</li>
    </ul>

    <div>
        <a href="#">Card link</a>
        <a href="#">Another link</a>
    </div>
</div>

Компоненты Bootstrap

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

Bootstrap имеет ряд компонентов, которые не сводятся к стандартным кнопкам или текстовым полям, а представляют более сложные элементы.
Полный список компонентов Bootstrap можно найти на официальной странице проекта http://getbootstrap.com/components/.
Рассмотрим вкратце некоторые из них.

Навигационные панели

Первый компонент Bootstrap, с которым мы сталкиваемся в проекте, это навигационная панель. Данный компонент располагается на мастер-странице
_Layout:


<div>
        <div>
            <div>
                <button type="button" data-toggle="collapse" data-target=".navbar-collapse">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
            </div>
            <div>
                <ul>
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>

И даже если мы сузим границы веб-браузера или запустим сайт на мобильном устройстве, то мы увидим, что панель навигации остается достаточно функциональной:

Компонент представляет класс navbar. Чтобы панель была фиксирована по верху страницы, используется также класс navbar-fixed-top.
Если бы мы, наоборот, захотели фиксировать панель по низу, то в этом случае использовали бы класс navbar-fixed-bottom

И также в объявлении блока навигации используется класс navbar-inverse, который инвертирует цвета по умолчанию. Вместо этого класса
мы могли бы использовать navbar-default, тогда в этом случае у нас бы было меню стандартных светлых тонов.

Для создания ссылок навигации применяется класс nav. Bootstrap представляет несколько классов для оформления ссылок навигации.
По умолчанию используется класс navbar-nav, но мы можем использовать и другие возможности.

Для создания навигации по типу вкладок применяется класс nav-tabs. Так, например следующее меню:


<ul>
    <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

даст такой эффект:

Еще один вариант создания панели ссылок представляет класс nav-pills:


<ul>
    <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

А комбинируя классы nav-pills и nav-stacked, мы можем создать вертикальное меню:


<ul>
	...............................
</ul>

Пагинация

Класс pagination позволяет создать панель ссылок в виде постраничной навигации:


<ul>
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">»</a></li>
</ul>

Заглавия

Для создания ссылок заголовков применяется класс breadcrumb:


<ul>
    <li class ="active">@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

Кнопки

Для создания кнопок Bootstrap имеет класс btn. Как правило, кнопки офрмляются в группу с помощью класса btn-group:


<div role="group">
  <button type="button">Left</button>
  <button type="button">Middle</button>
  <button type="button">Right</button>
</div>

Кнопка с выпадающим списком

Для создания выпадающего списка по примеру элемента нам надо использовать кнопку вместе со списком, который должен иметь класс dropdown-menu:


<div>
    <button type="button" data-toggle="dropdown">
        Язык программирования <span></span>
    </button>
    <ul role="menu">
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">C#</a></li>
        <li><a href="#">VB.NET</a></li>
        <li></li>
        <li><a href="#">Java</a></li>
    </ul>
</div>

Метки

Для оформления кусков текста в качестве меток мы можем использовать класс label. Также мы можем использовать
дополнительные классы меток, чтобы конкретизировать тип сообщения:


<span>Default</span>
<span>Primary</span>
<span>Success</span>
<span>Info</span>
<span>Warning</span>
<span>Danger</span>

Похожую функциональность предлагает класс alert:


<div>Задача успешно завершена</div>
<div>Дополнительная информация</div>
<div>Внимание!</div>
<div>Опасно!</div>

Это только некоторые компоненты, которые предлагает Bootstrap. Но уже по ним можно увидеть, что Bootstrap довольно гибок, и даже сложные по структуре компоненты
может легко адаптировать и приспособить под конкретные устройства.

st-bootstrap — npm

SpringType поставляется с ленивой, отказоустойчивой реализацией VDOM, которая позволяет использовать стандартные HTML + CSS.
В отличие от других современных интерфейсных фреймворков, SpringType не требует каких-либо специальных библиотек компонентов оболочки .

Это означает, что вы можете просто использовать стандартный Bootstrap 4 SCSS / CSS, это плагины HTML и JS, как мы делали это в старые добрые времена — но с компонентами и VDOM 🙂

Живая демонстрация

Вы можете найти рабочий пример интеграции в папке игровая площадка .

Строительные леса

Для вашего удобства мы создали шаблон каркаса для проектов SpringType / Bootstrap 4.
Чтобы использовать его, установите интерфейс командной строки SpringType scaffolding st-create :

 пряжа  добавить global st-create

Затем просто запустите:

  st-create -c project -t bootstrap-4 -n MyBootstrapProject

… и секунды спустя для вас будет создано приложение SpringType / Bootstrap 4.

Руководство по интеграции вручную

Если вы не хотите использовать st-create , процесс интеграции Bootstrap 4 в
Проекты SpringType (или даже любой проект TypeScript) довольно прямолинейны.

Вы можете интегрировать сторонние библиотеки через CDN или импортировать их в JS.
чтобы включить их в пакет JS приложения.

Импорт стороннего JS в пакет JS приложения

Установите эти зависимости:

  npm i st-bootstrap bootstrap jquery popper.js

ИЛИ:
пряжа добавить st-bootstrap bootstrap jquery popper.js

jQuery является зависимостью Bootstrap 4
Bootstrap 4 поставляется с таблицами стилей SCSS (SASS) и подключаемыми модулями jQuery для интерактивных компонентов
Поппер.js для

Обязательно импортируйте эти зависимости (например, в src / index.tsx ):

  импорт {importBootstrap} из "st-boostrap"; 
  
  st.run (async () => {
  
  await importBootstrap (); 
  
  setupBootstrapComponent ('tooltip'); 
  
 ) st.render (<
) });

Импорт стороннего JS с помощью CDN

Другой вариант — интегрировать Bootstrap 4 и его зависимости в вашего индекса .html , как описано в официальных документах Bootstrap 4: