Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Ul bootstrap: File not found · Bootstrap v5.1

Содержание

Как удалить границу элемента списка в группе 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 фокус будет сосредоточен на элементе списка. Вместо этого могу ли я получить только границу элемента списка? Я могу добиться этого, используя прозрачное изображение в качестве селектора списка. Существует ли какой-либо другой простейший способ достижения этого требования?



35

В 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



23

Проблема:

Текущий код, который вы пытаетесь использовать, является селектором потомков и будет работать только тогда, когда 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



7

Вы можете воспользоваться селектором : 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



6

Вы можете удалить границы , объявив 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



0

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

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

Поделиться


Pasha GR    

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


Похожие вопросы:

Как удалить границу только с одной стороны элемента?

У меня есть: <stroke android:width=1px android:color=#A6ACB1/> Я хотел бы удалить эту границу из нижней части (например) элемента. Возможно ли это? (Eclipse предлагает только мне: цвет,…

Как удалить границу последнего элемента списка <ul> неупорядоченного списка <li> с помощью CSS, ничего не меняя в коде HTML?

Как я могу удалить границу последнего элемента списка <ul> неупорядоченного списка <li> с помощью CSS без добавления какого-либо класса к последнему элементу списка? Смотрите живой…

как удалить горизонтальную границу таблицы в bootstrap

как удалить горизонтальную границу таблицы с помощью bootstrap? Я хочу сохранить только вертикальную границу. Вот мой код: <table class=table table-bordered> <thead> <tr>…

Удалить границу из окна ввода bootstrap

Я создаю веб-сайт с помощью bootstrap, less и angular, и я весь день боролся с полем ввода для строки поиска. Я попытался использовать загрузочную входную группу как с input-group-addon, так и с…

Как мы можем установить границу для элемента списка в представлении списка

По умолчанию в Listview фокус будет сосредоточен на элементе списка. Вместо этого могу ли я получить только границу элемента списка? Я могу добиться этого, используя прозрачное изображение в…

Как удалить границу выпадающего списка: CSS

Я хочу удалить границу, которая выходит прямо за пределы выпадающего списка. Я пытаюсь: select#xyz option { Border: none; } Но у меня это не работает.

Как скрыть границу при выборе навигационного элемента

Я создаю навигационную панель (в div) с вертикальным списком. При нажатии на элемент навигации всплывает div, который касается списка nagigation. У этого div есть граница (избавление от этой границы…

Как отобразить границу элемента списка в sencha touch

Кто-нибудь может сказать, Как отобразить границу элемента списка в sencha touch. Приведенный ниже код, который я реализовал по умолчанию, не подходит для списка { xtype:’list’, height: ‘80%’,…

Удалить границу одной ячейки в таблице Bootstrap

Я хотел бы удалить границу только одной ячейки в таблице bootstrap. Я пробовал поставить идентификатор на эту конкретную ячейку и в свой css положить: #borderless-cell { border: 0; } Это, кажется,…

Как анимировать границу элемента списка в QListView?

Я использую QListView с пользовательским делегатом, который простирается от QStyledItemDelegate. Я переосмыслил метод paint для пользовательской окраски каждого элемента в списке. В методе paint я…

Руководство 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
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

Компоненты 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: