dir.by  
  Поиск  
Компьютер, программы
Bootstrap - кнопки, меню, диалог, slider ... Контейнеры для размещения элементов
 class="form-inline" элементы на одной строке в Bootstrap 4.0 
посмотрели 5275 раз
обновлено: 10 января 2019
Используйте class="form-inline" для отображения меток, элементов управления, кнопок в одной горизонтальной строке.
Пример
  Html  
<html>

     <!-- title -->
     <head>
          <meta charset="utf-8">
          <title>Example</title>
     </head>

     <body>
          <!-- подключить библиотеку jQuery -->
          <script src="https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"></script>

          <!-- подключить библиотеку Bootstrap (js файл) -->
          <script src="https://dir.by/example_lib/bootstrap-4.1.3/js/bootstrap.min.js"></script>
    
          <!-- подключить библиотеку Bootstrap (css файл) -->
          <link rel="stylesheet" href="https://dir.by/example_lib/bootstrap-4.1.3/css/bootstrap.min.css">

          <!-- form -->
          <form class="form-inline">
               <input type="text" class="form-control mr-sm-2" placeholder="Search">
               <button type="submit" class="btn btn-default">Click me</button>
          </form>

     </body>
</html>
Пример смотрим, тестируем
 
← Предыдущая тема
"Navbar" в Bootstrap 4.0 - это главное горизонтальное меню для сайта (навигационные заголовки)
 
Следующая тема →
class="navbar-expand-lg" исчезает если размер области меньше lg | Bootstrap 4.0
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)

Экскурсии по Москве Экскурсии по Москве: пешеходные, автобусные и речные прогулки на любой вкус
  Объявления  
  Объявления  
 
Что такое Bootstrap?
Bootstrap где скачать и как подключить?
Контейнеры в Bootstrap ("container-fluid" и "container")
Bootstrap версия 4.0
Bootstrap 4 отличие от Bootstrap 3
элементы
"Navbar" в Bootstrap 4.0 - это главное горизонтальное меню для сайта (навигационные заголовки)
стили
class="form-inline" элементы на одной строке | Bootstrap 4.0
class="navbar-expand-lg" исчезает если размер области меньше lg | Bootstrap 4.0
class="mr-auto" отодвинуть в правый край , class="ml-auto" отодвинуть в левый край | Bootstrap 4.0
Отступы по вертикали, горизонтали | Bootstrap 4.0
для изучения
WEB Сайты для изучения Bootstrap 4.0
Bootstrap элементы для версии 3 и 4
Создание сетки "col-md-число" в Bootstrap 3 и Bootstrap 4
WWW сайты для изучения Bootstrap
Сайты для изучения Bootstrap

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика