dir.by  
  Поиск  
Программирование, разработка, тестирование
Bootstrap - кнопки, меню, диалог, slider ... Контейнеры для размещения элементов
Создание сетки "col-md-число" В Bootstrap 3 и Bootstrap 4
  Посмотрели 4372 раз(а)    
 Создание сетки "col-md-число" В Bootstrap 3 и Bootstrap 4 
последнее обновление: 10 января 2019
Сетка Bootstrap состоит из 12 колонок, все колонки имеют одинаковую ширину.

Колонки можно объединять по несколько штук и размещать их в нужной позиции.
Чтоб объединить колонки, нужно указать класс "col-md-число", число соответствует количеству колонок, которые объединяем.
Пример
  Html  
<html>

     <!-- заголовок -->
     <head>
          <meta charset="utf-8">
          <title>Example</title>

          <style>
               .show-border
               {
                    border:1px solid #555;
                    height:64px;
                    margin-bottom:20px;
                    background-color:white;
               }
          </style>
     </head>

     <!-- страница -->
     <body style='background-color:#DADADA'>

          <!-- подключить библиотеку 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">
    
          <!-- HTML элементы -->
          <div class="container">
    
               1-ый ряд
               <div class="row">
                    <div class="col-md-1 show-border"> 1ячейка </div>
                    <div class="col-md-1 show-border"> 1ячейка </div>
                    <div class="col-md-1 show-border"> 1ячейка </div>
                    <div class="col-md-1 show-border"> 1ячейка </div>
                    <div class="col-md-1 show-border"> 1ячейка </div>
                    <div class="col-md-1 show-border"> 1ячейка </div>
                    <div class="col-md-1 show-border"> 1ячейка </div>
                    <div class="col-md-1 show-border"> 1ячейка </div>
                    <div class="col-md-1 show-border"> 1ячейка </div>
                    <div class="col-md-1 show-border"> 1ячейка </div>
                    <div class="col-md-1 show-border"> 1ячейка </div>
                    <div class="col-md-1 show-border"> 1ячейка </div>
               </div>

               2-ой ряд
               <div class="row">
                    <div class="col-md-2 show-border"> 2 ячеек</div>
                    <div class="col-md-10 show-border"> 10 ячеек</div>
               </div>

               3-ий ряд
               <div class="row">
                    <div class="col-md-3 show-border"> 3 ячеек</div>
                    <div class="col-md-9 show-border"> 9 ячеек</div>
               </div>

               4-ый ряд
               <div class="row">
                    <div class="col-md-4 show-border"> 4 ячеек</div>
                    <div class="col-md-8 show-border"> 8 ячеек</div>
               </div>

               5-ый ряд
               <div class="row">
                    <div class="col-md-5 show-border"> 5 ячеек</div>
                    <div class="col-md-7 show-border"> 8 ячеек</div>
               </div>
    
               6-ой ряд
               <div class="row">
                    <div class="col-md-6 show-border"> 6 ячеек</div>
                    <div class="col-md-6 show-border"> 6 ячеек</div>
               </div>
    
               7-ой ряд
               <div class="row">
                    <div class="col-md-4 show-border"> 4 ячеек</div>
                    <div class="col-md-4 show-border"> 4 ячеек</div>
                    <div class="col-md-4 show-border"> 4 ячеек</div>
               </div>
    
               8-ой ряд
               <div class="row">
                    <div class="col-md-12 show-border"> 12 ячеек</div>
               </div>
    
          </div>

     </body>

</html>
Пример смотрим, тестируем
 
← Предыдущая тема
WEB Сайты для изучения Bootstrap 4.0
 
Следующая тема →
Сайты для изучения Bootstrap
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)

Картинки

Объявления
Объявления
Bootstrap - кнопки, меню, диалог, slider ... Контейнеры для размещения элементов  
Что такое 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  
Яндекс.Метрика