ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap 4 Tutorial

BS4 HOME BS4 Get Started BS4 Grid Basic BS4 Typography BS4 Colors BS4 Tables BS4 Images BS4 Jumbotron BS4 Alerts BS4 Buttons BS4 Button Groups BS4 Badges BS4 Progress Bars BS4 Pagination BS4 List Groups BS4 Cards BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbar BS4 Forms BS4 Inputs BS4 Carousel BS4 Modal BS4 Tooltip BS4 Popover BS4 Scrollspy BS4 Utilities BS4 Flex BS4 Media Objects BS4 Filters

Bootstrap 4 Grid

BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples

Bootstrap 4 Theme

BS4 Basic Template

Bootstrap 4 Ref

All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip


Bootstrap 4 Filters (Advanced)


Фильтры Bootstrap 4

Bootstrap не имеет компонента, который позволяет фильтровать. Тем не менее, мы можем использовать jQuery для фильтрации/поиска элементов.


Фильтровать таблицы

Выполнение поиска элементов в таблице с учетом регистра:

Пример

Type something in the input field to search the table for first names, last names or emails:


Firstname Lastname Email
John Doe [email protected]
Mary Moe [email protected]
July Dooley [email protected]
Anja Ravendale [email protected]

jQuery

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

Пример объяснил: Мы используем jQuery для цикла через каждую строку таблицы, чтобы проверить, если есть какие-либо текстовые значения, которые соответствуют значению поля ввода. toggle метод скрывает строку ( display:none ), которая не соответствует поиску. Мы используем этот toLowerCase() метод для преобразования текста в нижний регистр, что делает поиск нечувствительным (позволяет "John", "John" и даже "John" при поиске).


Списки фильтров

Выполните поиск элементов в списке с учетом регистра:

Пример

Введите что-нибудь в поле ввода для поиска элементов в списке:


  • First item
  • Second item
  • Third item
  • Fourth

Фильтровать все

Выполните поиск текста внутри элемента div с учетом регистра:

Пример


I am a paragraph.

I am a div element inside div.

Another paragraph.