• Гость
For-Web
  • Главная
  • Вебмастеру
    • Блог
    • SQL
    • PHP
    • JavaScript
    • CSS
    • HTML
    • Литература
  • Скрипты, Soft, APP
    • Bitcoin
    • Соц сети
    • Реклама, Буксы
    • Интернет магагзин
    • Браузерные игры
    • Скрипты хостинга
    • Мобильные приложения
    • Программы
  • Data Life Eingine
    • Модули
    • Хаки
    • DLE шаблоны
  • Bootstrap
    • Шаблоны
    • Плагины
    • Сниппеты
    • Пособие Bootstrap
  • Дизайн и Графика
    • PSD макеты
    • Mocups Free
    • Иконки, Кнопки
    • Шрифты,Текст
    • Текстуры, Фон
    • Анимация
    • Формы
    • Палитра
    • Галерея
    • Раскладка
    • Модальное окно
    • Элементы загрузки
    • Меню и навигация
    • Таблицы
    • Украшения для сайта
    • Фотошоп
  • Шаблоны сайтов
    • WAP шаблоны
    • HTML 5 шаблоны
    • Админка
    • Автомобили
    • Аниме
    • Блоги
    • Бизнес и Финансы
    • Игровые
    • Женские
    • Заглушки
    • Кинопорталы
    • Кулинарные
    • Лендинг
    • Мобильные
    • Музыкальные
    • Новостные
    • ПО, IT
    • Портфолио
    • Природа
    • Строительство
    • Спорт
    • Хостинг
    • Адалт
    • Страницы 404
  • Инфо
    • О проекте
    • Обратная связь
    • Статистика
    • Privacy Policy
главная » Учебник Bootstrap » Руководство Bootstrap Input Group

Руководство Bootstrap Input Group


1- Input Group

Input Group это способ помогающий вам расширить (extend)  Input Control добавляя такие элементы как Text, Button, или  Button Group,.. Элементы добавленные последовательно к Input Control называются  Addons. Не забудьте прочитать про Руководство Bootstrap Form 

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Input Group Example</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
 
<body>
    <div class="container">
        <h2 class="mb-4 mt-2">Input Group Examples</h2>
 
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">@</span>
            </div>
            <input type="text" class="form-control" placeholder="Username">
        </div>
 
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Recipient's username">
            <div class="input-group-append">
                <span class="input-group-text">@example.com</span>
            </div>
        </div>
 
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">$</span>
            </div>
            <input type="text" class="form-control">
            <div class="input-group-append">
                <span class="input-group-text">.00</span>
            </div>
        </div>
 
    </div>
 
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 
</body>
</html>

Вы можете поставить много  Input Control или много  Addon в одном  Input Group:

<!-- Multiple inputs -->
<form>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text">Person</span>
        </div>
        <input type="text" class="form-control" placeholder="First Name">
        <input type="text" class="form-control" placeholder="Last Name">
    </div>
</form>
 
<!-- Multiple addons / help text -->
<form>
    <div class="input-group mb-3">
        <div class="input-group-prepend">
            <span class="input-group-text">One</span>
            <span class="input-group-text">Two</span>
            <span class="input-group-text">Three</span>
        </div>
        <input type="text" class="form-control">
    </div>
</form>

Примечание: Атрибуты  aria-label, aria-describedby могут быть использованы если вы хотите, чтобы ваше приложение поддерживало такие cоборудования как  Screen Reader (Устройство чтения экрана для незрячих).
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username"
                   aria-label="Username" aria-describedby="basic-addon1">
</div>

2- Input Group with Checkbox, Radio

Например, Input Group с Addon являются  checkbox или  radio:

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <div class="input-group-text">
            <input type="checkbox">
        </div>
    </div>
    <input type="text" class="form-control" placeholder="Some text">
</div>
 
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">Gender:</span>
        <div class="input-group-text">
            <input type="radio" name="gender" value="male">
        </div>
        <span class="input-group-text">Male</span>
        <div class="input-group-text">
            <input type="radio" name="gender" value="female">
        </div>
        <span class="input-group-text">Female</span>
    </div>
    <input type="text" class="form-control" placeholder="Some text">
</div>


3- Input Group с Button

Добавление одного или более   Button в Input Group:
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <button class="btn btn-outline-primary" type="button">Basic Button</button>
    </div>
    <input type="text" class="form-control" placeholder="Some text">
</div>
 
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Search">
    <div class="input-group-append">
        <button class="btn btn-success" type="submit">Go</button>
    </div>
</div>
 
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Something clever..">
    <div class="input-group-append">
        <button class="btn btn-primary" type="button">OK</button>
        <button class="btn btn-danger" type="button">Cancel</button>
    </div>
</div>

4- Input Group с Dropdown

Добавление  Dropdown в Input Group. изучите Руководство Bootstrap Dropdown

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <div class="btn-group">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                Tutorials
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">jаvascript</a>
                <a class="dropdown-item" href="#">Css</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Bootstrap</a>
            </div>
        </div>
    </div>
    <input type="text" class="form-control" placeholder="Some text">
</div>
 
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <div class="btn-group">
 
            <button type="button" class="btn btn-success">Go to Home Page</button>
            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="sr-only">Toggle Dropdown</span>
            </button>
 
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">jаvascript</a>
                <a class="dropdown-item" href="#">Css</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Bootstrap</a>
            </div>
 
        </div>
    </div>
    <input type="text" class="form-control" placeholder="Some text">
</div>


5- Input Group с Select

При использовании  Input Group с элементом  <select>, к элементу  <select> должен быть применён класс  "custom-select", это помогает заполнению пространства в горизонтальном направлении, и есть стили (style) как в  Bootstrap.

Например, Input Group с Custom Select:
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <label class="input-group-text" for="inputGroupSelect01">Options</label>
    </div>
    <select class="custom-select" id="inputGroupSelect01">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
</div>
 
 
<div class="input-group">
    <select class="custom-select">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
    <div class="input-group-append">
        <button class="btn btn-outline-success" type="button">Button</button>
    </div>
</div>



6- Input Group с Custom File

Пример использования  Input Group с кастомизированным элементом  <input type="file">:



<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">Upload</span>
    </div>
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="inputGroupFile01">
        <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
    </div>
</div>
 
<div class="input-group mb-3">
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="inputGroupFile02">
        <label class="custom-file-label" for="inputGroupFile02">Choose file</label>
    </div>
    <div class="input-group-append">
        <span class="input-group-text" id="">Upload</span>
    </div>
</div>
 
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="inputGroupFile03">
        <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
    </div>
</div>
 
<div class="input-group">
    <div class="custom-file">
        <input type="file" class="custom-file-input" id="inputGroupFile04">
        <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
    </div>
    <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
</div>

7- Размер у Input Group

Добавляя классы связанные с "Размером" (Sizing) в элемент  .input-group он повлияет на подэлементы. Вам не нужно настраивать размер для всех.Список классов использованных для настройки "Размера" для  Input Group:
  • input-group-sm
  • input-group-lg
<div class="input-group input-group-sm mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">Small</span>
    </div>
    <input type="text" class="form-control">
</div>
 
<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">Default</span>
    </div>
    <input type="text" class="form-control">
</div>
 
<div class="input-group input-group-lg">
    <div class="input-group-prepend">
        <span class="input-group-text">Large</span>
    </div>
    <input type="text" class="form-control">
</div>

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


Руководство Bootstrap Input Group

Вы находитесь на странице скачивания файла. Все скрипты храняться на яндекс диске. Кнопки скачивания файла  находятся внизу страницы. Если нет кнопки  , то значит нет файла. Нет файла - просьба сообщить администратору  любым удобным способом. Спасибо большое за понимание!

Реклама - на страницах сайта, а также на странице загрузки файлов - это вынужденная мера для поддержания проекта на плаву. Я не принуждаю Вас кликать по рекламе, если конечно она вас не заинтересовала.

Да и самое важное, все материалы носят ознакомительный характер, все файлы взяты из открытых источников, соответственно Вы их используете на свой страх и риск. За риски связанные с утечкой данных, хищение средств и прочее при использовании скриптов администрация сайта ответственность не несёт!




  • Комментарии
  • О статье
  • Похожие новости
У данной публикации нет комментариев.

admin

Автор

7-04-2020, 20:09

Дата

Учебник Bootstrap

Категория
  • Комментариев: 0
  • Просмотров: 1 079
Учебник Bootstrap
Руководство Bootstrap Form
Иконки , Кнопки
Красивые кнопки на чистом CSS в плоском стиле FLAT
Учебник Bootstrap
Руководство Bootstrap Card
Bootstrap сниппеты
Адаптивный Canvas Bootstrap сниппет
Учебник Bootstrap
Система сеток Bootstrap 4
Учебник Bootstrap
Руководство Bootstrap NavBar
Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Комментарии
На DLE 15.2 выводит тегом как есть {short-story-text} да и судя по коду плагина и не должен))
27 июля 2022 22:12

Karat7

Rocky, Странно )) Сейчас пере залью, а пока вот код <?php if (!defined('DATALIFEENGINE')) { die("Hacking
21 июля 2022 20:30

admin

admin, ну этого файла нет File engine/modules/iChat/show.php в Шаблоне 14.2
21 июля 2022 15:48

Rocky

Rocky, В комплектации с шаблоном все есть , устанавливаете правильно пожалуйста. Возможно ошиблись. Кнопочки в стилях
21 июля 2022 14:41

admin

где взять этот файл File engine/modules/iChat/show.php not found. движок 14.2, можете скинуть и как исправить это
21 июля 2022 11:21

Rocky


Сколько часов ,Вы проводите за компьютером


  • For-WEb.Ru 2018 - 2022  

Авторизация


Регистрация Забыл пароль