Как сверстать такую форму?

Алексей
239
0
Помогите сверстать такую форму
Изображения:

Комментарии ()

  1. Александр Мальцев
    13 октября 2020, 13:31
    С помощью Bootstrap это можно сверстать так:
    <!doctype html>
    <html lang="ru">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
      <title>Example</title>
    </head>
    <body>
    
      <header class="bg-secondary mb-5">
        <div class="container-fluid d-flex align-items-center">
          <img src="https://via.placeholder.com/150X50" alt="Маленькая картинка">
          <h1 class="h4 text-light font-weight-light ml-3 mb-0">Название</h1>
        </div>
      </header>
    
      <div class="container-fluid">
        <div class="row">
          <div class="col-sm-4 col-lg-3">
            <form>
              <div class="form-group row">
                <label for="length" class="col-sm-5 col-md-4 col-lg-3 col-form-label">Длина</label>
                <div class="col-sm-7 col-md-8 col-lg-9">
                  <input type="type" class="form-control" name="length" id="length">
                </div>
              </div>
              <div class="form-group row">
                <label for="length" class="col-sm-5 col-md-4 col-lg-3 col-form-label">Ширина</label>
                <div class="col-sm-7 col-md-8 col-lg-9">
                  <input type="type" class="form-control" name="length" id="length">
                </div>
              </div>
              <div class="form-group row">
                <label for="length" class="col-sm-5 col-md-4 col-lg-3 col-form-label">Высота</label>
                <div class="col-sm-7 col-md-8 col-lg-9">
                  <input type="type" class="form-control" name="length" id="length">
                </div>
              </div>
              <div class="form-group mt-5">
                <button type="button" class="btn btn-primary">Кнопка</button>
              </div>
              <div class="form-group">
                <button type="button" class="btn btn-primary">Кнопка</button>
              </div>
            </form>
          </div>
          <div class="col-sm-6 col-lg-7">
            <div class="bg-light" style="height: 500px;"></div>
          </div>
          <div class="col-sm-2">
            <div class="form-group form-check">
              <input type="checkbox" class="form-check-input" id="check-box-2" checked>
              <label class="form-check-label" for="check-box-2"></label>
            </div>
            <div class="form-group form-check">
              <input type="checkbox" class="form-check-input" id="check-box-2">
              <label class="form-check-label" for="check-box-2"></label>
            </div>
            <div class="form-group form-check">
              <input type="checkbox" class="form-check-input" id="check-box-3">
              <label class="form-check-label" for="check-box-3"></label>
            </div>
            <div class="form-group form-check">
              <input type="checkbox" class="form-check-input" id="check-box-4">
              <label class="form-check-label" for="check-box-4"></label>
            </div>
            <div class="form-group form-check">
              <input type="checkbox" class="form-check-input" id="check-box-5" checked>
              <label class="form-check-label" for="check-box-5"></label>
            </div>
          </div>
        </div>
      </div>
    
    </body>
    </html>
    
    Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.