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

У данной публикации нет комментариев.

admin

Автор

7-04-2020, 20:09

Дата пуликации

Учебник Bootstrap

Категория

Комментариев: 0
Просмотров: 93

Учебник Bootstrap

Руководство Bootstrap Form

Учебник Bootstrap

Руководство Bootstrap NavBar

Учебник Bootstrap

Система сеток Bootstrap 4

Bootstrap шаблоны

Шаблон начальной загрузки на Bootstrap 4

Украшения для сайта

Новогодние украшения от яндекса

Иконки , Кнопки

Красивые кнопки на чистом CSS в плоском стиле FLAT

Информация

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

Перебей баннер

Советы

Не работает хак или модуль? Попробуй Очистить кеш!

Лучший букс

Ваша реклама

Купить ссылку здесь за руб.

Поставить к себе на сайт

Комментарии

Pafnuti, В любом похожем шаблоне вытащить код. На счёт 14 версии незнаю , не тестироал

6 мая 2020 06:00

admin

Добрый день .Подскажите как на постере можно настроить отображение категории в нижнем правои углу ?

2. И очень прошу рассказать подробнее . Как можно снять ограничение в DLE v14 Установка видео в новость через гугл диск по html коду. Устанавливаю код. Отправляю новость. Но видео исчезает. В редакторе код уже не отображается (

28 апреля 2020 18:48

Pafnuti

&nbsp;

delete all because this site with some bugs and showing this code but need show just space

22 апреля 2020 17:07

mondolfo

users_search.tpl


<div class="panel panel-info">
&nbsp; <div class="panel-heading"><i class="fa fa-users" aria-hidden="true"></i> Paieška tarp vartotojų</div>
&nbsp; <div class="panel-body">

<div class="users_search">
&nbsp;&nbsp; &nbsp;<form action="" method="get">
<div class="input-group">
&nbsp;&nbsp;&nbsp; <input type="hidden" name="do" value="users" />
&nbsp; <span class="input-group-addon"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
&nbsp; <input type="text" name="login" class="form-control"&nbsp; value="{login}" placeholder="Vartotojo vardas" aria-describedby="sizing-addon2">
</div>
<div class =&nbsp; "row&nbsp; row-flex row-flex-wrap my">
&nbsp; <div class="col-xs-6 col-sm-3 my">
&nbsp; <div class="well well-sm" style="width: 100%;">
&nbsp; Kiekis <select name="count" class="form-control">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<option value="">Pasirinkti</option>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;{count}
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</select>
&nbsp; </div>
&nbsp; </div>
&nbsp; <div class="col-xs-6 col-sm-3 my">
&nbsp; <div class="well well-sm" style="width: 100%;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ieškoti pagal
&nbsp; <select name="order" class="form-control">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<option value="">Pasirinkti</option>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;{order}
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</select>
&nbsp; </div>
&nbsp; </div>

&nbsp; <div class="clearfix visible-xs-block"></div>

&nbsp; <div class="col-xs-6 col-sm-3 my">
&nbsp; <div class="well well-sm" style="width: 100%;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Rodyti
&nbsp; <select name="sort" class="form-control">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<option value="">Pasirinkti</option>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;{sort}
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</select>
&nbsp; </div>
&nbsp; </div>
&nbsp; <div class="col-xs-6 col-sm-3 my">
&nbsp; <div class="well well-sm" style="width: 100%;">
&nbsp; Rodyti tik
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<select name="usergroups" class="form-control">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<option value="">Pasirinkti</option>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;{usergroups}
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</select>
&nbsp; </div>
&nbsp; </div>
</div>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>
&nbsp;&nbsp; &nbsp;</form>
</div>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </div>
&nbsp;&nbsp;&nbsp; <div class="panel-footer">{numbers} <input type="submit" class="btn btn-sm btn-primary pull-right" value="Paieška" style="margin: -3px -8px 0 0;"></div>
</div>

22 апреля 2020 17:02

mondolfo

Not uploaded users.tpl and users_search.tpl files

here is code:

users.tpl


<div class="panel panel-default">
&nbsp; <div class="panel-heading linka"><a {profile_m} href="{profile}">{usertitle}</a>[online]<span class="label label-success pull-right">Online</span>[/online][offline]<span class="label label-danger pull-right">Offline</span>[/offline]</div>
&nbsp; <div class="panel-body">
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;
<div class="row">
&nbsp; <div class="col-md-2">
&nbsp; <center><a {profile_m} href="{profile}"><img class="user_ava" src="{foto}" title="{usertitle}" alt="{usertitle}" style="width: 118px;
&nbsp;&nbsp;&nbsp; height: 118px;
&nbsp;&nbsp;&nbsp; border-radius: 6%;
&nbsp;&nbsp;&nbsp; object-fit: cover;"></a> </center>
&nbsp; </div>
&nbsp; <div class="col-md-7">
&nbsp; <ul class="list-unstyled">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<li><span class="grey">Vardas:</span> <b>[fullname]{fullname}[/fullname][not-fullname]---[/not-fullname]</b></li>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<li><span class="grey">Registracijos data:</span> <b>{registration}</b></li>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<li><span class="grey">Paskutinis apsilankymas:</span> <b>{lastdate}</b></li>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</ul>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<ul class="list-unstyled">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<li><span class="grey">Naujienos:</span> <b>{news-num}</b></li>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<li><span class="grey">Komentarai:</span> <b>{comm-num}</b></li>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</ul> &nbsp;
&nbsp; </div>
&nbsp; <div class="col-md-3">
&nbsp; <div class="list-group">
&nbsp; <a href="{profile}" class=" btn btn-default btn-block">Profilis</a>
&nbsp; [pm]<a href="{pm}" class="btn btn-default btn-block">Siųsti pranešimą</a>[/pm]
&nbsp; [email]<a href="{email}" class="btn btn-default btn-block">Rašyti E-mail</a>[/email]
</div>
&nbsp; </div>
</div>
&nbsp;&nbsp;&nbsp; &nbsp;
&nbsp; </div>
</div>

22 апреля 2020 17:01

mondolfo

Как, Вам задумка обмена визитами

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

1- Input Group

2- Input Group with Checkbox, Radio

3- Input Group с Button

4- Input Group с Dropdown

5- Input Group с Select

6- Input Group с Custom File

7- Размер у Input Group

admin

7-04-2020, 20:09

Учебник Bootstrap

Авторизация