Home / Questions / 24453
Accepted
ganedugo
Asked: 2020-09-21 07:58:52 +0800 CST 2020-09-21 07:58:52 +0800 CST

Хитрая загрузочная форма! - Уменьшить пространство

  • 772

введите описание изображения здесьвведите описание изображения здесь

Я новичок в веб-дизайне, ища в Интернете, я нашел фреймворк начальной загрузки, и он показался мне супер... но я попытался создать форму, подобную той, что на изображении, и не смог найти способ сделать это.

С помощью некоторых людей на этом форуме я смог выровнять два текстовых поля с помощью Bootstrap, но я не смог сделать их более объединенными, чтобы придать форме больше единообразия, как этого можно было достичь?

Тип записи пациента Идентификационный номер Имя ОтчествоПервая фамилия Вторая фамилия Пол Мужской Женский Дата рождения Семейное положениеХолост Женат Род занятий Адрес Стационарный телефонСотовая электронная почта ГородДепартамент Режим Тип аффилированного лица Вкладчик Дополнительный бенефициар EPSРанг 1 2 3 Неприменимо ОтправитьОтправлятьОтправлять 
</div>

Документ без названия 

<body>
    <div class="container">
        <br>
        <br>
        <br>
        <div class="panel panel-primary">
            <div class="panel-heading">Ingreso de Pacientes</div>
            <div class="panel-body">
                <form id="form" class="form-horizontal "role="form">
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label" name="nombre">Primer Nombre</label>
                            <div class="col-lg-5">
                                <input type="text" class="form-control"  name="text_nom1" id="text_nom1" required/>
                                <span class="help-block"></span>
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label">Segundo Nombre</label>
                            <div class="col-lg-5">
                                <input class="form-control"  name="text_nom2" id="text_nom2">
                            </div>
                        </div>
                    </div>
                    <div class="row">  
                        <div class="form-group col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label">Primer Apellido</label>
                            <div class="col-lg-5">
                                <input class="form-control"  name="text_ape1" id="text_ape1">
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label">Segundo Apellido</label>
                            <div class="col-lg-5">
                                <input class="form-control"  name="text_ape2" id="text_ape2">
                            </div>
                        </div>
                    </div> 
                    <div class="row"> 
                        <div class="form-group form-inline col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label">Ciudad</label>
                            <div class="col-lg-2">
                                <input class="form-control" id="ejemplo_password_3" name="text_ciu" id="text_ciu">
                            </div>
                            <div class="col-lg-3">
                                <input class="form-control" id="ejemplo_password_3" name="text_ciu" id="text_ciu">
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="ejemplo_email_3" class="col-lg-5 control-label">Departamento</label>
                            <div class="col-lg-5">
                                <input class="form-control" id="ejemplo_password_3" name="text_dep" id="text_dep">
                            </div>
                        </div>
                    </div>
                                            <div class="row">
                        <div class="col-sm-offset-5 col-sm-2 text-center">
                            <div class="btn-group" data-toggle="buttons">
                                <button type="button" id="btn_enviar" class="btn btn-primary">Enviar</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

bootstrap

3 Answers

  1. Best Answer

    Вам нужно понять, как работают столбцы, как они вложены друг в друга и как им присваиваются разные размеры в зависимости от ширины браузера.

    Ты был близок к тому, чтобы получить его!

    В каждом столбце вы можете комбинировать размеры col-xs-1/12, col-sm-1/12и col-md-1/12для col-lg-1/12достижения желаемой структуры.

    В этом конкретном случае, не углубляясь в изменение cssоригинала bootstrapдля настройки разделения между элементами, вам понадобится что-то вроде этого:

    <div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">Ingreso de Pacientes</div>
        <div class="panel-body">
            <form id="form" class="form-horizontal" role="form">

                <div class="row">
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-4 control-label" name="nombre">Primer Nombre</label>

                        <div class="col-md-8">
                            <input class="form-control" name="text_nom1" id="text_nom1" required/>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-5 col-lg-4 control-label">Segundo Nombre</label>

                        <div class="col-md-7 col-lg-8">
                            <input class="form-control" name="text_nom2" id="text_nom2">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-4 control-label">Primer Apellido</label>

                        <div class="col-md-8">
                            <input class="form-control" name="text_ape1" id="text_ape1">
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-5 col-lg-4 control-label">Segundo Apellido</label>

                        <div class="col-md-7 col-lg-8">
                            <input class="form-control" name="text_ape2" id="text_ape2">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-4 control-label">Ciudad</label>
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-xs-4 col-sm-3 col-md-4 col-lg-4">
                                    <input class="form-control" id="ejemplo_password_3" name="text_ciu" id="text_ciu">
                                </div>
                                <div class="col-xs-8 col-sm-9 col-md-8 col-lg-8">
                                    <input class="form-control" id="ejemplo_password_3" name="text_ciu" id="text_ciu">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="ejemplo_email_3" class="col-md-5 col-lg-4 control-label">Departamento</label>

                        <div class="col-md-7 col-lg-8">
                            <input class="form-control" id="ejemplo_password_3" name="text_dep" id="text_dep">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-sm-offset-5 col-sm-2 text-center">
                        <div class="btn-group" data-toggle="buttons">
                            <button type="button" id="btn_enviar" class="btn btn-primary">Enviar</button>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

    Но по умолчанию bootstrapон выравнивает метки labelпо правому краю.

    Со строкой cssи указанием idкастома на форму ( чтобы он не влиял на другие формы ) решается.

    #form label { text-align : left; }
    • 3

  2. Я рекомендую вам взглянуть на http://bootsnipp.com/forms , где он поможет вам создать HTMLнеобходимую форму с помощью drag and drop, controlesна основе этого веб-сайта у нас есть следующее (вертикальное):

    <form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_nom1">Primer nombre</label>  
  <div class="col-md-4">
  <input id="text_nom1" name="text_nom1" placeholder="Primer nombre" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_nom2">Segundo nombre</label>  
  <div class="col-md-4">
  <input id="text_nom2" name="text_nom2" placeholder="Segundo nombre" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_ape1">Primer apellido</label>  
  <div class="col-md-4">
  <input id="text_ape1" name="text_ape1" placeholder="Primer apellido" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_ape2">Segundo apellido</label>  
  <div class="col-md-4">
  <input id="text_ape2" name="text_ape2" placeholder="Segundo apellido" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_ciu_nom">Ciudad nombre</label>  
  <div class="col-md-4">
  <input id="text_ciu_nom" name="text_ciu_nom" placeholder="Ciudad nombre" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_dep">Departamento</label>  
  <div class="col-md-4">
  <input id="text_dep" name="text_dep" placeholder="Departamento" class="form-control input-md" type="text">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="text_ciu_cod">Ciudad Código</label>  
  <div class="col-md-4">
  <input id="text_ciu_cod" name="text_ciu_cod" placeholder="Ciudad Código" class="form-control input-md" type="text">

  </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="btn_enviar"></label>
  <div class="col-md-4">
    <button id="btn_enviar" name="btn_enviar" class="btn btn-default">Enviar</button>
  </div>
</div>

</fieldset>
</form>

    Также на http://bootsnipp.com/ вы можете найти различные примеры на основе Bootstrap. Наконец, вот несколько хороших руководств, объясняющих шаг за шагом:

    Хотя на английском -> с переводчиком делаешь или учишь язык на:

    Я надеюсь, что вы найдете это полезным: D

    • 3

  3. bootstrap основан на расположении столбцов: по следующему адресу вы можете найти информацию для начала работы http://getbootstrap.com/getting-started/

    Короче говоря, у вас есть 12 столбцов для распространения содержимого страниц. Таким образом, будет много способов воспроизвести форму, которую вы разделяете. Например, одна из форм может быть следующей:

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="Styles/bootstrap.min.css">     
</head>
<body>
    <div class="col-xs-3">
            <p>Primer Nombre</p>                
            <p>Primer Apellido</p>
            <p>Ciudad</p>
    </div>      
    <div class="col-xs-3">
            <input type="text"></input>             
            <input type="text"></input>
            <div>
                <input style="display:inline; width:60px" type="text" ></input>
                <input style="display:inline; width:60px" type="text" ></input>
            </div>
    </div>      
    <div class="col-xs-3">
            <p>Primer Nombre</p>                
            <p>Primer Apellido</p>
    </div>      
    <div class="col-xs-3">
            <input type="text"></input>             
            <input type="text"></input>
    </div>  
</body>

    Обратите внимание, что общее количество столбцов с классом col-xs-3 составляет 12 столбцов, где число 3 указывает количество столбцов. Так как col-xs-3 равно 4, то здесь добавляется всего 12 столбцов.

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

    Привет.

    • 2