Bootstrap базовый учебник

Bootstrap плагины

Плагин складывания Bootstrap Внимания Bootstrap

Bootstrap Кнопка (Button) плагин

Кнопка(Button) в Кнопки Bootstrap В одной из глав было рассказано о том, что с помощью плагина Button можно добавить некоторые интерактивные элементы, такие как управление состоянием кнопки или создание группы кнопок для других компонентов (например, панели инструментов).

Статус загрузки

Чтобы добавить статус загрузки к кнопке, достаточно добавить к элементу button: data-loading-text="Loading..." Как показано в следующем примере, это можно сделать, установив соответствующий атрибут:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap　示例　-　按钮(Button)插件加载状态</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button　id="fat-btn"　class="btn　btn-primary"　data-loading-text="Loading..."　
　　　	type="button">　Статус загрузки
</button>
<script>
　　　　$(function()　{
　　　　　　　　$(".btn").click(function(){
　　　　　　　　　　　　$(this).button('loading').delay(1000).queue(function()　{
　　　　　　　　　　　　//　$(this).button('reset');
　　　　　　　　　　　　//　$(this).dequeue();　
　　　　　　　　　　　　});
　　　　　　　　});
　　　　});　　
</script>
</body>
</html>

Проверьте, посмотрите ‹/›

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

Jednodольный переключатель

Чтобы активировать переключение для одного按钮а (например, изменить обычное состояние кнопки на нажатое и наоборот), достаточно добавить к элементу button: data-toggle="button" Как показано в следующем примере, это можно сделать, установив соответствующий атрибут:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap　示例　-　按钮(Button)插件单个切换</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button　type="button"　class="btn　btn-primary"　
　　　	data-toggle="button">　 Jednodольный переключатель
</button>
</body>
</html>

Проверьте, посмотрите ‹/›

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

Флажок(Checkbox)

Вы можете создать группу флажков и использовать для этого: btn-group Добавить атрибут data data-toggle="buttons" Добавить переключатель для группы флажков.

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap　示例　-　按钮(Button)插件复选框</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-primary">
		<input　type="checkbox">　Вариант　1
	</label>
	<label class="btn btn-primary">
		<input　type="checkbox">　Вариант　2
	</label>
	<label class="btn btn-primary">
		<input　type="checkbox">　Вариант　3
	</label>
</div>
</body>
</html>

Проверьте, посмотрите ‹/›

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

Радиокнопка(Radio)

Аналогично, вы можете создать группу радиокнопок и использовать для этого: btn-group Добавить атрибут data data-toggle="buttons" Добавить переключатель для группы радиокнопок.

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap　示例　-　按钮(Button)插件单选按钮</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-primary">
		<input type="radio" name="options" id="option1"> Опция 1
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="options" id="option2"> Опция 2
	</label>
	<label class="btn btn-primary">
		<input type="radio" name="options" id="option3"> Опция 3
	</label>
</div>	
</body>
</html>

Проверьте, посмотрите ‹/›

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

Метод использования

Вы можете через JavaScript Для включения плагина кнопки (Button) можно сделать так:

$('.btn').button()

Параметры

Нет параметров.

Метод

Ниже приведены некоторые полезные методы плагина кнопки (Button):

Метод	Описание	Пример
button('toggle')	Переключает состояние нажатия. Придает кнопке вид активированного состояния. Вы можете использовать data-toggle Свойство активирует автоматическое переключение.	$().button('toggle')
.button('loading')	При загрузке кнопка становится недоступной, а текст изменяется на текст элемента button. data-loading-text Значение свойства.	$().button('loading')
.button('reset')	Сброс состояния кнопки, текстовое содержимое возвращается к исходному содержимому. Этот метод очень полезен, когда нужно вернуть кнопку к исходному состоянию.	$().button('reset')
.button(string)	Строка в этом методе означает любую строку, объявленную пользователем. Используя этот метод, можно сбросить состояние кнопки и добавить новое содержимое.	$().button(string)

Онлайн пример

Ниже приведен пример использования методов, описанных выше:

Онлайн пример

Пример

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap пример - клавиша (Button) плагин методы</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Нажмите каждую кнопку, чтобы увидеть эффект метода</h2>
<h4>Демонстрация метода　.button('toggle')</h4>
<div　id="myButtons1"　class="bs-example">
　　　	<button　type="button"　class="btn　btn-primary">Исходный</button>
</div>
<h4>Демонстрация метода　.button('loading')</h4>
<div　id="myButtons2"　class="bs-example">
	<button　type="button"　class="btn　btn-primary"　
			data-loading-text="Загрузка...">Исходный
	</button>
</div>
<h4>Демонстрация метода　.button('reset')</h4>
<div　id="myButtons3"　class="bs-example">
	<button　type="button"　class="btn　btn-primary"　
			data-loading-text="Загрузка...">Исходный
	</button>
</div>
<h4>Демонстрация метода　.button(string)</h4>
<button　type="button"　class="btn　btn-primary"　id="myButton4"　
　　　	data-complete-text="Завершение загрузки">Нажмите меня
</button>
<script　type="text/javascript">
	$(function　()　{
		$("#myButtons1　.btn").click(function(){
			$(this).button('toggle');
		});
	});
	$(function()　{　
		$("#myButtons2　.btn").click(function(){
			$(this).button('loading').delay(1000).queue(function()　{
			});　　　　　　　　
		});
	});　　　
	$(function()　{　
		$("#myButtons3　.btn").click(function(){
			$(this).button('loading').delay(1000).queue(function()　{
				$(this).button('reset');
			});　　　　　　　　
		});
	});　　
	$(function()　{　
		$("#myButton4").click(function(){
			$(this).button('loading').delay(1000).queue(function()　{
				$(this).button('complete');
			});　　　　　　　　
		});
	});　
</script>　
</body>
</html>

Проверьте, посмотрите ‹/›

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

Плагин складывания Bootstrap Внимания Bootstrap