Учебник по начальной загрузке Twitter Bootstrap
Вступление
В этом уроке вы увидите, как создавать шрифты с помощью Twitter Bootstrap.
Типовые заголовки очень полезны для предоставления подсказок или данных пользователям при заполнении форм. Twitter Bootstrap позволяет с легкостью создавать превосходно выглядящие шрифты, кроме того, он легко расширяется, поэтому вы можете улучшить его функциональность без особых усилий.
Что требуется
Вы должны включить два файла JavaScript jquery.js и bootstrap-typeahead.js, которые присутствуют в docs / assets / js /.
В следующем примере показано, как вы можете создавать заголовки шрифтов без написания одного фрагмента JavaScript самостоятельно, единственная разметка делает эту работу.
пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap typeahead example by w3resource</title>
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="well">
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="["Ahmedabad","Akola","Asansol","Aurangabad","Bangaluru","Baroda","Belgaon","Berhumpur","Calicut","Chennai","Chapra","Cherapunji"]">
</div>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
Посмотреть пример в прямом эфире
Вы можете вызвать typeahead через javascript и использовать его различные опции для добавления функциональности. Использование типа звонка через JavaScript:
$('#example').typeahead()пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap typeahead with options example by w3resource</title>
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="well">
<input type="text" class="span3" id="search" data-provide="typeahead" data-items="4" />
</div>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>
<script>
var subjects = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'];
$('#search').typeahead({source: subjects})
</script>
</body>
</html>
Посмотреть пример в прямом эфире .
Опции
Вы можете использовать различные варианты с typeahead. Вот список с деталями:
источник : используется для указания источника данных, содержащего значения, которые будут отображаться при запросе. Значение этого типа массива и значение по умолчанию [].
items : используется для указания максимального количества элементов, отображаемых при запросе. Тип данных - число, а значение по умолчанию - 8.
matcher : определяет, соответствует ли запрос элементу. Он принимает один аргумент, то есть элемент, по которому проверяется запрос. Доступ к текущему запросу осуществляется с помощью this.query. Возвращает логическое значение true, если запрос соответствует. Тип данных является функцией. По умолчанию регистр не учитывается.
sorter : используется для сортировки результатов автозаполнения. Он принимает один элемент аргумента, имеющий область действия экземпляра typeahead. Доступ к текущему запросу осуществляется с помощью this.query. Тип данных является функцией. Значением по умолчанию является точное совпадение, с учетом регистра и без учета регистра.
Подсветка : используется для выделения результатов автозаполнения. Он принимает один элемент аргумента, имеющий область действия экземпляра typeahead. Тип данных является функцией. По умолчанию выделяются все совпадения по умолчанию.
методы
.typeahead(options)
Инициализирует ввод с помощью typeahead
Вы можете скачать все файлы HTML, CSS, JS и изображения, используемые в наших руководствах, здесь.
Предыдущий: Twitter Bootstrap Карусель Tutoriall
Далее: плагин Twitter Bootstrap Button JavaScript
Новый контент: Composer: менеджер зависимостей для PHP , R программирования